# HG changeset patch # User tzara # Date 1342012663 -3600 # Node ID e1a02869da087f7324a0e703799c0714ac19344e # Parent bb02a593b7d5ba88be6e49e75c0325f7a899c17c reduced to one score file with menu to choose which part stream to receive added latency results to client and tweeked some css diff -r bb02a593b7d5 -r e1a02869da08 nodescore --- 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; diff -r bb02a593b7d5 -r e1a02869da08 nodescore.js --- 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) { diff -r bb02a593b7d5 -r e1a02869da08 www/m/1.html --- 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 @@ - - - - - - - - - - - - - - - - - - -

- -

00:00:00.0

- -

wait

- - -

wait

- - diff -r bb02a593b7d5 -r e1a02869da08 www/m/2.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 @@ - - - - - - - - - - - - - - - - - - - -

- -

00:00:00.0

- -

wait

- - diff -r bb02a593b7d5 -r e1a02869da08 www/m/3.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 @@ - - - - - - - - - - - - - - - - - - - -

- -

00:00:00.0

- -

wait

- - diff -r bb02a593b7d5 -r e1a02869da08 www/m/4.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 @@ - - - - - - - - - - - - - - - - - - - -

- -

00:00:00.0

- -

wait

- - diff -r bb02a593b7d5 -r e1a02869da08 www/m/5.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 @@ - - - - - - - - - - - - - - -

- -

00:00:00.0

- - diff -r bb02a593b7d5 -r e1a02869da08 www/m/css/menu.css --- /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 diff -r bb02a593b7d5 -r e1a02869da08 www/m/css/nodescore.css --- 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; -} diff -r bb02a593b7d5 -r e1a02869da08 www/m/js/nodescore-client.js --- 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 diff -r bb02a593b7d5 -r e1a02869da08 www/m/score.html --- /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 @@ + + + + + + + + + + + + + + + + +

+ +

Menu +
- SELECT PART: +
  +
- help
- control panel
+

+ +

GROUP: 1

Latency: 0ms

+ +

00:00:00.0

+ +

+ + + diff -r bb02a593b7d5 -r e1a02869da08 www/m/seta/img/thumbs/1.png Binary file www/m/seta/img/thumbs/1.png has changed diff -r bb02a593b7d5 -r e1a02869da08 www/m/seta/img/thumbs/2.png Binary file www/m/seta/img/thumbs/2.png has changed diff -r bb02a593b7d5 -r e1a02869da08 www/m/seta/img/thumbs/3.png Binary file www/m/seta/img/thumbs/3.png has changed diff -r bb02a593b7d5 -r e1a02869da08 www/m/seta/img/thumbs/4.png Binary file www/m/seta/img/thumbs/4.png has changed diff -r bb02a593b7d5 -r e1a02869da08 www/m/seta/img/thumbs/5.png Binary file www/m/seta/img/thumbs/5.png has changed diff -r bb02a593b7d5 -r e1a02869da08 www/m/seta/img/thumbs/6.png Binary file www/m/seta/img/thumbs/6.png has changed