forked from protonphoton/LJ
webui bugfixes
This commit is contained in:
nrhck
parent
4720922ed6
commit
bcd45c9de5
27 changed files with 939 additions and 369 deletions
243
webui/LJ.js
Normal file
243
webui/LJ.js
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
//
|
||||
// LJ.js v0.7.0
|
||||
//
|
||||
|
||||
|
||||
|
||||
// Web Audio buttons handler
|
||||
|
||||
|
||||
// add a listener for each element.
|
||||
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);
|
||||
}
|
||||
// Process button events
|
||||
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 evview=document.getElementById("events");
|
||||
evview.innerHTML=str;
|
||||
|
||||
if (e.target.id === "noteon" && e.type ==="input")
|
||||
{
|
||||
console.log("only noteon change are sent not input");
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log(e.target.id)
|
||||
_WS.send("/" + e.target.id + " " + e.target.value);
|
||||
}
|
||||
|
||||
// for /scale : after a change (knob is released) reset knob value to 0
|
||||
if (e.target.id.substring(0,5) === "scale" && e.type === "change") {
|
||||
e.target.value = 0;
|
||||
console.log(e.target.id + "set to 0")
|
||||
_WS.send("/" + e.target.id + " " + e.target.value);
|
||||
}
|
||||
// for /loffset : after a change (knob is released) reset knob value to 0
|
||||
if (e.target.id.substring(0,7) === "loffset" && e.type === "change") {
|
||||
e.target.value = 0;
|
||||
console.log(e.target.id + "set to 0")
|
||||
_WS.send("/" + e.target.id + " " + e.target.value);
|
||||
}
|
||||
// for /angle : after a change (knob is released) reset knob value to 0
|
||||
if (e.target.id.substring(0,5) === "angle" && e.type === "change") {
|
||||
e.target.value = 0;
|
||||
console.log(e.target.id + "set to 0")
|
||||
_WS.send("/" + e.target.id + " " + e.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Websocket Handler
|
||||
|
||||
var pl = "";
|
||||
var pl2 = new Array();
|
||||
var _WS = {
|
||||
uri: 'ws://127.0.0.1:9001/',
|
||||
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.showout(_WS.uri);
|
||||
_WS.showout('CONNECTED');
|
||||
},
|
||||
|
||||
onClose: function () {
|
||||
_WS.showout('DISCONNECTED');
|
||||
},
|
||||
|
||||
onMessage: function (e) {
|
||||
var res = e.data.split(" ");
|
||||
//console.log(e.data)
|
||||
switch (res[0].substring(0,6)) {
|
||||
case "/statu":
|
||||
_WS.showstatus(e.data.slice(8));
|
||||
break;
|
||||
case "/plfra":
|
||||
pl = e.data.slice(9);
|
||||
//console.log(pl);
|
||||
pl2 = eval(pl.replace(/[()]/g, ''));
|
||||
//console.log(pl2);
|
||||
break;
|
||||
case "/plpoi":
|
||||
console.log("plpoint");
|
||||
break;
|
||||
case "/clien":
|
||||
console.log("New Client : "+res[1])
|
||||
break
|
||||
default:
|
||||
//console.log(res[0] + " " + res[1])
|
||||
//console.log(res[1])
|
||||
document.getElementById(res[0].slice(1)).value = res[1];
|
||||
_WS.showin(e.data);
|
||||
}
|
||||
//_WS.showin(e.data);
|
||||
},
|
||||
|
||||
onError: function (e) {
|
||||
_WS.showin('<span style="color: red;">ERROR:</span> ' + e.data);
|
||||
},
|
||||
|
||||
showin: function (message) {
|
||||
var divtext = document.getElementById('showin');
|
||||
divtext.innerHTML="";
|
||||
divtext.innerHTML= message.toString();
|
||||
},
|
||||
|
||||
showout: function (message) {
|
||||
var divtext = document.getElementById('showout');
|
||||
divtext.innerHTML="";
|
||||
divtext.innerHTML= message.toString();
|
||||
},
|
||||
|
||||
showstatus: function (message) {
|
||||
var divtext = document.getElementById('showstatus');
|
||||
divtext.innerHTML="";
|
||||
divtext.innerHTML= message.toString();
|
||||
},
|
||||
|
||||
send: function (message) {
|
||||
if (!message.length) {
|
||||
alert('Empty message not allowed !');
|
||||
} else {
|
||||
_WS.showout(message);
|
||||
_WS.s.send(message);
|
||||
}
|
||||
},
|
||||
|
||||
close: function () {
|
||||
_WS.showout('GOODBYE !');
|
||||
_WS.s.close();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('load', _WS.init, false);
|
||||
|
||||
|
||||
// Menu Handler
|
||||
|
||||
function noMenu() {
|
||||
// Set all menu button with normal button style
|
||||
var x = document.getElementById("showalign");
|
||||
x.className = "button";
|
||||
|
||||
var x = document.getElementById("showrun");
|
||||
x.className = "button";
|
||||
|
||||
var x = document.getElementById("showcanvas");
|
||||
x.className = "button";
|
||||
|
||||
var x = document.getElementById("showlive");
|
||||
x.className = "button";
|
||||
|
||||
// Hide all possible main central grids.
|
||||
var x = document.getElementById("mgalign");
|
||||
x.style.display = "none";
|
||||
|
||||
var x = document.getElementById("mgcanvas");
|
||||
x.style.display = "none";
|
||||
|
||||
var x = document.getElementById("mgrun");
|
||||
x.style.display = "none";
|
||||
|
||||
var x = document.getElementById("mglive");
|
||||
x.style.display = "none";
|
||||
}
|
||||
|
||||
function showAlign() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mgalign");
|
||||
x.style.display = "grid";
|
||||
|
||||
var x = document.getElementById("showalign");
|
||||
x.className = "button:checked";
|
||||
}
|
||||
|
||||
function showRun() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mgrun");
|
||||
x.style.display = "grid";
|
||||
|
||||
var x = document.getElementById("showrun");
|
||||
x.className = "button:checked";
|
||||
}
|
||||
|
||||
function showCanvas() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mgcanvas");
|
||||
x.style.display = "block";
|
||||
|
||||
var x = document.getElementById("showcanvas");
|
||||
x.className = "button:checked";
|
||||
}
|
||||
|
||||
function showLive() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mglive");
|
||||
x.style.display = "grid";
|
||||
|
||||
var x = document.getElementById("showlive");
|
||||
x.className = "button:checked";
|
||||
}
|
||||
|
||||
function buttonClicked(clicked_id) {
|
||||
_WS.send("/" + clicked_id);
|
||||
}
|
||||
|
||||
function onSubmit(clicked_id) {
|
||||
var input = document.getElementById(clicked_id);
|
||||
console.log("/" + clicked_id + " " + input.value);
|
||||
_WS.send("/" + clicked_id + " " + input.value);
|
||||
_WS.showout("/" + clicked_id + " " + input.value);
|
||||
}
|
||||
|
||||
234
webui/index.html
234
webui/index.html
|
|
@ -3,7 +3,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>LJay</title>
|
||||
<title>LJ</title>
|
||||
|
||||
<!-- Web audio defaults -->
|
||||
<script src="webcomponents-lite.js"></script>
|
||||
|
|
@ -22,7 +22,8 @@
|
|||
|
||||
<!-- Webscoket handler -->
|
||||
<script type="text/javascript">
|
||||
|
||||
var pl = "";
|
||||
var pl2 = new Array();
|
||||
var _WS = {
|
||||
uri: 'ws://127.0.0.1:9001/',
|
||||
ws: null,
|
||||
|
|
@ -42,7 +43,6 @@
|
|||
},
|
||||
onMessage: function (e) {
|
||||
var res = e.data.split(" ");
|
||||
var pl = ""
|
||||
//console.log(e.data)
|
||||
//console.log(res[0].substring(0,6))
|
||||
switch (res[0].substring(0,6)) {
|
||||
|
|
@ -50,14 +50,17 @@
|
|||
_WS.showstatus(e.data.slice(8));
|
||||
break;
|
||||
case "/plfra":
|
||||
pl = e.data.slice(11)
|
||||
console.log(pl);
|
||||
console.log(e.data.slice(11));
|
||||
pl = e.data.slice(9);
|
||||
//console.log(pl);
|
||||
pl2 = eval(pl.replace(/[()]/g, ''));
|
||||
//console.log(pl2);
|
||||
break;
|
||||
case "/plpoi":
|
||||
case "/plpoi":
|
||||
//console.log("plpoint");
|
||||
break;
|
||||
default:
|
||||
console.log(res[0] + " " + res[1])
|
||||
default:
|
||||
//console.log(res[0] + " " + res[1])
|
||||
//console.log(res[1])
|
||||
document.getElementById(res[0].slice(1)).value = res[1];
|
||||
}
|
||||
|
|
@ -204,7 +207,7 @@
|
|||
<webaudio-switch id="swap/Y/0" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/swapy.png"></webaudio-switch>
|
||||
</div>
|
||||
<!-- Lasergrid 0 -->
|
||||
<div class="lasergrid" style="background-image: url(knobs/lasergrid0.png);">
|
||||
<div class="lasergrid" style="background-image: url(lasergrid0.png);">
|
||||
|
||||
<div><webaudio-param id="kpps/0" link="kpps/0" ></webaudio-param></div>
|
||||
<div><webaudio-param id="points/0" link="points/0"></webaudio-param></div>
|
||||
|
|
@ -254,7 +257,7 @@
|
|||
<webaudio-switch id="swap/Y/1" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/swapy.png"></webaudio-switch>
|
||||
</div>
|
||||
<!-- Lasergrid 1 -->
|
||||
<div class="lasergrid" style="background-image: url(knobs/lasergrid1.png);">
|
||||
<div class="lasergrid" style="background-image: url(lasergrid1.png);">
|
||||
<div><webaudio-param id="kpps/1" link="kpps/1"></webaudio-param></div>
|
||||
<div><webaudio-param id="points/1" link="points/1"></webaudio-param></div>
|
||||
<div class="lasertext">kPPS</div>
|
||||
|
|
@ -303,7 +306,7 @@
|
|||
<webaudio-switch id="swap/Y/2" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/swapy.png"></webaudio-switch>
|
||||
</div>
|
||||
<!-- Laser 2 grid -->
|
||||
<div class="lasergrid" style="background-image: url(knobs/lasergrid2.png)">
|
||||
<div class="lasergrid" style="background-image: url(lasergrid2.png)">
|
||||
<div><webaudio-param id="kpps/2" link="kpps/2"></webaudio-param></div>
|
||||
<div><webaudio-param id="points/2" link="points/2"></webaudio-param></div>
|
||||
<div class="lasertext">kPPS</div>
|
||||
|
|
@ -352,7 +355,7 @@
|
|||
<webaudio-switch id="swap/Y/3" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/swapy.png"></webaudio-switch>
|
||||
</div>
|
||||
<!-- Laser 3 grid -->
|
||||
<div class="lasergrid" style="background-image: url(knobs/lasergrid3.png)">
|
||||
<div class="lasergrid" style="background-image: url(lasergrid3.png)">
|
||||
<div><webaudio-param id="kpps/3" link="kpps/3" ></webaudio-param></div>
|
||||
<div><webaudio-param id="points/3" link="points/3"></webaudio-param></div>
|
||||
<div class="lasertext">kPPS</div>
|
||||
|
|
@ -480,67 +483,32 @@
|
|||
</div>
|
||||
|
||||
<!-- mg run icons grid -->
|
||||
<div id="mgrun"class="mgrun">
|
||||
<!-- Curve selection grid -->
|
||||
<div><img src="img/iconljay2.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconljay2.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconastro.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconljay2.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconllstr.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconastro.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconljay2.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconpose.png" alt=" " class="icongrid" /></div>
|
||||
<div><button id ="noteon 0" onclick ="buttonClicked(this.id)" class="button">Map.</button></div>
|
||||
<div><button id ="noteon 1" onclick ="buttonClicked(this.id)" class="button">xPLS</button></div>
|
||||
<div><button id ="noteon 2" onclick ="buttonClicked(this.id)" class="button">Orbits</button></div>
|
||||
<div><button id ="noteon 3" onclick ="buttonClicked(this.id)" class="button">Dot</button></div>
|
||||
<div><button id ="noteon 4" onclick ="buttonClicked(this.id)" class="button">Sine</button></div>
|
||||
<div><button id ="noteon 5" onclick ="buttonClicked(this.id)" class="button">Astro</button></div>
|
||||
<div><button id ="noteon 6" onclick ="buttonClicked(this.id)" class="button:checked">Text</button></div>
|
||||
<div><button id ="noteon 7" onclick ="buttonClicked(this.id)" class="button">Pose</button></div>
|
||||
<!-- Set selection grid -->
|
||||
<div><img src="img/iconljay1.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconljay1.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconllstr.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconpose.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconljay1.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconljay1.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconljay1.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconljay1.png" alt=" " class="icongrid" /></div>
|
||||
<div><button id ="noteon 8" onclick ="buttonClicked(this.id)" class="button:checked">Set 0</button></div>
|
||||
<div><button id ="noteon 9" onclick ="buttonClicked(this.id)" class="button">Set 1</button></div>
|
||||
<div><button id ="noteon 10" onclick ="buttonClicked(this.id)" class="button">LLSTR</button></div>
|
||||
<div><button id ="noteon 11" onclick ="buttonClicked(this.id)" class="button">Franken</button></div>
|
||||
<div><button id ="noteon 12" onclick ="buttonClicked(this.id)" class="button">Ex.</button></div>
|
||||
<div><button id ="noteon 13" onclick ="buttonClicked(this.id)" class="button">5.</button></div>
|
||||
<div><button id ="noteon 14" onclick ="buttonClicked(this.id)" class="button">6</button></div>
|
||||
<div><button id ="noteon 15" onclick ="buttonClicked(this.id)" class="button">7</button></div>
|
||||
<!-- Laser selection grid -->
|
||||
<div><img src="img/iconlaser.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconlaser.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconlaser.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconlaser.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><button id ="noteon 16" onclick ="buttonClicked(this.id)" class="button:checked">0</button></div>
|
||||
<div><button id ="noteon 17" onclick ="buttonClicked(this.id)" class="button">1</button></div>
|
||||
<div><button id ="noteon 18" onclick ="buttonClicked(this.id)" class="button">2</button></div>
|
||||
<div><button id ="noteon 19" onclick ="buttonClicked(this.id)" class="button">3</button></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div id="mgrun"class="mgrun"> <!-- Laser Client selection grid -->
|
||||
<div><img src="knobs/iconljay2.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconljay2.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconljay2.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconljay2.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
|
||||
<div><button id ="noteon 0" onclick ="buttonClicked(this.id)" class="button:checked">0</button></div>
|
||||
<div><button id ="noteon 1" onclick ="buttonClicked(this.id)" class="button">1</button></div>
|
||||
<div><button id ="noteon 2" onclick ="buttonClicked(this.id)" class="button">2</button></div>
|
||||
<div><button id ="noteon 3" onclick ="buttonClicked(this.id)" class="button">3</button></div>
|
||||
<div><button id ="noteon 4" onclick ="buttonClicked(this.id)" class="button">4</button></div>
|
||||
<div><button id ="noteon 5" onclick ="buttonClicked(this.id)" class="button">5</button></div>
|
||||
<div><button id ="noteon 6" onclick ="buttonClicked(this.id)" class="button">6</button></div>
|
||||
<div><button id ="noteon 7" onclick ="buttonClicked(this.id)" class="button">7</button></div>
|
||||
<!-- Simulator PL selection grid -->
|
||||
<div><img src="img/iconsimu.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconsimu.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconsimu.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconsimu.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="img/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconpl.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconpl.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconpl.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconpl.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><button id ="noteon 24" onclick ="buttonClicked(this.id)" class="button:checked">PL 0</button></div>
|
||||
<div><button id ="noteon 25" onclick ="buttonClicked(this.id)" class="button">PL 1</button></div>
|
||||
<div><button id ="noteon 26" onclick ="buttonClicked(this.id)" class="button">PL 2</button></div>
|
||||
|
|
@ -549,7 +517,41 @@
|
|||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<!-- Laser selection grid -->
|
||||
<div><img src="knobs/iconlaser.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconlaser.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconlaser.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconlaser.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><button id ="noteon 16" onclick ="buttonClicked(this.id)" class="button:checked">0</button></div>
|
||||
<div><button id ="noteon 17" onclick ="buttonClicked(this.id)" class="button">1</button></div>
|
||||
<div><button id ="noteon 18" onclick ="buttonClicked(this.id)" class="button">2</button></div>
|
||||
<div><button id ="noteon 19" onclick ="buttonClicked(this.id)" class="button">3</button></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<!-- Hidden grid -->
|
||||
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<!-- mg : footer display events for debug -->
|
||||
<div class="mgfooter">
|
||||
|
|
@ -688,88 +690,42 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Point list draw -->
|
||||
<script>
|
||||
<script type="text/javascript">
|
||||
|
||||
// Store Reference To The Canvas & Set Context
|
||||
var canvas = document.getElementById("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
//var re = document.getElementById('speed');
|
||||
//re.addEventListener('change', function(){
|
||||
// speed = re.value;
|
||||
// });
|
||||
|
||||
var lastpoint = { x: 0, y: 0 };
|
||||
|
||||
function draw() {
|
||||
|
||||
// Clear Canvas At The Start Of Every Frame
|
||||
ctx.clearRect(0,0,400,400);
|
||||
if (pl2.length > 0)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(lastpoint.x , lastpoint.y );
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(Math.random() * 220, Math.random() * 220);
|
||||
|
||||
// var xA = new Array();
|
||||
// var yA = new Array();
|
||||
//for (var i=0; i<=100, i++){
|
||||
//xA[i] = ;
|
||||
//yA[i] = ;
|
||||
//}
|
||||
|
||||
// Draw Additional Randomly Placed Lines
|
||||
for (var i = 0; i < 25; i++) {
|
||||
ctx.lineTo(Math.random() * 400, Math.random() * 400);
|
||||
}
|
||||
ctx.strokeStyle = "#888";
|
||||
ctx.stroke();
|
||||
|
||||
// Call Draw Function Again To Continue
|
||||
// Drawing To Canvas To Create Animation
|
||||
// Draw Lines
|
||||
for (var i = 0; i < pl2.length/3; i++) {
|
||||
ctx.lineTo(pl2[i*3]*0.7, pl2[1+(i*3)]*0.7);
|
||||
}
|
||||
|
||||
ctx.strokeStyle = "#888";
|
||||
ctx.stroke();
|
||||
lastpoint.x = pl2[i*3];
|
||||
lastpoint.y = pl2[1+(i*3)];
|
||||
}
|
||||
// Call Draw Function Again To Create Animation
|
||||
window.requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
<!--
|
||||
|
||||
//var speed = 100;
|
||||
var lastpoint = { x: 0, y: 0 };
|
||||
var pt = { x: 0, y: 0 };
|
||||
|
||||
// fade background a bit...
|
||||
ctx.globalAlpha = 0.1;
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillRect(0, 0, 400, 400);
|
||||
ctx.globalAlpha = 1.0;
|
||||
for (var i=0; i<=100; i++){
|
||||
//var pt = seg.points[point];
|
||||
pt.x = Math.random() * 400;
|
||||
pt.y = Math.random() * 400;
|
||||
// console.log('draw', pt);
|
||||
var newpoint = {
|
||||
x: pt.x,
|
||||
y: pt.y
|
||||
//x: 200 + 190 * pt.x / 32768,
|
||||
//y: 200 - 190 * pt.y / 32768
|
||||
};
|
||||
ctx.strokeStyle = "#888";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(lastpoint.x, lastpoint.y);
|
||||
ctx.lineTo(newpoint.x, newpoint.y);
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
|
||||
lastpoint.x = newpoint.x;
|
||||
lastpoint.y = newpoint.y;
|
||||
}
|
||||
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
// Initialize The Draw Function
|
||||
draw();
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
<!-- non displayed items, for code reference
|
||||
|
|
|
|||
BIN
webui/knobs/client.png
Normal file
BIN
webui/knobs/client.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
webui/knobs/iconamiral.png
Normal file
BIN
webui/knobs/iconamiral.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
webui/knobs/iconastro.png
Normal file
BIN
webui/knobs/iconastro.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
webui/knobs/iconblack.png
Normal file
BIN
webui/knobs/iconblack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 604 B |
BIN
webui/knobs/iconlaser.png
Normal file
BIN
webui/knobs/iconlaser.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
webui/knobs/iconljay1.png
Normal file
BIN
webui/knobs/iconljay1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
webui/knobs/iconljay2.png
Normal file
BIN
webui/knobs/iconljay2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
webui/knobs/iconllstr.png
Normal file
BIN
webui/knobs/iconllstr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
webui/knobs/iconpl.png
Normal file
BIN
webui/knobs/iconpl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
webui/knobs/iconpong.png
Normal file
BIN
webui/knobs/iconpong.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
webui/knobs/iconpose.png
Normal file
BIN
webui/knobs/iconpose.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
webui/knobs/iconsimu.png
Normal file
BIN
webui/knobs/iconsimu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
324
webui/ljaygrid.css
Normal file
324
webui/ljaygrid.css
Normal file
|
|
@ -0,0 +1,324 @@
|
|||
|
||||
.maingrid {
|
||||
display: grid;
|
||||
grid-template-columns: 900px;
|
||||
grid-template-raw: 1fr 1fr 1fr 1fr;
|
||||
grid-gap: 1px;
|
||||
background-color: #222;
|
||||
padding: 5px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.mgtitle {
|
||||
display: grid;
|
||||
height: 90px;
|
||||
grid-template-columns: 130px 70px 80px 600px;
|
||||
background-color: #111;
|
||||
transition: all .3s ease;
|
||||
padding-top: 10px;
|
||||
border-color: #445;
|
||||
border-style: groove;
|
||||
border-width: 1px;
|
||||
}
|
||||
.mgstatus {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 150px 1fr;
|
||||
grid-template-raw: 30px;
|
||||
grid-column-gap: 1px;
|
||||
grid-row-gap: 1px;
|
||||
border-color: #334;
|
||||
border-style: groove;
|
||||
border-width: 1px;
|
||||
background-color: #111;
|
||||
font-size: small;
|
||||
color:#444;
|
||||
font-family: sans-serif, Helvetica, Verdana, Arial;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
font-family: 'hobeaux-rococeaux-background', Helvetica;
|
||||
}
|
||||
.mgalign {
|
||||
display: grid;
|
||||
height: 400px;
|
||||
grid-template-columns: 144px 144px 138px 138px 10px;
|
||||
grid-template-rows: 1Fr;
|
||||
background-color: #151515;
|
||||
border-color: #445;
|
||||
border-style: groove;
|
||||
border-width: 1px;
|
||||
}
|
||||
.mgcanvas {
|
||||
display: none;
|
||||
height: 400px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1Fr;
|
||||
background-color: #151515;
|
||||
border-color: #445;
|
||||
border-style: groove;
|
||||
border-width: 1px;
|
||||
}
|
||||
.mglive {
|
||||
display: none;
|
||||
height: 400px;
|
||||
grid-template-columns: 138px 138px 512px 1Fr;
|
||||
grid-template-rows: 1Fr;
|
||||
background-color: #151515;
|
||||
border-color: #445;
|
||||
border-style: groove;
|
||||
border-width: 1px;
|
||||
}
|
||||
.mgrun {
|
||||
display: none;
|
||||
height: 400px;
|
||||
grid-template-columns: 66px 66px 66px 66px 66px 66px 66px 66px;
|
||||
grid-template-rows: 66px 17px 69px 17px 66px 17px 66px 17px;
|
||||
background-color: #000;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
border-color: #445;
|
||||
border-style: groove;
|
||||
border-width: 1px;
|
||||
grid-gap: 1px;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
.mgfooter {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-raw: 25px;
|
||||
grid-column-gap: 1px;
|
||||
grid-row-gap: 1px;
|
||||
border-color: #334;
|
||||
border-style: groove;
|
||||
border-width: 1px;
|
||||
background-color: #111;
|
||||
font-size: small;
|
||||
font-family: sans-serif, Helvetica, Verdana, Arial;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
font-family: 'hobeaux-rococeaux-background', Helvetica;
|
||||
}
|
||||
.topgrid {
|
||||
display: grid;
|
||||
height: 80px;
|
||||
grid-template-columns: 60px 75px 40px 60px 75px 60px 75px 60px 75px;
|
||||
background-color: #111;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
grid-gap: 1px;
|
||||
border-color: #445;
|
||||
border-style: groove;
|
||||
border-width: 1px;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
.laserbox {
|
||||
display: grid;
|
||||
height: 390px;
|
||||
width: 132px;
|
||||
grid-template-columns: 124px;
|
||||
grid-template-rows: 15px 32px 325px;
|
||||
background-color: #111;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
border-color: #334;
|
||||
border-style: groove;
|
||||
border-width: 1px;
|
||||
}
|
||||
.lasergrid {
|
||||
display: grid;
|
||||
height: 323px;
|
||||
width: 124px;
|
||||
grid-template-columns: 62px 62px;
|
||||
grid-template-rows: 30px 19px 8px 55px 20px 19px 8px 55px 25px 19px 8px 55px 19px;
|
||||
background-color: #111;
|
||||
line-height: 1;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
color:#88c;
|
||||
}
|
||||
.lissabox {
|
||||
display: grid;
|
||||
height: 353px;
|
||||
width: 126px;
|
||||
grid-template-columns: 124px;
|
||||
grid-template-rows: 15px 338px;
|
||||
background-color: #111;
|
||||
line-height: 1;
|
||||
padding: 6px;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
border-color: #334;
|
||||
border-style: groove;
|
||||
border-width: 1px;
|
||||
}
|
||||
.spacer {
|
||||
display: grid;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.lissagrid {
|
||||
display: grid;
|
||||
height: 323px;
|
||||
width: 124px;
|
||||
grid-template-columns: 60px 60px ;
|
||||
grid-template-rows: 55px 25px 15px 8px 55px 25px 15px 8px 55px 25px 15px;
|
||||
background-color: #111;
|
||||
line-height: 1;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.withaibox {
|
||||
display: grid;
|
||||
height: 353px;
|
||||
width: 126px;
|
||||
grid-template-columns: 124px;
|
||||
grid-template-rows: 15px 338px;
|
||||
background-color: #111;
|
||||
line-height: 1;
|
||||
padding: 6px;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
border-color: #334;
|
||||
border-style: groove;
|
||||
border-width: 1px;
|
||||
}
|
||||
.withaigrid {
|
||||
display: grid;
|
||||
height: 323px;
|
||||
width: 124px;
|
||||
grid-template-columns: 60px 60px ;
|
||||
grid-template-rows: 55px 25px 15px 8px 55px 25px 15px 8px 55px 25px 15px;
|
||||
background-color: #111;
|
||||
line-height: 1;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.projgrid {
|
||||
display: grid;
|
||||
height: 140px;
|
||||
width: 194px;
|
||||
grid-template-columns: 1Fr 1Fr 1Fr;
|
||||
grid-template-rows: 25px 8px 55px 25px 15px;
|
||||
background-color: #111;
|
||||
line-height: 1;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
border-color: #334;
|
||||
border-style: groove;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.lasertext {
|
||||
font-size: small;
|
||||
font-family: Helvetica, Verdana, Arial, sans-serif;
|
||||
color: #bbb;
|
||||
}
|
||||
.lasertextxs {
|
||||
font-size: x-small;
|
||||
font-family: Helvetica, Verdana, Arial, sans-serif;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.lsttgrid {
|
||||
display: grid;
|
||||
height: 20px;
|
||||
grid-template-columns: 10px 10px 25px 25px;
|
||||
grid-template-rows: 15px 15px 15px 15px 15px;
|
||||
grid-gap: 1px;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
.onoffgrid {
|
||||
display: grid;
|
||||
height: 14px;
|
||||
grid-template-columns: 1Fr;
|
||||
grid-template-rows: 15px 110px;
|
||||
justify-items: center;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
.icongrid {
|
||||
padding: 2px;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
#showin {
|
||||
font-family: Helvetica, Verdana, Arial, sans-serif;
|
||||
color :#444;
|
||||
width: 150px;
|
||||
height: 25px;
|
||||
padding-top: 4px;
|
||||
|
||||
}
|
||||
#showout {
|
||||
font-family: Helvetica, Verdana, Arial, sans-serif;
|
||||
color: #444;
|
||||
width: 150px;
|
||||
height: 25px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
#events {
|
||||
font-family: Helvetica, Verdana, Arial, sans-serif;
|
||||
color: #444;
|
||||
width: 150px;
|
||||
height: 25px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding: 8px 5px;
|
||||
border: 1px solid #404040;
|
||||
background: #141414;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#141414), to(#141414));
|
||||
background: -moz-linear-gradient(top, #141414, #141414);
|
||||
background: linear-gradient(to bottom, #141414, #141414);
|
||||
font: normal normal normal 11px arial;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.button:hover,
|
||||
.button:focus {
|
||||
padding: 8px 5px;
|
||||
border: 1px solid #b6b6b6;
|
||||
background: #181818;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#181818), to(#181818));
|
||||
background: -moz-linear-gradient(top, #181818, #181818);
|
||||
background: linear-gradient(to bottom, #181818, #181818);
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.button:active {
|
||||
padding: 8px 5px;
|
||||
background: #0c0c0c;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#0c0c0c), to(#141414));
|
||||
background: -moz-linear-gradient(top, #0c0c0c, #141414);
|
||||
background: linear-gradient(to bottom, #0c0c0c, #141414);
|
||||
border: 1px solid #6666B6;
|
||||
}
|
||||
.button:checked {
|
||||
padding: 8px 5px;
|
||||
background: #c0c0c0;
|
||||
color: #0c0c0c;
|
||||
border: 1px solid #6666B6;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border-radius: 5px;
|
||||
font: normal normal normal 11px arial;
|
||||
text-decoration: none;
|
||||
}
|
||||
.submit {
|
||||
background: #0c0c0c;
|
||||
color: #c0c0c0;
|
||||
width: 90px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
height: 15px;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#0c0c0c), to(#141414));
|
||||
background: -moz-linear-gradient(top, #0c0c0c, #141414);
|
||||
background: linear-gradient(to bottom, #0c0c0c, #141414);
|
||||
border: 1px solid #445;
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue