Mercurial > hg > nodescore

changeset 16:e05eede75e0d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
some cleaning up of html css js
author tzara <rc-web@kiben.net>
date Sun, 08 Jul 2012 23:57:13 +0100
parents 6e6dd1ed032b
children 156151cf3641
files nodescore.js www/m/1.html www/m/2.html www/m/3.html www/m/4.html www/m/controls.html www/m/css/nodescore.css www/m/js/nodescore-client.js
diffstat 8 files changed, 136 insertions(+), 118 deletions(-) [+]
line wrap: on
line diff
--- a/nodescore.js	Sun Jul 08 23:56:26 2012 +0100
+++ b/nodescore.js	Sun Jul 08 23:57:13 2012 +0100
@@ -149,7 +149,6 @@
 		////////////////////////////////////////////
 		
 		var counter = ztime/1000
-		
 		socket.emit('counterText', seq.voice, seq.counter, counter);
 
 		if (counter > 0 && counter <= outcount ) {              
@@ -160,7 +159,7 @@
 		    socket.broadcast.emit('countinFromServer', seq.voice, " ", "","", "white","transparent");
 		}
 		
-		console.log(counter + "========" + totaltime)
+	//	console.log(counter + "========" + totaltime)
 		if (counter > (totaltime)-incount  && counter <= totaltime ) {              
 		    socket.broadcast.emit('countinFromServer', seq.voice, counter-(totaltime-incount), "","", "red","gray");	    
 		}
@@ -171,7 +170,7 @@
 	    	
 		// push out the pulse to metronome	
 		seq.metrobeat = (seq.metrobeat+1)%seq.beatsinbar ;
-     		console.log(seq.metrobeat);
+     		//console.log(seq.metrobeat);
      		socket.broadcast.emit('metroPulse', tempoms, seq.voice,seq.metrobeat); 
 		socket.emit('metroPulse', tempoms, seq.voice,seq.metrobeat);	
 	    }
@@ -182,8 +181,10 @@
 		seq.counter = (seq.counter + 1) % seq.durations.length	    		
 		socket.broadcast.emit("pageFlipfromserver", seq.voice, unit, time, seq.mm,seq.counter);
 		socket.emit("pageFlipfromserver", seq.voice, unit, time, seq.mm,seq.counter);		
+		delete tock;
+	
 		step(seq);     
-
+		
 	    }
 
 	    if (ztime < 0){}	    	    	    
--- a/www/m/1.html	Sun Jul 08 23:56:26 2012 +0100
+++ b/www/m/1.html	Sun Jul 08 23:57:13 2012 +0100
@@ -9,8 +9,7 @@
   <script src="js/jquery.serialScroll-min.js"></script>
   <script src="js/ini.js"></script>
   <script src="/socket.io/socket.io.js"></script>
-  <script src="js/countin.js"></script>
-  <script src="js/client.js"></script>
+  <script src="js/nodescore-client.js"></script>
 </head>
 
 <body onload='document.getElementById("countinnumber").style.visibility="hidden";'>
@@ -46,4 +45,22 @@
     </div>    
   </div>
   
+
+    <div id="screen">    
+      <div id="sections-preview">
+	<ul>
+	  <li><div id="unit00"><div id="content-txt"><p style="color:white; font-size:6em;">wait </p></div></div>	</li>
+	  <li><div id="unit01"><div id="content-txt"><p><img src="img/1280x800/music1.jpg" width="1280px"/></p></div></div>	</li>
+	  <li><div id="unit02"><div id="content-txt"><p><img src="img/1280x800/music2.jpg" width="1280px"/></p></div></div>	</li>
+	  <li><div id="unit03"><div id="content-txt"><p><img src="img/1280x800/music3.jpg" width="1280px"/></p></div></div>	</li>
+	  <li><div id="unit04"><div id="content-txt"><p><img src="img/1280x800/music4.jpg" width="1280px"/></p></div></div>	</li>
+	  <li><div id="unit05"><div id="content-txt"><p><img src="img/1280x800/music5.jpg" width="1280px"/></p></div></div>	</li>
+	  <li><div id="unit06"><div id="content-txt"><p><img src="img/1280x800/music4.jpg" width="1280px"/></p></div></div>	</li>
+	  <li><div id="unit07"><div id="content-txt"><p><img src="img/1280x800/music3.jpg" width="1280px"/></p></div></div>	</li>
+	  <li><div id="unit08"><div id="content-txt"><p><img src="img/1280x800/music2.jpg" width="1280px"/></p></div></div>	</li>
+	  <li><div id="unit09"><div id="content-txt"><p><img src="img/1280x800/music1.jpg" width="1280px"/></p></div></div>	</li>
+	</ul>
+      </div>    
+    </div> 
+
 </body></html>
