Mercurial > hg > nodescore

changeset 23:e1a02869da08

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
reduced to one score file with menu to choose which part stream to receive added latency results to client and tweeked some css
author tzara <rc-web@kiben.net>
date Wed, 11 Jul 2012 14:17:43 +0100
parents bb02a593b7d5
children 22f1c38007ff
files nodescore nodescore.js www/m/1.html www/m/2.html www/m/3.html www/m/4.html www/m/5.html www/m/css/menu.css www/m/css/nodescore.css www/m/js/nodescore-client.js www/m/score.html www/m/seta/img/thumbs/1.png www/m/seta/img/thumbs/2.png www/m/seta/img/thumbs/3.png www/m/seta/img/thumbs/4.png www/m/seta/img/thumbs/5.png www/m/seta/img/thumbs/6.png
diffstat 17 files changed, 336 insertions(+), 318 deletions(-) [+]
line wrap: on
line diff
--- a/nodescore	Wed Jul 11 09:51:05 2012 +0100
+++ b/nodescore	Wed Jul 11 14:17:43 2012 +0100
@@ -9,7 +9,7 @@
 # nodescore@kiben.net
 # nodescore.kiben.net
 
-SERVER='http://192.168.1.84:8889'
+SERVER='http://192.168.1.111:8889'
 BASEDIR='www/m'
 PROJECT='seta'
 THUMBPATH=$BASEDIR/$PROJECT/img/thumbs
@@ -21,4 +21,4 @@
 
 node nodescore.js &
 sleep 2;
-sh ss2thumb.sh $PROJECT $SERVER;
\ No newline at end of file
+sh ss2thumb.sh $PROJECT $SERVER;
--- a/nodescore.js	Wed Jul 11 09:51:05 2012 +0100
+++ b/nodescore.js	Wed Jul 11 14:17:43 2012 +0100
@@ -103,30 +103,58 @@
     socket.on('startChr', function () { startChr();});
     socket.on('stopChr', function () { stopChr();});
     socket.on('resetChr', function () { resetChr();});
-     
-    ////////////////////////////////////////////
-    // 
-    ///////////////////////////////////////////
-
-
 
     ////////////////////////////////////////////  
     // some latency calculations
     ///////////////////////////////////////////
 
+    /*
+      a ping is periodically broadcast to all connected clients each
+      connected returns a pong to the server via an "emit" and in turn
+      the server returns each unique client a report of the latency
+      via another emit - the emit only sends to the source of the
+      request, whereas the broadcast.emit..  broadcasts.. ie to all
+      connected clients
+
+      TODO: smooth range and average out results to remove erratic ping
+      times.
+
+      TODO:
+      The result then needs to be used to stagger outgoing messages to
+      compensate for latency - how much compensation is more connected
+      to the time that any audio/video feed needs to encode/decode as
+      the latency of the route from node A to node B is inavoidable?!
+      so maybe latency is irrelevant in this context - we just need to
+      stagger signals according to encoding decoding times.. hmmm
+    */
+    
+
+
+// periodically broadcast  a ping
+
     function serverTime(freq) {
 	//	clearInterval();
 	st=setInterval(function() {
 	    var d = new Date(); var n = d.getTime(); 
 	    socket.emit("timeFromServer", n); 
+	    socket.broadcast.emit("timeFromServer", n); 
+
 	}, freq);   
     }
+
+    // recieve the pong calculate the latency and
+    // return the response to the client
+
     socket.on("clientTimeResponse", function(x) {
 	var d = new Date(); var n = d.getTime();
 	var latency = (n-x)/2;
 	//console.log("SERVERTIME:"+x + " LATENCY:" + latency);
 	socket.emit("latencyFromServer", latency);
+
     });	      
+
+    // this is the trigger from the control client to start the process
+    // maybe remove this and have latency connections constantly running
     
     socket.on("getLatencies", function(x){
 	serverTime(x);
@@ -213,13 +241,12 @@
 	}, tempoms)
 
 
