lapin/LJ
1
0
Fork 0
forked from protonphoton/LJ
Code Issues Pull Requests Releases Wiki Activity

More webui bugfixs.

Browse Source
This commit is contained in:
nrhck 2018-12-18 03:03:00 +01:00
parent bcd45c9de5
commit 4bacb00395
3 changed files with 140 additions and 383 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
mainy.conf
View File

@ -12,14 +12,14 @@ color = -1
ip = 192.168.1.4 ip = 192.168.1.4
kpps = 25000 kpps = 25000
centerx = -695 centerx = -695
centery = -2156 centery = -1486
zoomx = 32.2 zoomx = 32.2
zoomy = 29.0 zoomy = 29.0
sizex = 31450 sizex = 31450
sizey = 32000 sizey = 32000
finangle = 17.0 finangle = 17.0
swapx = 1 swapx = 1
swapy = -1 swapy = 1
lsteps = [ (1.0, 8),(0.25, 3), (0.75, 3), (1.0, 10)] lsteps = [ (1.0, 8),(0.25, 3), (0.75, 3), (1.0, 10)]
warpdest = [[-1500., 1500.], warpdest = [[-1500., 1500.],
[ 1500., 1500.], [ 1500., 1500.],
@ -30,7 +30,7 @@ warpdest = [[-1500., 1500.],
color = -1 color = -1
ip = 192.168.1.5 ip = 192.168.1.5
kpps = 25000 kpps = 25000
centerx = -200 centerx = -506
centery = -357 centery = -357
zoomx = 81.5 zoomx = 81.5
zoomy = 50.1 zoomy = 50.1

226
webui/LJ.js
View File

@ -4,81 +4,78 @@
// Web Audio buttons 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.
// add a listener for each element. var x = document.getElementById("mgalign");
var message=""; x.style.display = "none";
var log=[]; var x = document.getElementById("mgcanvas");
var knobs = document.getElementsByTagName('webaudio-knob'); x.style.display = "none";
for(var i = 0; i < knobs.length; i++){ var x = document.getElementById("mgrun");
knobs[i].addEventListener("input",Dump,false); x.style.display = "none";
knobs[i].addEventListener("change",Dump,false); var x = document.getElementById("mglive");
} x.style.display = "none";
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 function showAlign() {
if (e.target.id.substring(0,5) === "scale" && e.type === "change") { noMenu();
e.target.value = 0; var x = document.getElementById("mgalign");
console.log(e.target.id + "set to 0") x.style.display = "grid";
_WS.send("/" + e.target.id + " " + e.target.value); var x = document.getElementById("showalign");
x.className = "button:checked";
} }
// for /loffset : after a change (knob is released) reset knob value to 0
if (e.target.id.substring(0,7) === "loffset" && e.type === "change") { function showRun() {
e.target.value = 0; noMenu();
console.log(e.target.id + "set to 0") var x = document.getElementById("mgrun");
_WS.send("/" + e.target.id + " " + e.target.value); x.style.display = "grid";
var x = document.getElementById("showrun");
x.className = "button:checked";
} }
// for /angle : after a change (knob is released) reset knob value to 0
if (e.target.id.substring(0,5) === "angle" && e.type === "change") { function showCanvas() {
e.target.value = 0; noMenu();
console.log(e.target.id + "set to 0") var x = document.getElementById("mgcanvas");
_WS.send("/" + e.target.id + " " + e.target.value); 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);
} }
}
// Websocket Handler
var pl = ""; var pl = "";
var pl2 = new Array(); var pl2 = new Array();
var _WS = { var _WS = {
uri: 'ws://127.0.0.1:9001/', uri: 'ws://127.0.0.1:9001/',
ws: null, ws: null,
init : function (e) { init : function (e) {
_WS.s = new WebSocket(_WS.uri); _WS.s = new WebSocket(_WS.uri);
_WS.s.onopen = function (e) { _WS.onOpen(e); }; _WS.s.onopen = function (e) { _WS.onOpen(e); };
@ -86,66 +83,56 @@ var _WS = {
_WS.s.onmessage = function (e) { _WS.onMessage(e); }; _WS.s.onmessage = function (e) { _WS.onMessage(e); };
_WS.s.onerror = function (e) { _WS.onError(e); }; _WS.s.onerror = function (e) { _WS.onError(e); };
}, },
onOpen: function () { onOpen: function () {
_WS.showout(_WS.uri); _WS.showout(_WS.uri);
_WS.showout('CONNECTED'); _WS.showout('CONNECTED');
}, },
onClose: function () { onClose: function () {
_WS.showout('DISCONNECTED'); _WS.showout('DISCONNECTED');
}, },
onMessage: function (e) { onMessage: function (e) {
var res = e.data.split(" "); var res = e.data.split(" ");
//console.log(e.data) //console.log(e.data)
//console.log(res[0].substring(0,6))
switch (res[0].substring(0,6)) { switch (res[0].substring(0,6)) {
case "/statu": case "/statu":
_WS.showstatus(e.data.slice(8)); _WS.showstatus(e.data.slice(8));
break; break;
case "/plfra": case "/plfra":
console.log(e.data.slice(11));
pl = e.data.slice(9); pl = e.data.slice(9);
//console.log(pl); //console.log(pl);
pl2 = eval(pl.replace(/[()]/g, '')); pl2 = eval(pl.replace(/[()]/g, ''));
//console.log(pl2); //console.log(pl2);
break; break;
case "/plpoi": case "/plpoi":
console.log("plpoint"); //console.log("plpoint");
break; break;
case "/clien":
console.log("New Client : "+res[1])
break
default: default:
//console.log(res[0] + " " + res[1]) //console.log(res[0] + " " + res[1])
//console.log(res[1]) //console.log(res[1])
document.getElementById(res[0].slice(1)).value = res[1]; document.getElementById(res[0].slice(1)).value = res[1];
_WS.showin(e.data);
} }
//_WS.showin(e.data); _WS.showin(e.data);
}, },
onError: function (e) { onError: function (e) {
_WS.showin('<span style="color: red;">ERROR:</span> ' + e.data); _WS.showin('<span style="color: red;">ERROR:</span> ' + e.data);
}, },
showin: function (message) { showin: function (message) {
var divtext = document.getElementById('showin'); var divtext = document.getElementById('showin');
divtext.innerHTML=""; divtext.innerHTML="";
divtext.innerHTML= message.toString(); divtext.innerHTML= message.toString();
}, },
showout: function (message) { showout: function (message) {
var divtext = document.getElementById('showout'); var divtext = document.getElementById('showout');
divtext.innerHTML=""; divtext.innerHTML="";
divtext.innerHTML= message.toString(); divtext.innerHTML= message.toString();
}, },
showstatus: function (message) { showstatus: function (message) {
var divtext = document.getElementById('showstatus'); var divtext = document.getElementById('showstatus');
divtext.innerHTML=""; divtext.innerHTML="";
divtext.innerHTML= message.toString(); divtext.innerHTML= message.toString();
}, },
send: function (message) { send: function (message) {
if (!message.length) { if (!message.length) {
alert('Empty message not allowed !'); alert('Empty message not allowed !');
@ -154,90 +141,11 @@ var _WS = {
_WS.s.send(message); _WS.s.send(message);
} }
}, },
close: function () { close: function () {
_WS.showout('GOODBYE !'); _WS.showout('GOODBYE !');
_WS.s.close(); _WS.s.close();
} }
}; };
window.addEventListener('load', _WS.init, false); 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);
}

153
webui/index.html
View File

@ -19,88 +19,7 @@
</script> </script>
<script src="webaudio-controls.js"></script> <script src="webaudio-controls.js"></script>
<link rel="stylesheet" href="ljaygrid.css" /> <link rel="stylesheet" href="ljaygrid.css" />
<script src="LJ.js"></script>
<!-- Webscoket handler -->
<script type="text/javascript">
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)
//console.log(res[0].substring(0,6))
switch (res[0].substring(0,6)) {
case "/statu":
_WS.showstatus(e.data.slice(8));
break;
case "/plfra":
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":
//console.log("plpoint");
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);
},
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);
</script>
</head> </head>
@ -620,76 +539,6 @@
} }
</script> </script>
<!-- Menu buttons handler -->
<!-- This could be better, simpler with CSS tabs -->
<script type="text/javascript">
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);
}
</script>
<!-- Point list draw --> <!-- Point list draw -->
<script type="text/javascript"> <script type="text/javascript">