Mercurial > hg > nodescore

changeset 29:ea19684cd1db

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
start stop functionality and improved css
author tzara <rc-web@kiben.net>
date Wed, 08 Aug 2012 00:58:11 +0000
parents 965ea3cd2ae6
children e4d2a8eb1450
files nodescore nodescore.js rasterize.js www/index.html www/m/controls.html www/m/css/menu.css www/m/css/nodescore.css www/m/js/nodescore-client.js www/m/music.html www/m/score.html www/m/thumbs/1.png www/m/thumbs/2.png www/m/thumbs/3.png www/m/thumbs/4.png www/m/thumbs/5.png www/m/thumbs/6.png
diffstat 16 files changed, 262 insertions(+), 125 deletions(-) [+]
line wrap: on
line diff
--- a/nodescore	Tue Jul 31 17:01:34 2012 +0100
+++ b/nodescore	Wed Aug 08 00:58:11 2012 +0000
@@ -9,7 +9,7 @@
 # nodescore@kiben.net
 # nodescore.kiben.net
 
-SERVER='http://192.168.1.94:8889'
+SERVER='http://nodescore.kiben.net:8889'
 BASEDIR='www/m'
 PROJECT='seta'
 THUMBPATH=$BASEDIR/thumbs
--- a/nodescore.js	Tue Jul 31 17:01:34 2012 +0100
+++ b/nodescore.js	Wed Aug 08 00:58:11 2012 +0000
@@ -25,6 +25,7 @@
 var httpServer = http.createServer(function(request, response) {
     request.addListener('end', function () {
 	clientFiles.serve(request, response);	    
+	process.setMaxListeners(0);
     });    
 });
 httpServer.listen(8889);
@@ -104,7 +105,7 @@
     }
     
     socket.on('startChr', function () { startChr();});
-    socket.on('stopChr', function () { stopChr();});
+    socket.on('stopChr', function () { stopChr();} );
     socket.on('resetChr', function () { resetChr();});
 
 
@@ -137,9 +138,22 @@
 	var unit = seq.units[seq.counter];
 	var tempoms = 60000/seq.mm
 	
