+ +

What is NodeScore?

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. + +

How does a NodeScore work?

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. + +

Browser Compatability:

+Modern Browsers only. No Internet Explorer support. Tested using Chromium. + + +

Code

+ +https://gitorious.org/nodescore + +

Examples

+ +"Magic Score" composition configuration optimised for 1280x800 resolution.
+ +http://nodescore.kiben.net:8889/m/score.html
+http://nodescore.kiben.net:8889/m/controls.html
+ + +

Related Publications

+ +Canning, R. "REALTIME WEB TECHNOLOGIES IN THE NETWORKED PERFORMANCE ENVIRONMENT" +Proceedings of The International Computer Music Conference (2012), Ljubljana, Slovenia. + + + +

+

+ + + + + diff -r 965ea3cd2ae6 -r ea19684cd1db www/m/controls.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 @@

-

Latency:

0ms

diff -r 965ea3cd2ae6 -r ea19684cd1db www/m/css/menu.css --- 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; diff -r 965ea3cd2ae6 -r ea19684cd1db www/m/css/nodescore.css --- 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 diff -r 965ea3cd2ae6 -r ea19684cd1db www/m/js/nodescore-client.js --- 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("

") -// $("#preview").html('

'); + $("#preview").html("

n e x t :

") } //////////////////////////////////////////////// diff -r 965ea3cd2ae6 -r ea19684cd1db www/m/music.html --- 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 @@ diff -r 965ea3cd2ae6 -r ea19684cd1db www/m/score.html --- 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 @@ + +

- -

GROUP: 1

Latency: 0ms

- -

00:00:00.0

l i v e :

+ +

GROUP: 1

Latency: 0ms

00:00:00.0

+ +

Menu @@ -49,7 +58,9 @@