Mercurial > hg > nodescore

annotate www/oi/index.html @ 101:52e44ee1c791 tip master

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