view www/m/c.html @ 49:ddb09f0a67fd

begining of attempt at modularisation
author tzara <rc-web@kiben.net>
date Sat, 13 Oct 2012 00:17:52 +0000
parents 7f0485e0d0ff
children 474c1ad1e811
line wrap: on
line source
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">  
  <title>controls@nodescore</title>
  
  <link rel="shortcut icon" href="/kiben_favicon.ico" type="image/x-icon" />

  <link href="css/nodescore-tablet.css" rel="stylesheet">
  <link href="css/chat-tablet.css" rel="stylesheet">
  <link href="css/menu.css" rel="stylesheet">

  <script src="js/jquery-1.7.1.min.js"></script>  
  <script src="/socket.io/socket.io.js"></script>
  <script src="js/nodescore-slides.js"></script>
  <script src="js/controlseq.js"></script>
</head>

<body>

  <input type="hidden" id="group" value='1'> 
  <div class="outermaster">     

  <h1 style=" font-size:1.5em; background:transparent; left:24px; top:14px;">magick square sequencer:</h1>      
  <br>
      <div>
	<p class="magicsquare" id="1magicsquare0"></p>
	<p class="magicsquare" id="1magicsquare1"></p>
	<p class="magicsquare" id="1magicsquare2"></p>
	<p class="magicsquare" id="1magicsquare3"></p>
	<p class="magicsquare" id="1magicsquare4"></p>
	<p class="magicsquare" id="1magicsquare5"></p>
      </div>
      <br><br><br><br>
      <div>
	<p class="magicsquare" id="2magicsquare0"></p>
	<p class="magicsquare" id="2magicsquare1"></p>
	<p class="magicsquare" id="2magicsquare2"></p>
	<p class="magicsquare" id="2magicsquare3"></p>
	<p class="magicsquare" id="2magicsquare4"></p>
	<p class="magicsquare" id="2magicsquare5"></p>
      </div>
      <br><br><br><br>
      <div>
	<p class="magicsquare" id="3magicsquare0"></p>
	<p class="magicsquare" id="3magicsquare1"></p>
	<p class="magicsquare" id="3magicsquare2"></p>
	<p class="magicsquare" id="3magicsquare3"></p>
	<p class="magicsquare" id="3magicsquare4"></p>
	<p class="magicsquare" id="3magicsquare5"></p>
      </div>
      <br><br><br><br>
      <div>
	<p class="magicsquare" id="4magicsquare0"></p>
	<p class="magicsquare" id="4magicsquare1"></p>
	<p class="magicsquare" id="4magicsquare2"></p>
	<p class="magicsquare" id="4magicsquare3"></p>
	<p class="magicsquare" id="4magicsquare4"></p>
	<p class="magicsquare" id="4magicsquare5"></p>
      </div>
     
      <br/><br/><br/><br/>

      <input type="button" value="START" onclick="startSeq();" />
      <input type="button" value="STOP" onclick="stopSeq();" />
      <input type="button" value="RESET" onclick="resetSeq();" />    
  
    <div id="info">
    <div id="comms"> 
      <div id="chat" title="type here to chat with others connected to network" >
	<div id="nickname" title="type your login name and press enter" >
	  <form id="set-nickname" class="wrap">
	    <p>LOGIN:</p>
	    <input id="nick">
	    <p id="nickname-err">Nickname already in use</p>
	  </form>
	</div>
	<div id="connecting">
	  <div class="wrap">Connecting to socket.io server</div>
	</div>
	<div id="messages">
	  <div id="nicknames"></div>
	  <div id="lines"></div>
	</div>
	<form id="send-message">
	  <input id="message">
	  <button>Send</button>
	</form>
      </div>
    </div>    
  
    <div id="midfoot">

      <div id="midcomms">
	<div id="counttitle" style="display:inline;"></div>
	<div id="count" style="color:white"></div>
      </div>

      <div id="remainingtime">
	next in:
	<div id="totalcountdown">.</div>
      </div>

      <div class="metrocase" id="metro">
	<div id="metronome0"></div>
      </div>

      <div id="timeinfo">
		<div id="datetime"></div>
	<div id="client_chronometer"  style="z-index: 2;">00:00:00.0</div>      
	<div id="client_latency">Latency: 0ms</div>
      </div>

      <div id="current">
	<script type="text/javascript">
	  function setPart(sel) {
	  var value = sel.options[sel.selectedIndex].value;  
	  document.getElementById('group').value=value; 
	  //$('div#current').text('GROUP ' +value).text='value';
	  }
	</script>
	<div>
	  <select id="setPart" onchange="setPart(this)">
	    <option value="1">Stream 01</option>
	    <option value="2">Stream 02</option>
	    <option value="3">Stream 03</option>
	    <option value="4">Stream 04</option>
	  </select>
	</div>
      </div>      


    </div>
    

    <div id="preview"></div>
    
    </div>    
    
  
</div>

</body>
</html>