-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (146 loc) · 9.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<head>
<title>AWML Example</title>
<meta charset="UTF-8">
<!-- Include the default toolkit style "Plain". Its main purpose
is to act as a slick development theme and as a base to build
custom styles on -->
<link id='style' rel=stylesheet href='toolkit/toolkit/styles/plain.css'>
<!-- Our (very basic) custom CSS. See the comments. -->
<link rel="stylesheet" href="styles.css">
<!-- A narrow font -->
<link rel="stylesheet" href="fonts/Pragati.css">
<!-- Prevent from zooming the interface on touch devices -->
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
<!-- Some more definitions and icons mainly for mobile devices -->
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" sizes="57x57" href="images/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png">
<link rel="manifest" href="manifest.json">
<meta name="msapplication-TileColor" content="ffffff">
<meta name="msapplication-TileImage" content="images/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="ffffff">
<!-- Include all JavaScript files from toolkit. For deployment one
should generate a minified toolkit version. See the make rules
inside the toolkit submodule. -->
<script src="toolkit/toolkit/polyfill/raf.js"></script>
<script src="toolkit/toolkit/G.js"></script>
<script src="toolkit/toolkit/toolkit.js"></script>
<script src="toolkit/toolkit/implements/base.js"></script>
<script src="toolkit/toolkit/implements/audiomath.js"></script>
<script src="toolkit/toolkit/implements/anchor.js"></script>
<script src="toolkit/toolkit/implements/ranges.js"></script>
<script src="toolkit/toolkit/implements/globalcursor.js"></script>
<script src="toolkit/toolkit/implements/ranged.js"></script>
<script src="toolkit/toolkit/implements/warning.js"></script>
<script src="toolkit/toolkit/implements/gradient.js"></script>
<script src="toolkit/toolkit/implements/notes.js"></script>
<script src="toolkit/toolkit/widgets/colors.js"></script>
<script src="toolkit/toolkit/widgets/widget.js"></script>
<script src="toolkit/toolkit/widgets/icon.js"></script>
<script src="toolkit/toolkit/widgets/label.js"></script>
<script src="toolkit/toolkit/widgets/tooltips.js"></script>
<script src="toolkit/toolkit/modules/dragcapture.js"></script>
<script src="toolkit/toolkit/modules/grid.js"></script>
<script src="toolkit/toolkit/modules/range.js"></script>
<script src="toolkit/toolkit/modules/scale.js"></script>
<script src="toolkit/toolkit/modules/scrollvalue.js"></script>
<script src="toolkit/toolkit/modules/graph.js"></script>
<script src="toolkit/toolkit/modules/circular.js"></script>
<script src="toolkit/toolkit/modules/filter.js"></script>
<script src="toolkit/toolkit/modules/resize.js"></script>
<script src="toolkit/toolkit/modules/responsehandle.js"></script>
<script src="toolkit/toolkit/modules/eqband.js"></script>
<script src="toolkit/toolkit/modules/dragvalue.js"></script>
<script src="toolkit/toolkit/modules/drag.js"></script>
<script src="toolkit/toolkit/widgets/container.js"></script>
<script src="toolkit/toolkit/widgets/root.js"></script>
<script src="toolkit/toolkit/widgets/button.js"></script>
<script src="toolkit/toolkit/widgets/value.js"></script>
<script src="toolkit/toolkit/widgets/valuebutton.js"></script>
<script src="toolkit/toolkit/widgets/buttonarray.js"></script>
<script src="toolkit/toolkit/widgets/clock.js"></script>
<script src="toolkit/toolkit/widgets/state.js"></script>
<script src="toolkit/toolkit/widgets/pager.js"></script>
<script src="toolkit/toolkit/widgets/expander.js"></script>
<script src="toolkit/toolkit/widgets/meterbase.js"></script>
<script src="toolkit/toolkit/widgets/levelmeter.js"></script>
<script src="toolkit/toolkit/widgets/chart.js"></script>
<script src="toolkit/toolkit/widgets/dynamics.js"></script>
<script src="toolkit/toolkit/widgets/gauge.js"></script>
<script src="toolkit/toolkit/widgets/frequencyresponse.js"></script>
<script src="toolkit/toolkit/widgets/responsehandler.js"></script>
<script src="toolkit/toolkit/widgets/equalizer.js"></script>
<script src="toolkit/toolkit/widgets/fader.js"></script>
<script src="toolkit/toolkit/widgets/knob.js"></script>
<script src="toolkit/toolkit/widgets/valueknob.js"></script>
<script src="toolkit/toolkit/widgets/select.js"></script>
<script src="toolkit/toolkit/widgets/window.js"></script>
<script src="toolkit/toolkit/widgets/toggle.js"></script>
<script src="toolkit/toolkit/widgets/multimeter.js"></script>
<!-- Include all relevant AWML scripts -->
<script src="AWML/awml.js"></script>
<script src="AWML/awml.bindings.js"></script>
<script src="AWML/awml.backends.js"></script>
<script src="AWML/awml.electron.js"></script>
<script src="AWML/awml.styles.js"></script>
<script src="AWML/awml.templates.js"></script>
<!-- let's start with a very simple demo backend. The "local" backend
isn't connected to any server or local storage but acts locally
inside the current browser tab. This can be used to connect
local parameters in a UI to e.g. let a toggle button toggle the
visible state of another widget without writing the state to a
remote backend.
We set some default values in an external JSON file. The content of
the external file could be located inside this node directly, too.
The delay is added for testing purposes. Faders and level meters are
connected via this backend by binding both widgets value option to
the same parameter. Level meters now have a 300ms latency when
manipulating the corresponding fader.
See README in AWML submodule for more information on backends. -->
<awml-backend name=local type=local src="local.json" delay=300></awml-backend>
</head>
<body>
<!-- The toolkit root element. It takes care of handing window
resize and visibility events over to all its child nodes.
The prefix is placed in front of all src attributes of its children,
so an <awml-option type=bind src=foobar> in fact becomes
an <awml-option type=bind src="remote:foobar"> in this particular case.
Please see the README in the AWML submodule for more information
on prefixing. -->
<awml-root id=root prefix="local:" trigger-resize>
<!-- The container for centering the strips on screen if the
window size exceeeds useful boundaries. -->
<awml-container class="panel">
<!-- We manually clone eight strips into this container.
This can even be done programatically based on some parameter
coming from the backend. See README inside AWML submodule
for more information about cloning.
The prefixes again add to the src attributes of all children
so an <awml-option type=bind src=foobar> in fact becomes
an <awml-option type=bind src="remote:strips/1/foobar"> in this
particular case.
To play around try changing "strips/2/" to "strips/1/" in the
second <awml-clone> and see how the first two strips are
now working in parallel (with the 300ms delay). -->
<awml-clone fetch template="strip.html" class="strip" prefix="strips/1/"></awml-clone>
<awml-clone fetch template="strip.html" class="strip" prefix="strips/2/"></awml-clone>
<awml-clone fetch template="strip.html" class="strip" prefix="strips/3/"></awml-clone>
<awml-clone fetch template="strip.html" class="strip" prefix="strips/4/"></awml-clone>
<awml-clone fetch template="strip.html" class="strip" prefix="strips/5/"></awml-clone>
<awml-clone fetch template="strip.html" class="strip" prefix="strips/6/"></awml-clone>
<awml-clone fetch template="strip.html" class="strip" prefix="strips/7/"></awml-clone>
<awml-clone fetch template="strip.html" class="strip" prefix="strips/8/"></awml-clone>
</awml-container>
</awml-root>
</body>