rc-web@66
|
1 <!DOCTYPE html>
|
rc-web@66
|
2 <html>
|
rc-web@66
|
3 <head>
|
rc-web@66
|
4 <meta charset="UTF-8">
|
rc-web@70
|
5 <title>controlx@nodescore</title>
|
rc-web@66
|
6 <script src="/socket.io/socket.io.js"></script>
|
rc-web@66
|
7 <link rel="shortcut icon" href="/kiben_favicon.ico" type="image/x-icon" />
|
rc-web@66
|
8 <link href="css/nodescore.css" rel="stylesheet">
|
rc-web@66
|
9 <link href="css/svg-stylesheet.css" rel="stylesheet">
|
rc-web@66
|
10 <link href="css/chat-tablet.css" rel="stylesheet">
|
rc-web@66
|
11 <link href="css/menu.css" rel="stylesheet">
|
rc-web@66
|
12 <script src="js/jquery-1.7.1.min.js"></script>
|
rc-web@66
|
13 <script src="js/controlseq.js"></script>
|
rc-web@66
|
14 <script src="js/scoreB.js"></script>
|
rc-web@66
|
15 <script src="js/nodescore-slides.js"></script>
|
rc-web@66
|
16 </head>
|
rc-web@66
|
17
|
rc-web@70
|
18 <body onload="initPage()">
|
rc-web@66
|
19
|
rc-web@66
|
20 <input type="hidden" id="group" value='1'/>
|
rc-web@66
|
21
|
rc-web@66
|
22 <div class="outermaster2" id="outermaster2">
|
rc-web@66
|
23 <div id="map">
|
rc-web@66
|
24 <script type="text/javascript">// <![CDATA[
|
rc-web@66
|
25
|
rc-web@66
|
26 var outer = document.getElementById("map");
|
rc-web@66
|
27 for (var i = 0; i < 64; i++) {
|
rc-web@66
|
28
|
rc-web@66
|
29 var middle = document.createElement("div");
|
rc-web@66
|
30 middle.setAttributeNS(null, "class", "middle");
|
rc-web@66
|
31
|
rc-web@66
|
32 var img = document.createElement("img");
|
rc-web@66
|
33 img.src = "svg/"+i+".svg";
|
rc-web@66
|
34 var row=Math.floor(i/8);
|
rc-web@66
|
35 img.setAttribute('width', 110);
|
rc-web@66
|
36 var magicPar= document.createElement("p");
|
rc-web@66
|
37
|
rc-web@66
|
38 var magicindex = document.createTextNode(srcsqr[row][i%8]);
|
rc-web@66
|
39 magicPar.appendChild(magicindex)
|
rc-web@66
|
40 middle.appendChild(magicPar);
|
rc-web@66
|
41 var texty = document.createTextNode(i);
|
rc-web@66
|
42 var textx = document.createElement("p");
|
rc-web@66
|
43 textx.setAttributeNS(null, "class", "indexnum");
|
rc-web@66
|
44 textx.appendChild(texty)
|
rc-web@66
|
45 middle.appendChild(img);
|
rc-web@66
|
46 middle.appendChild(textx);
|
rc-web@66
|
47
|
rc-web@66
|
48 middle.id = "middle-" + i;
|
rc-web@66
|
49
|
rc-web@66
|
50 for (var j = 0; j < 4; j++) {
|
rc-web@66
|
51 var inner = document.createElement("p");
|
rc-web@66
|
52 inner.setAttributeNS(null, "class", "inner-" + j);
|
rc-web@66
|
53 inner.id = "inner-" + i + "-" + j;
|
rc-web@66
|
54 var text = document.createTextNode("");
|
rc-web@66
|
55 inner.appendChild(text);
|
rc-web@66
|
56 middle.appendChild(inner);
|
rc-web@66
|
57 }
|
rc-web@66
|
58 outer.appendChild(middle);
|
rc-web@66
|
59
|
rc-web@66
|
60
|
rc-web@66
|
61 }
|
rc-web@66
|
62 // ]]></script>
|
rc-web@66
|
63 </div>
|
rc-web@66
|
64
|
rc-web@66
|
65
|
rc-web@66
|
66 <div id="outerpreview" >
|
rc-web@66
|
67 <div class="pview" id="preview-1" >
|
rc-web@66
|
68 <div class="musicianprog" style="background:black; border: 1px solid yellow;" >
|
rc-web@66
|
69 <div id="counttitle1" style="display:inline;"></div>
|
rc-web@66
|
70 <div id="count1" style="color:white; font-size:2em;"></div>
|
rc-web@66
|
71 </div>
|
rc-web@66
|
72 <div class="unitseq" id="unitseq0"></div>
|
rc-web@66
|
73 <div class="pviewmusic" id="previewbox-1"> </div>
|
rc-web@66
|
74 </div>
|
rc-web@66
|
75
|
rc-web@66
|
76 <div class="pview" id="preview-2">
|
rc-web@66
|
77 <div class="musicianprog" style="background:black; border: 1px solid green; ">
|
rc-web@66
|
78 <div id="counttitle2" style="display:inline;"></div>
|
rc-web@66
|
79 <div id="count2" style="color:white; font-size:2em;"></div>
|
rc-web@66
|
80 </div>
|
rc-web@66
|
81
|
rc-web@66
|
82 <div class="unitseq" id="unitseq1"></div>
|
rc-web@66
|
83
|
rc-web@66
|
84 <div class="pviewmusic" id="previewbox-2"> </div>
|
rc-web@66
|
85 </div>
|
rc-web@66
|
86
|
rc-web@66
|
87 <div class="pview" id="preview-3" >
|
rc-web@66
|
88 <div class="musicianprog" style="background:black; border: 1px solid aqua; ">
|
rc-web@66
|
89 <div id="counttitle3" style="display:inline;"></div>
|
rc-web@66
|
90 <div id="count3" style="color:white; font-size:2em;"></div>
|
rc-web@66
|
91 </div>
|
rc-web@66
|
92 <div class="unitseq" id="unitseq2"></div>
|
rc-web@66
|
93 <div class="pviewmusic" id="previewbox-3"> </div>
|
rc-web@66
|
94 </div>
|
rc-web@66
|
95
|
rc-web@66
|
96 <div class="pview" id="preview-4">
|
rc-web@66
|
97 <div class="musicianprog" style="background:black; border: 1px solid red; ">
|
rc-web@66
|
98 <div id="counttitle4" style="display:inline;"></div>
|
rc-web@66
|
99 <div id="count4" style="color:white; font-size:2em;"></div>
|
rc-web@66
|
100 </div>
|
rc-web@66
|
101 <div class="unitseq" id="unitseq3"></div>
|
rc-web@66
|
102 <div class="pviewmusic" id="previewbox-4"> </div>
|
rc-web@66
|
103 </div>
|
rc-web@66
|
104
|
rc-web@66
|
105 </div>
|
rc-web@66
|
106
|
rc-web@66
|
107
|
rc-web@66
|
108
|
rc-web@66
|
109
|
rc-web@66
|
110
|
rc-web@66
|
111
|
rc-web@66
|
112
|
rc-web@66
|
113 <div class="outermaster">
|
rc-web@66
|
114
|
rc-web@66
|
115 <div id="live"> </div>
|
rc-web@66
|
116
|
rc-web@66
|
117 <div id="info">
|
rc-web@66
|
118 <div id="comms">
|
rc-web@66
|
119 <div id="chat" title="type here to chat with others connected to network" >
|
rc-web@66
|
120 <div id="nickname" title="type your login name and press enter" >
|
rc-web@66
|
121 <form id="set-nickname" class="wrap">
|
rc-web@66
|
122 <p>LOGIN:</p>
|
rc-web@66
|
123 <input id="nick">
|
rc-web@66
|
124 <p id="nickname-err">Nickname already in use</p>
|
rc-web@66
|
125 </form>
|
rc-web@66
|
126 </div>
|
rc-web@66
|
127 <div id="connecting">
|
rc-web@66
|
128 <div class="wrap">Connecting to socket.io server</div>
|
rc-web@66
|
129 </div>
|
rc-web@66
|
130 <div id="messages">
|
rc-web@66
|
131 <div id="nicknames"></div>
|
rc-web@66
|
132 <div id="lines"></div>
|
rc-web@66
|
133 </div>
|
rc-web@66
|
134 <form id="send-message">
|
rc-web@66
|
135 <input id="message">
|
rc-web@66
|
136 <button>Send</button>
|
rc-web@66
|
137 </form>
|
rc-web@66
|
138 </div>
|
rc-web@66
|
139 </div>
|
rc-web@66
|
140
|
rc-web@66
|
141 <div id="midfoot">
|
rc-web@66
|
142
|
rc-web@66
|
143 <div id="midcomms">
|
rc-web@66
|
144 <div id="counttitle" style="display:inline;"></div>
|
rc-web@66
|
145 <div id="count" style="color:white"></div>
|
rc-web@66
|
146 <div class="unitseq" id="unitseq1" style="float:right; width:50px; position:relative; top:-10px; left:40px"></div>
|
rc-web@66
|
147 </div>
|
rc-web@66
|
148
|
rc-web@66
|
149 <div id="remainingtime">
|
rc-web@66
|
150 next in:
|
rc-web@66
|
151 <div id="totalcountdown">.</div>
|
rc-web@66
|
152 </div>
|
rc-web@66
|
153
|
rc-web@66
|
154
|
rc-web@66
|
155 <div id="timeinfo">
|
rc-web@66
|
156 <div id="datetime"></div>
|
rc-web@66
|
157
|
rc-web@66
|
158 <div id="client_latency">Latency: 0ms</div>
|
rc-web@66
|
159 </div>
|
rc-web@66
|
160
|
rc-web@66
|
161
|
rc-web@66
|
162 <div id="current">
|
rc-web@66
|
163 <script type="text/javascript">
|
rc-web@66
|
164 function setPart(sel) {
|
rc-web@66
|
165 //var testSound = new buzz.sound( 'audio/testfile', { formats: [ 'ogg', 'mp3' ] } );
|
rc-web@66
|
166 //testSound.play();
|
rc-web@66
|
167
|
rc-web@66
|
168 var value = sel.options[sel.selectedIndex].value;
|
rc-web@66
|
169 document.getElementById('group').value=value;
|
rc-web@66
|
170 //$('div#current').text('GROUP ' +value).text='value';
|
rc-web@66
|
171 }
|
rc-web@66
|
172 </script>
|
rc-web@66
|
173
|
rc-web@66
|
174 <div>
|
rc-web@66
|
175 <select id="setPart" onchange="setPart(this)">
|
rc-web@66
|
176 <option value="1">Stream 01</option>
|
rc-web@66
|
177 <option value="2">Stream 02</option>
|
rc-web@66
|
178 <option value="3">Stream 03</option>
|
rc-web@66
|
179 <option value="4">Stream 04</option>
|
rc-web@66
|
180 </select>
|
rc-web@66
|
181 </div>
|
rc-web@66
|
182 </div>
|
rc-web@66
|
183
|
rc-web@66
|
184 </div>
|
rc-web@66
|
185
|
rc-web@66
|
186
|
rc-web@66
|
187 <div id="preview"></div>
|
rc-web@66
|
188
|
rc-web@66
|
189 </div>
|
rc-web@66
|
190
|
rc-web@66
|
191
|
rc-web@66
|
192 </div>
|
rc-web@66
|
193
|
rc-web@66
|
194
|
rc-web@66
|
195
|
rc-web@66
|
196
|
rc-web@66
|
197 </div>
|
rc-web@66
|
198
|
rc-web@66
|
199
|
rc-web@66
|
200
|
rc-web@66
|
201
|
rc-web@66
|
202 <div style=" position:fixed; left:100px; bottom: 50px; font-size:3em; color:red; " id="indexpagetitle">
|
rc-web@66
|
203 <h1>Lines of Desire</h1>
|
rc-web@66
|
204 <h2>for four violins</h2>
|
rc-web@66
|
205 </div>
|
rc-web@66
|
206
|
rc-web@66
|
207 <div style=" position:fixed; left:700px; bottom:100px; font-size:3em; color:red; " id="transect">.. </div>
|
rc-web@66
|
208 <div id="client_chronometer" style="z-index: 2; position:fixed; left:700px; bottom:50px; font-size:5em; color:red; ">00:00:00.0</div>
|
rc-web@66
|
209
|
rc-web@66
|
210 <div class="metrocase" id="metro" style=" position:fixed; left:550px; bottom:80px;" >
|
rc-web@66
|
211 <div id="metronome0"></div>
|
rc-web@66
|
212 </div>
|
rc-web@66
|
213
|
rc-web@66
|
214
|
rc-web@66
|
215
|
rc-web@66
|
216
|
rc-web@66
|
217 </body>
|
rc-web@66
|
218 </html>
|