changeset 11:0a8133490050

absorbed metronome.js .css into main css and client files also some minor html5 and css changes
author tzara <rc-web@kiben.net>
date Sat, 07 Jul 2012 07:10:56 +0000
parents 0e5543ccb8fb
children d2eda8be1fca
files INSTALL 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/metronome.css www/m/css/nodescore.css www/m/js/client.js www/m/js/metronome.js
diffstat 11 files changed, 138 insertions(+), 141 deletions(-) [+]
line wrap: on
line diff
--- a/INSTALL	Fri Jul 06 10:48:15 2012 +0100
+++ b/INSTALL	Sat Jul 07 07:10:56 2012 +0000
@@ -20,7 +20,7 @@
 
 mkdir -p /tmp/build/node && cd /tmp/build/node
 git clone https://github.com/joyent/node.git .
-git checkout v0.6.7
+git checkout v0.8.0
 
 ./configure --openssl-libpath=/usr/lib/ssl
 make
--- a/nodescore.js	Fri Jul 06 10:48:15 2012 +0100
+++ b/nodescore.js	Sat Jul 07 07:10:56 2012 +0000
@@ -20,7 +20,7 @@
 	clientFiles.serve(request, response);	    
     });    
 });
-httpServer.listen(8888);
+httpServer.listen(8889);
 
 ////////////////////////////////////////////
 // connect to websockets 
--- a/www/m/1.html	Fri Jul 06 10:48:15 2012 +0100
+++ b/www/m/1.html	Sat Jul 07 07:10:56 2012 +0000
@@ -4,17 +4,13 @@
   <link href="css/nodescore.css" rel="stylesheet">
   <link href="css/slider.css" rel="stylesheet">
   <link href="css/chat.css" rel="stylesheet">
-  <link href="css/metronome.css" rel="stylesheet">
   <script src="js/jquery-1.7.1.min.js"></script>  
   <script src="js/jquery.scrollTo-min.js"></script>
   <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/metronome.js"></script>
   <script src="js/countin.js"></script>
   <script src="js/client.js"></script>
-  
-
 </head>
 
 <body onload='document.getElementById("countinnumber").style.visibility="hidden";'>
--- a/www/m/2.html	Fri Jul 06 10:48:15 2012 +0100
+++ b/www/m/2.html	Sat Jul 07 07:10:56 2012 +0000
@@ -4,20 +4,13 @@
   <link href="css/nodescore.css" rel="stylesheet">
   <link href="css/slider.css" rel="stylesheet">
   <link href="css/chat.css" rel="stylesheet">
-  <link href="css/metronome.css" rel="stylesheet">
-  <link href="css/smoothness/jquery-ui-1.8.17.custom.css" rel="stylesheet">
-  <script src="js/jquery-1.7.1.min.js"></script>
-  
-  <script src="js/jquery-ui-1.8.17.custom.min.js"></script>
+  <script src="js/jquery-1.7.1.min.js"></script>  
   <script src="js/jquery.scrollTo-min.js"></script>
   <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/metronome.js"></script>
+  <script src="js/countin.js"></script>
   <script src="js/client.js"></script>
-  <script src="js/countdown.js"></script>
-  
 </head>
 
 <body onload='document.getElementById("countinnumber").style.visibility="hidden";'>
@@ -30,16 +23,15 @@
 	<div id="metronome1"></div>
 	<div id="metronome2"></div>
 	<div id="metronome3"></div>
-      </div>
-
-    <div id="client_chronometer"  style="z-index: 2;">00:00:00.0</div>
-
-	<div id="countinnumber"></div>
+    </div>
     
+    <div id="client_chronometer"  style="z-index: 2;">00:00:00.0</div>    
+    <div id="countinnumber"></div>
+  
     <div id="screen">    
       <div id="sections">
 	<ul>
-	  <li><div id="unit00"><div id="content-txt"><p>wait </p></div></div>	</li>
+	  <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>
--- a/www/m/3.html	Fri Jul 06 10:48:15 2012 +0100
+++ b/www/m/3.html	Sat Jul 07 07:10:56 2012 +0000
@@ -4,20 +4,13 @@
   <link href="css/nodescore.css" rel="stylesheet">
   <link href="css/slider.css" rel="stylesheet">
   <link href="css/chat.css" rel="stylesheet">
-  <link href="css/metronome.css" rel="stylesheet">
-  <link href="css/smoothness/jquery-ui-1.8.17.custom.css" rel="stylesheet">
-  <script src="js/jquery-1.7.1.min.js"></script>
-  
-  <script src="js/jquery-ui-1.8.17.custom.min.js"></script>
+  <script src="js/jquery-1.7.1.min.js"></script>  
   <script src="js/jquery.scrollTo-min.js"></script>
   <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/metronome.js"></script>
+  <script src="js/countin.js"></script>
   <script src="js/client.js"></script>
-  <script src="js/countdown.js"></script>
-  
 </head>
 
 <body onload='document.getElementById("countinnumber").style.visibility="hidden";'>
@@ -30,16 +23,15 @@
 	<div id="metronome1"></div>
 	<div id="metronome2"></div>
 	<div id="metronome3"></div>
-      </div>
-
-    <div id="client_chronometer"  style="z-index: 2;">00:00:00.0</div>
-
-	<div id="countinnumber"></div>
+    </div>
     
+    <div id="client_chronometer"  style="z-index: 2;">00:00:00.0</div>    
+    <div id="countinnumber"></div>
+  
     <div id="screen">    
       <div id="sections">
 	<ul>
-	  <li><div id="unit00"><div id="content-txt"><p>wait </p></div></div>	</li>
+	  <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>
--- a/www/m/4.html	Fri Jul 06 10:48:15 2012 +0100
+++ b/www/m/4.html	Sat Jul 07 07:10:56 2012 +0000
@@ -4,20 +4,13 @@
   <link href="css/nodescore.css" rel="stylesheet">
   <link href="css/slider.css" rel="stylesheet">
   <link href="css/chat.css" rel="stylesheet">
-  <link href="css/metronome.css" rel="stylesheet">
-  <link href="css/smoothness/jquery-ui-1.8.17.custom.css" rel="stylesheet">
-  <script src="js/jquery-1.7.1.min.js"></script>
-  
-  <script src="js/jquery-ui-1.8.17.custom.min.js"></script>
+  <script src="js/jquery-1.7.1.min.js"></script>  
   <script src="js/jquery.scrollTo-min.js"></script>
   <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/metronome.js"></script>
+  <script src="js/countin.js"></script>
   <script src="js/client.js"></script>
-  <script src="js/countdown.js"></script>
-  
 </head>
 
 <body onload='document.getElementById("countinnumber").style.visibility="hidden";'>
@@ -30,16 +23,15 @@
 	<div id="metronome1"></div>
 	<div id="metronome2"></div>
 	<div id="metronome3"></div>
-      </div>
-
-    <div id="client_chronometer"  style="z-index: 2;">00:00:00.0</div>
-
-	<div id="countinnumber"></div>
+    </div>
     
+    <div id="client_chronometer"  style="z-index: 2;">00:00:00.0</div>    
+    <div id="countinnumber"></div>
+  
     <div id="screen">    
       <div id="sections">
 	<ul>
-	  <li><div id="unit00"><div id="content-txt"><p>wait </p></div></div>	</li>
+	  <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>
--- a/www/m/controls.html	Fri Jul 06 10:48:15 2012 +0100
+++ b/www/m/controls.html	Sat Jul 07 07:10:56 2012 +0000
@@ -5,15 +5,14 @@
     <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/metronome.js"></script>
-    <script src="js/client.js"></script>
+     <script src="js/client.js"></script>
     <script src="js/controlseq.js"></script>
   </head>
   <body>  
 
   <input type="hidden" id="group" value='1'>
 
-	<h1>Multicast Network Score Controls</h1>
+  <div class="page">
     <div class="outermaster">
       <div id="client_chronometer">00:00:00.0</div>
       <div class="metrocase">
@@ -23,13 +22,9 @@
 	<div id="metronome3"></div>
       </div>
       
-      <div>
-	<h2>Calculate Client Latencies</h2><br>
-	<input type="button" value="Get Latencies" onclick="getLatencies(1000);" />
-	<h2 id="client_latency">0ms</h2>
-      </div>
-      	  
-	  <h2>Magic Sequencer Monitor</h2><br>	  
+
+    <div class="outersquare">
+      
       <div>
 	<p class="magicsquare" id="1magicsquare0"></p>
 	<p class="magicsquare" id="1magicsquare1"></p>
@@ -70,7 +65,7 @@
 	<p class="magicsquare" id="4magicsquare4"></p>
 	<p class="magicsquare" id="4magicsquare5"></p>
       </div>
-      
+
       <br><br>      <br><br>
       
 
@@ -79,17 +74,21 @@
       <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>
+      
 
 
 
 
-<a href="JavaScript:newPopup('http://nodescore.kiben.net:8889/msq/1.html');">client_1</a>
-<a href="JavaScript:newPopup('http://nodescore.kiben.net:8889/msq/2.html');">client_2</a>
-<a href="JavaScript:newPopup('http://nodescore.kiben.net:8889/msq/3.html');">client_3</a>
-<a href="JavaScript:newPopup('http://nodescore.kiben.net:8889/msq/4.html');">client_4</a>
-
-
 
     
 </body>
