changeset 59:5ba250832739

css visibility and counter fixes

--- a/nodescore.js	Sun Mar 31 01:46:39 2013 +0000
+++ b/nodescore.js	Tue Apr 02 15:14:25 2013 +0000
@@ -150,8 +150,11 @@
 		minutes = parseInt( now / 60 ) % 60;
 		seconds = parseInt(now  % 60);
 		milliseconds = Math.floor((now-seconds)*10)%60;
-		time = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds) + "."+milliseconds;
-		//console.log(time)
+		time = 
+		    (hours < 10 ? "0" + hours : hours) + ":" + 
+		    (minutes < 10 ? "0" + minutes : minutes) + ":" + 
+		    (seconds  < 10 ? "0" + seconds : seconds) + "."+ 
+		    milliseconds;
 		socket.broadcast.emit('chronFromServer', time)
 		socket.emit('chronFromServer', time)
 	    }, 100)
@@ -192,106 +195,114 @@
 
     var sequencerState = 0;
     var countdowntick = function(seq){
+	
+	// var tempoms = Math.floor(60000/seq.mm)
+	var tempoms = Math.floor(60000/seq.mm)	
+	var timemultiplier=1000
+	var outcount = 8; var incount=8;
+	var time = ((seq.durations[seq.counter]+1) *timemultiplier) + 30000 + (outcount*tempoms);
+	var time = Math.floor(time)
+	var ztime = time; 
+	var totaltime = Math.floor(time/tempoms)
+	var unit = seq.units[seq.counter];
+	var unitlast = seq.units[seq.counter-1];
+	var voice = seq.voice;
+	
+	 // initiate first page here
+	socket.broadcast.emit("pageFlipfromserver", 
+			      voice, unit, time, seq.mm,seq.counter,unitlast);
+	socket.emit("pageFlipfromserver", 
+		    voice, unit, time, seq.mm,seq.counter,unitlast);
+	 
+	function sequenCer() {
 
-	 // var tempoms = Math.floor(60000/seq.mm)
-	 var tempoms = Math.floor(60000/seq.mm)
-	 
-	 var timemultiplier=1000
-	 var outcount = 4; var incount=4;
-	 var time = ((seq.durations[seq.counter]+1) *timemultiplier) + 30000 + (outcount*tempoms);
-	 var time = Math.floor(time)
-	 var ztime = time; 
-	 var totaltime = Math.floor(time/tempoms)
-	 var unit = seq.units[seq.counter];
-	var unitlast = seq.units[seq.counter-1];
-  
-	 var voice = seq.voice;
-	console.log(unit,unitlast)
-	 // initiate first page here
-	socket.broadcast.emit("pageFlipfromserver", voice, unit, time, seq.mm,seq.counter,unitlast);
-	socket.emit("pageFlipfromserver", voice, unit, time, seq.mm,seq.counter,unitlast);
-	console.log("pageFlipfromserver", voice, unit, time, seq.mm,seq.counter, seq.durations[seq.counter])
-
-	 
-	 function sequenCer() {
-	     //    console.log(ztime)
-	     if (ztime >= 0 ){
-		 
+	    if (ztime >= 0 ){
+		
 		// basic unit is still the second/1000ms - change this to tempoms? no i dont think so
 		// count in and count out
 		////////////////////////////////////////////
 		
-		 var counter = Math.floor(ztime/tempoms)
-		 //console.log(counter)
-		 if (counter >= 0 ){
-		     socket.broadcast.emit('counterText', voice, unit, counter,seq.counter,unitlast);
-		     socket.emit('counterText', voice, unit, counter,seq.counter,unitlast);
-		     
-		     if (counter <= outcount ) {
-			 socket.broadcast.emit('countinFromServer', voice, counter, "","stop in: ", "red", "transparent",unit);
-		     }
-		     
-		     if (counter > (totaltime)-incount  && counter <= totaltime ) {
-			 socket.broadcast.emit('countinFromServer', voice, counter-(totaltime-incount), "","play in: ", "green","transparent",unit);
-			 socket.emit('countinFromServer', voice, counter-(totaltime-incount), "","play in: ", "green","transparent",unit);
-		     }
-		     
-		     if (counter == (totaltime)-incount ) {
-			 socket.broadcast.emit('countinFromServer', voice, "+", "","playing.. ", "green","transparent",unit);
-			 socket.emit('countinFromServer', voice, "+", "","playing.. ", "green","transparent",unit);
-		     }
-		     
-		     // remove displayed number with " " at end of both countin/out
-		     
-		     if (counter == 0 ) {
-			 socket.broadcast.emit('countinFromServer', voice, "", "","", "green","transparent",unit);
-			 socket.broadcast.emit('counterText', voice, seq.counter, "", unit);
-			 socket.emit('counterText', voice, seq.counter, "",unit);
-		     }
-		 }		    
-				
-		 // on each beat do:
-		 
-
-		 // push out the pulse to metronome	
-		 seq.metrobeat = (seq.metrobeat+1)%seq.beatsinbar ;
-     		 socket.broadcast.emit('metroPulse', tempoms, voice,seq.metrobeat); 
-		 socket.emit('metroPulse', tempoms, voice,seq.metrobeat);
-	     }
-	     
-	     // flip the page 
-	     if (counter == 0){
-		 seq.counter = (seq.counter + 1) % seq.durations.length	    		
+		var counter = Math.floor(ztime/tempoms)
+		
+		if (counter >= 0 ){
+		    socket.broadcast.emit('counterText', 
+					  voice, unit, counter,seq.counter,unitlast);
+		    socket.emit('counterText',
+				voice, unit, counter,seq.counter,unitlast);
+		    
+		    if (counter <= outcount ) {
+			socket.broadcast.emit('countinFromServer', 
+					      voice, counter, "","stop in: ", "red", "transparent",unit);
+			socket.emit('countinFromServer', 
+				    voice, counter, "","stop in: ", "red", "transparent",unit);
+		    }
+		    
+		    if (counter > (totaltime)-incount  && counter <= totaltime ) {
+			socket.broadcast.emit('countinFromServer',
+					      voice, counter-(totaltime-incount), "","play in: ", "green","transparent",unit);
+			socket.emit('countinFromServer',
+				    voice,counter-(totaltime-incount), "","play in: ", "green","transparent",unit);
+		    }
+		    
+		    if (counter == (totaltime)-incount ) {
+			socket.broadcast.emit('countinFromServer',
+					      voice, "+", "","playing.. ", "green","transparent",unit);
+			socket.emit('countinFromServer',
+				    voice, "+", "","playing.. ", "green","transparent",unit);
+		    }
+		    
+		    // remove displayed number with " " at end of both countin/out
+		    
+		    if (counter == 0 ) {
+			socket.broadcast.emit('countinFromServer', 
+					      voice, "", "","", "green","transparent",unit);
+			socket.broadcast.emit('counterText', voice, seq.counter, "", unit);
+			socket.emit('counterText', voice, seq.counter, "",unit);
+		    }
+		}		    
+		
+		// on each beat do:
+		
+		
+		// push out the pulse to metronome	
+		seq.metrobeat = (seq.metrobeat+1)%seq.beatsinbar ;
+     		socket.broadcast.emit('metroPulse', tempoms, voice,seq.metrobeat); 
+		socket.emit('metroPulse', tempoms, voice,seq.metrobeat);
+	    }
+	    
+	    // flip the page 
+	    if (counter == 0){
+		seq.counter = (seq.counter + 1) % seq.durations.length	    		
 		socket.broadcast.emit("pageFlipfromserver", voice, unit, time, seq.mm,seq.counter);
-		 console.log("pageFlipfromserver", voice, unit, time, seq.mm,seq.counter, seq.durations[seq.counter])
-		 //delete tockTock;	
-		 step(seq);     
-	     }
-	     
-	     // decrement the time 
-	     ztime -= tempoms
-	 }
-	 
-	 var pulse = setInterval(sequenCer, tempoms);
-	 
-	 socket.on('stopSeq', function () {
-	     //donaldduck = mickeymouse + 7
-	     sequenCer.clearInterval
-	     console.log("sequencer stopping...")	    
-	     // grrr why wont this clearInterval work
-	     sequencerState = 0
-	     clearInterval(pulse)
-	     stopChr();
-	 });
-     };
-
+		
+		//delete tockTock;	
+		step(seq);     
+	    }
+	    
+	    // decrement the time 
+	    ztime -= tempoms
+	}
+	
+	var pulse = setInterval(sequenCer, tempoms);
+	
+	socket.on('stopSeq', function () {
+	    //donaldduck = mickeymouse + 7
+	    sequenCer.clearInterval
+	    console.log("sequencer stopping...")	    
+	    // grrr why wont this clearInterval work
+	    sequencerState = 0
+	    clearInterval(pulse)
+	    stopChr();
+	});
+    };
+    
     step = function (seq) {
 	//clearInterval(seq.boo);
 	clearInterval(countdowntick);
 	countdowntick(seq)
 	sequencerState=1;
     };