--- a/www/m/2.html	Sun Jul 08 23:56:26 2012 +0100
+++ b/www/m/2.html	Sun Jul 08 23:57:13 2012 +0100
@@ -10,7 +10,7 @@
   <script src="js/ini.js"></script>
   <script src="/socket.io/socket.io.js"></script>
   <script src="js/countin.js"></script>
-  <script src="js/client.js"></script>
+  <script src="js/nodescore-client.js"></script>
 </head>
 
 <body onload='document.getElementById("countinnumber").style.visibility="hidden";'>
--- a/www/m/3.html	Sun Jul 08 23:56:26 2012 +0100
+++ b/www/m/3.html	Sun Jul 08 23:57:13 2012 +0100
@@ -10,7 +10,7 @@
   <script src="js/ini.js"></script>
   <script src="/socket.io/socket.io.js"></script>
   <script src="js/countin.js"></script>
-  <script src="js/client.js"></script>
+  <script src="js/nodescore-client.js"></script>
 </head>
 
 <body onload='document.getElementById("countinnumber").style.visibility="hidden";'>
--- a/www/m/4.html	Sun Jul 08 23:56:26 2012 +0100
+++ b/www/m/4.html	Sun Jul 08 23:57:13 2012 +0100
@@ -10,7 +10,7 @@
   <script src="js/ini.js"></script>
   <script src="/socket.io/socket.io.js"></script>
   <script src="js/countin.js"></script>
-  <script src="js/client.js"></script>
+  <script src="js/nodescore-client.js"></script>
 </head>
 
 <body onload='document.getElementById("countinnumber").style.visibility="hidden";'>
--- a/www/m/controls.html	Sun Jul 08 23:56:26 2012 +0100
+++ b/www/m/controls.html	Sun Jul 08 23:57:13 2012 +0100
@@ -2,88 +2,80 @@
 <html>
   <head>
     <link href="css/nodescore.css" rel="stylesheet">
-    <link href="css/metronome.css" rel="stylesheet">
     <script src="js/jquery-1.7.1.min.js"></script>
     <script src="/socket.io/socket.io.js"></script>
-     <script src="js/client.js"></script>
+     <script src="js/nodescore-client.js"></script>
     <script src="js/controlseq.js"></script>
   </head>
-  <body>  
 
-  <input type="hidden" id="group" value='1'>
+  <body onload="getLatencies(500);">  
+    <input type="hidden" id="group" value='1'>
+    <div class="page">
+      <div class="outermaster">
+	<div id="client_chronometer">00:00:00.0</div>
+	<div class="metrocase">
+	  <div id="metronome0"></div>
+	  <div id="metronome1"></div>
+	  <div id="metronome2"></div>
+	  <div id="metronome3"></div>
+	</div>
+	
+	
+	<div class="outersquare">      
+	  <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>      <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();" />
+	  
+	  <br><br>
+	</div>
 
-  <div class="page">
-    <div class="outermaster">
-      <div id="client_chronometer">00:00:00.0</div>
-      <div class="metrocase">
-	<div id="metronome0"></div>
-	<div id="metronome1"></div>
-	<div id="metronome2"></div>
-	<div id="metronome3"></div>
-      </div>
+      <div class="latencies">	
+	<h2>Latency:</h2>
+	<h1 id="client_latency">0ms</h2>
+</div>
+
+      </div>	
       
 
-    <div class="outersquare">
-      
-      <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();" />
-
-      <br><br>
-    </div>
-      
-      <div class="latencies">
-	<h2>Calculate Client Latencies</h2><br>
-	<input type="button" value="Get Latencies" onclick="getLatencies(1000);" />
-	<h2 id="client_latency">0ms</h2>
-      </div>
-    </div>
-
-    </div>
+</div>
       
 
 
