Mercurial > hg > nodescore

comparison www/oi/index.html~ @ 100:d802954248a7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new svgs for oi version
author Rob Canning <rob@foo.net>
date Wed, 10 Dec 2014 12:17:19 +0000
parents
children
comparison
equal deleted inserted replaced
99:9641c2572988 100:d802954248a7
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>iface@nodescore</title>
6 <script src="/socket.io/socket.io.js"></script>
7 <link rel="shortcut icon" href="/kiben_favicon.ico" type="image/x-icon" />
8 <link href="css/nodescore.css" rel="stylesheet">
9 <link href="css/svg-stylesheet.css" rel="stylesheet">
10 <link href="css/chat-tablet.css" rel="stylesheet">
11 <link href="css/menu.css" rel="stylesheet">
12 <script src="js/jquery-1.7.1.min.js"></script>
13 <script src="js/controlseq.js"></script>
14 <script src="js/scoreB.js"></script>
15 <script src="js/nodescore-client.js"></script>
16 <script src="js/processing.js"></script>
17 </head>
18
19 <body onload="initPage()">
20
21 <input type="hidden" id="group" value='1'/>
22 <div class="outermaster2" id="outermaster2">
23 <div id="preview-overview">
24 <script type="text/javascript">// <![CDATA[
25
26 // this is the javascript that populates the 8x8 grid
27 // with svg images of the music notation
28
29 var outer = document.getElementById("preview-overview");
30 for (var i = 0; i < 64; i++) {
31
32 var middle = document.createElement("div");
33 middle.setAttributeNS(null, "class", "middle");
34
35 var img = document.createElement("img");
36 img.src = "svg/"+i+".svg";
37 var row=Math.floor(i/8);
38 img.setAttribute('width', 110);
39 var magicPar= document.createElement("p");
40
41 var magicindex = document.createTextNode(srcsqr[row][i%8]);
42 magicPar.appendChild(magicindex)
43 middle.appendChild(magicPar);
44 var texty = document.createTextNode(i);
45 var textx = document.createElement("p");
46 textx.setAttributeNS(null, "class", "indexnum");
47 textx.appendChild(texty)
48 middle.appendChild(img);
49 middle.appendChild(textx);
50
51 middle.id = "middle-" + i;
52
53 for (var j = 0; j < 4; j++) {
54 var inner = document.createElement("p");
55 inner.setAttributeNS(null, "class", "inner-" + j);
56 inner.id = "inner-" + i + "-" + j;
57 var text = document.createTextNode("");
58 inner.appendChild(text);
59 middle.appendChild(inner);
60 }
61 outer.appendChild(middle);
62
63 }
64 // ]]></script>
65
66 </div>
67
68
69
70
71 <div id="preview-multi" >
72
73 <div class="pview" id="preview-1">
74 <div class="musicianprog" style=" border: 1px solid purple;" >
75 <div id="counttitle1"></div>
76 <div class="count" id="count1"></div>
77 </div>
78 <div class="timeleft" style=" border: 1px solid purple;" >
79 <div class="tleftgroup" id="timeleft1"></div>
80 </div>
81 <div class="unitseq" id="unitseq0"></div>
82 <div class="pviewmusic" id="previewbox-1"></div>
83 </div>
84
85 <div class="pview" id="preview-2">
86 <div class="musicianprog" style="border: 1px solid green; ">
87 <div id="counttitle2" style="display:inline;"></div>
88 <div class="count" id="count2"></div>
89 </div>
90 <div class="timeleft" style="border: 1px solid green;" >
91 <div class="tleftgroup" id="timeleft2"></div>
92 </div>
93 <div class="unitseq" id="unitseq1"></div>
94 <div class="pviewmusic" id="previewbox-2"> </div>
95 </div>
96
97 <div class="pview" id="preview-3" >
98 <div class="musicianprog" style="border: 1px solid aqua;">
99 <div id="counttitle3" style="display:inline;"></div>
100 <div class="count" id="count3"></div>
101 </div>
102 <div class="timeleft" style="border: 1px solid aqua;" >
103 <div class="tleftgroup" id="timeleft3" style="font-size:1em;"></div>
104 </div>
105 <div class="unitseq" id="unitseq2"></div>
106 <div class="pviewmusic" id="previewbox-3"> </div>
107 </div>
108
109 <div class="pview" id="preview-4">
110 <div class="musicianprog" style=" border: 1px solid red;">
111 <div id="counttitle4" style="display:inline;"></div>
112 <div class="count" id="count4"></div>
113 </div>
114 <div class="timeleft" style=" border: 1px solid red;" >
115 <div class="tleftgroup" id="timeleft4"></div>
116 </div>
117 <div class="unitseq" id="unitseq3"></div>
118 <div class="pviewmusic" id="previewbox-4"> </div>
119 </div>
120 </div>
121
122
123 <div class="soloscore" id="soloscore">
124 <div class="pviewsolo" id="preview-solo">
125 <div class="musicianprog" style=" border: 1px solid red;">
126 <div id="counttitle" ></div>
127 <div class="count" id="count"></div>
128 </div>
129 <div class="timeleft" style=" border: 1px solid red;" >
130 <div class="tleftgroup" id="totalcountdown"></div>
131 </div>
132 <div class="unitseq" id="unitseqsolo"></div>
133 <div class="pviewmusic" id="previewbox-solo"> </div>
134 </div>
135 <div class="solo-next">
136 <div id="previewbox-solo-next"> </div>
137 <div id="nexttitle">NEXT:</div>
138 </div>
139
140 <canvas data-processing-sources="hello-web.pde"></canvas>
141
142 </div>
143
144 <div id="info">
145 <div id="comms">
146
147 <div id="chat" title="type here to chat with others connected to network" >
148
149 <div id="nickname" title="type your login name and press enter" >
150 <form id="set-nickname" class="wrap">
151 <p>Login to Nodescore Server:</p>
152 <input id="nick">
153 <p id="nickname-err">Nickname already in use</p>
154 </form>
155
156 <p>
157 Press F9 for Help <br/><br/>
158 or vist:<br/> <a href="http://nodescore.kiben.net">http://nodescore.kiben.net</a> <br/>for full instructions.
159
160 </p>
161
162 </div>
163 <div id="connecting">
164 <div class="wrap">Connecting to socket.io server</div>
165 </div>
166 <div id="messages">
167 Chat with Other Nodescorers Here: (hit zero to hide chat)
168 <div id="nicknames"></div>
169 <div id="lines"></div>
170 </div>
171 <form id="send-message">
172 <input id="message" value="chat here..">
173
174 </form>
175 </div>
176 </div>
177 <div id="current">
178 <script type="text/javascript">
179 function setPart(sel) {
180 //var testSound = new buzz.sound( 'audio/testfile', { formats: [ 'ogg', 'mp3' ] } );
181 //testSound.play();
182
183 var value = sel.options[sel.selectedIndex].value;
184 document.getElementById('group').value=value;
185 changeSoloVoice(group.value);
186 $('div#current').text('GROUP ' +value).text='value';
187 }
188 </script>
189 </div>
190 </div>
191 </div>
192 </div>
193
194 <div class="head">
195 <div id="datetime"></div>
196 <div class="metrocase" id="metro">
197 <div id="metronome0"></div>
198 </div>
199
200 <div id="indexpagetitle">
201 pathways - an open score for operation integratus
202 </div>
203
204
205 <div id="transport" >
206 <input class="transpbtn" style="background:green;" type="button" value="start" onclick="startSeq();" />
207 <input class="transpbtn" style="background:red;" type="button" value="stop" onclick="stopSeq();" />
208 <input class="transpbtn" style="background:orange;" type="button" value="reset" onclick="resetSeq();" />
209 <input class="transpbtn" style="background:red;" type="button" value="reboot" onclick="breakSeq();" />
210
211 <input class="transpbtn" style="background:yellow;" type="button" value="60" onclick="setSpeed(60);" />
212 <input class="transpbtn" style="background:yellow;" type="button" value="360" onclick="setSpeed(360);" />
213 </div>
214
215
216 <div id="client_latency">Latency: 0ms</div>
217 <div id="client_chronometer" >00:00:00.0</div>
218 </div>
219
220 <div class="footx">
221 <div id="transect">.. </div>
222
223
224
225
226
227
228
229 <div id="views" >
230 <div class="formrow"><form action="#preview-overview"><input class="btn" type="submit" value="OverView"></form></div>
231 <div class="formrow"><form action="#preview-multi"><input class="btn" type="submit" value="QuartetView"></form></div>
232 <div class="formrow"><form action="#soloscore"><input class="btn" type="submit" value="SoloView"></form></div>
233 </div>
234
235
236 <div>
237 <select id="setPart" onchange="setPart(this)">
238 <option value="1">Stream 01</option>
239 <option value="2">Stream 02</option>
240 <option value="3">Stream 03</option>
241 <option value="4">Stream 04</option>
242 </select>
243 </div>
244
245
246
247
248
249
250
251
252
253
254
255
256 </div>
257
258
259
260 </body>
261 </html>