forked from protonphoton/LJ
910 lines
31 KiB
HTML
910 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Aurora Rack</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="apple-mobile-web-app-title" content="Aurora">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<link rel="apple-touch-startup-image" href="launch.png">
|
|
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
|
|
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
|
|
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
|
|
|
|
<!-- Page specific styles -->
|
|
|
|
<style>
|
|
|
|
</style>
|
|
|
|
<!-- Web audio buttons defaults -->
|
|
<script type="application/javascript" src="webcomponents-lite.js"></script>
|
|
<script type="application/javascript" src="config.js"></script>
|
|
<script>
|
|
WebAudioControlsOptions={
|
|
useMidi:1,
|
|
knobSrc:"knobs/simplegray.png",
|
|
knobSprites:100,
|
|
switchSrc:"knobs/switch_toggle.png",
|
|
sliderSrc:"knobs/vsliderbody.png",
|
|
sliderKnobsrc:"knobs/vsliderknob.png",
|
|
}
|
|
</script>
|
|
<script src="webaudio-controls.js"></script>
|
|
<!-- link rel="stylesheet" href="LJgrid.css" / -->
|
|
<link rel="stylesheet" type="text/css" href="selector.min.css">
|
|
<script type="application/javascript" src="selector.min.js"></script>
|
|
|
|
<link rel="stylesheet" href="css/common.css" />
|
|
</head>
|
|
|
|
<body style="background-image: linear-gradient(174deg, #292929,#111);">
|
|
|
|
|
|
<div class="Rackcontent">
|
|
|
|
|
|
<!--
|
|
Navigation Rack
|
|
-->
|
|
|
|
<div class="content">
|
|
<div class="buttons-7container">
|
|
|
|
<a href="index.html">
|
|
<div class="webaudiobut">
|
|
<div align="center" class="navled">
|
|
Index
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="settings.html">
|
|
<div class="webaudiobut">
|
|
<div align="center" class="navled">
|
|
Settings
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="auralls.html">
|
|
<div class="webaudiobut">
|
|
<div align="center" class="navled">
|
|
Aurora
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="trckr/trckrcam1.html">
|
|
<div class="webaudiobut">
|
|
<div align="center" class="navled">
|
|
Lasercam
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="simu.html">
|
|
<div class="webaudiobut">
|
|
<div align="center" class="navled">
|
|
Simu
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<div class="webaudiobut">
|
|
<button type="button" class="navled" style="border : #222222 1px;" onclick="onSubmit(this.id)" id="settings/reset" >
|
|
Reset
|
|
</button>
|
|
</div>
|
|
|
|
<div class="webaudiobut">
|
|
<button type="button" class="navled" style="border : #222222 1px;" onclick="onSubmit(this.id)" id="settings/restart aurora" >
|
|
rstrt AU
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
Display Rack
|
|
-->
|
|
|
|
<div class="content">
|
|
<div class="TopRackGrid">
|
|
<div>
|
|
<h2>
|
|
/TL Aurora
|
|
<span class="shade"> </span>
|
|
</h2>
|
|
<webaudio-switch id="on" value="1" tooltip="Switch-B" height="35" width="85" src="knobs/switch1.png">
|
|
</webaudio-switch>
|
|
</div>
|
|
<div class="webaudiobut">
|
|
<div align="center" id="line1" class="busled">
|
|
Aurora control rack
|
|
</div>
|
|
<div align="center" id="status" class="busled">
|
|
/team/laser
|
|
</div>
|
|
</div>
|
|
<div class="etherled" style="margin-left: 30px;margin-top: 1px;">
|
|
Stt
|
|
<webaudio-knob id="lstt/0" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
|
|
<webaudio-knob id="lstt/1" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
|
|
<webaudio-knob id="lstt/2" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
|
|
<webaudio-knob id="lstt/3" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
|
|
</div>
|
|
<div class="etherled" style="margin-left: 30px;margin-top: 1px;">
|
|
Ack
|
|
<webaudio-knob id="lack/0" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
|
|
<webaudio-knob id="lack/1" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
|
|
<webaudio-knob id="lack/2" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
|
|
<webaudio-knob id="lack/3" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
Scene choice Rack
|
|
-->
|
|
<div class="content">
|
|
<div class="Settingrid">
|
|
|
|
<div>
|
|
<h2>Scene</h2>
|
|
</div>
|
|
|
|
|
|
<div class="webaudiobut" align="center" style="width: 83px;">
|
|
<button type="button" class="navled" style="border: 1px solid #002020; text-align: middle;" onclick="onSubmit(this.id)" id="scene/0/start 1" >
|
|
0
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
</div>
|
|
|
|
<div class="webaudiobut" align="center" style="width: 83px;">
|
|
<button type="button" class="navled" style="border: 1px solid #002020; text-align: middle;" onclick="onSubmit(this.id)" id="scene/1/start 1" >
|
|
1
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
</div>
|
|
|
|
<div class="webaudiobut" align="center" style="width: 83px;">
|
|
<button type="button" class="navled" style="border: 1px solid #002020; text-align: middle;" onclick="onSubmit(this.id)" id="scene/2/start 1" >
|
|
2
|
|
</button>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
</div>
|
|
|
|
<div class="webaudiobut" align="center" style="width: 83px;">
|
|
<button type="button" class="navled" style="border: 1px solid #002020; text-align: middle;" onclick="onSubmit(this.id)" id="scene/3/start 1" >
|
|
3
|
|
</button>
|
|
</div>
|
|
|
|
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div> </div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!--
|
|
Laser Rack
|
|
-->
|
|
<div class="content">
|
|
<div class="Rackgrid">
|
|
<div>
|
|
<h2>Lasers</h2>
|
|
</div>
|
|
<div></div>
|
|
|
|
<div class="webaudiobut"><webaudio-switch id="noteon 24" value="1" tooltip="Switch-B" height="64" width="64" src="knobs/big0.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="noteon 25" value="0" tooltip="Switch-B" height="64" width="64" src=" knobs/big1.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="noteon 26" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/big2.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="noteon 27" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/big3.png"></webaudio-switch></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div> </div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
FX Rack
|
|
-->
|
|
<div class="content">
|
|
<div class="Rackgrid">
|
|
<div>
|
|
<h2>FXs</h2>
|
|
</div>
|
|
|
|
<div class="webaudiobut"><webaudio-switch id="aurora/fx/ ScanH" value="1" tooltip="Switch-B" height="64" width="64" src="knobs/scanH.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="aurora/fx/ ScanV" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/scanV.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="aurora/fx/ Wave" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/saw.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="aurora/fx/ Circle" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/circle.png"></webaudio-switch></div>
|
|
<div class="webaudiobut" style ="margin-left: 5px"><webaudio-switch id="aurora/fx/ Starfield" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/stars.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="aurora/fx/ Word" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/text.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="aurora/fx/ Trckr" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/trckr.png"></webaudio-switch></div>
|
|
<div> </div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
RGB Colors Rack
|
|
-->
|
|
<div class="content">
|
|
<div class="Rackgrid">
|
|
<div>
|
|
<h2>Colors</h2>
|
|
</div>
|
|
<div class="webaudiobut"><webaudio-switch id="aurora/color/ red" value="1" tooltip="Switch-B" height="64" width="64" src="knobs/red.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="aurora/color/ yellow" value="0" tooltip="Switch-B" height="64" width="64" src=" knobs/yellow.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="aurora/color/ green" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/green.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="aurora/color/ blue" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/blue.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="aurora/color/ cyan" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/pink.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="aurora/color/ white" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/white.png"></webaudio-switch></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div> </div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
RGY Colors Rack
|
|
|
|
<div class="content">
|
|
<div class="Rackgrid">
|
|
<div>
|
|
<h2>Colors</h2>
|
|
</div>
|
|
<div></div>
|
|
<div></div>
|
|
<div class="webaudiobut"><webaudio-switch id="aurora/color/ red" value="1" tooltip="Switch-B" height="64" width="64" src="knobs/red.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="aurora/color/ yellow" value="0" tooltip="Switch-B" height="64" width="64" src=" knobs/yellow.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="aurora/color/ green" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/green.png"></webaudio-switch></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div> </div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
<!--
|
|
Text Rack
|
|
-->
|
|
<div class="content">
|
|
<div class="TextGrid"><h2>1 word</h2>
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<input class = "submitext" onchange = "onSubmit(this.id)" type="text" id="aurora/word/" value="">
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
<!--
|
|
Modifiers Rack
|
|
-->
|
|
<div class="content" style="display: grid;">
|
|
|
|
|
|
<div class="buttons-7container" id="text">
|
|
|
|
<div>
|
|
<div style = "font-size: 1.5ex;">
|
|
<h2>Pos X</h2>
|
|
</div>
|
|
<div><webaudio-knob id="aurora/Xcoord" diameter="60" min="1" max="127" value="45"></webaudio-knob></div>
|
|
<div><webaudio-param link="aurora/Xcoord" value="45"></webaudio-param></div>
|
|
|
|
</div>
|
|
<div>
|
|
<div style = "font-size: 1.5ex;">
|
|
<h2>Pos Y</h2>
|
|
</div>
|
|
<div><webaudio-knob id="aurora/Ycoord" diameter="60" min="1" max="127" value="45"></webaudio-knob></div>
|
|
<div><webaudio-param link="aurora/Ycoord" value="45"></webaudio-param></div>
|
|
|
|
</div>
|
|
<div>
|
|
<div style = "font-size: 1.5ex;">
|
|
<h2>Resize
|
|
<span class="shade"> </span>
|
|
</h2>
|
|
</div>
|
|
<div><webaudio-knob id="aurora/scale" diameter="60" min="1" max="127" value="45"></webaudio-knob></div>
|
|
<div><webaudio-param link="aurora/scale" value="45"></webaudio-param></div>
|
|
|
|
</div>
|
|
<div>
|
|
<div style = "font-size: 1.5ex;">
|
|
<h2>Points</h2>
|
|
</div>
|
|
<div>
|
|
<webaudio-knob id="aurora/scandots" diameter="60" min="2" max="127" value="64"></webaudio-knob>
|
|
</div>
|
|
<div>
|
|
<webaudio-param link="aurora/scandots" value="0"></webaudio-param>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<h2 style = "font-size: 1.5ex;">Rot X</h2>
|
|
</div>
|
|
<div><webaudio-knob id="aurora/rotdirec X" diameter="60" min="0" max="360" value="0"></webaudio-knob></div>
|
|
<div><webaudio-param link="aurora/rotdirec X" value="0"></webaudio-param></div>
|
|
|
|
</div>
|
|
<div>
|
|
<div >
|
|
<h2 style = "font-size: 1.5ex;">Rot Y</h2>
|
|
</div>
|
|
<div><webaudio-knob id="aurora/rotdirec Y" diameter="60" min="0" max="360" value="0"></webaudio-knob></div>
|
|
<div><webaudio-param link="aurora/rotdirec Y" value="0"></webaudio-param></div>
|
|
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<h2 style = "font-size: 1.5ex;">Rot Z</h2>
|
|
</div>
|
|
<div><webaudio-knob id="aurora/rotdirec Z" diameter="60" min="0" max="360" value="0"></webaudio-knob></div>
|
|
<div><webaudio-param link="aurora/rotdirec Z" value="0"></webaudio-param></div>
|
|
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
|
|
|
|
<div class="buttons-7container" id="text">
|
|
|
|
<div>
|
|
<div style = "font-size: 1.5ex;">
|
|
<h2>Steps</h2>
|
|
</div>
|
|
<div>
|
|
<webaudio-knob id="aurora/steps" diameter="60" min="2" max="127" value="64"></webaudio-knob>
|
|
</div>
|
|
<div>
|
|
<webaudio-param link="aurora/steps" value="0"></webaudio-param>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div style = "font-size: 1.5ex;">
|
|
<h2>Max</h2>
|
|
</div>
|
|
<div>
|
|
<webaudio-knob id="aurora/stepmax" diameter="60" min="2" max="127" value="64"></webaudio-knob>
|
|
</div>
|
|
<div>
|
|
<webaudio-param link="aurora/stepmax" value="0"></webaudio-param>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div style = "font-size: 1.5ex;">
|
|
<h2>Line</h2>
|
|
</div>
|
|
<div>
|
|
<webaudio-knob id="aurora/linesize" diameter="60" min="2" max="127" value="64"></webaudio-knob>
|
|
</div>
|
|
<div>
|
|
<webaudio-param link="aurora/linesize" value="64"></webaudio-param>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div style = "font-size: 1.5ex;">
|
|
<h2>Radius</h2>
|
|
</div>
|
|
<div>
|
|
<webaudio-knob id="aurora/radius" diameter="60" min="0" max="127" value="45"></webaudio-knob>
|
|
</div>
|
|
<div>
|
|
<webaudio-param link="aurora/radius" value="45"></webaudio-param>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
</div>
|
|
|
|
<div>
|
|
</div>
|
|
|
|
<div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!--
|
|
Simu Rack
|
|
-->
|
|
|
|
<div class="content" style="background-image: linear-gradient(174deg, #111,#030303);">
|
|
<canvas id="canvas" width="400" height="400" style="margin-left: 200px;margin-top : 20px;background-image:">canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--
|
|
Encoders Line
|
|
|
|
# /aurora/radius layernumber radius [0-1]
|
|
# /aurora/rotdirec layer axe direc
|
|
# /aurora/linesize layer value
|
|
# /aurora/rotdirec layer axe direc
|
|
# /aurora/rotspeed layernumber axe speed
|
|
# /aurora/transpeed layernumber axe transpeed
|
|
# /aurora/transamt layernumber axe maxposition
|
|
-->
|
|
|
|
<!--
|
|
JS
|
|
-->
|
|
|
|
<!-- LJ style WS : A nettoyer ! -->
|
|
|
|
<script type="text/javascript">
|
|
|
|
var LJ = websocket_uri
|
|
|
|
|
|
var pl = "";
|
|
var pl2 = new Array();
|
|
var _WS = {
|
|
uri: LJ,
|
|
ws: null,
|
|
|
|
init : function (e) {
|
|
_WS.s = new WebSocket(_WS.uri);
|
|
_WS.s.onopen = function (e) { _WS.onOpen(e); };
|
|
_WS.s.onclose = function (e) { _WS.onClose(e); };
|
|
_WS.s.onmessage = function (e) { _WS.onMessage(e); };
|
|
_WS.s.onerror = function (e) { _WS.onError(e); };
|
|
},
|
|
|
|
onOpen: function () {
|
|
_WS.showstatus("Connected to "+LJ);
|
|
},
|
|
|
|
onClose: function () {
|
|
|
|
_WS.showline1('<span style="color: red;">LJ DISCONNECTED</span> ');
|
|
//var divtext1 = document.getElementById('line1');
|
|
///divtext1.innerHTML='DISCONNECTED';
|
|
document.getElementById("on").value = 0;
|
|
document.getElementById("lstt/0").value = 0;
|
|
document.getElementById("lack/0").value = 0;
|
|
},
|
|
|
|
onMessage: function (e) {
|
|
var res = e.data.split(" ");
|
|
var divtext = document.getElementById('status');
|
|
var divtext1 = document.getElementById('line1');
|
|
|
|
|
|
switch (res[0].substring(0,6)) {
|
|
|
|
case "/statu":
|
|
//divtext.innerHTML="connected to "+LJ;
|
|
|
|
//_WS.showstatus('<span style="color: red;">ERROR:</span> ' + e.data);
|
|
//divtext.innerHTML=res[1]+" "+res[2];
|
|
//divtext1.innerHTML="connected to "+LJ;
|
|
//console.log("/status "+res[1]+" "+res[2])
|
|
_WS.showline1("connected to "+LJ);
|
|
if (res[2]==="Disconnected"){
|
|
_WS.showstatus(res[1]+" "+'<span style="color: red;">'+ res[2]+'</span> ');
|
|
}
|
|
else{
|
|
_WS.showstatus(res[1]+" "+res[2]);
|
|
}
|
|
break;
|
|
|
|
case "/redst":
|
|
//console.log("red"+res[1]+" "+res[2]);
|
|
_WS.showstatus('<span style="color: red;">'+res[1]+" "+ res[2]+'</span> ');
|
|
break;
|
|
|
|
case "/line1":
|
|
//divtext.innerHTML="connected to "+LJ;
|
|
divtext1.innerHTML=res[1]+" "+res[2];
|
|
break;
|
|
|
|
case "/redline1":
|
|
//divtext.innerHTML="connected to "+LJ;
|
|
divtext1.innerHTML='<span style="color: red;">'+ res[1]+" "+res[2]+'</span>';
|
|
break;
|
|
|
|
case "/laser":
|
|
console.log("/laser "+res[1])
|
|
newlaser(res[1])
|
|
break;
|
|
|
|
case "/simul":
|
|
pl = e.data.slice(7);
|
|
//console.log(pl)
|
|
pl2 = eval(pl.replace(/[()]/g, ''));
|
|
break;
|
|
|
|
case "/lack/":
|
|
console.log("/lack "+res[1])
|
|
document.getElementById(res[0].slice(1)).value = res[1];
|
|
break;
|
|
|
|
case "/lstt/":
|
|
console.log("/lstt "+res[1])
|
|
document.getElementById(res[0].slice(1)).value = res[1];
|
|
break;
|
|
|
|
|
|
default:
|
|
//console.log("default "+res[0].slice(1)+" "+res[1]);
|
|
//document.getElementById(res[0].slice(1)).value = res[1];
|
|
//_WS.showstatus(e.data);
|
|
}
|
|
},
|
|
|
|
onError: function (e) {
|
|
_WS.showstatus('<span style="color: red;">ERROR:</span> ' + e.data);
|
|
},
|
|
|
|
showstatus: function (message) {
|
|
var divtext = document.getElementById('status');
|
|
divtext.innerHTML="";
|
|
divtext.innerHTML= message.toString();
|
|
},
|
|
showline1: function (message) {
|
|
var divtext = document.getElementById('line1');
|
|
divtext.innerHTML="";
|
|
divtext.innerHTML= message.toString();
|
|
},
|
|
|
|
showredline1: function (message) {
|
|
var divtext = document.getElementById('line1');
|
|
divtext.innerHTML="";
|
|
divtext.innerHTML= message.toString();
|
|
},
|
|
|
|
send: function (message) {
|
|
if (!message.length) {
|
|
alert('Empty message not allowed !');
|
|
} else {
|
|
_WS.showstatus(message);
|
|
_WS.s.send(message);
|
|
}
|
|
},
|
|
|
|
close: function () {
|
|
_WS.showstatus('GOODBYE !');
|
|
_WS.s.close();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('load', _WS.init, false);
|
|
|
|
//
|
|
// Forms submits
|
|
//
|
|
|
|
function onSubmit(clicked_id) {
|
|
var input = document.getElementById(clicked_id);
|
|
console.log("/" + clicked_id + " " + input.value);
|
|
_WS.send("/" + clicked_id + " " + input.value);
|
|
//_WS.send("/" + clicked_id + laser + " " + input.value);
|
|
}
|
|
|
|
function clickcolor(a,b,c,d) {
|
|
console.log(a,b,c,d);
|
|
}
|
|
|
|
</script>
|
|
|
|
<!--
|
|
web audio encoders scripts
|
|
-->
|
|
|
|
<script type="text/javascript">
|
|
var message="";
|
|
var log=[];
|
|
var knobs = document.getElementsByTagName('webaudio-knob');
|
|
var laser = 0;
|
|
|
|
for(var i = 0; i < knobs.length; i++){
|
|
knobs[i].addEventListener("input",Dump,false);
|
|
knobs[i].addEventListener("change",Dump,false);
|
|
}
|
|
var sliders = document.getElementsByTagName('webaudio-slider');
|
|
|
|
for(var i = 0; i < sliders.length; i++){
|
|
sliders[i].addEventListener("input",Dump,false);
|
|
sliders[i].addEventListener("change",Dump,false);
|
|
}
|
|
var switches = document.getElementsByTagName('webaudio-switch');
|
|
|
|
for(var i = 0; i < switches.length; i++) {
|
|
switches[i].addEventListener("change",Dump,false);
|
|
}
|
|
|
|
function newlaser(id) {
|
|
|
|
console.log("newlaser " +id)
|
|
var laserid = 24+ parseInt(id,10);
|
|
lasernote = "noteon "+laserid;
|
|
console.log("laser "+lasernote);
|
|
nolaser();
|
|
nofx();
|
|
|
|
var x = document.getElementById(lasernote);
|
|
x.value = 1 ;
|
|
laser = id
|
|
}
|
|
|
|
function nolaser() {
|
|
//console.log("nolaser")
|
|
var x = document.getElementById("noteon 24");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("noteon 25");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("noteon 26");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("noteon 27");
|
|
x.value = 0 ;
|
|
}
|
|
|
|
function nofx() {
|
|
//console.log("nofx0")
|
|
var x = document.getElementById("aurora/fx/ ScanH");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/ ScanV");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/ Wave");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/ Circle");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/ Starfield");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/ Word");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/ Trckr");
|
|
x.value = 0 ;
|
|
}
|
|
|
|
// RGB Colors
|
|
function nocolor() {
|
|
//console.log("nocolor0")
|
|
var x = document.getElementById("aurora/color/ red");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/color/ yellow");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/color/ green");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/color/ blue");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/color/ cyan");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/color/ white");
|
|
x.value = 0 ;
|
|
}
|
|
|
|
// RGY Colors
|
|
//function nocolor() {
|
|
//var x = document.getElementById("aurora/color/ red");
|
|
// x.value = 0 ;
|
|
//var x = document.getElementById("aurora/color/ yellow");
|
|
// x.value = 0 ;
|
|
//var x = document.getElementById("aurora/color/ green");
|
|
// x.value = 0 ;
|
|
//}
|
|
|
|
|
|
function Dump(e) {
|
|
var str="";
|
|
str=e.type + " : " + e.target.id + " : " + e.target.value + " ";
|
|
console.log(str);
|
|
log.unshift(str);
|
|
log.length=1;
|
|
str="";
|
|
|
|
for(var i=19;i>=0;--i) {
|
|
if(log[i])
|
|
str+=log[i]+"<br/>";
|
|
}
|
|
|
|
//console.log("have sent "+"/" + e.target.id + " " + e.target.value)
|
|
//_WS.send("/" + e.target.id + " " + e.target.value);
|
|
|
|
var res = e.target.id.split(" ");
|
|
//console.log(res)
|
|
|
|
|
|
// on off
|
|
if (e.target.id === "on" && e.type === "change") {
|
|
|
|
window.location.reload();
|
|
}
|
|
|
|
|
|
// Go to index
|
|
if (e.target.id === "index" && e.type === "change") {
|
|
|
|
window.location.assign("index.html");
|
|
}
|
|
|
|
|
|
// Fx
|
|
if (res[0].substring(7,9) === "fx" && e.type === "change") {
|
|
|
|
nofx();
|
|
_WS.send("/"+res[0]+laser+ " "+ res[1]+ " " + e.target.value);
|
|
var x = document.getElementById(e.target.id);
|
|
x.value = 1 ;
|
|
//_WS.showstatus("Laser "+laser+ " "+ res[1]);
|
|
console.log("FX sending " + res[0]+laser+ " "+ res[1]+ " " + e.target.value);
|
|
}
|
|
|
|
|
|
// Colors
|
|
if (res[0].substring(7,9) === "co" && e.type === "change") {
|
|
|
|
nocolor();
|
|
_WS.send("/"+res[0]+laser+ " "+ res[1]+ " " + e.target.value);
|
|
var x = document.getElementById(e.target.id);
|
|
x.value = 1 ;
|
|
//_WS.showstatus("Laser "+laser+ " "+ res[1]);
|
|
console.log("colors sending "+res[0]+laser+ " "+ res[1]+ " " + e.target.value);
|
|
}
|
|
|
|
|
|
// Lasers
|
|
if (res[0] === "noteon" && e.type === "change") {
|
|
//console.log(e.target.id);
|
|
//console.log(res);
|
|
//console.log(res[1] - 24)
|
|
newlaser(res[1] - 24);
|
|
_WS.send("/" + e.target.id + " " + e.target.value);
|
|
|
|
//nolaser();
|
|
//nofx();
|
|
//_WS.send("/" + e.target.id + " " + e.target.value);
|
|
//var x = document.getElementById(e.target.id);
|
|
//x.value = 1 ;
|
|
//laser = res[1] - 24;
|
|
//console.log("laser "+laser);
|
|
|
|
}
|
|
|
|
|
|
// Knobs
|
|
if (res[0].slice(-1) !== "/" && res[0] !== "noteon") {
|
|
if (res.length == 1) {
|
|
console.log("knobs sending "+res[0]+" "+laser+ " " + e.target.value);
|
|
_WS.send("/" + res[0]+" "+laser+ " " + e.target.value);
|
|
|
|
}
|
|
else {
|
|
console.log("knobs sending "+res[0]+" "+laser+ " "+ res[1]+ " " + e.target.value);
|
|
_WS.send("/" + res[0]+" "+laser+ " " + res[1]+" "+ e.target.value);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<!--
|
|
Simulator Point lists drawing scripts
|
|
-->
|
|
|
|
<script type="text/javascript">
|
|
|
|
//
|
|
// Simulator canvas : store Reference To The Canvas & Set Context
|
|
//
|
|
|
|
var canvas = document.getElementById("canvas");
|
|
var ctx = canvas.getContext("2d");
|
|
var lastpoint = { x: 0, y: 0, color: 0};
|
|
ctx.clearRect(0,0,400,400);
|
|
var zoom = 0.5;
|
|
//ctx.save
|
|
|
|
|
|
// Todo : laser point will have black points to go from a polyline to another. Need to discard those black points.
|
|
function draw() {
|
|
|
|
|
|
// Clear Canvas At The Start Of Every Frame
|
|
//ctx.restore
|
|
|
|
if (pl2.length > 0)
|
|
{
|
|
|
|
// Begin a new path
|
|
// 0.7 reduces max coordinates in a more browser compatible resolution.
|
|
ctx.clearRect(0,0,400,400);
|
|
ctx.beginPath();
|
|
|
|
ctx.moveTo(pl2[0]*zoom, pl2[1]*zoom);
|
|
lastpoint.color = pl2[2];
|
|
|
|
// Draw n Lines
|
|
for (var i = 0; i < pl2.length/3; i++)
|
|
{
|
|
|
|
// New point has the same color -> add a new line to the new point
|
|
if (pl2[2+(i*3)] === lastpoint.color)
|
|
{
|
|
ctx.lineTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom);
|
|
}
|
|
|
|
// New point has different color -> stroke with previous color
|
|
if (pl2[2+(i*3)] != lastpoint.color)
|
|
{
|
|
ctx.strokeStyle = "#"+(lastpoint.color + Math.pow(16, 6)).toString(16).slice(-6);
|
|
ctx.stroke();
|
|
ctx.closePath()
|
|
//ctx.restore
|
|
ctx.beginPath();
|
|
//ctx.clearRect(0,0,400,400);
|
|
|
|
ctx.moveTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom);
|
|
}
|
|
|
|
// Last point -> stroke with current color
|
|
if (i === (pl2.length/3)-1 )
|
|
{
|
|
ctx.moveTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom);
|
|
ctx.strokeStyle = "#"+((pl2[2+(i*3)]) + Math.pow(16, 6)).toString(16).slice(-6);
|
|
ctx.stroke();
|
|
|
|
ctx.closePath()
|
|
//ctx.restore
|
|
//ctx.clearRect(0,0,400,400);
|
|
}
|
|
|
|
// store point for comparison
|
|
lastpoint.x = pl2[i*3];
|
|
lastpoint.y = pl2[1+(i*3)];
|
|
lastpoint.color = pl2[2+(i*3)];
|
|
}
|
|
|
|
}
|
|
// Call Draw Function Again To Create Animation
|
|
window.requestAnimationFrame(draw);
|
|
}
|
|
|
|
// Initialize The Draw Function
|
|
draw();
|
|
</script>
|
|
</body>
|
|
</html>
|