-  
+    
     socket.on('resetSeq', function () { 
 	console.log("reset")
 	resetChr();		

--- a/www/m/c.html	Sun Mar 31 01:46:39 2013 +0000
+++ b/www/m/c.html	Tue Apr 02 15:14:25 2013 +0000
@@ -137,7 +137,29 @@
       <input type="button" value="STOP" onclick="stopSeq();" />
       <input type="button" value="RESET" onclick="resetSeq();" />    
 
-  
+<!--
+    <div id="xcomms"> 
+      <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>
+  -->
 
 </body>
 </html>

--- a/www/m/css/nodescore-tablet.css	Sun Mar 31 01:46:39 2013 +0000
+++ b/www/m/css/nodescore-tablet.css	Tue Apr 02 15:14:25 2013 +0000
@@ -40,23 +40,11 @@
     height: 580px;
     width: 1020px;
     border-radius: 15px;
-    !2Bbackground-color:black;
-    !border: 1px solid gray;
     position: relative;
-    !padding: 5px 5px 5px 5px ;
-    !color: white;
-    !opacity:0.8;
-    !top: 10%
     +filter: invert(100%);
-    !2Bmargin-left: 0px;
- !padding:0px;
 }
 
 #live{
-    !margin-left:auto; 
-    !margin-right:auto; 
-    !margin-top:5px;
-    !margin: 2px;
     width: 100%;
     height: 500px;
     text-align: center;
@@ -64,7 +52,6 @@
     background-color:black;
     border: 0px solid blue;
     position: absolute;
-!    padding: 5px 5px 5px 5px ;
     color: white;
     top: 0px;
     +filter: invert(100%);
@@ -108,6 +95,16 @@
     padding: 5px 5px 5px 5px;
 }
 
+#xcomms{
+    border-radius: 15px;
+    height: 120px;
+    width: 250px;
+    margin: 0px;
+    border: 1px solid gray;
+    color: black;
+    padding: 5px 5px 5px 5px;
+}
+
 #midfoot{
     !margin-left:auto; margin-right:auto;
     border-radius: 15px;
@@ -128,9 +125,7 @@
     width: 30%;
     margin: 0px;
     border: 1px solid gray;
-    !position: absolute;
-    !top: 325px;
-    !right: 0px;
+
     padding: 5px 5px 5px 5px ;
     color: black;
     overflow:hidden;
@@ -151,30 +146,26 @@
 }
 
 #remainingtime{
-!display:table-cell; vertical-align:middle;
-padding:0;
-margin:0;
-font-size:1.4em;
-color:white;
-position:relative;
-left:40px;
-top:90px;
-width:120px;
-float:left;
-background-color:transparent;
+    padding:0;
+    margin:0;
+    font-size:1.4em;
+    color:white;
+    position:relative;
+    left:40px;
+    top:90px;
+    width:120px;
+    float:left;
+    background-color:transparent;
 }
 
 .footdata{
-    !margin-top:10px;
     margin-left:auto; margin-right:auto;
     border-radius: 15px;
     height: 50px;
     width: 100%;
-    !margin: 10px;
     border: 0px solid gray;
     position:absolute;
     top: 0px;
-!    padding: 5px 5px 5px 5px ;
     background: black;
     opacity:1;
 }
