protonphoton/LJ
7
0
Fork 1
Code Issues Pull Requests 2 Releases Wiki Activity

[fix] www: rework the simulator page

Browse Source
This commit is contained in:
alban 2020-10-03 17:51:26 +02:00
parent 371003fce2
commit 5e26faa798
1 changed files with 85 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
www/simu.html
View File

@ -10,8 +10,8 @@
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.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="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png"> <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<!-- Page specific styles --> <!-- Page specific styles -->
<style> <style>
@ -38,7 +38,7 @@
<body style="background-color:#222;"> <body style="background-color:#222;">
<!-- <!--
Navigation Rack Navigation Rack
--> -->
@ -49,7 +49,7 @@
<a href="index.html"> <a href="index.html">
<div class="webaudiobut"> <div class="webaudiobut">
<div align="center" class="navled"> <div align="center" class="navled">
Index Index
</div> </div>
</div> </div>
@ -57,7 +57,7 @@
<a href="align.html"> <a href="align.html">
<div class="webaudiobut"> <div class="webaudiobut">
<div align="center" class="navled"> <div align="center" class="navled">
Align Align
</div> </div>
</div> </div>
@ -65,7 +65,7 @@
<a href="auralls.html"> <a href="auralls.html">
<div class="webaudiobut"> <div class="webaudiobut">
<div align="center" class="navled"> <div align="center" class="navled">
Aurora Aurora
</div> </div>
</div> </div>
@ -73,15 +73,15 @@
<a href="trckr/trckrcam1.html"> <a href="trckr/trckrcam1.html">
<div class="webaudiobut"> <div class="webaudiobut">
<div align="center" class="navled"> <div align="center" class="navled">
Lasercam Lasercam
</div> </div>
</div> </div>
</a> </a>
<a href="simu.html"> <a href="simu.html">
<div class="webaudiobut"> <div class="webaudiobut">
<div align="center" class="navled"> <div align="center" class="navled">
Simu Simu
</div> </div>
</div> </div>
@ -110,7 +110,7 @@
--> -->
<div class="content"> <div class="content">
<div class="TopRackGrid"> <div class="TopRackGrid">
<div> <div>
<h2> <h2>
/TL Simu /TL Simu
@ -120,10 +120,10 @@
</webaudio-switch> </webaudio-switch>
</div> </div>
<div class="webaudiobut" style="background-image: linear-gradient(174deg, #111,#030303);"> <div class="webaudiobut" style="background-image: linear-gradient(174deg, #111,#030303);">
<div align="center" id="line1" class="busled"> <div align="center" id="line1" class="busled">
Simu Rack Simu Rack
</div> </div>
<div align="center" id="status" class="busled"> <div align="center" id="status" class="busled">
/team/laser /team/laser
</div> </div>
</div> </div>
@ -149,7 +149,7 @@
Laser Rack Laser Rack
--> -->
<div class="content"> <div class="content">
<div class="Rackgrid"> <div class="Rackgrid">
<div> <div>
<h2>Lasers</h2> <h2>Lasers</h2>
</div> </div>
@ -171,7 +171,7 @@
<!-- <!--
Simu Rack Simu Rack
--> -->
<div class="content" style="background-image: linear-gradient(174deg, #111,#030303);"> <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> <canvas id="canvas" width="400" height="400" style="margin-left: 200px;margin-top : 20px;background-image:">canvas>
</div> </div>
@ -179,7 +179,7 @@
<!-- <!--
Encoders Line Encoders Line
# /aurora/radius layernumber radius [0-1] # /aurora/radius layernumber radius [0-1]
# /aurora/rotdirec layer axe direc # /aurora/rotdirec layer axe direc
# /aurora/linesize layer value # /aurora/linesize layer value
# /aurora/rotdirec layer axe direc # /aurora/rotdirec layer axe direc
@ -190,9 +190,9 @@
--> -->
<!-- <!--
JS JS
--> -->
<!-- LJ style WS : A nettoyer ! --> <!-- LJ style WS : A nettoyer ! -->
<script type="text/javascript"> <script type="text/javascript">
@ -207,7 +207,7 @@
uri: LJ, uri: LJ,
ws: null, ws: null,
init : function (e) { init : function (e) {
_WS.s = new WebSocket(_WS.uri); _WS.s = new WebSocket(_WS.uri);
_WS.s.onopen = function (e) { _WS.onOpen(e); }; _WS.s.onopen = function (e) { _WS.onOpen(e); };
@ -238,7 +238,7 @@
document.getElementById("on").value = 1; document.getElementById("on").value = 1;
}, },
onMessage: function (e) { onMessage: function (e) {
var res = e.data.split(" "); var res = e.data.split(" ");
@ -251,7 +251,7 @@
switch (res[0].substring(0,6)) { switch (res[0].substring(0,6)) {
case "/statu": case "/statu":
_WS.showline1("connected to "+LJ); _WS.showline1("connected to "+LJ);
if (res[2]==="Disconnected"){ if (res[2]==="Disconnected"){
@ -283,7 +283,7 @@
//divtext.innerHTML="connected to "+LJ; //divtext.innerHTML="connected to "+LJ;
divtext1.innerHTML='<span style="color: red;">'+ res[1]+" "+res[2]+'</span>'; divtext1.innerHTML='<span style="color: red;">'+ res[1]+" "+res[2]+'</span>';
break; break;
case "/plpoi": case "/plpoi":
//console.log("plpoint"); //console.log("plpoint");
break; break;
@ -294,29 +294,29 @@
break break
} }
}, },
onError: function (e) { onError: function (e) {
_WS.showstatus('<span style="color: red;">ERROR:</span> ' + e.data); _WS.showstatus('<span style="color: red;">ERROR:</span> ' + e.data);
}, },
showin: function (message) { showin: function (message) {
var divtext = document.getElementById('status'); var divtext = document.getElementById('status');
divtext.innerHTML=""; divtext.innerHTML="";
divtext.innerHTML= message.toString(); divtext.innerHTML= message.toString();
}, },
showout: function (message) { showout: function (message) {
var divtext = document.getElementById('status'); var divtext = document.getElementById('status');
divtext.innerHTML=""; divtext.innerHTML="";
divtext.innerHTML= message.toString(); divtext.innerHTML= message.toString();
}, },
showstatus: function (message) { showstatus: function (message) {
var divtext = document.getElementById('status'); var divtext = document.getElementById('status');
divtext.innerHTML=""; divtext.innerHTML="";
divtext.innerHTML= message.toString(); divtext.innerHTML= message.toString();
}, },
showline1: function (message) { showline1: function (message) {
var divtext = document.getElementById('line1'); var divtext = document.getElementById('line1');
divtext.innerHTML=""; divtext.innerHTML="";
@ -331,47 +331,47 @@
_WS.s.send(message); _WS.s.send(message);
} }
}, },
close: function () { close: function () {
_WS.showstatus('GOODBYE !'); _WS.showstatus('GOODBYE !');
_WS.s.close(); _WS.s.close();
} }
}; };
window.addEventListener('load', _WS.init, false); window.addEventListener('load', _WS.init, false);
// //
// Forms submits // Forms submits
// //
function onSubmit(clicked_id) { function onSubmit(clicked_id) {
var input = document.getElementById(clicked_id); var input = document.getElementById(clicked_id);
//console.log("/" + clicked_id + " " + input.value); //console.log("/" + clicked_id + " " + input.value);
_WS.send("/" + clicked_id + " " + input.value); _WS.send("/" + clicked_id + " " + input.value);
} }
</script> </script>
<!-- <!--
web audio encoders scripts web audio encoders scripts
--> -->
<script type="text/javascript"> <script type="text/javascript">
var message=""; var message="";
var log=[]; var log=[];
var knobs = document.getElementsByTagName('webaudio-knob'); var knobs = document.getElementsByTagName('webaudio-knob');
for(var i = 0; i < knobs.length; i++){ for(var i = 0; i < knobs.length; i++){
knobs[i].addEventListener("input",Dump,false); knobs[i].addEventListener("input",Dump,false);
knobs[i].addEventListener("change",Dump,false); knobs[i].addEventListener("change",Dump,false);
} }
var sliders = document.getElementsByTagName('webaudio-slider'); var sliders = document.getElementsByTagName('webaudio-slider');
for(var i = 0; i < sliders.length; i++){ for(var i = 0; i < sliders.length; i++){
sliders[i].addEventListener("input",Dump,false); sliders[i].addEventListener("input",Dump,false);
sliders[i].addEventListener("change",Dump,false); sliders[i].addEventListener("change",Dump,false);
} }
var switches = document.getElementsByTagName('webaudio-switch'); var switches = document.getElementsByTagName('webaudio-switch');
for(var i = 0; i < switches.length; i++) { for(var i = 0; i < switches.length; i++) {
switches[i].addEventListener("change",Dump,false); switches[i].addEventListener("change",Dump,false);
} }
@ -418,8 +418,8 @@
var x = document.getElementById("aurora/fx/0 Trckr"); var x = document.getElementById("aurora/fx/0 Trckr");
x.value = 0 ; x.value = 0 ;
} }
function nocolor0() { function nocolor0() {
console.log("nocolor0") console.log("nocolor0")
var x = document.getElementById("aurora/color/0 red"); var x = document.getElementById("aurora/color/0 red");
@ -444,7 +444,7 @@
log.unshift(str); log.unshift(str);
log.length=1; log.length=1;
str=""; str="";
for(var i=19;i>=0;--i) { for(var i=19;i>=0;--i) {
if(log[i]) if(log[i])
str+=log[i]+"<br/>"; str+=log[i]+"<br/>";
@ -452,33 +452,33 @@
_WS.send("/" + e.target.id + " " + e.target.value); _WS.send("/" + e.target.id + " " + e.target.value);
var res = e.target.id.split(" "); var res = e.target.id.split(" ");
// on off // on off
if (e.target.id === "on" && e.type === "change") { if (e.target.id === "on" && e.type === "change") {
window.location.reload(); window.location.reload();
} }
// Go to index // Go to index
if (e.target.id === "index" && e.type === "change") { if (e.target.id === "index" && e.type === "change") {
window.location.assign("index.html"); window.location.assign("index.html");
} }
// Fx // Fx
if (res[0].substring(7,9) === "fx" && e.type === "change") { if (res[0].substring(7,9) === "fx" && e.type === "change") {
var layer = res[0].substring(10,12); var layer = res[0].substring(10,12);
nofx0(); nofx0();
var x = document.getElementById(e.target.id); var x = document.getElementById(e.target.id);
x.value = 1 ; x.value = 1 ;
_WS.showstatus(e.target.id); _WS.showstatus(e.target.id);
} }
// Colors // Colors
if (res[0].substring(7,9) === "co" && e.type === "change") { if (res[0].substring(7,9) === "co" && e.type === "change") {
var layer = res[0].substring(13,14); var layer = res[0].substring(13,14);
console.log(layer) console.log(layer)
nocolor0(); nocolor0();
var x = document.getElementById(e.target.id); var x = document.getElementById(e.target.id);
@ -486,9 +486,9 @@
_WS.showstatus(e.target.id); _WS.showstatus(e.target.id);
} }
// Lasers // Lasers
if (res[0] === "noteon" && e.type === "change") { if (res[0] === "noteon" && e.type === "change") {
//console.log(e.target.id) //console.log(e.target.id)
nolaser(); nolaser();
var x = document.getElementById(e.target.id); var x = document.getElementById(e.target.id);
@ -500,88 +500,57 @@
</script> </script>
<!-- <!--
Simulator Point lists drawing scripts Simulator Point lists drawing scripts
--> -->
<script type="text/javascript"> <script type="text/javascript">
// //
// Simulator canvas : store Reference To The Canvas & Set Context // Simulator canvas : store Reference To The Canvas & Set Context
// //
var canvas = document.getElementById("canvas"); var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
var lastpoint = { x: 0, y: 0, color: 0}; var lastpoint = { x: 0, y: 0, color: 0};
ctx.clearRect(0,0,400,400); ctx.clearRect(0,0,400,400);
var zoom = 0.5; var zoom = 0.5;
//ctx.save //ctx.save
// Draws every segment received, except black colored target ones
// Todo : laser point will have black points to go from a polyline to another. Need to discard those black points.
function draw() { function draw() {
// Clear Canvas At The Start Of Every Frame
//ctx.restore
if (pl2.length > 0) 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.clearRect(0,0,400,400);
ctx.beginPath(); lastpoint = {
x:pl2[0],
ctx.moveTo(pl2[0]*zoom, pl2[1]*zoom); y:pl2[1],
lastpoint.color = pl2[2]; color:pl2[2]
}
// Draw n Lines for (var i = 0; i <= pl2.length; i+=3)
for (var i = 0; i < pl2.length/3; i++) {
{ point = {
x:pl2[i],
// New point has the same color -> add a new line to the new point y:pl2[i+1],
if (pl2[2+(i*3)] === lastpoint.color) color:pl2[i+2]
{
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)];
} }
// console.log(lastpoint,point)
} // if the target is black, skip drawing
if( point.color != 0){
ctx.beginPath()
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);
ctx.stroke();
ctx.closePath()
}
lastpoint = point
}
}
// Call Draw Function Again To Create Animation // Call Draw Function Again To Create Animation
window.requestAnimationFrame(draw); window.requestAnimationFrame(draw);
} }
// Initialize The Draw Function // Initialize The Draw Function
draw(); draw();
</script> </script>