Mercurial > hg > nodescore

view 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
line wrap: on
line source
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">  
  <title>iface@nodescore</title>
  <script src="/socket.io/socket.io.js"></script>
  <link rel="shortcut icon" href="/kiben_favicon.ico" type="image/x-icon" />
  <link href="css/nodescore.css" rel="stylesheet">
  <link href="css/svg-stylesheet.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="js/controlseq.js"></script>
  <script src="js/scoreB.js"></script>  
  <script src="js/nodescore-client.js"></script>  
  <script src="js/processing.js"></script>
</head>

<body onload="initPage()">
  
  <input type="hidden" id="group" value='1'/>
    <div class="outermaster2" id="outermaster2">
	<div id="preview-overview">
	  <script type="text/javascript">// <![CDATA[

	  // this is the javascript that populates the 8x8 grid
          // with svg images of the music notation

	  var outer = document.getElementById("preview-overview");
	  for (var i = 0; i < 64; i++) {
	  
	  var middle = document.createElement("div");
	  middle.setAttributeNS(null, "class", "middle");
	  
	  var img = document.createElement("img");
	  img.src = "svg/"+i+".svg";
	  var row=Math.floor(i/8);
	  img.setAttribute('width', 110);
	  var magicPar= document.createElement("p");
	  
	  var magicindex = document.createTextNode(srcsqr[row][i%8]);    
	  magicPar.appendChild(magicindex)
	  middle.appendChild(magicPar);
	  var texty = document.createTextNode(i); 
	  var textx = document.createElement("p");
	  textx.setAttributeNS(null, "class", "indexnum");
	  textx.appendChild(texty) 
	  middle.appendChild(img); 
	  middle.appendChild(textx); 
	  
	  middle.id = "middle-" + i;
	  	  
	  for (var j = 0; j < 4; j++) {
	  var inner = document.createElement("p");
	  inner.setAttributeNS(null, "class", "inner-" + j);
	  inner.id = "inner-" + i + "-" + j;
	  var text = document.createTextNode("");
	  inner.appendChild(text);
	  middle.appendChild(inner);
	  }
	  outer.appendChild(middle);
	  
	  }
	  // ]]></script>

	</div>



	
	<div id="preview-multi" >
	 
	  <div class="pview" id="preview-1">
	    <div class="musicianprog" style=" border: 1px solid purple;" >
	      <div id="counttitle1"></div>
	      <div class="count" id="count1"></div>
	    </div>
	    <div class="timeleft" style=" border: 1px solid purple;" >
	      <div class="tleftgroup" id="timeleft1"></div>
	    </div>
 	    <div class="unitseq" id="unitseq0"></div>
	    <div class="pviewmusic" id="previewbox-1"></div>   
	  </div>
	  
	  <div class="pview" id="preview-2">
	    <div class="musicianprog" style="border: 1px solid green; ">
	      <div id="counttitle2" style="display:inline;"></div>
	      <div class="count" id="count2"></div>
	    </div>
	    <div class="timeleft" style="border: 1px solid green;" >
	      <div class="tleftgroup" id="timeleft2"></div>
	    </div>
	    <div class="unitseq" id="unitseq1"></div>
	    <div class="pviewmusic" id="previewbox-2"> </div>
	  </div>
	  
	  <div class="pview" id="preview-3" >
	    <div class="musicianprog" style="border: 1px solid aqua;">
	      <div id="counttitle3" style="display:inline;"></div>
	      <div class="count" id="count3"></div>
	    </div>
	    <div class="timeleft" style="border: 1px solid aqua;" >
	      <div class="tleftgroup" id="timeleft3" style="font-size:1em;"></div>
	    </div>
	    <div class="unitseq" id="unitseq2"></div>
	    <div class="pviewmusic" id="previewbox-3"> </div>
	  </div>
	  
	  <div class="pview" id="preview-4">
	    <div class="musicianprog" style=" border: 1px solid red;">
	      <div id="counttitle4" style="display:inline;"></div>
	      <div class="count" id="count4"></div>
	    </div>
	    <div class="timeleft" style=" border: 1px solid red;" >
	      <div class="tleftgroup" id="timeleft4"></div>
	    </div>
	    <div class="unitseq" id="unitseq3"></div>
	    <div class="pviewmusic" id="previewbox-4"> </div>
	  </div>
	</div>      
		

	<div class="soloscore" id="soloscore">
	  <div class="pviewsolo" id="preview-solo">
	    <div class="musicianprog" style=" border: 1px solid red;">
	      <div id="counttitle" ></div>
	      <div class="count" id="count"></div>
	    </div>
	    <div class="timeleft" style=" border: 1px solid red;" >
	      <div class="tleftgroup" id="totalcountdown"></div>
	    </div>
	    <div class="unitseq" id="unitseqsolo"></div>
	    <div class="pviewmusic" id="previewbox-solo"> </div>
	  </div>
	  <div class="solo-next">
	    <div id="previewbox-solo-next"> </div>
	    <div id="nexttitle">NEXT:</div>
	  </div>

	  <canvas data-processing-sources="hello-web.pde"></canvas>

	</div>
		
	<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 to Nodescore Server:</p>
		  <input id="nick">
		  <p id="nickname-err">Nickname already in use</p>
		</form>

		<p>
		  Press F9 for Help <br/><br/>
		  or vist:<br/> <a href="http://nodescore.kiben.net">http://nodescore.kiben.net</a> <br/>for full instructions.

		</p>

	      </div>
	      <div id="connecting">
		<div class="wrap">Connecting to socket.io server</div>
	      </div>
	      <div id="messages">
		Chat with Other Nodescorers Here: (hit zero to hide chat)	
		<div id="nicknames"></div>
		<div id="lines"></div>
	      </div>
	      <form id="send-message">
		<input id="message" value="chat here..">
		
	      </form>
	    </div>
	  </div>
	  <div id="current">
	    <script type="text/javascript">
	      function setPart(sel) {
	      //var testSound = new buzz.sound( 'audio/testfile', { formats: [ 'ogg', 'mp3' ] } );
	      //testSound.play();
	      
	      var value = sel.options[sel.selectedIndex].value;  
	      document.getElementById('group').value=value;
	      changeSoloVoice(group.value);
	      $('div#current').text('GROUP ' +value).text='value';
	      }
		</script>
	  </div>      
	</div>
    </div>    