@@ -183,9 +174,6 @@
 .outersquare{
     border-radius: 15px;
     border: 1px solid blue;
- !   position: absolute;
-    !top: 50px;
-    !left: 110px;
     padding: 1px 1px 1px 1px ;
     background: black;
     width: 99%;
@@ -205,23 +193,20 @@
 #thesquare{ position:absolute; }
 
 .magicsquare {
-!    margin: 10px;
     border: 1px solid white;
     padding: 2px 2px 2px 2px;
-    !background: transparent;
     width: 160px; 
     height: 75px;
-!    border-radius: 2px;
      float: left;
     font-size: 3em;
     color:white;
     text-align:center
 }
 
-.sqa {height:50%; width:50%; float:left; color: yellow;}
-.sqb {height:50%; width:50%; float:right; color: green;}
+.sqa {height:50%; width:50%; float:left; color: yellow; }
+.sqb {height:50%; width:50%; float:right; color: green; }
 .sqc {height:50%; width:50%; float:left; color: aqua; }
-.sqd {height:50%; width:50%; float:right; color:red; }
+.sqd {height:50%; width:50%; float:right; color:red;  }
 
 .row {display:inline;}
 .row img{ width:160px; display:inline;}
@@ -229,25 +214,24 @@
 .rrr {position:relative; display:inline;}
 
 .sqrow{
-!background:green;
-display:inline;
+    display:inline;
     padding: 2px 2px 10px 2px;
     
 }
 
 .latencies{
-!    height: 90px; width: 200px;
-!    border: 1px solid blue;
-!    position: relative; top: 15%;
-!    float: right;
-!    padding: 5px 5px 5px 5px ;
-!    background-color: yellow;    
+/*    height: 90px; width: 200px;
+    border: 1px solid blue;
+    position: relative; top: 15%;
+    float: right;
+    padding: 5px 5px 5px 5px ;
+    background-color: yellow;    
+*/
 }
 
 #datetime{
     display:table-cell; vertical-align:middle;
     width:90px;
-    !padding: 1px 1px 1px 1px;
     font-size:0.9em; color: white;
     text-align:center;
     position: relative; 
@@ -255,7 +239,6 @@
     right: 4px;
     float: left;
     background-color: transparent;    
-    !opacity: 0.7;
 }
 
 #current{
@@ -310,7 +293,6 @@
 
 #fluid {}
 .fluid-img{ height:50%; width:50%; }
-
 .clear { clear:both; }
 
 #midcomms{
@@ -325,7 +307,6 @@
 #client_chronometer{ 
     display:table-cell; vertical-align:middle;
     border-radius: 15px;
-    !border: 2px solid gray ; 
     float:right;
     background-color: transparent;   
     color: white;
@@ -336,7 +317,6 @@
     left: 10px; 
     bottom:64px;
     width: 210px; 
-    !height: 40px;
     z-position: 2;
 }
 
@@ -372,20 +352,13 @@
     position:relative;
     left: 0px;
     bottom: -3px;
-    !text-align:center
     font-weight:bolder;
-    !width:100%;
-    !float:left;
-    display:inline;
-    
-    
+    display:inline;    
 }
 
 #countinnumber{ 
     border-radius: 15px;
     position: absolute; 
-    !width: 100%; 
-    !height: 90%;
     background-color:black;
     font-size: 10em; 
     font-weight:bolder;

--- a/www/m/js/controlseq.js	Sun Mar 31 01:46:39 2013 +0000
+++ b/www/m/js/controlseq.js	Tue Apr 02 15:14:25 2013 +0000
@@ -50,8 +50,8 @@
 
 socket.on("pageFlipfromserver", sequenceMonitor);
 function sequenceMonitor(group, unit,time,mm,seq,unitlast){
-    var n=6; var x=seq-1; var off=((x%n)+n)%n // thanks claudiusmaximus
-
+//    var n=6; var x=seq-1; var off=((x%n)+n)%n // thanks claudiusmaximus
+    
     if (group == 1) { turnmeoff = "#sqr"+unitlast+".sqa"}
     if (group == 2) { turnmeoff = "#sqr"+unitlast+".sqb"}
     if (group == 3) { turnmeoff = "#sqr"+unitlast+".sqc"}
@@ -62,11 +62,28 @@
 }
 
 socket.on("counterText", function(group,unit,counter,seq){
-    if (group == 1) { $('#sqr'+unit+".sqa").text(counter); } 
-    if (group == 2) { $('#sqr'+unit+".sqb").text(counter); } 
-    if (group == 3) { $('#sqr'+unit+".sqc").text(counter); }
-    if (group == 4) { $('#sqr'+unit+".sqd").text(counter); }  
-});
+    
+    if (group == 1) { $('#sqr'+unit+".sqa").text(counter); 
+		      if (counter == 0 ) { $('#sqr'+unit+".sqa").css("color","black")  }
+		      else { $('#sqr'+unit+".sqa").css("color","yellow")  }
+		    }
+    
+    if (group == 2) { $('#sqr'+unit+".sqb").text(counter); 
+		      if (counter == 0 ) { $('#sqr'+unit+".sqb").css("color","black")  }
+		      else { $('#sqr'+unit+".sqb").css("color","green")  }
+		    } 
+ 
+    if (group == 3) { $('#sqr'+unit+".sqc").text(counter); 
+		      if (counter == 0 ) { $('#sqr'+unit+".sqc").css("color","black") } 
+		      else { $('#sqr'+unit+".sqc").css("color","aqua")  }
+		    }
+    
+    if (group == 4) { $('#sqr'+unit+".sqd").text(counter); 
+		      if (counter == 0 ) { $('#sqr'+unit+".sqd").css("color","black")} 
+		      else { $('#sqr'+unit+".sqd").css("color","red")  }
+		    } 
+}
+	 );
 
 
 //////////////////////////////////////////////