-	var tock = setInterval(function(){
-	    
+	// inititate first page here
+	socket.broadcast.emit("pageFlipfromserver", seq.voice, unit, time, seq.mm,seq.counter);
+	
+	var tock = setInterval(function(){    
+
+
+	    	    
+	    socket.on('stopSeq', function () {
+		clearInterval(tock)
+		sequencerState=0;  
+		stopChr();
+	    });
+
+
 	    if (ztime >= 0 ){
+		
 		// basic unit is still the second/1000ms - change this to tempoms? no i dont think so
 		// count in and count out
 		////////////////////////////////////////////
@@ -154,6 +168,7 @@
 		// remove displayed number with " " at end of both countin/out
 		
 		if (counter == 0 ) {
+
 		    socket.broadcast.emit('countinFromServer', seq.voice, " ", "","", "white","transparent");
 		}
 		
@@ -189,23 +204,11 @@
 	    ztime -= 1000
 			
 	}, tempoms)
+			  };
 
-
-//	socket.on('stopSeq', function (seq) { 
-//	    console.log("stop")
-//	    clearInterval(tock);	    
-//	    sequencerState=0;  
-//	    stopChr();
-//	});
-			  };
-    
-    step = function (seq) {
-	clearInterval(countdowntick);
-	countdowntick(seq)
-    };
-    
     socket.on('startSeq', function () { 
 	if (sequencerState == 0) { 
+	    console.log("bla")	    
 	    sequencerState=1;
 	    startChr();
 	    step(seqA); step(seqB); step(seqC); step(seqD);	    
@@ -213,14 +216,16 @@
 	}
 	else console.log("already started...")
     });
-
-
+    
     socket.on('resetSeq', function () { 
-	console.log("rrrrreset")
-	resetChr();
-	
+	console.log("reset")
+	resetChr();		
     });
-
+    
+    step = function (seq) {
+	clearInterval(countdowntick);
+	countdowntick(seq)
+    };    
 
 
     ////////////////////////////////////////////  
--- a/rasterize.js	Tue Jul 31 17:01:34 2012 +0100
+++ b/rasterize.js	Wed Aug 08 00:58:11 2012 +0000
@@ -4,7 +4,7 @@
 
 top = system.args[3];
 
-page.clipRect = { top: top, left: 0, width: 1280, height: 800 }
+page.clipRect = { top: top, left: 0, width: 800, height: 400 }
 
 if (system.args.length < 3 || system.args.length > 5) {
     console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
@@ -15,7 +15,7 @@
     output = system.args[2];
  
 
-    page.viewportSize = { width: 800, height: 800 };
+    page.viewportSize = { width: 1024, height: 400 };
     if (system.args.length > 4 && system.args[2].substr(-4) === ".pdf") {
         size = system.args[4].split('*');
         page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/index.html	Wed Aug 08 00:58:11 2012 +0000
@@ -0,0 +1,64 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+
+</head>
+
+<body style="width:1024px; height:768px;" > 
+<h1>NodeScore</h1>
+
+<div class="readme">
+
+<h3>What is NodeScore?</h3> NodeScore is a web based framework to
+facilitate networked telematic ensemble performance. 
+
+The goal of the NodeScore framework is to allow performers
+who are connected to a network via a computer/tablet/mobile device to
+syncronise to a master clock and recieve instructions, in
+realtime,from a central "conductor/director" as well as being able to
+communicate with one another. 
+
+<h3>How does a NodeScore work?</h3> The control interface for
+NodeScore is a webpage displayed in an internet web browser, from this
+control page the "conductor/director" can issue the precomposed, HTML5
+formated, compositional instructions. These instrutions can be
+deployed to the ensemble as a whole or targeted at specific
+perfomers. Once the instruction is deployed by the director it is
+instantly presented in the web browser of the performer/s.
+
+NodeScore is written as a node.js web server incorporating websockets
+for server client communications.
+
+<h3>Browser Compatability:</h3> 
+Modern Browsers only. No Internet Explorer support. Tested using Chromium.
+
+
+<h2>Code</h2>
+
+<a href="https://gitorious.org/nodescore">https://gitorious.org/nodescore</a>
+
+<h2>Examples</h2>
+
+"Magic Score" composition configuration optimised for 1280x800 resolution. </br>
+
+<a href="http://nodescore.kiben.net:8889/m/score.html">http://nodescore.kiben.net:8889/m/score.html</a><br/>
+<a href="http://nodescore.kiben.net:8889/m/controls.html">http://nodescore.kiben.net:8889/m/controls.html</a><br/>
+
+
+<h2>Related Publications</h2>
+
+Canning, R. "REALTIME WEB TECHNOLOGIES IN THE NETWORKED PERFORMANCE ENVIRONMENT"
+Proceedings of  The International Computer Music Conference (2012), Ljubljana, Slovenia.
+
+
+
+<br/><br/>
+<img src="about/chromiumlogo.png"  width="30" height="30"/>
+<img src="about/nodejs-dark.png" height="30"/>
+<img src="about/ECMAScript.png" height="30"/>
+
+
+</body>
+
+</html>
--- a/www/m/controls.html	Tue Jul 31 17:01:34 2012 +0100
+++ b/www/m/controls.html	Wed Aug 08 00:58:11 2012 +0000
@@ -65,10 +65,9 @@
 	  <br><br>
 
 
-      <div class="latencies">	
-	<h2>Latency:</h2>
-	<h1 id="client_latency">0ms</h2>
-</div>
+	  <div class="latencies">	
+	    <p id="client_latency">0ms</p>
+	  </div>
 
 <div id="datetime"></div>
 
--- a/www/m/css/menu.css	Tue Jul 31 17:01:34 2012 +0100
+++ b/www/m/css/menu.css	Wed Aug 08 00:58:11 2012 +0000
@@ -3,16 +3,14 @@
     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;
+    bottom: -50px;
 }
 #nav li {
     margin: 0 5px;
--- a/www/m/css/nodescore.css	Tue Jul 31 17:01:34 2012 +0100
+++ b/www/m/css/nodescore.css	Wed Aug 08 00:58:11 2012 +0000
@@ -1,7 +1,7 @@
 body{
     background-color: black;
     color: white;
-    font: 12px Helvetica, Arial;  
+    font: 12px Helvetica, Arial;      
 } 
 
 h3,h4,h5,h6 {
@@ -29,37 +29,84 @@
     list-style:none;
 }
 
-.page{
-    height: 1000px;;
-    width: 1280px;
-}
 
 .outermaster{
-    height: 800px;
-    width: 1280px;
-    border: 1px solid blue;
+    height: 768px;
+    width: 1024px;
+    border-radius: 15px;
+    background-color:DimGray;
+    border: 1px solid gray;
     position: relative;
-    padding: 5px 5px 5px 5px ;
-    color: black;
-    top: 10%
+    !padding: 5px 5px 5px 5px ;
+    color: white;
+    opacity:0.8;
+    !top: 10%
     +filter: invert(100%);
 }
 
-#preview{
-    height: 240px;
-    width: 400px;
-    border: 1px solid blue;
+#live{
+    margin-left:auto; margin-right:auto; margin-top:5px;
+    !margin: 2px;
+    width: 99%;
+    height: 90%;
+    text-align: center;
+    border-radius: 15px;
+    background-color:black;
+    border: 1px solid gray;
+    !position: relative;
+!    padding: 5px 5px 5px 5px ;
+    color: white;
+    !top: 10%
+    +filter: invert(100%);
+}
+
+#comms{
+    border-radius: 15px;
+    height: 25%;
+    width: 550px;
+    margin: 0px;
+    border: 1px solid gray;
     position: absolute;
+    bottom: 80px;
+    left: 14px;
     padding: 5px 5px 5px 5px ;
     color: black;
-    bottom: 0%;
-    right: 0px;
 }
 
