Mercurial > hg > nodescore

annotate www/martin/index.html @ 81:ac6c303fbddc

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
changes to UI for martin version
author Rob Canning <rob@foo.net>
date Sun, 20 Jul 2014 14:26:06 +0100
parents df5128a86598
children 74367de56cbf
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>
rc@75 15 <script src="js/nodescore-slides.js"></script>
rc@74 16 </head>
rc@74 17
rc@74 18 <body onload="initPage()">
rc@74 19
rc@74 20 <input type="hidden" id="group" value='1'/>
rc@74 21
rc@74 22 <div class="outermaster2" id="outermaster2">
rc@74 23 <div id="map">
rc@74 24 <script type="text/javascript">// <![CDATA[
rc@74 25
rc@74 26 var outer = document.getElementById("map");
rc@74 27 for (var i = 0; i < 64; i++) {
rc@74 28
rc@74 29 var middle = document.createElement("div");
rc@74 30 middle.setAttributeNS(null, "class", "middle");
rc@74 31
rc@74 32 var img = document.createElement("img");
rc@74 33 img.src = "svg/"+i+".svg";
rc@74 34 var row=Math.floor(i/8);
rc@74 35 img.setAttribute('width', 110);
rc@74 36 var magicPar= document.createElement("p");
rc@74 37
rc@74 38 var magicindex = document.createTextNode(srcsqr[row][i%8]);
rc@74 39 magicPar.appendChild(magicindex)
rc@74 40 middle.appendChild(magicPar);
rc@74 41 var texty = document.createTextNode(i);
rc@74 42 var textx = document.createElement("p");
rc@74 43 textx.setAttributeNS(null, "class", "indexnum");
rc@74 44 textx.appendChild(texty)
rc@74 45 middle.appendChild(img);
rc@74 46 middle.appendChild(textx);
rc@74 47
rc@74 48 middle.id = "middle-" + i;
rc@74 49
rc@74 50 for (var j = 0; j < 4; j++) {
rc@74 51 var inner = document.createElement("p");
rc@74 52 inner.setAttributeNS(null, "class", "inner-" + j);
rc@74 53 inner.id = "inner-" + i + "-" + j;
rc@74 54 var text = document.createTextNode("");
rc@74 55 inner.appendChild(text);
rc@74 56 middle.appendChild(inner);
rc@74 57 }
rc@74 58 outer.appendChild(middle);
rc@74 59
rc@74 60
rc@74 61 }
rc@74 62 // ]]></script>
rc@74 63 </div>
rc@74 64
rob@80 65
rob@80 66
rob@80 67
rob@80 68
rc@74 69
rc@74 70 <div id="outerpreview" >
rc@74 71 <div class="pview" id="preview-1" >
rob@81 72 <div class="musicianprog" style=" border: 1px solid purple;" >
rc@74 73 <div id="counttitle1" style="display:inline;"></div>
rob@81 74 <div id="count1" style=" font-size:1em;"></div>
rc@74 75 </div>
rc@74 76 <div class="unitseq" id="unitseq0"></div>
rc@74 77 <div class="pviewmusic" id="previewbox-1"> </div>
rc@74 78 </div>
rc@74 79
rc@74 80 <div class="pview" id="preview-2">
rob@79 81 <div class="musicianprog" style="border: 1px solid green; ">
rc@74 82 <div id="counttitle2" style="display:inline;"></div>
rob@81 83 <div id="count2" style=" font-size:1em;"></div>
rc@74 84 </div>
rc@74 85
rob@79 86
rc@74 87
rc@74 88 <div class="pviewmusic" id="previewbox-2"> </div>
rc@74 89 </div>
rc@74 90
rc@74 91 <div class="pview" id="preview-3" >
rob@79 92 <div class="musicianprog" style="border: 1px solid aqua; ">
rc@74 93 <div id="counttitle3" style="display:inline;"></div>
rob@81 94 <div id="count3" style=" font-size:1em;"></div>
rc@74 95 </div>
rc@74 96 <div class="unitseq" id="unitseq2"></div>
rc@74 97 <div class="pviewmusic" id="previewbox-3"> </div>
rc@74 98 </div>
rc@74 99
rc@74 100 <div class="pview" id="preview-4">
rc@75 101 <div class="musicianprog" style=" border: 1px solid red; ">
rc@74 102 <div id="counttitle4" style="display:inline;"></div>
rob@81 103 <div id="count4" style=" font-size:1em;"></div>
rc@74 104 </div>
rc@74 105 <div class="unitseq" id="unitseq3"></div>
rc@74 106 <div class="pviewmusic" id="previewbox-4"> </div>
rc@74 107 </div>
rc@74 108
rc@74 109 </div>
rc@74 110
rc@74 111
rc@74 112
rc@74 113
rc@74 114
rc@74 115
rc@74 116
rc@74 117 <div class="outermaster">
rc@74 118
rob@79 119 <div id="live">
rob@79 120 <div class="svgmusic"></div>
rob@79 121 </div>
rc@74 122
rc@74 123 <div id="info">
rob@79 124 <div id="comms">
rob@79 125 <div id="chat" title="type here to chat with others connected to network" >
rob@79 126 <div id="nickname" title="type your login name and press enter" >
rob@79 127 <form id="set-nickname" class="wrap">
rob@79 128 <p>LOGIN:</p>
rc@74 129 <input id="nick">
rob@79 130 <p id="nickname-err">Nickname already in use</p>
rob@79 131 </form>
rob@79 132 </div>
rob@79 133 <div id="connecting">
rob@79 134 <div class="wrap">Connecting to socket.io server</div>
rob@79 135 </div>
rob@79 136 <div id="messages">
rob@79 137 <div id="nicknames"></div>
rob@79 138 <div id="lines"></div>
rob@79 139 </div>
rob@79 140 <form id="send-message">
rob@79 141 <input id="message">
rob@79 142 <button>Send</button>
rc@74 143 </form>
rc@74 144 </div>
rob@79 145 </div>
rob@79 146
rob@79 147 <div id="midfoot">
rob@79 148 <div id="midcomms">
rob@79 149 <div id="counttitle">waiting...</div>
rob@79 150 <div id="count"></div>
rob@79 151 <div class="unitseq" id="unitseq1"></div>
rc@74 152 </div>
rob@79 153
rob@79 154 <div id="remainingtime">
rob@79 155 next in:
rob@79 156 <div id="totalcountdown">.</div>
rc@74 157 </div>
rob@79 158
rob@79 159
rob@79 160
rob@79 161 <div id="current">
rob@79 162 <script type="text/javascript">
rob@79 163 function setPart(sel) {
rob@79 164 //var testSound = new buzz.sound( 'audio/testfile', { formats: [ 'ogg', 'mp3' ] } );
rob@79 165 //testSound.play();
rob@79 166
rob@79 167 var value = sel.options[sel.selectedIndex].value;
rob@79 168 document.getElementById('group').value=value;
rob@79 169 //$('div#current').text('GROUP ' +value).text='value';
rob@79 170 }
rob@79 171 </script>
rob@79 172
rob@79 173
rob@79 174 </div>
rob@79 175
rc@74 176 </div>
rob@79 177
rob@79 178 <div id="preview"></div>
rob@79 179
rc@74 180 </div>
rob@79 181
rob@79 182
rob@79 183
rob@79 184
rob@79 185
rob@79 186 </div>
rc@74 187
rob@79 188
rc@74 189
rob@79 190
rob@79 191
rob@79 192
rob@79 193 <div class="head">
rob@79 194 <div id="datetime"></div>
rob@79 195 <div class="metrocase" id="metro">
rob@79 196 <div id="metronome0"></div>
rob@79 197 </div>
rob@80 198
rob@80 199 <div id="transport" >
rob@80 200 <input type="button" value="start" onclick="startSeq();" />
rob@80 201 <input type="button" value="stop" onclick="stopSeq();" />
rob@80 202 <input type="button" value="reset" onclick="resetSeq();" />
rob@80 203 </div>
rob@80 204
rob@79 205 <div id="client_latency">Latency: 0ms</div>
rob@79 206 <div id="client_chronometer" >00:00:00.0</div>
rob@79 207 </div>
rob@79 208
rob@79 209 <div class="footx">
rob@79 210 <div id="transect">.. </div>
rc@74 211
rob@79 212 <div id="indexpagetitle">
rob@79 213 pathways - for guitar, percussion & electronics
rc@74 214 </div>
rc@74 215
rob@79 216 <div>
rob@79 217 <select id="setPart" onchange="setPart(this)">
rob@79 218 <option value="1">Stream 01</option>
rob@79 219 <option value="2">Stream 02</option>
rob@79 220 <option value="3">Stream 03</option>
rob@79 221 <option value="4">Stream 04</option>
rob@79 222 </select>
rob@79 223 </div>
rc@74 224
rc@74 225
rob@79 226
rob@79 227
rob@79 228
rc@74 229
rc@74 230
rc@74 231
rc@74 232
rob@79 233
rob@79 234
rob@79 235 </div>
rob@79 236
rc@74 237 </body>
rc@74 238 </html>