--- a/www/m/js/nodescore-client.js	Sun Mar 31 01:46:39 2013 +0000
+++ b/www/m/js/nodescore-client.js	Tue Apr 02 15:14:25 2013 +0000
@@ -57,8 +57,9 @@
 function countinClient(groupID, currentseconds,mm,text,colour,background){
     var groupPage=document.getElementById('group').value
     if (groupID == groupPage) {
+	console.log(groupID, currentseconds,mm,text,colour,background)
 	document.getElementById("count").style.visibility="visible";
-	document.getElementById("count").style.visibility="visible";
+	//document.getElementById("count").style.visibility="visible";
 	$("#counttitle").text(text);
 	$("#count").text(currentseconds);
 	//$("#cnt").text(currentseconds);

--- a/www/m/js/nodescore-slides.js	Sun Mar 31 01:46:39 2013 +0000
+++ b/www/m/js/nodescore-slides.js	Tue Apr 02 15:14:25 2013 +0000
@@ -45,34 +45,32 @@
 //var groupPage=document.getElementById('group').value
 //if (groupID == groupPage) {
     socket.on("dateTime", function(datetime) {
-//	console.log(datetime)
 	$("div#datetime").text("" +datetime);
 	
     });
 
-
 /////////////////////////////////////////////////
 // countdown to change
 
 socket.on("countinFromServer", countinClient);
 function countinClient(groupID, currentseconds,mm,text,colour,background,unit){
     var groupPage=document.getElementById('group').value
-//    if (groupID == groupPage) {
-    //document.getElementById("count"+groupID).style.visibility="visible";
-    //document.getElementById("count"+groupID).style.visibility="visible";
-    $("#counttitle").text(text);
+    if (groupID == groupPage) {
+        //document.getElementById("count").style.visibility="visible";
+	//document.getElementById("midcomms").style.visibility="visible"; 
+	$("#counttitle").css('color','white');
+	$("#counttitle").text(text);
     // in box
     //$('#sqr'+unit).text(currentseconds);
-    //console.log('#sqr'+unit)
-    $("#count"+groupID).text(currentseconds);
+      $("#count").text(currentseconds);
     //$("#cnt").text(currentseconds);
   
-  $("#count"+groupID).css('background-color', background);	
-//	document.getElementById("count"+groupID).style.color=colour;
-    //	if ( currentseconds == 0) {
+  $("#count").css('background-color', background);	
+	document.getElementById("count").style.color=colour;
+    	if ( currentseconds == 0) {
     //document.getElementById("midcomms").style.visibility='hidden';
-//	}
-    }//}
+	}
+    }}
 /////////////////////////////////////////////////
 
 /////////////////////////////////////////////////
@@ -89,7 +87,7 @@
 
 ///////////////////////////////////////
 function pageFlip(unit) {
-    console.log("flipping page:"+ unit);
+   
     $('#sections').trigger('goto', [parseFloat(unit)]); 
 }
 
@@ -118,8 +116,7 @@
 function pageTurnB(unit) {
     var units=6;
     var next=(((unit+1)%units)+units)%units
-    console.log("HOP TURN" + unit+ "next:" + next);
-    $("#live").load("music.html #"+unit +" *"); 
+      $("#live").load("music.html #"+unit +" *"); 
     $("#preview").html("<h3 style='background:transparent; position: relative; font-size:1.5em;top:14px; left:10px;';> n e x t : </h3><img src='thumbs/"+next + ".png" + "' width='315'>")
 }
 
@@ -187,7 +184,7 @@
 
 socket.on("latencyFromServer", function(latency) {
     $("#client_latency").text("Latency: "+latency+"ms.")
-    //console.log(latency)
+   
 });
 
 function getLatencies(x) { socket.emit("getLatencies", x); }