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