-	socket.on('stopSeq', function (seq) { 
-	    console.log("stop")
-	    clearInterval(tock);	    
-	    sequencerState=0;  
-	    stopChr();
-	});
-
+//	socket.on('stopSeq', function (seq) { 
+//	    console.log("stop")
+//	    clearInterval(tock);	    
+//	    sequencerState=0;  
+//	    stopChr();
+//	});
 			  };
     
     step = function (seq) {
--- a/www/m/1.html	Wed Jul 11 09:51:05 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <link href="css/nodescore.css" rel="stylesheet">
-  <link href="css/slider.css" rel="stylesheet">
-  <link href="css/chat.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/nodescore-client.js"></script>
-</head>
-
-<body onload='document.getElementById("countinnumber").style.visibility="hidden";'>
-
-  <input type="hidden" id="group" value='1'>
- 
-  <div class="outermaster"> 
-    <div class="metrocase">
-	<div id="metronome0"></div>
-	<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 id="screen">    
-      <div id="sections">
-	<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>    
-  </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	Wed Jul 11 09:51:05 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <link href="css/nodescore.css" rel="stylesheet">
-  <link href="css/slider.css" rel="stylesheet">
-  <link href="css/chat.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/countin.js"></script>
-  <script src="js/nodescore-client.js"></script>
-</head>
-
-<body onload='document.getElementById("countinnumber").style.visibility="hidden";'>
-
-  <input type="hidden" id="group" value='2'>
- 
-  <div class="outermaster"> 
-    <div class="metrocase">
-	<div id="metronome0"></div>
-	<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 id="screen">    
-      <div id="sections">
-	<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>    
-  </div>
-  
-</body></html>
--- a/www/m/3.html	Wed Jul 11 09:51:05 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <link href="css/nodescore.css" rel="stylesheet">
-  <link href="css/slider.css" rel="stylesheet">
-  <link href="css/chat.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/countin.js"></script>
-  <script src="js/nodescore-client.js"></script>
-</head>
-
-<body onload='document.getElementById("countinnumber").style.visibility="hidden";'>
-
-  <input type="hidden" id="group" value='3'>
- 
-  <div class="outermaster"> 
-    <div class="metrocase">
-	<div id="metronome0"></div>
-	<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 id="screen">    
-      <div id="sections">
-	<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>    
-  </div>
-  
-</body></html>
--- a/www/m/4.html	Wed Jul 11 09:51:05 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <link href="css/nodescore.css" rel="stylesheet">
-  <link href="css/slider.css" rel="stylesheet">
-  <link href="css/chat.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/countin.js"></script>
-  <script src="js/nodescore-client.js"></script>
-</head>
-
-<body onload='document.getElementById("countinnumber").style.visibility="hidden";'>
-
-  <input type="hidden" id="group" value='4'>
- 
-  <div class="outermaster"> 
-    <div class="metrocase">
-	<div id="metronome0"></div>
-	<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 id="screen">    
-      <div id="sections">
-	<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>    
-  </div>
-  
-</body></html>
--- a/www/m/5.html	Wed Jul 11 09:51:05 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <link href="css/nodescore.css" rel="stylesheet">
-  <link href="css/chat.css" rel="stylesheet">
-  <script src="js/jquery-1.7.1.min.js"></script>  
-  <script src="/socket.io/socket.io.js"></script>
-  <script src="js/nodescore-client.js"></script>
-</head>
-
-<body onload='document.getElementById("countinnumber").style.visibility="hidden";'>
-
-  <input type="hidden" id="group" value='1'> 
-
-  <div class="outermaster"> 
-    <div class="metrocase" id="metro">
-	<div id="metronome0"></div>
-	<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 id="live"> </div>    
-    <div id="preview"></div>    
-    <div id="datetime"></div>
-  </div>    
-</body>
-</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/m/css/menu.css	Wed Jul 11 14:17:43 2012 +0100
@@ -0,0 +1,154 @@
+#nav {
+    margin: 0;
+    padding: 1px 1px 0;
+    background: #7d7d7d;
+    line-height: 100%;
+
+    border-radius: 1em;
+    -webkit-border-radius: 1em;
+    -moz-border-radius: 1em;
+
+    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
+    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
+    position:absolute;
+    left: 0px;
+    bottom: 2px;
+}
+#nav li {
+    margin: 0 5px;
+    padding: 0 0 8px;
+    float: left;
+    position: relative;
+    list-style: none;
+}
+
+
+/* main level link */
+#nav a {
+    font-weight: bold;
+    color: #e7e5e5;
+    text-decoration: none;
+    display: block;
+    padding:  8px 20px;
+    margin: 0;
+
+    -webkit-border-radius: 1.6em;
+    -moz-border-radius: 1.6em;
+    
+    text-shadow: 0 1px 1px rgba(0,0,0, .3);
+}
+#nav a:hover {
+    background: #000;
+    color: #fff;
+}
+
+/* main level link hover */
+#nav .current a, #nav li:hover > a {
+    background: #666;
+    color: #444;
+    border-top: solid 1px #f8f8f8;
+
+    -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
+    -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
+    box-shadow: 0 1px 1px rgba(0,0,0, .2);
+
+    text-shadow: 0 1px 0 rgba(255,255,255, 1);
+}
+
+/* sub levels link hover */
+#nav ul li:hover a, #nav li:hover li a {
+    background: none;
+    border: none;
+    color: #666;
+
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+}
+#nav ul a:hover {
+    background: #0078ff !important;
+    color: #fff !important;
+
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+
+    text-shadow: 0 1px 1px rgba(0,0,0, .1);
+}
+
+/* dropdown */
+#nav li:hover > ul {
+    display: block;
+}
+
+/* level 2 list */
+#nav ul {
+    display: none;
+
+    margin: 0;
+    padding: 0;
+    width: 185px;
+    position: absolute;
+    top: -55px;
+    left: 0;
+    background: #ddd;
+    border: solid 1px #b4b4b4;
+
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+
+    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
+    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
+    box-shadow: 0 1px 3px rgba(0,0,0, .3);
+}
+#nav ul li {
+    float: none;
+    margin: 0;
+    padding: 0;
+}
+
+#nav ul a {
+    font-weight: normal;
+    text-shadow: 0 1px 0 #fff;
+}
+
+/* level 3+ list */
+#nav ul ul {
+    left: 181px;
+    top: -3px;
+}
+
+/* rounded corners of first and last link */
+#nav ul li:first-child > a {
+    -webkit-border-top-left-radius: 9px;
+    -moz-border-radius-topleft: 9px;
+
+    -webkit-border-top-right-radius: 9px;
+    -moz-border-radius-topright: 9px;
+}
+#nav ul li:last-child > a {
+    -webkit-border-bottom-left-radius: 9px;
+    -moz-border-radius-bottomleft: 9px;
+
+    -webkit-border-bottom-right-radius: 9px;
+    -moz-border-radius-bottomright: 9px;
+}
+
+/* clearfix */
+#nav:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+}
+#nav {
+    display: inline-block;
+} 
+html[xmlns] #nav {
+    display: block;
+}
+ 
+* html #nav {
+    height: 1%;
+}
\ No newline at end of file
--- a/www/m/css/nodescore.css	Wed Jul 11 09:51:05 2012 +0100
+++ b/www/m/css/nodescore.css	Wed Jul 11 14:17:43 2012 +0100
@@ -92,39 +92,75 @@
 }
 
 #datetime{