+#preview{
+    border-radius: 15px;
+    height: 25%;
+    width: 422px;
+    margin: 0px;
+    border: 1px solid gray;
+    position: absolute;
+    bottom: 80px;
+    right: 14px;
+    padding: 5px 5px 5px 5px ;
+    color: black;
+}
+
+
+.footdata{
+    margin-top:10px;
+    margin-left:auto; margin-right:auto;
+    border-radius: 15px;
+    height: 7%;
+    width: 98%;
+    !margin: 10px;
+    border: 1px solid gray;
+    bottom: 2px;
+!    padding: 5px 5px 5px 5px ;
+    background: DimGray;
+    opacity:1;
+}
+
+
 .outersquare{
+    border-radius: 5px;
     height: 400px;
     width: 685px;
-    border: 1px solid blue;
+!    border: 1px solid blue;
     position: absolute;
     top: 150px;
     left: 0px;
@@ -68,16 +115,17 @@
 }
 
 .svgmusic {  
-
-width: 1280px;
-height: 800px;
-
+margin: 10px;
+width: 90%;
+!height: 768px;
 }
 
 .magicsquare {
+!    margin: 10px;
+    border-radius: 15px;
     border: 1px solid yellow;
     padding: 2px 2px 2px 2px;
-    background: blue;
+    background: DimGray;
     width: 100px; height: 90px;
     border-radius: 20px;
     float: left;
@@ -87,62 +135,70 @@
 }
 
 .latencies{
-    height: 90px; width: 200px;
-    border: 1px solid blue;
-    position: relative; top: 15%;
-    float: right;
-    padding: 5px 5px 5px 5px ;
-    background-color: blue;    
+!    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:bottom;
+    display:table-cell; vertical-align:middle;
+    !margin-top: 10px; 
+     margin-right: 30px;
+    float:left;
+    padding: 3px 3px 3px 3px;
+    font-size:1em; color: white;
+    !position: absolute; 
+    !bottom: 10px; 
+    !left: 25%;
+    !float: left;
+    background-color: transparent;    
     opacity: 0.7;
-    text-align: center;
-    height: 25px; width: 858px;
-    font-size:1.5em; color: yellow;
-!    border: 1px solid blue;
-    position: absolute; top: 25px; left: 206px;
-    float: left;
-    background-color: transparent;    
 }
 
 #current{
