Mercurial > hg > nodescore

annotate www/martin/index.html @ 95:cb1862bbcd5a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
added functionality for audio score units
author Rob Canning <rob@foo.net>
date Fri, 01 Aug 2014 13:29:37 +0100
parents a633d8c04929
children 1e32f0a70594
rev   line source
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@83 146 <div id="chat" title="type here to chat with others connected to network" >
rob@83 147 <div id="nickname" title="type your login name and press enter" >
rob@83 148 <form id="set-nickname" class="wrap">
rob@83 149 <p>LOGIN:</p>
rob@83 150 <input id="nick">
rob@83 151 <p id="nickname-err">Nickname already in use</p>
rob@83 152 </form>
rob@83 153 </div>
rob@83 154 <div id="connecting">
rob@83 155 <div class="wrap">Connecting to socket.io server</div>
rob@83 156 </div>
rob@83 157 <div id="messages">
rob@83 158 <div id="nicknames"></div>
rob@90 159 <div id="lines"></div>
rob@83 160 </div>
rob@90 161 <form id="send-message">
rob@90 162 <input id="message">
rob@90 163 <button>Send</button>
rob@90 164 </form>
rob@90 165 </div>
rob@90 166 </div>
rob@90 167 <div id="current">
rob@90 168 <script type="text/javascript">
rob@90 169 function setPart(sel) {
rob@90 170 //var testSound = new buzz.sound( 'audio/testfile', { formats: [ 'ogg', 'mp3' ] } );
rob@90 171 //testSound.play();
rob@83 172
rob@90 173 var value = sel.options[sel.selectedIndex].value;
rob@93 174 document.getElementById('group').value=value;
rob@93 175 changeSoloVoice(group.value);
rob@93 176 $('div#current').text('GROUP ' +value).text='value';
rob@90 177 }
rob@83 178 </script>
rob@90 179 </div>
rob@90 180 </div>
rob@90 181 </div>
rob@90 182 </div>
rob@79 183
rob@90 184 <div class="head">
rob@90 185 <div id="datetime"></div>
rob@90 186 <div class="metrocase" id="metro">
rob@90 187 <div id="metronome0"></div>
rob@79 188 </div>
rc@74 189
rob@90 190 <div id="indexpagetitle">
rob@90 191 pathways - for guitars, percussion & electronics
rob@90 192 </div>
rob@79 193
rob@79 194
rob@90 195 <div id="transport" >
rob@90 196 <input class="transpbtn" style="background:green;" type="button" value="start" onclick="startSeq();" />
rob@90 197 <input class="transpbtn" style="background:red;" type="button" value="stop" onclick="stopSeq();" />
rob@90 198 <input class="transpbtn" style="background:orange;" type="button" value="reset" onclick="resetSeq();" />
rob@93 199 <input class="transpbtn" style="background:red;" type="button" value="reboot" onclick="breakSeq();" />
rob@94 200
rob@94 201 <input class="transpbtn" style="background:yellow;" type="button" value="60" onclick="setSpeed(60);" />
rob@94 202 <input class="transpbtn" style="background:yellow;" type="button" value="360" onclick="setSpeed(360);" />
rob@90 203 </div>
rob@79 204
rob@80 205
rob@79 206 <div id="client_latency">Latency: 0ms</div>
rob@79 207 <div id="client_chronometer" >00:00:00.0</div>
rob@79 208 </div>
rob@79 209
rob@79 210 <div class="footx">
rob@79 211 <div id="transect">.. </div>
rc@74 212
rob@90 213
rob@90 214
rob@90 215
rob@90 216
rob@90 217
rob@90 218
rob@90 219 <div id="views" >
rob@93 220 <div class="formrow"><form action="#preview-overview"><input class="btn" type="submit" value="OverView"></form></div>
rob@93 221 <div class="formrow"><form action="#preview-multi"><input class="btn" type="submit" value="QuartetView"></form></div>
rob@90 222 <div class="formrow"><form action="#soloscore"><input class="btn" type="submit" value="SoloView"></form></div>
rc@74 223 </div>
rob@90 224
rob@90 225
rob@79 226 <div>
rob@79 227 <select id="setPart" onchange="setPart(this)">
rob@79 228 <option value="1">Stream 01</option>
rob@79 229 <option value="2">Stream 02</option>
rob@79 230 <option value="3">Stream 03</option>
rob@79 231 <option value="4">Stream 04</option>
rob@79 232 </select>
rob@90 233 </div>
rob@90 234
rc@74 235
rc@74 236
rob@79 237
rob@79 238
rob@79 239
rc@74 240
rc@74 241
rc@74 242
rc@74 243
rob@79 244
rob@79 245
rob@79 246 </div>
rob@79 247
rc@74 248 </body>
rc@74 249 </html>