-    opacity: 0.6;
-    height: 30px;
-    width: 700px;
-    font-size:2em;
+    display:table-cell; 
+    vertical-align:bottom;
+    opacity: 0.7;
+    height: 25px;
+    text-align: center;
+    width: 858px;
+    font-size:1.5em;
     color: white;
-    border: 1px solid white;
+    border: 1px solid blue;
     position: absolute;
     float: left;
-    bottom: 1px;
-    padding: 5px 5px 5px 5px ;
-    background-color: blue;    
+    left: 206px;
+    top: 25px;
+
+    background-color: black;    
 }
 
+#current{
+    opacity: 0.7;
+    height: 25px;
+    text-align: center;
+    width: 130px;
+    font-size:1.5em;
+    color: white;
+    border: 1px solid blue;
+    position: absolute;
+    float: left;
+    left: 210px;
+    top: 25px;
+    background-color: black;    
+    z-index: 1;
+}
+
+#client_latency{
+    opacity: 0.7;
+    height: 25px;
+    text-align: center;
+    width: 160px;
+    font-size:1.5em;
+    color: white;
+    border: 1px solid blue;
+    position: absolute;
+    float: left;
+    right: 220px;
+    top: 25px;
+    background-color: black;    
+    z-index: 1;
+}
+
+
 .metrocase {
     position: absolute;
-    top: 10px;
-    left: 10px;
+    top: 0px;
+    left: 0px;
     color: black;
     text-align: center;
     font-size: 4em;
     font-color: black;
     background: transparent;
-    width: 240px;
-    height: 60px;
+    width: 200px;
+    height: 50px;
     z-index: 2;
-    padding: 5px 5px 5px 5px; 
     border: 1px solid blue;
 }
 
-#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; }
+#metronome0 { width: 50px; height: 40px; border-radius: 30px; float:left; }
+#metronome1 { width: 50px; height: 40px; border-radius: 30px; float:left; }
+#metronome2 { width: 50px; height: 40px; border-radius: 30px; float:left; }
+#metronome3 { width: 50px; height: 40px; border-radius: 30px; float:left; }
 
 #fluid {}
 .fluid-img{height:50%; width:50%;}
@@ -137,15 +173,16 @@
 #client_chronometer{ 
     border: 1px solid blue ; 
     background-color: black;   
