2023-12-06 11:59:35 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
2024-10-04 09:38:27 +02:00
|
|
|
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' localhost:* http://localhost:*;">
|
|
|
|
|
<meta http-equiv="Content-Security-Policy" content="scrip-src 'self' localhost:* http://localhost:*;"> -->
|
|
|
|
|
|
2023-12-06 11:59:35 +01:00
|
|
|
<title>iface@nodescore</title>
|
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
|
|
|
<link rel="shortcut icon" href="/kiben_favicon.ico" type="image/x-icon" />
|
|
|
|
|
<link href="css/nodescore.css" rel="stylesheet">
|
|
|
|
|
<link href="css/svg-stylesheet.css" rel="stylesheet">
|
|
|
|
|
<link href="css/chat-tablet.css" rel="stylesheet">
|
|
|
|
|
<link href="css/menu.css" rel="stylesheet">
|
|
|
|
|
<script src="js/jquery-1.7.1.min.js"></script>
|
|
|
|
|
<script src="js/controlseq.js"></script>
|
|
|
|
|
<script src="js/scoreB.js"></script>
|
2024-10-04 09:38:27 +02:00
|
|
|
<script src="js/nodescore-client.js"></script>
|
2023-12-06 11:59:35 +01:00
|
|
|
<script src="js/processing.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body onload="initPage()">
|
|
|
|
|
|
|
|
|
|
<input type="hidden" id="group" value='1'/>
|
|
|
|
|
<div class="outermaster2" id="outermaster2">
|
|
|
|
|
<div id="preview-overview">
|
|
|
|
|
<script type="text/javascript">// <![CDATA[
|
|
|
|
|
|
|
|
|
|
// this is the javascript that populates the 8x8 grid
|
|
|
|
|
// with svg images of the music notation
|
|
|
|
|
|
|
|
|
|
var outer = document.getElementById("preview-overview");
|
|
|
|
|
for (var i = 0; i < 64; i++) {
|
|
|
|
|
|
|
|
|
|
var middle = document.createElement("div");
|
|
|
|
|
middle.setAttributeNS(null, "class", "middle");
|
|
|
|
|
|
|
|
|
|
var img = document.createElement("img");
|
|
|
|
|
img.src = "svg/"+i+".svg";
|
|
|
|
|
var row=Math.floor(i/8);
|
|
|
|
|
img.setAttribute('width', 110);
|
|
|
|
|
var magicPar= document.createElement("p");
|
|
|
|
|
|
|
|
|
|
var magicindex = document.createTextNode(srcsqr[row][i%8]);
|
|
|
|
|
magicPar.appendChild(magicindex)
|
|
|
|
|
middle.appendChild(magicPar);
|
|
|
|
|
var texty = document.createTextNode(i);
|
|
|
|
|
var textx = document.createElement("p");
|
|
|
|
|
textx.setAttributeNS(null, "class", "indexnum");
|
|
|
|
|
textx.appendChild(texty)
|
|
|
|
|
middle.appendChild(img);
|
|
|
|
|
middle.appendChild(textx);
|
|
|
|
|
|
|
|
|
|
middle.id = "middle-" + i;
|
|
|
|
|
|
|
|
|
|
for (var j = 0; j < 4; j++) {
|
|
|
|
|
var inner = document.createElement("p");
|
|
|
|
|
inner.setAttributeNS(null, "class", "inner-" + j);
|
|
|
|
|
inner.id = "inner-" + i + "-" + j;
|
|
|
|
|
var text = document.createTextNode("");
|
|
|
|
|
inner.appendChild(text);
|
|
|
|
|
middle.appendChild(inner);
|
|
|
|
|
}
|
|
|
|
|
outer.appendChild(middle);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
// ]]></script>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="preview-multi" >
|
|
|
|
|
|
|
|
|
|
<div class="pview" id="preview-1">
|
|
|
|
|
<div class="musicianprog" style=" border: 1px solid purple;" >
|
|
|
|
|
<div id="counttitle1"></div>
|
|
|
|
|
<div class="count" id="count1"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="timeleft" style=" border: 1px solid purple;" >
|
|
|
|
|
<div class="tleftgroup" id="timeleft1"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="unitseq" id="unitseq0"></div>
|
|
|
|
|
<div class="pviewmusic" id="previewbox-1"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="pview" id="preview-2">
|
|
|
|
|
<div class="musicianprog" style="border: 1px solid green; ">
|
|
|
|
|
<div id="counttitle2" style="display:inline;"></div>
|
|
|
|
|
<div class="count" id="count2"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="timeleft" style="border: 1px solid green;" >
|
|
|
|
|
<div class="tleftgroup" id="timeleft2"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="unitseq" id="unitseq1"></div>
|
|
|
|
|
<div class="pviewmusic" id="previewbox-2"> </div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="pview" id="preview-3" >
|
|
|
|
|
<div class="musicianprog" style="border: 1px solid aqua;">
|
|
|
|
|
<div id="counttitle3" style="display:inline;"></div>
|
|
|
|
|
<div class="count" id="count3"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="timeleft" style="border: 1px solid aqua;" >
|
|
|
|
|
<div class="tleftgroup" id="timeleft3" style="font-size:1em;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="unitseq" id="unitseq2"></div>
|
|
|
|
|
<div class="pviewmusic" id="previewbox-3"> </div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="pview" id="preview-4">
|
|
|
|
|
<div class="musicianprog" style=" border: 1px solid red;">
|
|
|
|
|
<div id="counttitle4" style="display:inline;"></div>
|
|
|
|
|
<div class="count" id="count4"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="timeleft" style=" border: 1px solid red;" >
|
|
|
|
|
<div class="tleftgroup" id="timeleft4"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="unitseq" id="unitseq3"></div>
|
|
|
|
|
<div class="pviewmusic" id="previewbox-4"> </div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="soloscore" id="soloscore">
|
|
|
|
|
<div class="pviewsolo" id="preview-solo">
|
|
|
|
|
<div class="musicianprog" style=" border: 1px solid red;">
|
|
|
|
|
<div id="counttitle" ></div>
|
|
|
|
|
<div class="count" id="count"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="timeleft" style=" border: 1px solid red;" >
|
|
|
|
|
<div class="tleftgroup" id="totalcountdown"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="unitseq" id="unitseqsolo"></div>
|
|
|
|
|
<div class="pviewmusic" id="previewbox-solo"> </div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="solo-next">
|
|
|
|
|
<div id="previewbox-solo-next"> </div>
|
|
|
|
|
<div id="nexttitle">NEXT:</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<canvas data-processing-sources="hello-web.pde"></canvas>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-10-04 09:38:27 +02:00
|
|
|
<!-- <div id="info">
|
|
|
|
|
<div id="comms">
|
2023-12-06 11:59:35 +01:00
|
|
|
|
2024-10-04 09:38:27 +02:00
|
|
|
<div id="chat" title="type here to chat with others connected to network" >
|
|
|
|
|
|
|
|
|
|
<div id="nickname" title="type your login name and press enter" >
|
|
|
|
|
<form id="set-nickname" class="wrap">
|
|
|
|
|
<p>Login to Nodescore Server:</p>
|
|
|
|
|
<input id="nick">
|
|
|
|
|
<p id="nickname-err">Nickname already in use</p>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
Press F9 for Help <br/><br/>
|
|
|
|
|
or vist:<br/> <a href="http://nodescore.kiben.net">http://nodescore.kiben.net</a> <br/>for full instructions.
|
|
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div id="connecting">
|
|
|
|
|
<div class="wrap">Connecting to socket.io server</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="messages">
|
|
|
|
|
Chat with Other Nodescorers Here: (hit zero to hide chat)
|
|
|
|
|
<div id="nicknames"></div>
|
|
|
|
|
<div id="lines"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<form id="send-message">
|
|
|
|
|
<input id="message" value="chat here..">
|
|
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
--> <div id="current">
|
2023-12-06 11:59:35 +01:00
|
|
|
<script type="text/javascript">
|
|
|
|
|
function setPart(sel) {
|
|
|
|
|
//var testSound = new buzz.sound( 'audio/testfile', { formats: [ 'ogg', 'mp3' ] } );
|
|
|
|
|
//testSound.play();
|
|
|
|
|
|
|
|
|
|
var value = sel.options[sel.selectedIndex].value;
|
|
|
|
|
document.getElementById('group').value=value;
|
|
|
|
|
changeSoloVoice(group.value);
|
|
|
|
|
$('div#current').text('GROUP ' +value).text='value';
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="head">
|
|
|
|
|
<div id="datetime"></div>
|
|
|
|
|
<div class="metrocase" id="metro">
|
|
|
|
|
<div id="metronome0"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="indexpagetitle">
|
|
|
|
|
pathways - an open score for operation integratus
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="transport" >
|
|
|
|
|
<input class="transpbtn" style="background:green;" type="button" value="start" onclick="startSeq();" />
|
|
|
|
|
<input class="transpbtn" style="background:red;" type="button" value="stop" onclick="stopSeq();" />
|
|
|
|
|
<input class="transpbtn" style="background:orange;" type="button" value="reset" onclick="resetSeq();" />
|
|
|
|
|
<input class="transpbtn" style="background:red;" type="button" value="reboot" onclick="breakSeq();" />
|
|
|
|
|
|
|
|
|
|
<input class="transpbtn" style="background:yellow;" type="button" value="60" onclick="setSpeed(60);" />
|
|
|
|
|
<input class="transpbtn" style="background:yellow;" type="button" value="360" onclick="setSpeed(360);" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="client_latency">Latency: 0ms</div>
|
|
|
|
|
<div id="client_chronometer" >00:00:00.0</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="footx">
|
|
|
|
|
<div id="transect">.. </div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="views" >
|
|
|
|
|
<div class="formrow"><form action="#preview-overview"><input class="btn" type="submit" value="OverView"></form></div>
|
|
|
|
|
<div class="formrow"><form action="#preview-multi"><input class="btn" type="submit" value="QuartetView"></form></div>
|
|
|
|
|
<div class="formrow"><form action="#soloscore"><input class="btn" type="submit" value="SoloView"></form></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<select id="setPart" onchange="setPart(this)">
|
|
|
|
|
<option value="1">Stream 01</option>
|
|
|
|
|
<option value="2">Stream 02</option>
|
|
|
|
|
<option value="3">Stream 03</option>
|
|
|
|
|
<option value="4">Stream 04</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