--- a/www/m/css/metronome.css	Fri Jul 06 10:48:15 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,20 +0,0 @@
-.metrocase {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    color: black;
-    text-align: center;
-    font-size: 4em;
-    font-color: black;
-    background: transparent;
-    width: 240px;
-    height: 60px;
-    z-index: 2;
-    padding: 5px 5px 5px 5px; 
-    border: 1px solid gray;
-}
-
-#metronome0 { width: 60px; height: 60px; border-radius: 30px; float:left; }
-#metronome1 { width: 60px; height: 60px; border-radius: 30px; float:left; }
-#metronome2 { width: 60px; height: 60px; border-radius: 30px; float:left; }
-#metronome3 { width: 60px; height: 60px; border-radius: 30px; float:left; }
\ No newline at end of file
--- a/www/m/css/nodescore.css	Fri Jul 06 10:48:15 2012 +0100
+++ b/www/m/css/nodescore.css	Sat Jul 07 07:10:56 2012 +0000
@@ -9,7 +9,6 @@
     background-color: white;
     display: inline;
     color: #666;
-  //  padding: 0px 10px 0px 10px ;
     z-index: 2;
 }
 
@@ -30,6 +29,12 @@
     list-style:none;
 }
 
+
+.page{
+    height: 1000px;;
+    width: 1280px;
+}
+
 .outermaster{
     height: 800px;
     width: 1280px;
@@ -37,8 +42,50 @@
     position: relative;
     padding: 5px 5px 5px 5px ;
     color: black;
+    top: 10%
 }
 
+.outersquare{
+    height: 220px;
+    width: 300px;
+    border: 1px solid blue;
+    position: absolute;
+    top: 100px;
+    left: 400px;
+    padding: 5px 5px 5px 5px ;
+    background-color: black;
+}
+
+.latencies{
+    height: 150px;
+    width: 300px;
+    border: 1px solid blue;
+    position: relative;
+    top: 15%;
+    padding: 5px 5px 5px 5px ;
+    background-color: gray;
+}
+
+.metrocase {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    color: black;
+    text-align: center;
+    font-size: 4em;
+    font-color: black;
+    background: transparent;
+    width: 240px;
+    height: 60px;
+    z-index: 2;
+    padding: 5px 5px 5px 5px; 
+    border: 1px solid gray;
+}
+
+#metronome0 { width: 60px; height: 60px; border-radius: 30px; float:left; }
+#metronome1 { width: 60px; height: 60px; border-radius: 30px; float:left; }
+#metronome2 { width: 60px; height: 60px; border-radius: 30px; float:left; }
+#metronome3 { width: 60px; height: 60px; border-radius: 30px; float:left; }
 
 #fluid {}
 .fluid-img{height:50%; width:50%;}
--- a/www/m/js/client.js	Fri Jul 06 10:48:15 2012 +0100
+++ b/www/m/js/client.js	Sat Jul 07 07:10:56 2012 +0000
@@ -3,6 +3,57 @@
 
 var socket = io.connect();
 
+//socket.on("metroPulse", metronomeTick);
+/////////////////////////////////////////////////
+socket.on("metroPulse", pulseInClient);
+function pulseInClient(pulse,groupID,metrobeat){
+    var groupPage=document.getElementById('group').value
+    if (groupID == groupPage) {
+	metronomeTick(1000, groupID, metrobeat);
+    }
+}
+/////////////////////////////////////////////////
+function  metroCss(beat, beatcolor,text){
+    var color = beatcolor;
+    
+    $(".metrocase > div").each(function(){$(this).stop()});
+    $(".metrocase > div").each(function(){$(this).css('background-color', beatcolor)});
+    $(".metrocase > div").each(function(){$(this).text(" ")});
+    $(".metrocase > div").each(function(){$(this).animate({opacity: 0.5},
+							  50,
+							  function() { $(this).animate({opacity:0.0}); }
+							 );
+					 })  
+	}
+
+
+
+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}); }
+//				     );
+  //  }
+};
+
 /////////////////////////////////////////////////
 
 // update the stopwatch value on the client page in line with server
--- a/www/m/js/metronome.js	Fri Jul 06 10:48:15 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,52 +0,0 @@
-var socket = io.connect();
-
-//socket.on("metroPulse", metronomeTick);
-/////////////////////////////////////////////////
-socket.on("metroPulse", pulseInClient);
-function pulseInClient(pulse,groupID,metrobeat){
-    var groupPage=document.getElementById('group').value
-    if (groupID == groupPage) {
-	metronomeTick(1000, groupID, metrobeat);
-    }
-}
-/////////////////////////////////////////////////
-function  metroCss(beat, beatcolor,text){
-    var color = beatcolor;
-    
-    $(".metrocase > div").each(function(){$(this).stop()});
-    $(".metrocase > div").each(function(){$(this).css('background-color', beatcolor)});
-    $(".metrocase > div").each(function(){$(this).text(" ")});
-    $(".metrocase > div").each(function(){$(this).animate({opacity: 0.5},
-							  50,
-							  function() { $(this).animate({opacity:0.0}); }
-							 );
-					 })  
-	}
-
-
-
-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}); }
-//				     );
-  //  }
-};
\ No newline at end of file