-    position: absolute; left: 210px; top: 25px;
-    height: 25px; width: 130px;
-    text-align: center;
-    font-size:1.5em; font-weight: bold;
+    display:table-cell; vertical-align:middle;
+    margin-top: 10px; margin-right: 30px;
+    float:left;
+    !position: absolute; 
+    !right: 25%; 
+    font-size:2em; 
+    font-weight: bold;
     color: white;
-!    border: 1px solid blue;
-    float: left;
     background-color: transparent;    
-    z-index: 1;
+    z-index: 3;
     opacity: 0.8;
+    padding: 3px 3px 3px 3px;
 }
 
 #client_latency{
-    position: absolute; right: 205px; top: 25px;
-    height: 25px; width: 160px;
-    font-size:1.5em;
-    color: pink;
-!    border: 1px solid blue;
-    float: left;   
-    background-color: black;    
+!    float:left;
+    display:table-cell; vertical-align:middle;
+    margin-top: 10px; margin-right: 30px;
+    text-align:center;
+    font-size:1em;
+    color: white;
     z-index: 1;
-    padding: 0px 15px;
-    opacity: 0.8;
+    padding: 3px 3px 3px 3px;
+    opacity: 0.7;
 }
 
 .metrocase {
-    position: absolute; top: 0px; left: 0px;
-    width: 200px;  height: 50px;
+    float:left;
+    display:table-cell; vertical-align:middle;
+    margin-top: -22px; margin-right: 30px; margin-left: 20px;
+    border-radius: 15px;
+    position: relative; top: 50%;
+
+    width: 200px;  height: 40px;
     color: black;
     text-align: center;
     font-size: 4em; font-color: black;
     background: transparent;
     z-index: 2;
-    border: 1px solid blue;
+    border: 2px solid gray;
 }
 
 #metronome0 { width: 50px; height: 40px; border-radius: 30px; float:left; }
@@ -156,21 +212,34 @@
 .clear { clear:both; }
 
 #client_chronometer{ 
-    border: 1px solid blue ; 
+    display:table-cell; vertical-align:middle;
+    margin-top: -15px; 
+!margin-left: 30px;    
+    float:left;
+    !padding: 0 0 0 0;
+    !margin: 10px;
+    border-radius: 15px;
+    border: 2px solid gray ; 
     background-color: black;   
     color: white;
-    font-size: 3em; text-align: center;
+    font-size: 3em; 
+    text-align: center;
     opacity:0.7;
-    position: absolute; right: 0px; top: 0px;
-    width: 220px; height: 50px;
+    !position: absolute; 
+    !right: 20px; 
+    !bottom: 0px;
+    width: 220px; 
+    !height: 40px;
     z-position: 2;
 }
 
 #countinnumber{ 
+    border-radius: 15px;
     position: absolute; 
-    width: 1280px; height: 800px;
+    width: 100%; height: 90%;
     background-color:gray;
-    font-size: 48em; font-weight:bolder;
+    font-size: 36em; 
+    font-weight:bolder;
     display:inline;
     text-align:center;
     z-index: 2;
@@ -178,7 +247,7 @@
 }
 
 #content-txt {
-    width:1280px; height:800px; 
+    width: 100%; height: 90%;
     font-size:3em;
     text-align:center;
     background-color:black;
@@ -186,4 +255,5 @@
     margin-left:auto; margin-right:auto;
     display:table-cell;
     vertical-align:middle;
+    border-radius: 15px;
 }
