LJ/www/simu.html

605 lines
20 KiB
HTML
Raw Normal View History

2020-09-19 12:28:56 +00:00
<!DOCTYPE html>
<html>
<head>
<title>Simu Rack</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">
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
<!-- 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>
2020-09-19 12:28:56 +00:00
<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" 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;">
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
<!--
Navigation Rack
-->
<div class="Rackcontent">
<div class="content">
<div class="buttons-7container">
<a href="index.html">
<div class="webaudiobut">
2020-10-03 15:51:26 +00:00
<div align="center" class="navled">
2020-09-19 12:28:56 +00:00
Index
</div>
</div>
</a>
2023-06-03 12:43:53 +00:00
<a href="settings2.html">
2020-09-19 12:28:56 +00:00
<div class="webaudiobut">
2020-10-03 15:51:26 +00:00
<div align="center" class="navled">
2020-10-10 17:29:07 +00:00
Settings
2020-09-19 12:28:56 +00:00
</div>
</div>
</a>
<a href="auralls.html">
<div class="webaudiobut">
2020-10-03 15:51:26 +00:00
<div align="center" class="navled">
2020-09-19 12:28:56 +00:00
Aurora
</div>
</div>
</a>
<a href="trckr/trckrcam1.html">
<div class="webaudiobut">
2020-10-03 15:51:26 +00:00
<div align="center" class="navled">
2020-09-19 12:28:56 +00:00
Lasercam
</div>
</div>
</a>
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
<a href="simu.html">
<div class="webaudiobut">
2020-10-03 15:51:26 +00:00
<div align="center" class="navled">
2020-09-19 12:28:56 +00:00
Simu
</div>
</div>
</a>
<div class="webaudiobut">
2020-10-10 17:29:07 +00:00
<button type="button" class="navled" style="border : #222222 1px;" onclick="onSubmit(this.id)" id="settings/reset" >
reset
2020-09-19 12:28:56 +00:00
</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">
2020-10-03 15:51:26 +00:00
<div class="TopRackGrid">
2020-09-19 12:28:56 +00:00
<div>
2023-06-03 12:43:53 +00:00
<h2 style="margin-bottom: 30px;">
LJ Simu
2020-09-19 12:28:56 +00:00
<span class="shade">&nbsp;</span>
</h2>
2023-06-03 12:43:53 +00:00
<webaudio-switch id="on" value="0" tooltip="Switch-B" height="30" width="90" src="knobs/power.png">
2020-09-19 12:28:56 +00:00
</webaudio-switch>
</div>
<div class="webaudiobut" style="background-image: linear-gradient(174deg, #111,#030303);">
2020-10-03 15:51:26 +00:00
<div align="center" id="line1" class="busled">
2020-09-19 12:28:56 +00:00
Simu Rack
</div>
2020-10-03 15:51:26 +00:00
<div align="center" id="status" class="busled">
2020-09-19 12:28:56 +00:00
/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>
<!--
Laser Rack
-->
<div class="content">
2020-10-03 15:51:26 +00:00
<div class="Rackgrid">
2020-09-19 12:28:56 +00:00
<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>
<!--
Simu Rack
-->
2020-10-03 15:51:26 +00:00
<div class="content" style="background-image: linear-gradient(174deg, #111,#030303);">
2020-09-19 12:28:56 +00:00
<canvas id="canvas" width="400" height="400" style="margin-left: 200px;margin-top : 20px;background-image:">canvas>
</div>
<!--
Encoders Line
2020-10-03 15:51:26 +00:00
# /aurora/radius layernumber radius [0-1]
2020-09-19 12:28:56 +00:00
# /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
-->
<!--
2020-10-03 15:51:26 +00:00
JS
2020-09-19 12:28:56 +00:00
-->
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
<!-- LJ style WS : A nettoyer ! -->
<script type="text/javascript">
2023-06-03 12:43:53 +00:00
let type = "simu";
var LJ = websocket_uri
2020-09-19 12:28:56 +00:00
2023-06-03 12:43:53 +00:00
var pl = "";
var pl2 = new Array();
2020-09-19 12:28:56 +00:00
2023-06-03 12:43:53 +00:00
var _WS = {
2020-09-19 12:28:56 +00:00
uri: LJ,
ws: null,
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
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); };
},
onClose: function () {
2023-06-03 12:43:53 +00:00
_WS.showstatus('DISCONNECTED');
document.getElementById("on").value = 0;
document.getElementById("lstt/0").value = 0;
document.getElementById("lstt/1").value = 0;
document.getElementById("lstt/2").value = 0;
document.getElementById("lstt/3").value = 0;
document.getElementById("lack/0").value = 0;
document.getElementById("lack/1").value = 0;
document.getElementById("lack/2").value = 0;
document.getElementById("lack/3").value = 0;
},
2020-09-19 12:28:56 +00:00
onOpen: function () {
2023-06-03 12:43:53 +00:00
var divtext = document.getElementById('status');
divtext.innerHTML="";
divtext.innerHTML= "Connected to "+LJ;
document.getElementById("on").value = 1;
2020-09-19 12:28:56 +00:00
},
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
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)) {
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
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 "/simul":
2023-06-03 12:43:53 +00:00
pl = e.data.slice(7);
//console.log(pl)
pl2 = eval(pl.replace(/[()]/g, ''));
break;
2020-09-19 12:28:56 +00:00
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;
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
case "/plpoi":
2023-06-03 12:43:53 +00:00
//console.log("plpoint");
break;
case "/lack/":
//console.log("/lack "+res[1])
document.getElementById(res[0].slice(1)).value = res[1];
break;
case "/lstt/":
//console.log("/lstt "+res[0].slice(1)+" "+res[0].slice(2))
document.getElementById(res[0].slice(1)).value = res[1];
break;
case "/point":
if (type === 'settings') {
//console.log("buffer display"+res[1]);
document.getElementById(res[0].slice(1)).value = res[1];
}
2020-09-19 12:28:56 +00:00
break;
2023-06-03 12:43:53 +00:00
case "/simul":
if (type === 'simu') {
console.log("simul "+res[1]);
pl = e.data.slice(7);
//console.log(pl)
pl2 = eval(pl.replace(/[()]/g, ''));
//document.getElementById(res[0].slice(1)).value = res[1];
}
break;
case "/laser":
console.log("/laser "+res[1])
newlaser(res[1])
break;
2023-07-16 23:22:27 +00:00
case "/auraon":
var divtext = document.getElementById('status');
divtext.innerHTML="";
divtext.innerHTML= "Aurora plugin ON";
document.getElementById("auraon").value = 1;
2020-09-19 12:28:56 +00:00
default:
2023-06-03 12:43:53 +00:00
var element = document.getElementById(res[0].slice(1));
if(typeof(element) != 'undefined' && element != null){
console.log("default handler for "+res[0].slice(1)+" "+res[1]);
document.getElementById(res[0].slice(1)).value = res[1];
_WS.showstatus(res[0].slice(1)+" "+res[1])
} else{
console.log("default handler for "+res[0].slice(1)+" "+res[1]+' does not exist!');
}
2020-09-19 12:28:56 +00:00
}
},
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
onError: function (e) {
_WS.showstatus('<span style="color: red;">ERROR:</span> ' + e.data);
},
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
showin: function (message) {
2023-06-03 12:43:53 +00:00
var divtext = document.getElementById('status');
divtext.innerHTML="";
divtext.innerHTML= message.toString();
2020-09-19 12:28:56 +00:00
},
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
showout: function (message) {
2023-06-03 12:43:53 +00:00
var divtext = document.getElementById('status');
divtext.innerHTML="";
divtext.innerHTML= message.toString();
2020-09-19 12:28:56 +00:00
},
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
showstatus: function (message) {
2023-06-03 12:43:53 +00:00
var divtext = document.getElementById('status');
divtext.innerHTML="";
divtext.innerHTML= message.toString();
2020-09-19 12:28:56 +00:00
},
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
showline1: function (message) {
2023-06-03 12:43:53 +00:00
var divtext = document.getElementById('line1');
divtext.innerHTML="";
divtext.innerHTML= message.toString();
2020-09-19 12:28:56 +00:00
},
send: function (message) {
if (!message.length) {
alert('Empty message not allowed !');
} else {
_WS.showstatus(message);
_WS.s.send(message);
}
},
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
close: function () {
_WS.showstatus('GOODBYE !');
_WS.s.close();
}
};
2020-10-03 15:51:26 +00:00
window.addEventListener('load', _WS.init, false);
2020-09-19 12:28:56 +00:00
//
// Forms submits
//
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
function onSubmit(clicked_id) {
var input = document.getElementById(clicked_id);
//console.log("/" + clicked_id + " " + input.value);
_WS.send("/" + clicked_id + " " + input.value);
}
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
</script>
2020-10-03 15:51:26 +00:00
<!--
web audio encoders scripts
2020-09-19 12:28:56 +00:00
-->
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
<script type="text/javascript">
var message="";
var log=[];
var knobs = document.getElementsByTagName('webaudio-knob');
2023-06-03 12:43:53 +00:00
var laser = 0;
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
for(var i = 0; i < knobs.length; i++){
knobs[i].addEventListener("input",Dump,false);
knobs[i].addEventListener("change",Dump,false);
2023-06-03 12:43:53 +00:00
}
2020-09-19 12:28:56 +00:00
var sliders = document.getElementsByTagName('webaudio-slider');
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
for(var i = 0; i < sliders.length; i++){
sliders[i].addEventListener("input",Dump,false);
sliders[i].addEventListener("change",Dump,false);
2023-06-03 12:43:53 +00:00
}
2020-09-19 12:28:56 +00:00
var switches = document.getElementsByTagName('webaudio-switch');
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
for(var i = 0; i < switches.length; i++) {
switches[i].addEventListener("change",Dump,false);
2023-06-03 12:43:53 +00:00
}
2020-09-19 12:28:56 +00:00
function newlaser(id) {
2023-06-03 12:43:53 +00:00
console.log("newlaser " +id);
2020-09-19 12:28:56 +00:00
var laserid = 24+ parseInt(id,10);
laser = "noteon "+laserid;
console.log("laser "+laser);
nolaser();
2023-06-03 12:43:53 +00:00
2020-09-19 12:28:56 +00:00
var x = document.getElementById(laser);
x.value = 1 ;
}
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 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 ;
}
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
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="";
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
for(var i=19;i>=0;--i) {
if(log[i])
str+=log[i]+"<br/>";
}
_WS.send("/" + e.target.id + " " + e.target.value);
2020-10-03 15:51:26 +00:00
var res = e.target.id.split(" ");
2020-09-19 12:28:56 +00:00
// on off
2020-10-03 15:51:26 +00:00
if (e.target.id === "on" && e.type === "change") {
2020-09-19 12:28:56 +00:00
window.location.reload();
}
// Go to index
2020-10-03 15:51:26 +00:00
if (e.target.id === "index" && e.type === "change") {
2020-09-19 12:28:56 +00:00
window.location.assign("index.html");
}
// Fx
2020-10-03 15:51:26 +00:00
if (res[0].substring(7,9) === "fx" && e.type === "change") {
2020-09-19 12:28:56 +00:00
2020-10-03 15:51:26 +00:00
var layer = res[0].substring(10,12);
nofx0();
2020-09-19 12:28:56 +00:00
var x = document.getElementById(e.target.id);
x.value = 1 ;
_WS.showstatus(e.target.id);
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
}
// Colors
2020-10-03 15:51:26 +00:00
if (res[0].substring(7,9) === "co" && e.type === "change") {
2020-09-19 12:28:56 +00:00
2020-10-03 15:51:26 +00:00
var layer = res[0].substring(13,14);
2020-09-19 12:28:56 +00:00
console.log(layer)
nocolor0();
var x = document.getElementById(e.target.id);
x.value = 1 ;
_WS.showstatus(e.target.id);
}
// Lasers
2020-10-03 15:51:26 +00:00
if (res[0] === "noteon" && e.type === "change") {
2020-09-19 12:28:56 +00:00
//console.log(e.target.id)
nolaser();
var x = document.getElementById(e.target.id);
x.value = 1 ;
_WS.showstatus(e.target.id);
}
}
</script>
2020-10-03 15:51:26 +00:00
<!--
Simulator Point lists drawing scripts
2020-09-19 12:28:56 +00:00
-->
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
<script type="text/javascript">
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
//
// Simulator canvas : store Reference To The Canvas & Set Context
//
2020-10-03 15:51:26 +00:00
2020-09-19 12:28:56 +00:00
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
2020-10-03 15:51:26 +00:00
// Draws every segment received, except black colored target ones
2020-09-19 12:28:56 +00:00
function draw() {
if (pl2.length > 0)
2020-10-03 15:51:26 +00:00
{
2020-09-19 12:28:56 +00:00
ctx.clearRect(0,0,400,400);
2020-10-03 15:51:26 +00:00
lastpoint = {
2023-06-03 12:43:53 +00:00
x:pl2[0]+400,
y:pl2[1]+400,
2020-10-03 15:51:26 +00:00
color:pl2[2]
}
for (var i = 0; i <= pl2.length; i+=3)
{
point = {
2023-06-03 12:43:53 +00:00
x:pl2[i]+400,
y:pl2[i+1]+400,
2020-10-03 15:51:26 +00:00
color:pl2[i+2]
}
// console.log(lastpoint,point)
// if the target is black, skip drawing
if( point.color != 0){
ctx.beginPath()
2023-06-03 12:43:53 +00:00
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 5;
ctx.shadowColor = 'rgba(255, 255, 255, 1)';
ctx.lineWidth = 2;
ctx.stroke.width = 1;
2020-10-03 15:51:26 +00:00
ctx.strokeStyle = "#"+(point.color + Math.pow(16, 6)).toString(16).slice(-6);
ctx.moveTo(lastpoint.x * zoom, lastpoint.y * zoom);
ctx.lineTo(point.x * zoom, point.y * zoom);
2020-09-19 12:28:56 +00:00
ctx.stroke();
ctx.closePath()
}
2020-10-03 15:51:26 +00:00
lastpoint = point
}
}
2020-09-19 12:28:56 +00:00
// Call Draw Function Again To Create Animation
window.requestAnimationFrame(draw);
2020-10-03 15:51:26 +00:00
}
2020-09-19 12:28:56 +00:00
// Initialize The Draw Function
draw();
</script>
</body>
</html>