--- a/www/m/css/nodescore.css	Sun Jul 08 23:56:26 2012 +0100
+++ b/www/m/css/nodescore.css	Sun Jul 08 23:57:13 2012 +0100
@@ -45,27 +45,42 @@
     top: 10%
 }
 
+#preview{
+    height: 240px;
+    width: 400px;
+    border: 1px solid blue;
+    position: absolute;
+    padding: 5px 5px 5px 5px ;
+    color: black;
+    bottom: 0%;
+    right: 0px;
+}
+
+
 .outersquare{
-    height: 220px;
-    width: 300px;
+    height: 300px;
+    width: 385px;
     border: 1px solid blue;
     position: absolute;
     top: 100px;
     left: 400px;
-    padding: 5px 5px 5px 5px ;
+    padding: 1px 1px 1px 1px ;
     background-color: black;
 }
 
 .latencies{
-    height: 150px;
-    width: 300px;
+    height: 90px;
+    width: 200px;
     border: 1px solid blue;
     position: relative;
+    float: right;
     top: 15%;
     padding: 5px 5px 5px 5px ;
-    background-color: gray;
+    background-color: blue;
+    
 }
 
+
 .metrocase {
     position: absolute;
     top: 10px;
@@ -124,13 +139,15 @@
 }
 
 .magicsquare {
+    border: 2px solid white;
+    padding: 1px 1px 1px 1 px;
     background: blue;
-    width: 50px;
-    height: 50px;
+    width: 60px;
+    height: 60px;
     border-radius: 10px;
     float: left;
     color: black;
-    font-size: 2em;    
+    font-size: 4em;    
     text-align: center;
 }​
 
--- a/www/m/js/nodescore-client.js	Sun Jul 08 23:56:26 2012 +0100
+++ b/www/m/js/nodescore-client.js	Sun Jul 08 23:57:13 2012 +0100
@@ -26,32 +26,9 @@
 					 })  
 	}
 
-
-
 function metronomeTick(pulse, voice,metrobeat) {
-    console.log( voice+ "   metronome tick" + metrobeat)
     var color = "gray"
-
     metroCss(0, "red", "4")    
-
-//if (metrobeat == 0) {
-//	metroCss(0, "gray", "1")
-  //  }   
-    
-    //if (metrobeat == 3) {
-//	metroCss(0, "white", "4")
-  //  }   
-
-//    if (metrobeat == 1||metrobeat == 2){ 
-//	$("#metronome"+metrobeat).stop();
-//	$("#metronome"+metrobeat).css('background-color', color);
-//	$("#metronome"+metrobeat).text(" ");
-	//$("#metronome"+metrobeat).text(metrobeat+1);
-//	$("#metronome"+metrobeat).animate({opacity: 1},
-//				      50,
-  //                          function() { $(this).animate({opacity:0.0}); }
-//				     );
-  //  }
 };
 
 /////////////////////////////////////////////////
@@ -66,11 +43,15 @@
 function pageFlip(unit) {
     console.log("flipping page:"+ unit);
     $('#sections').trigger('goto', [parseFloat(unit)]); 
+//    $('#sections-preview').trigger('goto', [parseFloat(unit+1)]); 
     //metroStart(1000); 
     //document.getElementById("countdowncase").style.visibility="hidden";
 }
 
+
+
 /////////////////////////////////////////////////
+
 // call the fancy jquery functions
 
 function slideTo (target) { $('#sections').trigger('goto', [target]); }
@@ -81,15 +62,25 @@
 socket.on("pageFlipfromserver", pageTurn);
 function pageTurn (group,unit,time,mm) {
     var groupPage=document.getElementById('group').value;
-    console.log("fromservercommand has been executed on client");
+    //console.log("fromservercommand has been executed on client");
     if (group == groupPage) {
 	var g= pad2(group); 
 	var p= pad2(unit);
-	pageFlip(unit); 
-    }
+//	pageFlip(unit); 
+	pageTurnB(p)
+ 
+   }
     else { 
 	console.log("not for this group... ignoring... for group:" + group );
     }
 }
 
-/////////////////////////////////////////////////
\ No newline at end of file
+/////////////////////////////////////////////////
+
+function pageTurnB(unit) {
+    console.log("HOP TURN" + unit);
+    $("#live").html($("#unit"+unit).html());
+
+}
+
+////////////////////////////////////////////////
\ No newline at end of file