missing www
This commit is contained in:
Sam
parent
5f7c61f616
commit
cfc7c70d16
131 changed files with 11126 additions and 661 deletions
284
www/auralls.html
284
www/auralls.html
|
|
@ -59,7 +59,7 @@
|
|||
</div>
|
||||
</a>
|
||||
|
||||
<a href="settings.html">
|
||||
<a href="settings2.html">
|
||||
<div class="webaudiobut">
|
||||
<div align="center" class="navled">
|
||||
Settings
|
||||
|
|
@ -115,11 +115,11 @@
|
|||
<div class="content">
|
||||
<div class="TopRackGrid">
|
||||
<div>
|
||||
<h2>
|
||||
/TL Aurora
|
||||
<h2 style="margin-bottom: 30px;">
|
||||
LJ 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 id="on" value="0" tooltip="Switch-B" height="30" width="90" src="knobs/power.png">
|
||||
</webaudio-switch>
|
||||
</div>
|
||||
<div class="webaudiobut">
|
||||
|
|
@ -473,6 +473,14 @@
|
|||
|
||||
<script type="text/javascript">
|
||||
|
||||
let type = "simu";
|
||||
|
||||
// green (1) PLAYING / cyan (2) PREPARE / blue (3) IDLE
|
||||
let acks = new Array ( "0","PLAYING", "PREPARE", "IDLE");
|
||||
|
||||
// green (1) ACK / yellow (4) INVALID / orange (5) FULL / (6) no connection
|
||||
let stts = new Array ("0", "ACK", "2", "3", "INVALID", "FULL", "no connection");
|
||||
|
||||
var LJ = websocket_uri
|
||||
|
||||
|
||||
|
|
@ -548,30 +556,50 @@
|
|||
newlaser(res[1])
|
||||
break;
|
||||
|
||||
case "/simul":
|
||||
pl = e.data.slice(7);
|
||||
//console.log(pl)
|
||||
pl2 = eval(pl.replace(/[()]/g, ''));
|
||||
break;
|
||||
|
||||
//case "/simul":
|
||||
// pl = e.data.slice(7);
|
||||
// pl2 = eval(pl.replace(/[()]/g, ''));
|
||||
// break;
|
||||
case "/lack/":
|
||||
console.log("/lack "+res[1])
|
||||
//console.log("/lack "+res[1])
|
||||
document.getElementById(res[0].slice(1)).value = res[1];
|
||||
break;
|
||||
|
||||
case "/lstt/":
|
||||
console.log("/lstt "+res[1])
|
||||
//console.log("/lstt "+res[1])
|
||||
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];
|
||||
}
|
||||
break;
|
||||
|
||||
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;
|
||||
|
||||
default:
|
||||
//console.log("default "+res[0].slice(1)+" "+res[1]);
|
||||
//document.getElementById(res[0].slice(1)).value = res[1];
|
||||
//_WS.showstatus(e.data);
|
||||
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!');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
onError: function (e) {
|
||||
_WS.showstatus('<span style="color: red;">ERROR:</span> ' + e.data);
|
||||
},
|
||||
|
|
@ -654,8 +682,7 @@
|
|||
}
|
||||
|
||||
function newlaser(id) {
|
||||
|
||||
console.log("newlaser " +id)
|
||||
console.log("newlaser " +id);
|
||||
var laserid = 24+ parseInt(id,10);
|
||||
lasernote = "noteon "+laserid;
|
||||
console.log("laser "+lasernote);
|
||||
|
|
@ -664,7 +691,7 @@
|
|||
|
||||
var x = document.getElementById(lasernote);
|
||||
x.value = 1 ;
|
||||
laser = id
|
||||
laser = id;
|
||||
}
|
||||
|
||||
function nolaser() {
|
||||
|
|
@ -726,42 +753,37 @@
|
|||
|
||||
|
||||
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/>";
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
//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") {
|
||||
|
||||
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);
|
||||
|
|
@ -770,52 +792,45 @@
|
|||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
//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);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
else {
|
||||
console.log("knobs sending "+res[0]+" "+laser+ " "+ res[1]+ " " + e.target.value);
|
||||
_WS.send("/" + res[0]+" "+laser+ " " + res[1]+" "+ e.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -829,79 +844,54 @@
|
|||
//
|
||||
// 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.
|
||||
|
||||
// Draws every segment received, except black colored target ones
|
||||
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);
|
||||
if (pl2.length > 0)
|
||||
{
|
||||
ctx.clearRect(0,0,400,400);
|
||||
lastpoint = {
|
||||
x:pl2[0],
|
||||
y:pl2[1],
|
||||
color:pl2[2]
|
||||
}
|
||||
for (var i = 0; i <= pl2.length; i+=3)
|
||||
{
|
||||
point = {
|
||||
x:pl2[i],
|
||||
y:pl2[i+1],
|
||||
color:pl2[i+2]
|
||||
}
|
||||
// console.log(lastpoint,point)
|
||||
// if the target is black, skip drawing
|
||||
if( point.color != 0){
|
||||
ctx.beginPath()
|
||||
ctx.shadowOffsetX = 0;
|
||||
ctx.shadowOffsetY = 0;
|
||||
ctx.shadowBlur = 5;
|
||||
ctx.shadowColor = 'rgba(255, 255, 255, 1)';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke.width = 1;
|
||||
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
|
||||
window.requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
// Initialize The Draw Function
|
||||
draw();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -87,6 +87,13 @@
|
|||
gap: 1px 1px;
|
||||
grid-template-areas: ". . . .";
|
||||
}
|
||||
.TopRackGridS {
|
||||
display: grid;
|
||||
grid-template-columns: 110px 510px 30px 30px;
|
||||
grid-template-rows: 1fr;
|
||||
gap: 1px 1px;
|
||||
grid-template-areas: ". . . .";
|
||||
}
|
||||
.TextGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 370px;
|
||||
|
|
@ -149,6 +156,18 @@
|
|||
-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);
|
||||
}
|
||||
.contentS{
|
||||
width : 700px;
|
||||
padding : 10px 20px;
|
||||
margin : 5px auto;
|
||||
border-radius: 10px;
|
||||
border : #212121 2px solid;
|
||||
background-color: #000000;
|
||||
background-image: linear-gradient(174deg, #222,#111);
|
||||
-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);
|
||||
}
|
||||
.Rackcontent{
|
||||
width : 845px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -348,12 +367,47 @@
|
|||
gap: 1px 1px;
|
||||
grid-template-areas: ". . . . . . . . . .";
|
||||
}
|
||||
.mgstatus {
|
||||
color: #aaa;
|
||||
text-align: middle;
|
||||
font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
|
||||
display: grid;
|
||||
height: 195px;
|
||||
grid-template-columns: 180px 180px 180px 180px;
|
||||
grid-template-rows: 1Fr;
|
||||
margin-left: 10px
|
||||
border-width: 1px solid #445;
|
||||
gap: 1px 1px;
|
||||
grid-template-areas: ". . . . . . . . . .";
|
||||
}
|
||||
.lasergrid {
|
||||
display: grid;
|
||||
height: 323px;
|
||||
width: 200px;
|
||||
grid-template-columns: 62px 62px 62px;
|
||||
grid-template-rows: 30px 19px 10px 55px 19px 20px 16px 55px 19px 25px 16px 55px 19px;
|
||||
grid-template-rows: 30px 19px 10px 55px 19px 20px 16px 30px 19px 25px 16px 55px 19px;
|
||||
line-height: 1;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
color:#88c;
|
||||
}
|
||||
.lasergridslid {
|
||||
display: grid;
|
||||
height: 323px;
|
||||
width: 200px;
|
||||
grid-template-columns: 128px 62px;
|
||||
grid-template-rows: 30px 19px 30px 19px 30px 19px 30px 19px 30px 35px 35px 35px;
|
||||
line-height: 1;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
color:#88c;
|
||||
}
|
||||
.lasergridstatus {
|
||||
display: grid;
|
||||
height: 50px;
|
||||
width: 200px;
|
||||
grid-template-columns: 80px 55px;
|
||||
grid-template-rows: 1Fr 1Fr;
|
||||
line-height: 1;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
|
|
|||
100
www/index.html
100
www/index.html
|
|
@ -49,7 +49,8 @@
|
|||
<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
|
||||
Click on the wanted Rack <br />
|
||||
<a href="../doc/index.html">doc</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -60,16 +61,16 @@
|
|||
Status Rack
|
||||
-->
|
||||
|
||||
<a href="index.html">
|
||||
<a href="status.html">
|
||||
<div class="content">
|
||||
<div class="TopRackGrid">
|
||||
<div>
|
||||
<h2>
|
||||
Status
|
||||
<h2 style="margin-bottom:10px;">
|
||||
LJ 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">
|
||||
<div style="margin-top:30px;">
|
||||
<webaudio-switch id="on" value="0" tooltip="Switch-B" height="30" width="90" src="knobs/power.png">
|
||||
</webaudio-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -104,28 +105,34 @@
|
|||
Settings Rack
|
||||
-->
|
||||
|
||||
<a href="settings.html">
|
||||
<a href="settings2.html">
|
||||
<div class="content">
|
||||
<div class="TopRackGrid">
|
||||
<div>
|
||||
<h2>
|
||||
Settings
|
||||
<span class="shade"> </span>
|
||||
</h2>
|
||||
<webaudio-switch id="on" value="1" tooltip="Switch-B" height="35" width="85" src="knobs/switch1.png">
|
||||
<div>
|
||||
<h2>
|
||||
LJ Settings
|
||||
</h2>
|
||||
</div>
|
||||
<div style="margin-top:20px;">
|
||||
<webaudio-switch id="on" value="1" tooltip="Switch-B" height="30" width="90" src="knobs/power.png">
|
||||
</webaudio-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="webaudiobut">
|
||||
<div align="center" class="busled">
|
||||
Settings
|
||||
</div>
|
||||
<div align="center" class="busled">
|
||||
|
||||
<div align="center" class="busled">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
|
|
@ -137,11 +144,11 @@
|
|||
<div>
|
||||
<div>
|
||||
<h2>
|
||||
Aurora
|
||||
LJ 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 id="on" value="1" tooltip="Switch-B" height="30" width="90" src="knobs/power.png">
|
||||
</webaudio-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -170,11 +177,11 @@
|
|||
<div>
|
||||
<div>
|
||||
<h2>
|
||||
Simu
|
||||
LJ 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 id="on" value="1" tooltip="Switch-B" height="30" width="90" src="knobs/power.png">
|
||||
</webaudio-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -202,11 +209,11 @@
|
|||
<div>
|
||||
<div>
|
||||
<h2>
|
||||
Tracker 1
|
||||
LJ Tracker
|
||||
</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 id="on" value="1" tooltip="Switch-B" height="30" width="90" src="knobs/power.png">
|
||||
</webaudio-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -232,8 +239,16 @@
|
|||
<!-- LJ style WS : A nettoyer ! -->
|
||||
|
||||
<script type="text/javascript">
|
||||
var LJ = websocket_uri
|
||||
|
||||
let type = "index";
|
||||
|
||||
// green (1) PLAYING / cyan (2) PREPARE / blue (3) IDLE
|
||||
let acks = new Array ( "0","PLAYING", "PREPARE", "IDLE");
|
||||
|
||||
// green (1) ACK / yellow (4) INVALID / orange (5) FULL / (6) no connection
|
||||
let stts = new Array ("0", "ACK", "2", "3", "INVALID", "FULL", "no connection");
|
||||
|
||||
var LJ = websocket_uri
|
||||
|
||||
var _WS = {
|
||||
uri: LJ,
|
||||
|
|
@ -286,7 +301,6 @@
|
|||
_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];
|
||||
|
|
@ -297,18 +311,47 @@
|
|||
divtext1.innerHTML='<span style="color: red;">'+ res[1]+" "+res[2]+'</span>';
|
||||
break;
|
||||
|
||||
case "/laser":
|
||||
console.log("/laser "+res[1])
|
||||
newlaser(res[1])
|
||||
//case "/laser":
|
||||
// console.log("/laser "+res[1])
|
||||
// newlaser(res[1])
|
||||
// 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;
|
||||
|
||||
case "/point":
|
||||
if (type === 'settings') {
|
||||
//console.log("buffer display"+res[1]);
|
||||
document.getElementById(res[0].slice(1)).value = res[1];
|
||||
}
|
||||
break;
|
||||
|
||||
case "/simul":
|
||||
if (type === 'simu') {
|
||||
console.log("simul "+res[1]);
|
||||
document.getElementById(res[0].slice(1)).value = res[1];
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log("test "+res[0].slice(1)+" "+res[1]);
|
||||
document.getElementById(res[0].slice(1)).value = res[1];
|
||||
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]);
|
||||
_WS.showstatus(res[0].slice(1)+" "+res[1])
|
||||
document.getElementById(res[0].slice(1)).value = res[1];
|
||||
} else{
|
||||
console.log("default handler for "+res[0].slice(1)+" "+res[1]+' : does not exist.');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
onError: function (e) {
|
||||
_WS.showstatus('<span style="color: red;">ERROR:</span> ' + e.data);
|
||||
},
|
||||
|
|
@ -371,6 +414,7 @@
|
|||
-->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var message="";
|
||||
var log=[];
|
||||
var knobs = document.getElementsByTagName('webaudio-knob');
|
||||
|
|
|
|||
BIN
www/knobs/LittlePhatty.png
Executable file
BIN
www/knobs/LittlePhatty.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 396 KiB |
BIN
www/knobs/Vintage_VUMeter.png
Executable file
BIN
www/knobs/Vintage_VUMeter.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
www/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png
Executable file
BIN
www/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 493 KiB |
BIN
www/knobs/bigbutton.png
Normal file
BIN
www/knobs/bigbutton.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
www/knobs/hsliderbody.png
Executable file
BIN
www/knobs/hsliderbody.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
www/knobs/hsliderbody2.png
Normal file
BIN
www/knobs/hsliderbody2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
www/knobs/hsliderbody3.png
Normal file
BIN
www/knobs/hsliderbody3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
www/knobs/hsliderbody4.png
Normal file
BIN
www/knobs/hsliderbody4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
www/knobs/hsliderbody5.png
Normal file
BIN
www/knobs/hsliderbody5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
www/knobs/hsliderknob.png
Executable file
BIN
www/knobs/hsliderknob.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5 KiB |
BIN
www/knobs/hsliderknobgreen.png
Normal file
BIN
www/knobs/hsliderknobgreen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5 KiB |
BIN
www/knobs/hsliderknoblue.png
Normal file
BIN
www/knobs/hsliderknoblue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5 KiB |
BIN
www/knobs/hsliderknobrange.png
Normal file
BIN
www/knobs/hsliderknobrange.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5 KiB |
BIN
www/knobs/hsliderknobred.png
Normal file
BIN
www/knobs/hsliderknobred.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5 KiB |
BIN
www/knobs/hsliderknobyellow.png
Normal file
BIN
www/knobs/hsliderknobyellow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5 KiB |
BIN
www/knobs/hsw5.png
Executable file
BIN
www/knobs/hsw5.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
www/knobs/picture.png
Normal file
BIN
www/knobs/picture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
www/knobs/picture2.png
Normal file
BIN
www/knobs/picture2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.6 KiB |
BIN
www/knobs/sliderblue.png
Normal file
BIN
www/knobs/sliderblue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
BIN
www/knobs/vsliderbody.png
Executable file
BIN
www/knobs/vsliderbody.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
www/knobs/vsliderknob.png
Executable file
BIN
www/knobs/vsliderknob.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
1186
www/settings2.html
Normal file
1186
www/settings2.html
Normal file
File diff suppressed because it is too large
Load diff
158
www/simu.html
158
www/simu.html
|
|
@ -56,7 +56,7 @@
|
|||
</div>
|
||||
</a>
|
||||
|
||||
<a href="settings.html">
|
||||
<a href="settings2.html">
|
||||
<div class="webaudiobut">
|
||||
<div align="center" class="navled">
|
||||
Settings
|
||||
|
|
@ -113,11 +113,11 @@
|
|||
<div class="content">
|
||||
<div class="TopRackGrid">
|
||||
<div>
|
||||
<h2>
|
||||
/TL Simu
|
||||
<h2 style="margin-bottom: 30px;">
|
||||
LJ Simu
|
||||
<span class="shade"> </span>
|
||||
</h2>
|
||||
<webaudio-switch id="on" value="1" tooltip="Switch-B" height="35" width="85" src="knobs/switch1.png">
|
||||
<webaudio-switch id="on" value="0" tooltip="Switch-B" height="30" width="90" src="knobs/power.png">
|
||||
</webaudio-switch>
|
||||
</div>
|
||||
<div class="webaudiobut" style="background-image: linear-gradient(174deg, #111,#030303);">
|
||||
|
|
@ -198,13 +198,13 @@
|
|||
|
||||
<script type="text/javascript">
|
||||
|
||||
let type = "simu";
|
||||
var LJ = websocket_uri
|
||||
|
||||
var pl = "";
|
||||
var pl2 = new Array();
|
||||
|
||||
var pl = "";
|
||||
var pl2 = new Array();
|
||||
|
||||
var _WS = {
|
||||
var _WS = {
|
||||
uri: LJ,
|
||||
ws: null,
|
||||
|
||||
|
|
@ -219,25 +219,24 @@
|
|||
|
||||
|
||||
onClose: function () {
|
||||
_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;
|
||||
},
|
||||
_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;
|
||||
},
|
||||
|
||||
|
||||
onOpen: function () {
|
||||
var divtext = document.getElementById('status');
|
||||
divtext.innerHTML="";
|
||||
divtext.innerHTML= "Connected to "+LJ;
|
||||
document.getElementById("on").value = 1;
|
||||
|
||||
var divtext = document.getElementById('status');
|
||||
divtext.innerHTML="";
|
||||
divtext.innerHTML= "Connected to "+LJ;
|
||||
document.getElementById("on").value = 1;
|
||||
},
|
||||
|
||||
|
||||
|
|
@ -250,7 +249,6 @@
|
|||
var divtext = document.getElementById('status');
|
||||
var divtextp = document.getElementById('players');
|
||||
|
||||
|
||||
switch (res[0].substring(0,6)) {
|
||||
|
||||
case "/statu":
|
||||
|
|
@ -263,17 +261,16 @@
|
|||
}
|
||||
break;
|
||||
|
||||
|
||||
case "/redst":
|
||||
//console.log("red"+res[1]+" "+res[2]);
|
||||
_WS.showstatus('<span style="color: red;">'+res[1]+" "+ res[2]+'</span> ');
|
||||
break;
|
||||
|
||||
case "/simul":
|
||||
pl = e.data.slice(7);
|
||||
//console.log(pl)
|
||||
pl2 = eval(pl.replace(/[()]/g, ''));
|
||||
break;
|
||||
pl = e.data.slice(7);
|
||||
//console.log(pl)
|
||||
pl2 = eval(pl.replace(/[()]/g, ''));
|
||||
break;
|
||||
|
||||
case "/line1":
|
||||
//divtext.innerHTML="connected to "+LJ;
|
||||
|
|
@ -286,13 +283,50 @@
|
|||
break;
|
||||
|
||||
case "/plpoi":
|
||||
//console.log("plpoint");
|
||||
//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];
|
||||
}
|
||||
break;
|
||||
|
||||
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;
|
||||
|
||||
default:
|
||||
//console.log("test "+res[0].slice(1)+" "+res[1]);
|
||||
document.getElementById(res[0].slice(1)).value = res[1];
|
||||
//_WS.showstatus(e.data);
|
||||
break
|
||||
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!');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -301,27 +335,27 @@
|
|||
},
|
||||
|
||||
showin: function (message) {
|
||||
var divtext = document.getElementById('status');
|
||||
divtext.innerHTML="";
|
||||
divtext.innerHTML= message.toString();
|
||||
var divtext = document.getElementById('status');
|
||||
divtext.innerHTML="";
|
||||
divtext.innerHTML= message.toString();
|
||||
},
|
||||
|
||||
showout: function (message) {
|
||||
var divtext = document.getElementById('status');
|
||||
divtext.innerHTML="";
|
||||
divtext.innerHTML= message.toString();
|
||||
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();
|
||||
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();
|
||||
var divtext = document.getElementById('line1');
|
||||
divtext.innerHTML="";
|
||||
divtext.innerHTML= message.toString();
|
||||
},
|
||||
|
||||
send: function (message) {
|
||||
|
|
@ -360,32 +394,33 @@
|
|||
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)
|
||||
console.log("newlaser " +id);
|
||||
var laserid = 24+ parseInt(id,10);
|
||||
laser = "noteon "+laserid;
|
||||
console.log("laser "+laser);
|
||||
nolaser();
|
||||
nofx();
|
||||
|
||||
|
||||
var x = document.getElementById(laser);
|
||||
x.value = 1 ;
|
||||
}
|
||||
|
|
@ -420,7 +455,6 @@
|
|||
x.value = 0 ;
|
||||
}
|
||||
|
||||
|
||||
function nocolor0() {
|
||||
console.log("nocolor0")
|
||||
var x = document.getElementById("aurora/color/0 red");
|
||||
|
|
@ -437,7 +471,6 @@
|
|||
x.value = 0 ;
|
||||
}
|
||||
|
||||
|
||||
function Dump(e) {
|
||||
var str="";
|
||||
str=e.type + " : " + e.target.id + " : " + e.target.value + " ";
|
||||
|
|
@ -487,7 +520,6 @@
|
|||
_WS.showstatus(e.target.id);
|
||||
}
|
||||
|
||||
|
||||
// Lasers
|
||||
if (res[0] === "noteon" && e.type === "change") {
|
||||
//console.log(e.target.id)
|
||||
|
|
@ -524,21 +556,27 @@
|
|||
{
|
||||
ctx.clearRect(0,0,400,400);
|
||||
lastpoint = {
|
||||
x:pl2[0],
|
||||
y:pl2[1],
|
||||
x:pl2[0]+400,
|
||||
y:pl2[1]+400,
|
||||
color:pl2[2]
|
||||
}
|
||||
for (var i = 0; i <= pl2.length; i+=3)
|
||||
{
|
||||
point = {
|
||||
x:pl2[i],
|
||||
y:pl2[i+1],
|
||||
x:pl2[i]+400,
|
||||
y:pl2[i+1]+400,
|
||||
color:pl2[i+2]
|
||||
}
|
||||
// console.log(lastpoint,point)
|
||||
// if the target is black, skip drawing
|
||||
if( point.color != 0){
|
||||
ctx.beginPath()
|
||||
ctx.shadowOffsetX = 0;
|
||||
ctx.shadowOffsetY = 0;
|
||||
ctx.shadowBlur = 5;
|
||||
ctx.shadowColor = 'rgba(255, 255, 255, 1)';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke.width = 1;
|
||||
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);
|
||||
|
|
|
|||
702
www/status.html
Normal file
702
www/status.html
Normal file
|
|
@ -0,0 +1,702 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Status Rack</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="apple-mobile-web-app-title" content="Align">
|
||||
<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">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<!-- Page specific styles -->
|
||||
|
||||
<style>
|
||||
.container {
|
||||
margin: 20px auto;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
</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/sliderblue.png",
|
||||
sliderKnobsrc:"knobs/LittePhatty.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 ="width: 745px">
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
Display Rack
|
||||
-->
|
||||
|
||||
|
||||
<div class="contentS">
|
||||
<div class="TopRackGridS">
|
||||
<div>
|
||||
<h2 style="margin-bottom: 30px;">
|
||||
LJ Status
|
||||
<span class="shade"> </span>
|
||||
</h2>
|
||||
<webaudio-switch id="on" value="0" tooltip="Switch-B" height="30" width="90" src="knobs/power.png">
|
||||
</webaudio-switch>
|
||||
</div>
|
||||
<div class="webaudiobut">
|
||||
<div align="center" id="line1" class="busled">
|
||||
Status 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>
|
||||
|
||||
<!--
|
||||
Emergency button Rack
|
||||
-->
|
||||
|
||||
<div class="contentS" style="height: 60px" align="center">
|
||||
<div class="TopRackGridS">
|
||||
<div>
|
||||
<h2>
|
||||
Emergency
|
||||
<span class="shade"> </span>
|
||||
</h2>
|
||||
</div>
|
||||
<div>
|
||||
<webaudio-switch id="emergency" value="0" height="64" width="64" tooltip="Switch-B" src="knobs/blackout.png"></webaudio-switch>
|
||||
</div>
|
||||
<div></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Align Rack
|
||||
-->
|
||||
<div class="contentS">
|
||||
|
||||
<div class="mgstatus" style="margin-left:0px;">
|
||||
|
||||
<!--
|
||||
Laser 0
|
||||
-->
|
||||
<div align="left">
|
||||
<!-- IP laser 0 -->
|
||||
<div align="left">
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="ip/0">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- engine state 0 -->
|
||||
<div align="left">
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="stt/0">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Ack 0 -->
|
||||
<div align="left">
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="ack/0">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="spacer" style="height: 10px;"></div>
|
||||
|
||||
<div align="left" style="margin-left: 19px">
|
||||
<div class="spacer" style="width: 20px;"></div>
|
||||
<!-- Align Icons -->
|
||||
<webaudio-switch id="grid/0" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/grid.png"></webaudio-switch>
|
||||
<!-- Blackout icon -->
|
||||
<webaudio-switch id="black/0" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/blackout.png"></webaudio-switch>
|
||||
<!-- Swap Icons -->
|
||||
<webaudio-switch id="swap/X/0" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/swapx.png"></webaudio-switch>
|
||||
<webaudio-switch id="swap/Y/0" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/swapy.png"></webaudio-switch>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="spacer" style="height: 10px;"></div>
|
||||
|
||||
<!-- Lasergrid 0 -->
|
||||
<div class="lasergridstatus" align="left">
|
||||
|
||||
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;">buffer </div>
|
||||
<div><webaudio-param id="points/0" link="points/0"></webaudio-param></div>
|
||||
<!-- kPPS -->
|
||||
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;color: #eee;">kPPS</div>
|
||||
<div><webaudio-param id="kpps/0" link="kpps/0" value="25000" ></webaudio-param></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--
|
||||
Laser 1
|
||||
-->
|
||||
<div>
|
||||
<!-- IP laser 1 -->
|
||||
<div>
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="ip/1">
|
||||
</form>
|
||||
</div>
|
||||
<!-- engine state 1 -->
|
||||
<div>
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="stt/1">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Ack 1 -->
|
||||
<div>
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="ack/1">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="spacer" style="height: 10px;"></div>
|
||||
<div align="left" style="margin-left: 19px">
|
||||
|
||||
<!-- Align Icons -->
|
||||
<webaudio-switch id="grid/1" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/grid.png"></webaudio-switch>
|
||||
<!-- Blackout icon -->
|
||||
<webaudio-switch id="black/1" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/blackout.png"></webaudio-switch>
|
||||
<!-- Swap Icons -->
|
||||
<webaudio-switch id="swap/X/1" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/swapx.png"></webaudio-switch>
|
||||
<webaudio-switch id="swap/Y/1" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/swapy.png"></webaudio-switch>
|
||||
</div>
|
||||
<div class="spacer" style="height: 10px;"></div>
|
||||
|
||||
|
||||
|
||||
<!-- Lasergrid 1 -->
|
||||
<div class="lasergridstatus">
|
||||
|
||||
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;">Buffer </div>
|
||||
<div><webaudio-param id="points/1" link="points/1"></webaudio-param></div>
|
||||
<!-- kPPS -->
|
||||
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;color: #eee;">kPPS</div>
|
||||
<div><webaudio-param id="kpps/1" link="kpps/1" value="25000" ></webaudio-param></div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--
|
||||
Laser 2
|
||||
-->
|
||||
<div>
|
||||
<!-- IP laser 2 -->
|
||||
<div>
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="ip/2">
|
||||
</form>
|
||||
</div>
|
||||
<!-- engine state 2 -->
|
||||
<div>
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="stt/2">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Ack 2 -->
|
||||
<div>
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="ack/2">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="spacer" style="height: 10px;"></div>
|
||||
<div align="left" style="margin-left: 19px">
|
||||
|
||||
<!-- Align Icons -->
|
||||
<webaudio-switch id="grid/2" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/grid.png"></webaudio-switch>
|
||||
|
||||
<!-- Blackout icon -->
|
||||
<webaudio-switch id="black/2" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/blackout.png"></webaudio-switch>
|
||||
|
||||
<!-- Swap Icons -->
|
||||
<webaudio-switch id="swap/X/2" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/swapx.png"></webaudio-switch>
|
||||
<webaudio-switch id="swap/Y/2" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/swapy.png"></webaudio-switch>
|
||||
</div>
|
||||
<div class="spacer" style="height: 10px;"></div>
|
||||
|
||||
|
||||
<!-- Lasergrid 2 -->
|
||||
<div class="lasergridstatus">
|
||||
|
||||
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;">Buffer </div>
|
||||
<div><webaudio-param id="points/2" link="points/2"></webaudio-param></div>
|
||||
<!-- kPPS -->
|
||||
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;color: #eee;">kPPS</div>
|
||||
<div><webaudio-param id="kpps/2" link="kpps/2" value="25000" ></webaudio-param></div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--
|
||||
Laser 3
|
||||
-->
|
||||
<div>
|
||||
<!-- IP laser 3 -->
|
||||
<div>
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="ip/3">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- engine state 3 -->
|
||||
<div>
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="stt/3">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Ack 3 -->
|
||||
<div>
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="ack/3">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="spacer" style="height: 10px;"></div>
|
||||
<div align="left" style="margin-left: 19px">
|
||||
|
||||
<!-- Align Icons -->
|
||||
<webaudio-switch id="grid/3" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/grid.png"></webaudio-switch>
|
||||
|
||||
<!-- Blackout icon -->
|
||||
<webaudio-switch id="black/3" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/blackout.png"></webaudio-switch>
|
||||
|
||||
<!-- Swap Icons -->
|
||||
<webaudio-switch id="swap/X/3" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/swapx.png"></webaudio-switch>
|
||||
<webaudio-switch id="swap/Y/3" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/swapy.png"></webaudio-switch>
|
||||
|
||||
</div>
|
||||
<div class="spacer" style="height: 10px;"></div>
|
||||
|
||||
<!-- Lasergrid 3 -->
|
||||
<div class="lasergridstatus">
|
||||
|
||||
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;">Buffer </div>
|
||||
<div><webaudio-param id="points/3" link="points/3"></webaudio-param></div>
|
||||
<!-- kPPS -->
|
||||
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;color: #eee">kPPS</div>
|
||||
<div><webaudio-param id="kpps/3" link="kpps/3" value="25000" ></webaudio-param></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</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">
|
||||
|
||||
// green (1) PLAYING / cyan (2) PREPARE / blue (3) IDLE
|
||||
let acks = new Array ( "0","PLAYING", "PREPARE", "IDLE");
|
||||
|
||||
// green (1) ACK / yellow (4) INVALID / orange (5) FULL / (6) no connection
|
||||
let stts = new Array ("0", "ACK", "2", "3", "INVALID", "FULL", "no connection");
|
||||
let type = "index";
|
||||
|
||||
var LJ = websocket_uri
|
||||
|
||||
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);
|
||||
document.getElementById("on").value = 1;
|
||||
},
|
||||
|
||||
onClose: function () {
|
||||
_WS.showline1('<span style="color: red;">LJ DISCONNECTED</span> ');
|
||||
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;
|
||||
},
|
||||
|
||||
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 "/lack/":
|
||||
console.log("/lack "+res[1])
|
||||
document.getElementById(res[0].slice(1)).value = res[1];
|
||||
document.getElementById(res[0].slice(2)).value = acks[res[1]];
|
||||
break;
|
||||
|
||||
case "/lstt/":
|
||||
console.log("/lstt "+res[1])
|
||||
document.getElementById(res[0].slice(1)).value = res[1];
|
||||
document.getElementById(res[0].slice(2)).value = stts[res[1]];
|
||||
break;
|
||||
|
||||
case "/point":
|
||||
if (type === 'settings') {
|
||||
//console.log("buffer display"+res[1]);
|
||||
document.getElementById(res[0].slice(1)).value = res[1];
|
||||
}
|
||||
break;
|
||||
|
||||
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;
|
||||
|
||||
default:
|
||||
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.');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
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();
|
||||
},
|
||||
|
||||
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();
|
||||
},
|
||||
|
||||
showline1: 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);
|
||||
}
|
||||
|
||||
</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 newlaser(id) {
|
||||
|
||||
console.log("newlaser")
|
||||
nolaser();
|
||||
nofx();
|
||||
|
||||
laserid = "noteon "+(24-id);
|
||||
console.log("laserid "+laserid);
|
||||
|
||||
var x = document.getElementById(laserid);
|
||||
x.value = 1 ;
|
||||
console.log("laser "+id);
|
||||
}
|
||||
|
||||
|
||||
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(" ");
|
||||
|
||||
// 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") {
|
||||
|
||||
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>
|
||||
|
||||
<script src="cropper.js"></script>
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', function () {
|
||||
//var image = document.querySelector('#image');
|
||||
const canvasize = 420;
|
||||
const image = document.getElementById('image');
|
||||
const cropper = new Cropper(image, {
|
||||
//aspectRatio: 16 / 9,
|
||||
movable: false,
|
||||
zoomable: false,
|
||||
rotatable: false,
|
||||
scalable: false,
|
||||
crop(event) {
|
||||
console.log("x:",event.detail.x);
|
||||
console.log("y:",event.detail.y);
|
||||
console.log("width:",event.detail.width);
|
||||
console.log("height:",event.detail.height);
|
||||
console.log("centerX:",event.detail.x+(event.detail.width/2)-(canvasize/2));
|
||||
console.log("centerY:",event.detail.y+(event.detail.height/2)-(canvasize/2));
|
||||
console.log("scaleX:",event.detail.width/canvasize);
|
||||
console.log("scaleY:",event.detail.height/canvasize);
|
||||
_WS.send("/loffset/X/0 " + event.detail.x);
|
||||
_WS.send("/loffset/Y/0 " + event.detail.y);
|
||||
_WS.send("/width/0 " + event.detail.width);
|
||||
_WS.send("/height/0 " + event.detail.height);
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -142,23 +142,23 @@
|
|||
</div>
|
||||
|
||||
<!--
|
||||
Lasers & colors Rack
|
||||
Display Rack
|
||||
-->
|
||||
|
||||
|
||||
<div class="content">
|
||||
<div class="TopRackGrid">
|
||||
<div>
|
||||
<h2>
|
||||
/TL RGY 1
|
||||
<h2 style="margin-bottom: 30px;">
|
||||
LJ Tracker
|
||||
<span class="shade"> </span>
|
||||
</h2>
|
||||
<webaudio-switch id="on" value="1" tooltip="Switch-B" height="35" width="85" src="../knobs/switch1.png">
|
||||
</h2>
|
||||
<webaudio-switch id="on" value="0" tooltip="Switch-B" height="30" width="90" src="../knobs/power.png">
|
||||
</webaudio-switch>
|
||||
</div>
|
||||
<div style="border : #242424 1px solid;background: #000;">
|
||||
<div align="center" id="line1" class="busled">
|
||||
LASERcam 1 : Allow to use your webcam + start
|
||||
LASERcam : Allow to use your webcam + start
|
||||
</div>
|
||||
<div align="center" id="status" class="busled">
|
||||
/team/laser
|
||||
|
|
@ -378,8 +378,14 @@
|
|||
<!-- LJ style WS : A nettoyer ! -->
|
||||
|
||||
<script type="text/javascript">
|
||||
// green (1) PLAYING / cyan (2) PREPARE / blue (3) IDLE
|
||||
let acks = new Array ( "0","PLAYING", "PREPARE", "IDLE");
|
||||
|
||||
var LJ = 'ws://192.168.2.43:9001/'
|
||||
// green (1) ACK / yellow (4) INVALID / orange (5) FULL / (6) no connection
|
||||
let stts = new Array ("0", "ACK", "2", "3", "INVALID", "FULL", "no connection");
|
||||
|
||||
let type = "simu";
|
||||
var LJ = websocket_uri
|
||||
|
||||
var _WS = {
|
||||
uri: LJ,
|
||||
|
|
@ -412,7 +418,6 @@
|
|||
var divtext = document.getElementById('status');
|
||||
var divtextp = document.getElementById('players');
|
||||
|
||||
|
||||
switch (res[0].substring(0,6)) {
|
||||
|
||||
case "/statu":
|
||||
|
|
@ -446,19 +451,40 @@
|
|||
break;
|
||||
|
||||
case "/lack/":
|
||||
console.log("/lack "+res[1])
|
||||
//console.log("/lack "+res[1])
|
||||
document.getElementById(res[0].slice(1)).value = res[1];
|
||||
break;
|
||||
|
||||
case "/lstt/":
|
||||
console.log("/lstt "+res[1])
|
||||
//console.log("/lstt "+res[1])
|
||||
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];
|
||||
}
|
||||
break;
|
||||
|
||||
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;
|
||||
|
||||
default:
|
||||
//console.log("test "+res[0].slice(1)+" "+res[1]);
|
||||
document.getElementById(res[0].slice(1)).value = res[1];
|
||||
//_WS.showstatus(e.data);
|
||||
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];
|
||||
} else{
|
||||
console.log("default handler for "+res[0].slice(1)+" "+res[1]+' : does not exist!');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -469,7 +495,6 @@
|
|||
divtext.innerHTML= message.toString();
|
||||
},
|
||||
|
||||
|
||||
onError: function (e) {
|
||||
_WS.showstatus('<span style="color: red;">ERROR:</span> ' + e.data);
|
||||
},
|
||||
|
|
@ -640,40 +665,34 @@
|
|||
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") {
|
||||
|
||||
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);
|
||||
}
|
||||
// Colors
|
||||
if (res[0].substring(7,9) === "co" && e.type === "change") {
|
||||
|
||||
|
||||
|
||||
// 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);
|
||||
|
||||
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue