changeset 90:f214909fb108

load seqence fixes
author Rob Canning <rob@foo.net>
date Wed, 30 Jul 2014 10:44:14 +0100
parents 416db12a2039
children 1a706a2880ee
files nodescore.js www/martin/css/chat-tablet.css www/martin/css/nodescore.css www/martin/index.html www/martin/js/controlseq.js www/martin/js/nodescore-client.js
diffstat 6 files changed, 173 insertions(+), 118 deletions(-) [+]
line wrap: on
line diff
--- a/nodescore.js	Tue Jul 29 09:27:03 2014 +0100
+++ b/nodescore.js	Wed Jul 30 10:44:14 2014 +0100
@@ -207,6 +207,16 @@
 	    //socket.emit("pageFlipfromserver", voice, unit, time, seq.mm,seq.counter,nextunit );
 	}
 
+	socket.on('resetSeq', function (seq) { 
+	    //var unit=seq.units[seq.transect%numberoftransects][seq.counter];
+	    //resetChr(); 
+	    //socket.emit("pageIni", 1, unit, 0, 60, 0,1 )
+	    //socket.emit("pageIni", 2, 1, 0, 60, 0,1 );
+	    //socket.emit("pageIni", 3, 1, 0, 60, 0,1 );
+	    //socket.emit("pageIni", 4, 1, 0, 60, 0,1 );
+	    console.log("reset message recieved from client");
+	});
+
 	function sequenCer() {
 	    if (ztime >= 0 ){	
 		var counter = ztime
@@ -274,6 +284,9 @@
 	
 	var pulse = setInterval(sequenCer, tempoms);
 	
+
+
+
 	socket.on('stopSeq', function () {
 	    sequenCer.clearInterval
 	    console.log("sequencer stopping...")	    
@@ -292,7 +305,15 @@
 	initPage(seq)
     };
     
-    socket.on('resetSeq', function () { resetChr(); });
+    socket.on('resetSeq', function () { 
+	//var unit=seq.units[seq.transect%numberoftransects][seq.counter];
+	resetChr(); 
+	//socket.emit("pageIni", 1, unit, 0, 60, 0,1 )
+	//socket.emit("pageIni", 2, 1, 0, 60, 0,1 );
+	//socket.emit("pageIni", 3, 1, 0, 60, 0,1 );
+	//socket.emit("pageIni", 4, 1, 0, 60, 0,1 );
+	console.log("reset message recieved from client");
+    });
 
     ////////////////////////////////////////////  
     // some latency calculations
--- a/www/martin/css/chat-tablet.css	Tue Jul 29 09:27:03 2014 +0100
+++ b/www/martin/css/chat-tablet.css	Wed Jul 30 10:44:14 2014 +0100
@@ -1,5 +1,14 @@
+
+#nickname {
+background:gray;
+position:absolute;
+left:-445%;
+top:45%;
+height:150px;
+width:200px;
+}
+
 #chat,
-#nickname,
 #messages {
   width: 180px;
   height:90%;
@@ -79,6 +88,7 @@
   overflow-x: hidden;
   overflow-y: auto;
 }
+
 #messages #lines::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -120,8 +130,8 @@
   line-height: 20px;
   vertical-align: middle;
   width: 160px;
-  background:gray;
-  color: white;
+  background:white;
+  color: black;
   border-radius:1px;
  
 }
--- a/www/martin/css/nodescore.css	Tue Jul 29 09:27:03 2014 +0100
+++ b/www/martin/css/nodescore.css	Wed Jul 30 10:44:14 2014 +0100
@@ -19,7 +19,6 @@
     text-align: center;  margin-left:auto; margin-right:auto; 
   }
 
-
 a:link { color:#666;}
 a:visited { color: #666;}
 a:hover { color: black; background-color:orange; }
@@ -33,17 +32,20 @@
 
 .soloscore{
     margin:0;
+    margin-right:200px;
     float:right;
-    height: 700px;
+    height: 650px;
     width: 1150px;
     position: absolute;
     top:9%;
     left: 3000px;
     !margin: 0 auto;
     background:transparent;
-    border:1px dashed black;
+    border:1px dashed red;
 }
 
+#soloscore.anchor{display: block; position: relative; left: 1250px; visibility: hidden;}
+
 #info{
 position: absolute;
 border-radius:15px;
@@ -55,11 +57,11 @@
 
 #comms{
     position:fixed;
-    top:7%;
-    right: 0px;
+    top:12%;
+    right: 10px;
     border-radius: 0px;
-    height: 86%;
-    Width: 180px;
+    height: 70%;
+    width: 180px;
     margin: 0px;
     border: 0px solid gray;
     color: red;
@@ -89,9 +91,9 @@
     margin-left:6%;
     border: 1px solid gray;
     padding: 5px 5px 5px 5px ;
-  
     opacity:1;
     float:left;
+    
 }
 
 #preview{
@@ -146,7 +148,7 @@
 
 .svgmusic {
     padding:0px;
-    border: 1px dashed gray;
+    border: 1px dashed green;
     display:block;
     border-radius: 15px;
     margin: 0px;
@@ -235,6 +237,35 @@
 font-size:3em;
 margin-right:50px;
 margin-top:10px;
+color:white;
+}
+
+#views{ 
+    position:absolute;
+    !padding: 0px;
+    left:65%;
+    top:15px;
+    float:left;
+    //display:block;
+    
+}
+
+.btn{background:yellow;
+     font-size:1.3em;
+}
+
+.formrow{
+    float:left;
+    
+}
+
+#setPart{
+    float:right;
+    margin-right:70px;
+    margin-top:5px;
+    font-size:1.3em;
+    background:orange;
+    height:44px;
 }
 
 #transport{ 
@@ -243,8 +274,16 @@
     right:240px;
     top:15px;
     float:right;
+    color:white;
+    font-size:1.3em;
 }
 
+.transpbtn{ 
+    color:white;
+    font-size:1.3em;
+}
+
+
 #ctrlstop{ 
     position:absolute;
     padding: 5px;
@@ -278,7 +317,7 @@
     padding:0;
     position:relative;
     left:15%;
-    top: -10px;
+    top: -1px;
     background:transparent;
     float:left;
     !display:inline;
@@ -366,8 +405,8 @@
 .solo-next{
 position:absolute;
 border:1px dashed blue;
-height:150px;
-width:30%;
+height:120px;
+width:22%;
 !float: right;
 bottom:0;
 right:0;
@@ -386,7 +425,7 @@
 
 .pview { 
     border: 1px dashed gray; 
-    height:50%; width:45%; float:left;  
+    height:45%; width:45%; float:left;  
     background:white; 
     z-index:-100; 
     margin-left:15px;
@@ -395,7 +434,7 @@
 }
 .pviewsolo { 
     border: 1px dashed gray; 
-    height:100%; 
+    
     width:100%; 
     float:left;  
     background:white; 
@@ -430,11 +469,13 @@
 	      position:relative; top:-15px;
 	    }
 
-.xmiddle:hover img {
+.middle:hover img {
     z-index:1000;
     width:500px;
     background-color: white;
-    !position: absolute;    
+    position: relative;
+    top:60px;
+    left:50px;
     border: 0px solid red;
     border-radius:10px;
     opacity: 1;
@@ -465,16 +506,20 @@
 .inner-3 { background-color: transparent; }
 
 .musicianprog { display:inline; float:left; 
-		width:10%; background:transparent; height:15%; 
+		width:9%; background:transparent; height:12%; 
 		padding: 1px; text-align:center;  
 		position:absolute;
 	      }
 
 
+.tleftgroup {
+	     padding-top:5px;
+	    }
+
 .timeleft { display:inline;
-	    width:10%; 
+	    width:9%; 
 	    background:transparent; 
-	    height:15%; 
+	    height:12%; 
 	    padding: 1px; 
 	    text-align:center;  
 	    font-size:2.5em;
@@ -522,23 +567,15 @@
 
 
 #indexpagetitle{
-    font-size:1em;
+    font-size:1.5em;
     float:left;
-    margin-left:20%;
-    padding:20px;
+    margin-left:8%;
+    padding:10px;
     margin-bottom:0px;
     color:white;
     letter-spacing:4px;
 }
 
-#setPart{
-    float:right;
-    margin-right:50px;
-    margin-top:20px;
-    font-size:1.3em;
-}
-
-
 .metrocase {
     margin-left:20px;
     margin-top:5px;
@@ -554,7 +591,15 @@
 
 #metronome0 { width: 60px; height: 30px; border-radius: 4px; float:left; }
 #links {position:absolute; bottom:150px; left: 800px; width:900px;}
-#transect {float:left; font-size:2em; padding:0px;}
+#transect {
+float:left; 
+font-size:2em; 
+padding:3px;
+padding-left:20px;
+margin-top:15px;
+background:yellow;
+width:250px;
+}
 
 .tportpop {     
     width:200px; 
--- a/www/martin/index.html	Tue Jul 29 09:27:03 2014 +0100
+++ b/www/martin/index.html	Wed Jul 30 10:44:14 2014 +0100
@@ -79,7 +79,7 @@
 	      <div class="count" id="count1"></div>
 	    </div>
 	    <div class="timeleft" style=" border: 1px solid purple;" >
-	      <div id="timeleft1"></div>
+	      <div class="tleftgroup" id="timeleft1"></div>
 	    </div>
  	    <div class="unitseq" id="unitseq0"></div>
 	    <div class="pviewmusic" id="previewbox-1"></div>   
@@ -91,7 +91,7 @@
 	      <div class="count" id="count2"></div>
 	    </div>
 	    <div class="timeleft" style="border: 1px solid green;" >
-	      <div id="timeleft2"></div>
+	      <div class="tleftgroup" id="timeleft2"></div>
 	    </div>
 	    <div class="unitseq" id="unitseq1"></div>
 	    <div class="pviewmusic" id="previewbox-2"> </div>
@@ -103,7 +103,7 @@
 	      <div class="count" id="count3"></div>
 	    </div>
 	    <div class="timeleft" style="border: 1px solid aqua;" >
-	      <div id="timeleft3" style="font-size:1em;"></div>
+	      <div class="tleftgroup" id="timeleft3" style="font-size:1em;"></div>
 	    </div>
 	    <div class="unitseq" id="unitseq2"></div>
 	    <div class="pviewmusic" id="previewbox-3"> </div>
@@ -115,7 +115,7 @@
 	      <div class="count" id="count4"></div>
 	    </div>
 	    <div class="timeleft" style=" border: 1px solid red;" >
-	      <div id="timeleft4"></div>
+	      <div class="tleftgroup" id="timeleft4"></div>
 	    </div>
 	    <div class="unitseq" id="unitseq3"></div>
 	    <div class="pviewmusic" id="previewbox-4"> </div>
@@ -123,15 +123,14 @@
 	</div>      
 		
 
-	<div class="soloscore">
-	  
+	<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 id="totalcountdown"></div>
+	      <div class="tleftgroup" id="totalcountdown"></div>
 	    </div>
 	    <div class="unitseq" id="unitseqsolo"></div>
 	    <div class="pviewmusic" id="previewbox-solo"> </div>
@@ -141,8 +140,7 @@
 	    <div id="nexttitle">NEXT:</div>
 	  </div>
 	</div>
-	
-
+		
 	<div id="info">
 	  <div id="comms"> 
 	    <div id="chat" title="type here to chat with others connected to network" >
@@ -158,61 +156,47 @@
 	      </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 id="lines"></div>
 	      </div>
-	    </div>    
-	    
-	  	    
+	      <form id="send-message">
+		<input id="message">
+		<button>Send</button>
+	      </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();
 	      
-	      
-	      <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; 
-		  //$('div#current').text('GROUP ' +value).text='value';
-		  }
+	      var value = sel.options[sel.selectedIndex].value;  
+	      document.getElementById('group').value=value; 
+	      //$('div#current').text('GROUP ' +value).text='value';
+	      }
 		</script>
-		
-		
-	      </div>      
-	      
-	    </div>
-	    
-	    
-	    
-	  </div>    
-	  
-    
+	  </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 - for guitars, percussion & electronics
+  </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();" />
+  </div>
   
-  
-  <div class="head">
-    <div id="datetime"></div>	   
-    <div class="metrocase" id="metro">
-      <div id="metronome0"></div>
-    </div>
-
-    <div id="transport" > 
-      <input type="button" value="start" onclick="startSeq();" />
-      <input type="button" value="stop" onclick="stopSeq();" />
-      <input type="button" value="reset" onclick="resetSeq();" />
-    </div>
 
     <div id="client_latency">Latency: 0ms</div>    
     <div id="client_chronometer" >00:00:00.0</div>      
@@ -221,10 +205,19 @@
   <div class="footx">
     <div id="transect">.. </div>	
 
-    <div id="indexpagetitle">
-      pathways - for guitar, percussion & electronics
+
+
+
+
+
+
+    <div id="views" > 
+      <div class="formrow"><form  action="#map"><input class="btn" type="submit" value="OverView"></form></div>
+      <div class="formrow"><form  action="#outerpreview"><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>
@@ -232,7 +225,8 @@
 	<option value="3">Stream 03</option>
 	<option value="4">Stream 04</option>
       </select>
-    </div>
+    </div>    
+
     
 
     
--- a/www/martin/js/controlseq.js	Tue Jul 29 09:27:03 2014 +0100
+++ b/www/martin/js/controlseq.js	Wed Jul 30 10:44:14 2014 +0100
@@ -62,7 +62,7 @@
 
 socket.on("counterText", function(group,unit,counter,seq,unitlast,transect){  
 
-    $("div#transect").text("Transect: " + (transect+1)); 
+    $("div#transect").text("Transect: " + (transect+1) + " Unit: " + seq); 
 
     if (group == 1) { $('#inner-'+unit+"-0").text(counter); 
 		      $("div#unitseq0").text((transect+1)+ " : " + (seq+1));
--- a/www/martin/js/nodescore-client.js	Tue Jul 29 09:27:03 2014 +0100
+++ b/www/martin/js/nodescore-client.js	Wed Jul 30 10:44:14 2014 +0100
@@ -102,6 +102,7 @@
     var n1 = $("#previewbox-1").html().indexOf("svg"); 
     if (n1 == -1){ $("#previewbox-1").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")}
     }
+
     if (group==2){
     var n2 = $("#previewbox-2").html().indexOf("svg"); 
     if (n2 == -1){ $("#previewbox-2").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")}
@@ -152,28 +153,12 @@
 }
 
 $(document).keypress(function(e){
-    // "space  bar" for next unit preview
-    var checkWebkitandIE=(e.which==32 ? 1 : 0);
-    var checkMoz=(e.which==32 ? 1 : 0);
-    // "m" button for metronome
-    var mcheckWebkitandIE=(e.which==109 ? 1 : 0);
-    var mcheckMoz=(e.which==109 ? 1 : 0);
-    // "s" button for stopwatch/chronometer
-    var ccheckWebkitandIE=(e.which==115 ? 1 : 0);
-    var ccheckMoz=(e.which==115 ? 1 : 0);
-
-  // "h" button for hideall
-    var hcheckWebkitandIE=(e.which==104 ? 1 : 0);
-    var hcheckMoz=(e.which==104 ? 1 : 0);
-
 //    console.log(e.which);
-//    if (checkWebkitandIE || checkMoz) { toggle_visibility('preview') }   
- //   if (mcheckWebkitandIE || mcheckMoz) { toggle_visibility('comms') }   
-   // if (ccheckWebkitandIE || ccheckMoz) { toggle_visibility('client_chronometer') }   
+  // "0" button for hide chat
+    var hcheckWebkitandIE=(e.which==48 ? 1 : 0);
+    var hcheckMoz=(e.which==48 ? 1 : 0);
     if (hcheckWebkitandIE || hcheckMoz) { 
-	toggle_visibility('info') 
-	//toggle_visibility('comms') 
-	//toggle_visibility('preview') 
+	toggle_visibility('comms') 
 }
     });
 
@@ -187,12 +172,12 @@
 // to specific client..
 //////////////////////////////////////////////
 // Latency "Pong"
+
 socket.on("timeFromServer", function(n) { 
     socket.emit("clientTimeResponse",n); });
 
 socket.on("latencyFromServer", function(latency) {
     $("#client_latency").text("Latency: "+latency+"ms.")
-   
 });
 
 function getLatencies(x) { socket.emit("getLatencies", x); }
@@ -205,10 +190,10 @@
 });
 
 socket.on('announcement', function (msg) {
-    $('#lines').append($('<p>').append($('<em>').text(msg)));
+    $('#Lines').append($('<p>').append($('<em>').text(msg)));
 });
 
-socket.on('nicknames', function (nicknames) {
+Socket.on('nicknames', function (nicknames) {
     $('#nicknames').empty().append($('<span>Online: </span>'));
     for (var i in nicknames) {
 	$('#nicknames').append($('<b>').text(nicknames[i]));