forked from protonphoton/LJ
[fix] www: rework the simulator page
This commit is contained in:
parent
371003fce2
commit
5e26faa798
201
www/simu.html
201
www/simu.html
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user