forked from protonphoton/LJ
478 lines
15 KiB
HTML
478 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Rack choice</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="apple-mobile-web-app-title" content="LJ">
|
|
<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">
|
|
|
|
<style>
|
|
|
|
</style>
|
|
|
|
<!-- Web audio buttons defaults -->
|
|
<script type="application/javascript" src="webcomponents-lite.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-color:#222;">
|
|
|
|
<div class="Rackcontent" style="margin-top : 35px;">
|
|
|
|
<!--
|
|
Big Display Rack
|
|
-->
|
|
|
|
<div class="content">
|
|
<div id="text" class="busled" style="font-size:1.5em;border : #242424 1px solid;background: #000;-webkit-box-shadow: 4px 6px 10px -1px rgba(0,0,0,0.72);-moz-box-shadow: 4px 6px 10px -1px rgba(0,0,0,0.72);box-shadow: 4px 6px 10px -1px rgba(0,0,0,0.72);">
|
|
<div id="gum" class="gum" style="color: #fff";>
|
|
<p>!! WELCOME !!<br />
|
|
Click on the wanted Rack
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
Status Rack
|
|
-->
|
|
|
|
<a href="index.html">
|
|
<div class="content">
|
|
<div class="TopRackGrid">
|
|
<div>
|
|
<h2>
|
|
Status
|
|
<span class="shade" style="margin-bottom:10px;"> </span>
|
|
</h2>
|
|
<div style="margin-top:20px;">
|
|
<webaudio-switch id="on" value="0" tooltip="Switch-B" height="35" width="85" src="knobs/switch1.png">
|
|
</webaudio-switch>
|
|
</div>
|
|
</div>
|
|
<div class="webaudiobut">
|
|
<div align="center" id="line1" class="busled">
|
|
Status
|
|
</div>
|
|
<div align="center" id="status" class="busled">
|
|
|
|
</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>
|
|
</a>
|
|
|
|
|
|
<!--
|
|
Align Rack
|
|
-->
|
|
|
|
<a href="align.html">
|
|
<div class="content">
|
|
<div class="TopRackGrid">
|
|
<div>
|
|
<h2>
|
|
Align
|
|
<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" class="busled">
|
|
Align
|
|
</div>
|
|
<div align="center" class="busled">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<!--
|
|
Aurora Rack
|
|
-->
|
|
<a href="auralls.html">
|
|
<div class="content">
|
|
<div class="TopRackGrid">
|
|
<div>
|
|
<div>
|
|
<h2>
|
|
Aurora
|
|
</h2>
|
|
</div>
|
|
<div style="margin-top:20px;">
|
|
<webaudio-switch id="on" value="1" tooltip="Switch-B" height="35" width="85" src="knobs/switch1.png">
|
|
</webaudio-switch>
|
|
</div>
|
|
</div>
|
|
<div class="webaudiobut">
|
|
<div align="center" class="busled">
|
|
Aurora
|
|
</div>
|
|
<div align="center" class="busled">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</a>
|
|
|
|
|
|
|
|
<!--
|
|
Simu Rack
|
|
-->
|
|
<a href="simu.html">
|
|
<div class="content">
|
|
<div class="TopRackGrid">
|
|
<div>
|
|
<div>
|
|
<h2>
|
|
Simu
|
|
</h2>
|
|
</div>
|
|
<div style="margin-top:20px;">
|
|
<webaudio-switch id="on" value="1" tooltip="Switch-B" height="35" width="85" src="knobs/switch1.png">
|
|
</webaudio-switch>
|
|
</div>
|
|
</div>
|
|
<div class="webaudiobut">
|
|
<div align="center" class="busled">
|
|
Simu
|
|
</div>
|
|
<div align="center" class="busled">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
|
|
<!--
|
|
Tracker Rack
|
|
-->
|
|
<a href="trckr/trckrcam1.html">
|
|
<div class="content">
|
|
<div class="TopRackGrid">
|
|
<div>
|
|
<div>
|
|
<h2>
|
|
Tracker 1
|
|
</h2>
|
|
</div>
|
|
<div style="margin-top:20px;">
|
|
<webaudio-switch id="on" value="1" tooltip="Switch-B" height="35" width="85" src="knobs/switch1.png">
|
|
</webaudio-switch>
|
|
</div>
|
|
</div>
|
|
<div class="webaudiobut">
|
|
<div align="center" class="busled">
|
|
LaserCAM
|
|
</div>
|
|
<div align="center" class="busled">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<!--
|
|
JS
|
|
-->
|
|
|
|
<!-- LJ style WS : A nettoyer ! -->
|
|
|
|
<script type="text/javascript">
|
|
var LJ = 'ws://192.168.2.43:9001/'
|
|
|
|
|
|
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 () {
|
|
var divtext = document.getElementById('status');
|
|
divtext.innerHTML="";
|
|
divtext.innerHTML= "Connected to "+LJ;
|
|
document.getElementById("on").value = 1;
|
|
},
|
|
|
|
onClose: function () {
|
|
_WS.showstatus('!! ALL RACKS DISCONNECTED !!');
|
|
|
|
},
|
|
|
|
onMessage: function (e) {
|
|
var res = e.data.split(" ");
|
|
//console.log(e.data)
|
|
//console.log(res[0].substring(0,6))
|
|
//console.log(res)
|
|
//console.log(res[0].slice(1))
|
|
var divtext = document.getElementById('status');
|
|
var divtextp = document.getElementById('players');
|
|
|
|
|
|
switch (res[0].substring(0,6)) {
|
|
|
|
case "/statu":
|
|
_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;
|
|
|
|
|
|
default:
|
|
console.log("test "+res[0].slice(1)+" "+res[1]);
|
|
document.getElementById(res[0].slice(1)).value = res[1];
|
|
}
|
|
},
|
|
|
|
onError: function (e) {
|
|
_WS.showstatus('<span style="color: red;">ERROR:</span> ' + e.data);
|
|
},
|
|
|
|
showin: 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();
|
|
},
|
|
|
|
showout: function (message) {
|
|
var divtext = document.getElementById('status');
|
|
divtext.innerHTML="";
|
|
divtext.innerHTML= message.toString();
|
|
},
|
|
|
|
showstatus: function (message) {
|
|
var divtext = document.getElementById('status');
|
|
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);
|
|
}
|
|
|
|
</script>
|
|
|
|
<!--
|
|
web audio encoders scripts
|
|
-->
|
|
|
|
<script type="text/javascript">
|
|
var message="";
|
|
var log=[];
|
|
var knobs = document.getElementsByTagName('webaudio-knob');
|
|
|
|
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 nofx0() {
|
|
console.log("nofx0")
|
|
var x = document.getElementById("aurora/fx/0 ScanH");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/0 ScanV");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/0 Wave");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/0 Circle");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/0 Starfield");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/0 Word");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/0 Trckr");
|
|
x.value = 0 ;
|
|
}
|
|
|
|
|
|
function nocolor0() {
|
|
console.log("nocolor0")
|
|
var x = document.getElementById("aurora/color/0 red");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/color/0 yellow");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/color/0 green");
|
|
x.value = 0 ;
|
|
//var x = document.getElementById("aurora/color/0 blue");
|
|
// x.value = 0 ;
|
|
//var x = document.getElementById("aurora/color/0 cyan");
|
|
// x.value = 0 ;
|
|
//var x = document.getElementById("aurora/color/0 white");
|
|
// 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/>";
|
|
}
|
|
|
|
_WS.send("/" + e.target.id + " " + e.target.value);
|
|
|
|
var res = e.target.id.split(" ");
|
|
|
|
// Fx
|
|
if (e.target.id === "on" && e.type === "change") {
|
|
window.location.reload();
|
|
}
|
|
|
|
if (res[0].substring(7,9) === "fx" && e.type === "change") {
|
|
|
|
var layer = res[0].substring(10,12);
|
|
nofx0();
|
|
var x = document.getElementById(e.target.id);
|
|
x.value = 1 ;
|
|
_WS.showstatus(e.target.id);
|
|
|
|
}
|
|
|
|
// Colors
|
|
if (res[0].substring(7,9) === "co" && e.type === "change") {
|
|
|
|
var layer = res[0].substring(13,14);
|
|
console.log(layer)
|
|
nocolor0();
|
|
var x = document.getElementById(e.target.id);
|
|
x.value = 1 ;
|
|
_WS.showstatus(e.target.id);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|