-    color: #666;
-    font-size: 6em;    
-    color: white; 
-    opacity:0.5;
+    color: white;
+    font-size: 3.5em;
+    text-align: center;
+    opacity:0.7;
     position: absolute;
-    right: 10px;
-    top: 8px;
-    padding: 5px 5px 5px 5px;
-    width: 350px;
+    right: 0px;
+    top: 0px;
+//    padding: 2px 2px 2px 2px;
+    width: 220px;
+    height: 50px;
     z-position: 2;
 }
 
@@ -175,36 +212,3 @@
   display: table-cell;
   vertical-align: middle;
 }
-
-
-#blanket {
-background-color:#111;
-opacity: 0.65;
-border: 3px solid blue;
-*background:none;
-position:absolute;
-z-index: 9001;
-top:0px;
-left:0px;
-width:100%;
-}
-
-#popUpDiv {
-position:absolute;
-*background:url(pop-back.jpg) no-repeat;
-background-color:gray;
-width:300px;
-height:300px;
-border:5px solid blue;
-z-index: 9002;
-}
-
-#popUpMetro {
-position:absolute;
-*background:url(pop-back.jpg) no-repeat;
-background-color:gray;
-width:300px;
-height:300px;
-border:5px solid blue;
-z-index: 9002;
-}
--- a/www/m/js/nodescore-client.js	Wed Jul 11 09:51:05 2012 +0100
+++ b/www/m/js/nodescore-client.js	Wed Jul 11 14:17:43 2012 +0100
@@ -19,7 +19,7 @@
     $(".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},
+    $(".metrocase > div").each(function(){$(this).animate({opacity: 0.6},
 							  50,
 							  function() { $(this).animate({opacity:0.0}); }
 							 );
@@ -45,7 +45,7 @@
 //if (groupID == groupPage) {
     socket.on("dateTime", function(datetime) {
 //	console.log(datetime)
-	$("div#datetime").text("server time: " +datetime);
+	$("div#datetime").text("Server Time: " +datetime);
 	
     });
 
@@ -169,3 +169,22 @@
     });
 
 ////////////////////////////////////////////////
+// this needs to have a variable to define the websocket
+// otherwise we will pings from all sockets connected
+// no! the server broadcasts the ping and the clients emit the pong!
+// ah but then the time reported back from the server needs to be targeted
+// 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.")
+    console.log(latency)
+});
+
+function getLatencies(x) { socket.emit("getLatencies", x); }
+
+//////////////////////////////////////////////
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/m/score.html	Wed Jul 11 14:17:43 2012 +0100
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link href="css/nodescore.css" rel="stylesheet">
+  <link href="css/chat.css" rel="stylesheet">
+  <link href="css/menu.css" rel="stylesheet">
+
+  <script src="js/jquery-1.7.1.min.js"></script>  
+  <script src="/socket.io/socket.io.js"></script>
+  <script src="js/nodescore-client.js"></script>
+</head>
+
+<body onload='document.getElementById("countinnumber").style.visibility="hidden";'>
+
+  <input type="hidden" id="group" value='1'> 
+
+  <div class="outermaster"> 
+
+    <ul id="nav">
+ 
+  <li><a href="javascript:void(0)">Menu</a>
+    <ul>
+      <li><a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='3'">SELECT PART:</a>
+	<ul>
+	  <a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='1'; $('div#current').text('GROUP 1').text='1'">GROUP 1</a>
+	  <a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='2'; $('div#current').text('GROUP 2').text='2'">GROUP 2</a>
+	  <a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='3'; $('div#current').text('GROUP 3').text='3'">GROUP 3</a>
+	  <a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='4'; $('div#current').text('GROUP 4').text='4'">GROUP 4</a>
+	</ul>
+      </li>
+      
+      <li><a href="http://nodescore.kiben.net">help</a></li>
+      <li><a href="http://nodescore.kiben.net:8889/m/controls.html">control panel</a></li>
+      </ul>
+    </li>
+</ul>
+
+    <div id="current">GROUP: 1</div>    
+    <div id="client_latency">Latency: 0ms</div>    
+
+    <div class="metrocase" id="metro">
+	<div id="metronome0"></div>
+	<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 id="live"> </div>    
+    <div id="preview"></div>    
+    <div id="datetime"></div>
+  </div>    
+
+</body>
+</html>
Binary file www/m/seta/img/thumbs/1.png has changed
Binary file www/m/seta/img/thumbs/2.png has changed
Binary file www/m/seta/img/thumbs/3.png has changed
Binary file www/m/seta/img/thumbs/4.png has changed
Binary file www/m/seta/img/thumbs/5.png has changed
Binary file www/m/seta/img/thumbs/6.png has changed