</div>

<div class="head">
  <div id="datetime"></div>	   
  <div class="metrocase" id="metro">
    <div id="metronome0"></div>
  </div>
  
  <div id="indexpagetitle">
     pathways - an open score for operation integratus
  </div>
  
  
  <div id="transport" > 
    <input class="transpbtn" style="background:green;" type="button" value="start" onclick="startSeq();" />
    <input class="transpbtn" style="background:red;" type="button" value="stop" onclick="stopSeq();" />
    <input class="transpbtn" style="background:orange;" type="button" value="reset" onclick="resetSeq();" />
    <input class="transpbtn" style="background:red;" type="button" value="reboot" onclick="breakSeq();" />

    <input class="transpbtn" style="background:yellow;" type="button" value="60" onclick="setSpeed(60);" />
    <input class="transpbtn" style="background:yellow;" type="button" value="360" onclick="setSpeed(360);" />
  </div>
  

    <div id="client_latency">Latency: 0ms</div>    
    <div id="client_chronometer" >00:00:00.0</div>      
</div>
  
  <div class="footx">
    <div id="transect">.. </div>	







    <div id="views" > 
      <div class="formrow"><form  action="#preview-overview"><input class="btn" type="submit" value="OverView"></form></div>
      <div class="formrow"><form  action="#preview-multi"><input class="btn" type="submit" value="QuartetView"></form></div>
      <div class="formrow"><form  action="#soloscore"><input class="btn" type="submit" value="SoloView"></form></div>
    </div>


    <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>    
  


</body>
</html>