comparison www/martin/dump/ctrl.html @ 74:b7f9ade92165

added template for guitar version
author Rob Canning <rc@kiben.net>
date Sun, 29 Jun 2014 16:53:50 +0000
parents
children
comparison
equal deleted inserted replaced
73:0c3a2942ddee 74:b7f9ade92165
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>controls@nodescore</title>
6 <link rel="shortcut icon" href="/kiben_favicon.ico" type="image/x-icon" />
7
8 <link href="css/nodescore.css" rel="stylesheet">
9 <link href="css/chat.css" rel="stylesheet">
10 <link href="css/menu.css" rel="stylesheet">
11
12 <script src="js/jquery-1.7.1.min.js"></script>
13 <script src="/socket.io/socket.io.js"></script>
14 <script src="js/nodescore-client.js"></script>
15 <script src="js/controlseq.js"></script>
16
17 </head>
18
19 <body onload="">
20 <input type="hidden" id="group" value='1'>
21 <div class="outermaster">
22 <div class="outersquare">
23 <h1 style=" background:transparent; left:24px; top:14px;">control interface:</h1>
24 <div>
25 <p class="magicsquare" id="1magicsquare0"></p>
26 <p class="magicsquare" id="1magicsquare1"></p>
27 <p class="magicsquare" id="1magicsquare2"></p>
28 <p class="magicsquare" id="1magicsquare3"></p>
29 <p class="magicsquare" id="1magicsquare4"></p>
30 <p class="magicsquare" id="1magicsquare5"></p>
31 </div>
32 <br><br><br><br>
33 <div>
34 <p class="magicsquare" id="2magicsquare0"></p>
35 <p class="magicsquare" id="2magicsquare1"></p>
36 <p class="magicsquare" id="2magicsquare2"></p>
37 <p class="magicsquare" id="2magicsquare3"></p>
38 <p class="magicsquare" id="2magicsquare4"></p>
39 <p class="magicsquare" id="2magicsquare5"></p>
40 </div>
41 <br><br><br><br>
42 <div>
43 <p class="magicsquare" id="3magicsquare0"></p>
44 <p class="magicsquare" id="3magicsquare1"></p>
45 <p class="magicsquare" id="3magicsquare2"></p>
46 <p class="magicsquare" id="3magicsquare3"></p>
47 <p class="magicsquare" id="3magicsquare4"></p>
48 <p class="magicsquare" id="3magicsquare5"></p>
49 </div>
50 <br><br><br><br>
51 <div>
52 <p class="magicsquare" id="4magicsquare0"></p>
53 <p class="magicsquare" id="4magicsquare1"></p>
54 <p class="magicsquare" id="4magicsquare2"></p>
55 <p class="magicsquare" id="4magicsquare3"></p>
56 <p class="magicsquare" id="4magicsquare4"></p>
57 <p class="magicsquare" id="4magicsquare5"></p>
58 </div>
59
60 <br/><br/><br/><br/>
61
62 <input type="button" value="START" onclick="startSeq();" />
63 <input type="button" value="STOP" onclick="stopSeq();" />
64 <input type="button" value="RESET" onclick="resetSeq();" />
65 </div>
66
67
68 <div id="comms">
69 <div id="chat">
70 <div id="nickname">
71 <form id="set-nickname" class="wrap">
72 <p>Please type in your nickname and press enter.</p>
73 <input id="nick">
74 <p id="nickname-err">Nickname already in use</p>
75 </form>
76 </div>
77 <div id="connecting">
78 <div class="wrap">Connecting to socket.io server</div>
79 </div>
80 <div id="messages">
81 <div id="nicknames"></div>
82 <div id="lines"></div>
83 </div>
84 <form id="send-message">
85 <input id="message">
86 <button>Send</button>
87 </form>
88 </div>
89 </div>
90
91 <div id="midcomms"></div>
92 <div id="preview">
93 </div>
94
95 <div class="footdata">
96
97 <div class="metrocase" id="metro">
98 <div id="metronome0"></div>
99 <div id="metronome1"></div>
100 <div id="metronome2"></div>
101 <div id="metronome3"></div>
102 </div>
103
104 <div id="current">CTRL</div>
105 <div id="client_latency">Latency: 0ms</div>
106 <div id="datetime"></div>
107 <div id="client_chronometer" style="z-index: 2;">00:00:00.0</div>
108
109 </div>
110
111 </div>
112
113 </div>
114
115
116
117
118
119 </body>
120 </html>