\ No newline at end of file
--- a/www/m/js/nodescore-client.js	Tue Jul 31 17:01:34 2012 +0100
+++ b/www/m/js/nodescore-client.js	Wed Aug 08 00:58:11 2012 +0000
@@ -57,10 +57,8 @@
 function countinClient(groupID, currentseconds,mm,text,colour,background){
     var groupPage=document.getElementById('group').value
     if (groupID == groupPage) {
-	//console.log(currentseconds);
 	document.getElementById("countinnumber").style.visibility="visible";
 	document.getElementById("countinnumber").style.visibility="visible";
-	//$("#countin").text(text);
 	$("#countinnumber").text(currentseconds);
 	$("#countinnumber").css('background-color', background);
 	
@@ -68,7 +66,6 @@
 
 	if ( currentseconds == 0) {
 	    document.getElementById("countinnumber").style.visibility='hidden';
-//	    document.getElementById("countin").style.visibility='hidden';
 	}
     }}
 
@@ -77,9 +74,6 @@
 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";
 }
 
 
@@ -96,7 +90,6 @@
 socket.on("pageFlipfromserver", pageTurn);
 function pageTurn (group,unit,time,mm) {
     var groupPage=document.getElementById('group').value;
-    //console.log("fromservercommand has been executed on client");
     if (group == groupPage) {
 	var g= pad2(group); 
 	var p= pad2(unit);
@@ -111,13 +104,10 @@
 
 function pageTurnB(unit) {
     var units=6;
-//    var section = "seta/"
     var next=(((unit+1)%units)+units)%units
     console.log("HOP TURN" + unit+ "next:" + next);
-//    $("#live").html($("#unit"+unit).html());
     $("#live").load("music.html #"+unit +" *"); 
-    $("#preview").html("<img src='thumbs/"+next + ".png" + "'>")
-//    $("#preview").html('<embed src="music.html #"+next  + ' width="400px">');
+    $("#preview").html("<h3 style='background:transparent; position: absolute; bottom:14px; right:14px;';> n e x t : </h3><img src='thumbs/"+next + ".png" + "' width='320'>")
 }
 
 ////////////////////////////////////////////////
--- a/www/m/music.html	Tue Jul 31 17:01:34 2012 +0100
+++ b/www/m/music.html	Wed Aug 08 00:58:11 2012 +0000
@@ -2,7 +2,7 @@
 <html>
 <head>
     <style type="text/css">
-      .svgmusic {width:1280px; height:800px;}
+      .svgmusic {width:1024px; height:768px;}
     </style>
 </head>
 
--- a/www/m/score.html	Tue Jul 31 17:01:34 2012 +0100
+++ b/www/m/score.html	Wed Aug 08 00:58:11 2012 +0000
@@ -14,24 +14,33 @@
 
   <input type="hidden" id="group" value='1'> 
 
+
+  
   <div class="outermaster"> 
-
-    <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>    
+    <h1 style="position:absolute; background:transparent; left:24px; top:14px;">l i v e :</h1>
     <div id="countinnumber"></div>    
     <div id="live"> </div>    
-    <div id="preview"></div>    
-    <div id="datetime"></div>
+    <div id="comms"></div>    
+    <div id="preview">
+    </div>    
+    
+    <div class="footdata">
+      
+      <div class="metrocase" id="metro">
+	<div id="metronome0"></div>
+	<div id="metronome1"></div>
+	<div id="metronome2"></div>
+	<div id="metronome3"></div>
+      </div>
+      
+      <div id="current">GROUP: 1</div>    
+      <div id="client_latency">Latency: 0ms</div>     
+      <div id="datetime"></div>
+      <div id="client_chronometer"  style="z-index: 2;">00:00:00.0</div>    
+      
+    </div>
 
+  </div>
 
     <ul id="nav"> 
       <li><a href="javascript:void(0)">Menu</a>
@@ -49,7 +58,9 @@
 	</ul>
       </li>
     </ul>
-  </div>    
-  
+
+ 
+
+
 </body>
 </html>
Binary file www/m/thumbs/1.png has changed
Binary file www/m/thumbs/2.png has changed
Binary file www/m/thumbs/3.png has changed
Binary file www/m/thumbs/4.png has changed
Binary file www/m/thumbs/5.png has changed
Binary file www/m/thumbs/6.png has changed