UI upgrades
This commit is contained in:
nrhck
parent
770e178513
commit
9ecee93b43
27 changed files with 1168 additions and 468 deletions
338
webui/LJ.js
338
webui/LJ.js
|
|
@ -1,23 +1,25 @@
|
|||
//
|
||||
// LJ.js v0.7.0
|
||||
// LJ.js v0.7.1
|
||||
//
|
||||
|
||||
|
||||
//
|
||||
// Central horizontal menu
|
||||
//
|
||||
|
||||
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";
|
||||
var x = document.getElementById("shownozoid");
|
||||
x.className = "button";
|
||||
var x = document.getElementById("showplanet");
|
||||
x.className = "button";
|
||||
// Set all central menu buttons with normal button style
|
||||
var x = document.getElementById("align");
|
||||
x.value = 0 ;
|
||||
var x = document.getElementById("run");
|
||||
x.value = 0 ;
|
||||
var x = document.getElementById("simu");
|
||||
x.value = 0 ;
|
||||
var x = document.getElementById("live");
|
||||
x.value = 0 ;
|
||||
var x = document.getElementById("nozoid");
|
||||
x.value = 0 ;
|
||||
var x = document.getElementById("planet");
|
||||
x.value = 0 ;
|
||||
|
||||
// Hide all possible main central grids.
|
||||
var x = document.getElementById("mgalign");
|
||||
|
|
@ -37,103 +39,188 @@
|
|||
}
|
||||
|
||||
function showAlign() {
|
||||
noMenu();
|
||||
noMenu();
|
||||
var x = document.getElementById("mgalign");
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("showalign");
|
||||
x.className = "button:checked";
|
||||
var x = document.getElementById("align");
|
||||
x.value = 1 ;
|
||||
}
|
||||
|
||||
function showRun() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mgrun");
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("showrun");
|
||||
x.className = "button:checked";
|
||||
}
|
||||
function showRun() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mgrun");
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("run");
|
||||
x.value = 1 ;
|
||||
}
|
||||
|
||||
function showCanvas() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mgsimu");
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("cnvbuttons");
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("showcanvas");
|
||||
x.className = "button:checked";
|
||||
}
|
||||
function showCanvas() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mgsimu");
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("cnvbuttons");
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("simu");
|
||||
x.value = 1 ;
|
||||
}
|
||||
|
||||
function showLive() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mglive");
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("showlive");
|
||||
x.className = "button:checked";
|
||||
}
|
||||
function showLive() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mglive");
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("live");
|
||||
x.value = 1 ;
|
||||
}
|
||||
|
||||
function showNozoid() {
|
||||
function showNozoid() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mgnozoid");
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("shownozoid");
|
||||
x.className = "button:checked";
|
||||
}
|
||||
var x = document.getElementById("nozoid");
|
||||
x.value = 1 ;
|
||||
}
|
||||
|
||||
function showPlanet() {
|
||||
function showPlanet() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mgplanet");
|
||||
x.style.display = "grid";
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("cnvbuttons");
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("showplanet");
|
||||
x.className = "button:checked";
|
||||
}
|
||||
var x = document.getElementById("planet");
|
||||
x.value = 1 ;
|
||||
}
|
||||
|
||||
function buttonClicked(clicked_id) {
|
||||
_WS.send("/" + clicked_id);
|
||||
}
|
||||
function buttonClicked(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);
|
||||
_WS.send("/" + clicked_id);
|
||||
|
||||
// update Canvas right part of maingrid
|
||||
if (clicked_id === "planet/planetUI") {
|
||||
showplanetUI();
|
||||
}
|
||||
if (clicked_id === "nozoid/nozoidUI") {
|
||||
shownozoidUI();
|
||||
}
|
||||
if (clicked_id === "ai/aiUI") {
|
||||
showaiUI();
|
||||
}
|
||||
if (clicked_id === "lissa/lissaUI") {
|
||||
showlissaUI();
|
||||
}
|
||||
if (clicked_id === "vj/vjUI") {
|
||||
showlissaUI();
|
||||
}
|
||||
if (clicked_id === "nozoid/down 50") {
|
||||
var x = document.getElementById("nozoid/down 50");
|
||||
x.value = 0 ;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// SimuUIs
|
||||
//
|
||||
|
||||
function nosimuUI() {
|
||||
// Hide all possible main central grids.
|
||||
var x = document.getElementById("planetUI");
|
||||
x.style.display = "none";
|
||||
var x = document.getElementById("nozoidUI");
|
||||
x.style.display = "none";
|
||||
var x = document.getElementById("aiUI");
|
||||
x.style.display = "none";
|
||||
var x = document.getElementById("lissaUI");
|
||||
x.style.display = "none";
|
||||
var x = document.getElementById("vjUI");
|
||||
x.style.display = "none";
|
||||
}
|
||||
|
||||
function showplanetUI() {
|
||||
nosimuUI();
|
||||
var x = document.getElementById("planetUI");
|
||||
x.style.display = "grid";
|
||||
}
|
||||
|
||||
function shownozoidUI() {
|
||||
nosimuUI();
|
||||
var x = document.getElementById("nozoidUI");
|
||||
x.style.display = "grid";
|
||||
}
|
||||
|
||||
function showaiUI() {
|
||||
nosimuUI();
|
||||
var x = document.getElementById("aiUI");
|
||||
x.style.display = "grid";
|
||||
}
|
||||
|
||||
function showlissaUI() {
|
||||
nosimuUI();
|
||||
var x = document.getElementById("lissaUI");
|
||||
x.style.display = "grid";
|
||||
}
|
||||
|
||||
function showvjUI() {
|
||||
nosimuUI();
|
||||
var x = document.getElementById("vjUI");
|
||||
x.style.display = "grid";
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Forms submits
|
||||
//
|
||||
|
||||
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 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');
|
||||
document.getElementById("on").value = 1;
|
||||
},
|
||||
onClose: function () {
|
||||
_WS.showout('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;
|
||||
},
|
||||
onMessage: function (e) {
|
||||
var res = e.data.split(" ");
|
||||
//console.log(e.data)
|
||||
//console.log(res[0].substring(0,6))
|
||||
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');
|
||||
document.getElementById("on").value = 1;
|
||||
},
|
||||
|
||||
onClose: function () {
|
||||
_WS.showout('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;
|
||||
},
|
||||
|
||||
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));
|
||||
|
|
@ -149,39 +236,44 @@
|
|||
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);
|
||||
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);
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.mgtitle {
|
||||
display: grid;
|
||||
height: 90px;
|
||||
grid-template-columns: 130px 70px 80px 600px;
|
||||
grid-template-columns: 130px 70px 80px 70px 530px;
|
||||
background-color: #111;
|
||||
transition: all .3s ease;
|
||||
padding-top: 10px;
|
||||
|
|
@ -21,13 +21,13 @@
|
|||
}
|
||||
.mgstatus {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 150px 1fr;
|
||||
grid-template-columns: 470px 80px 1fr;
|
||||
grid-template-raw: 30px;
|
||||
grid-column-gap: 1px;
|
||||
grid-row-gap: 1px;
|
||||
border-color: #334;
|
||||
border-style: groove;
|
||||
border-width: 1px;
|
||||
border-width: 0px;
|
||||
background-color: #111;
|
||||
font-size: small;
|
||||
color:#444;
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
font-family: 'hobeaux-rococeaux-background', Helvetica;
|
||||
}
|
||||
.mgalign {
|
||||
display: grid;
|
||||
display: none;
|
||||
height: 400px;
|
||||
grid-template-columns: 144px 144px 138px 138px 10px 326px;
|
||||
grid-template-rows: 1Fr;
|
||||
|
|
@ -47,13 +47,12 @@
|
|||
border-width: 1px;
|
||||
}
|
||||
.mgsimu {
|
||||
display: none;
|
||||
display: grid;
|
||||
height: 400px;
|
||||
width: 900px;
|
||||
grid-template-columns: 500px 400px;
|
||||
grid-template-rows: 400px;
|
||||
background-color: #151515;
|
||||
|
||||
}
|
||||
.cnvbuttons {
|
||||
display: none;
|
||||
|
|
@ -133,7 +132,7 @@
|
|||
display: grid;
|
||||
height: 80px;
|
||||
grid-template-columns: 60px 75px 40px 60px 75px 60px 75px 60px 75px;
|
||||
background-color: #111;
|
||||
background-color: #000;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
grid-gap: 1px;
|
||||
|
|
@ -303,10 +302,7 @@
|
|||
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);
|
||||
background: #000;
|
||||
font: normal normal normal 11px arial;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
|
|
@ -343,15 +339,22 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
.submit {
|
||||
background: #0c0c0c;
|
||||
background: #000;
|
||||
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;
|
||||
}
|
||||
.submitsmall {
|
||||
background: #000;
|
||||
color: #c0c0c0;
|
||||
width: 45px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
height: 15px;
|
||||
border: 1px solid #445;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
599
webui/index.html
599
webui/index.html
|
|
@ -1,5 +1,10 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
LJ webapp 'mg' stand for main grid elements
|
||||
-->
|
||||
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
|
@ -50,6 +55,8 @@
|
|||
<div><webaudio-switch id="on" height="52" width="41" value="0" src="knobs/bigbluetoggle.png" type="toggle"></webaudio-switch></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Lasers state grid -->
|
||||
<div class="lsttgrid">
|
||||
|
||||
|
|
@ -80,19 +87,48 @@
|
|||
<div><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>
|
||||
|
||||
<!-- blackout button -->
|
||||
<div class="blackout">
|
||||
<div class="lasertextxs">Emergy Black</div>
|
||||
<div><webaudio-switch id="emergency" height="64" width="64" value="0" src="knobs/blackout.png" type="toggle"></webaudio-switch></div>
|
||||
</div>
|
||||
<div>
|
||||
<!--
|
||||
|
||||
<div class="topgrid">
|
||||
<div class="lasertext">Laser</div>
|
||||
<div><webaudio-knob id="noteon" src="knobs/Prophetic5.png" diameter="70" min="16" max="20" value="0" sprites="5"></webaudio-knob></div>
|
||||
<div><webaudio-param style="font-size:medium;" link="noteon"></webaudio-param></div>
|
||||
<div class="lasertext">Set</div>
|
||||
<div><webaudio-knob id="noteon" src="knobs/Prophetic5.png" diameter="70" min="8" max="12" value="4" sprites="5"></webaudio-knob></div>
|
||||
<div class="lasertext">Curve</div>
|
||||
<div><webaudio-knob id="noteon" src="knobs/Prophetic10.png" diameter="70" min="0" max="7" value="4" sprites="10"></webaudio-knob></div>
|
||||
<div class="lasertext">Simu</div>
|
||||
<div><webaudio-knob id="noteon" src="knobs/Prophetic5.png" diameter="70" min="24" max="28" value="0" sprites="5"></webaudio-knob></div>
|
||||
-->
|
||||
<!--
|
||||
<div class="app">
|
||||
<x-sign>
|
||||
<div class="glitch __city" data-text="paris city">
|
||||
</div>
|
||||
<div class="glitch __info" data-text="paris city">
|
||||
</div>
|
||||
|
||||
<div class="glitch __state">
|
||||
<table class="t-info">
|
||||
<tr>
|
||||
<th class="xl-info" colspan="2" rowspan="2"></th>
|
||||
<th class="sm-info" colspan="2"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sm-info" colspan="2">http://www.teamlaser.fr</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</x-sign>
|
||||
</div>
|
||||
-->
|
||||
<!--
|
||||
<div class="lasertext">Laser</div>
|
||||
<div><webaudio-knob id="noteon" src="knobs/Prophetic5.png" diameter="70" min="16" max="20" value="0" sprites="5"></webaudio-knob></div>
|
||||
<div><webaudio-param style="font-size:medium;" link="noteon"></webaudio-param></div>
|
||||
<div class="lasertext">Set</div>
|
||||
<div><webaudio-knob id="noteon" src="knobs/Prophetic5.png" diameter="70" min="8" max="12" value="4" sprites="5"></webaudio-knob></div>
|
||||
<div class="lasertext">Curve</div>
|
||||
<div><webaudio-knob id="noteon" src="knobs/Prophetic10.png" diameter="70" min="0" max="7" value="4" sprites="10"></webaudio-knob></div>
|
||||
<div class="lasertext">Simu</div>
|
||||
<div><webaudio-knob id="noteon" src="knobs/Prophetic5.png" diameter="70" min="24" max="28" value="0" sprites="5"></webaudio-knob></div>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
|
@ -109,15 +145,57 @@
|
|||
<webaudio-switch id="simu" height="10" width="99" value="0" src="knobs/simu.png" type="toggle"></webaudio-switch>
|
||||
<webaudio-switch id="run" height="10" width="99" value="0" src="knobs/run.png" type="toggle"></webaudio-switch>
|
||||
<webaudio-switch id="live" height="10" width="99" value="0" src="knobs/live.png" type="toggle"></webaudio-switch> -->
|
||||
<button class="button:checked" id="showalign" onclick="showAlign()" checked="checked">Align</button>
|
||||
<button class="button" id="showcanvas" onclick="showCanvas()">Simu</button>
|
||||
<button class="button" id="showrun" onclick="showRun()">Run</button>
|
||||
<button class="button" id="showlive" onclick="showLive()">Live</button>
|
||||
<webaudio-switch id="align" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/align.png"></webaudio-switch>
|
||||
<webaudio-switch id="simu" value="1" height="27" width="75" tooltip="Switch-B" src="knobs/simu.png"></webaudio-switch>
|
||||
<webaudio-switch id="live" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/live.png"></webaudio-switch>
|
||||
<webaudio-switch id="run" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/run.png"></webaudio-switch>
|
||||
<webaudio-switch id="planet" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/planet.png"></webaudio-switch>
|
||||
<webaudio-switch id="nozoid" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/nozoid.png"></webaudio-switch>
|
||||
<!--
|
||||
<button class="button" id="showrun" onclick="showRun()">Run</button>
|
||||
<button class="button" id="shownozoid" onclick="showNozoid()">Nozoid</button>
|
||||
<button class="button" id="showplanet" onclick="showPlanet()">Planet</button>
|
||||
</div>
|
||||
<div><button class="button" id="showstatus">DISCONNECTED</button></div>
|
||||
<div></div>
|
||||
-->
|
||||
</div>
|
||||
<div><button class="submit" id="showstatus">OFFLINE</button></div>
|
||||
<div>
|
||||
|
||||
<div>
|
||||
<span class="lasertext">Client</span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="noteon 0 selected="selected" ">0</option>
|
||||
<option value="noteon 1">1</option>
|
||||
<option value="noteon 2">2</option>
|
||||
<option value="noteon 3">3</option>
|
||||
</select>
|
||||
|
||||
<span class="lasertext">PL</span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="noteon 24" selected="selected" >0</option>
|
||||
<option value="noteon 25">1</option>
|
||||
<option value="noteon 26">2</option>
|
||||
<option value="noteon 27">3</option>
|
||||
</select>
|
||||
|
||||
<span class="lasertext">Laser</span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="noteon 24" selected="selected" >0</option>
|
||||
<option value="noteon 25">1</option>
|
||||
<option value="noteon 26">2</option>
|
||||
<option value="noteon 27">3</option>
|
||||
</select>
|
||||
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="planet/planetUI" selected="selected" >Planetarium</option>
|
||||
<option value="nozoid/nozoidUI">Nozoid</option>
|
||||
<option value="vj/vjUI">VJing</option>
|
||||
<option value="ai/aiUI">AI</option>
|
||||
<option value="lissa/lissaUI">Lissa</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -146,7 +224,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(lasergrid0.png);">
|
||||
<div class="lasergrid" style="background-image: url(knobs/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>
|
||||
|
|
@ -200,7 +278,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Lasergrid 1 -->
|
||||
<div class="lasergrid" style="background-image: url(lasergrid1.png);">
|
||||
<div class="lasergrid" style="background-image: url(knobs/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>
|
||||
|
|
@ -253,7 +331,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Laser 2 grid -->
|
||||
<div class="lasergrid" style="background-image: url(lasergrid2.png)">
|
||||
<div class="lasergrid" style="background-image: url(knobs/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>
|
||||
|
|
@ -309,7 +387,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Laser 3 grid -->
|
||||
<div class="lasergrid" style="background-image: url(lasergrid3.png)">
|
||||
<div class="lasergrid" style="background-image: url(knobs/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>
|
||||
|
|
@ -441,33 +519,330 @@
|
|||
|
||||
|
||||
<!--
|
||||
Simulator to display point list
|
||||
Simulator and interfaces
|
||||
-->
|
||||
|
||||
<div id = "mgsimu" class="mgsimu">
|
||||
<!-- left part : simulator -->
|
||||
<div>
|
||||
<canvas id="canvas" width="500" height="400" style="border-color: #445;border-style:groove;border-width:1px;"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Selection buttons grid -->
|
||||
<!-- right part : interdace -->
|
||||
<div>
|
||||
|
||||
<!-- sub right part : planetarium -->
|
||||
|
||||
<div id ="planetUI" style = "display: grid;justify-items: center;">
|
||||
<!-- Stop and start switch -->
|
||||
<div>
|
||||
<div><webaudio-switch id="planet/start" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/planet.png"></webaudio-switch></div>
|
||||
</div>
|
||||
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<span class="lasertext">Country (FR)</span>
|
||||
<input class = "submitsmall" onchange = "onSubmit(this.id)" type="text" id="planet/country">
|
||||
<span class="lasertext">City</span>
|
||||
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/city">
|
||||
</form>
|
||||
<form>
|
||||
<span class="lasertext">Date/Time (2012-7-12 23:00:00) </span>
|
||||
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/time">
|
||||
</form>
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<span class="lasertext">Laser 0 : Alt</span>
|
||||
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/alt/0">
|
||||
<span class="lasertext">Az</span>
|
||||
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/az/0">
|
||||
<span class="lasertext">Angle</span>
|
||||
<input class = "submitsmall" onchange = "onSubmit(this.id)" type="text" id="planet/angle/0">
|
||||
</form>
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<span class="lasertext">Laser 1 : Alt</span>
|
||||
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/alt/1">
|
||||
<span class="lasertext">Az</span>
|
||||
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/az/1">
|
||||
<span class="lasertext">Angle</span>
|
||||
<input class = "submitsmall" onchange = "onSubmit(this.id)" type="text" id="planet/angle/1">
|
||||
</form>
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<span class="lasertext">Laser 2 : Alt</span>
|
||||
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/alt/2">
|
||||
<span class="lasertext">Az</span>
|
||||
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/az/2">
|
||||
<span class="lasertext">Angle</span>
|
||||
<input class = "submitsmall" onchange = "onSubmit(this.id)" type="text" id="planet/angle/2">
|
||||
</form>
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<span class="lasertext">Laser 3 : Alt</span>
|
||||
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/alt/3">
|
||||
<span class="lasertext">Az</span>
|
||||
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/az/3">
|
||||
<span class="lasertext">Angle</span>
|
||||
<input class = "submitsmall" onchange = "onSubmit(this.id)" type="text" id="planet/angle/3">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- sub right part : lissaUI -->
|
||||
|
||||
<div id ="lissaUI" style = "display: none;justify-items: center;">
|
||||
<!-- Lissa interface -->
|
||||
<div class="lissabox">
|
||||
<div class="lasertext" style="border-color:#334;border-style: groove;border-width:1px;">LISSA
|
||||
</div>
|
||||
<div class="lissagrid">
|
||||
|
||||
<div><webaudio-knob id="cc/5" diameter="60" min="0" max="127" value="0"></webaudio-knob></div>
|
||||
<div><webaudio-knob id="cc/6" diameter="60" min="0" max="127" value="0"></webaudio-knob></div>
|
||||
<div><webaudio-param link="cc/5" value="0"></webaudio-param></div>
|
||||
<div><webaudio-param link="cc/6" value="0"></webaudio-param></div>
|
||||
<div class="lasertext">Select X</div>
|
||||
<div class="lasertext">Select Y</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="spacer"></div>
|
||||
<div><webaudio-knob id="cc/21" diameter="60" min="1" max="127" value="1"></webaudio-knob></div>
|
||||
<div><webaudio-knob id="cc/22" diameter="60" min="1" max="127" value="1"></webaudio-knob></div>
|
||||
<div><webaudio-param link="cc/21" value="0"></webaudio-param></div>
|
||||
<div><webaudio-param link="cc/22" value="0"></webaudio-param></div>
|
||||
<div class="lasertext">FOV</div>
|
||||
<div class="lasertext">Dist</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="spacer"></div>
|
||||
<div><webaudio-knob id="cc/1" diameter="60" min="1" max="127" value="1"></webaudio-knob></div>
|
||||
<div><webaudio-knob id="cc/2" diameter="60" min="1" max="127" value="1"></webaudio-knob></div>
|
||||
<div><webaudio-param link="cc/1" value="0"></webaudio-param></div>
|
||||
<div><webaudio-param link="cc/2" value="0"></webaudio-param></div>
|
||||
<div class="lasertext">Offset X</div>
|
||||
<div class="lasertext">Offset Y</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- sub right part : aiUI -->
|
||||
|
||||
<div id ="aiUI" style = "display: none;justify-items: center;">
|
||||
<!-- with AI Interface -->
|
||||
<div class="withaibox">
|
||||
<div class="lasertext" style="border-color:#334;border-style: groove;border-width:1px;">With AI
|
||||
</div>
|
||||
<div class="withaigrid">
|
||||
<div><webaudio-knob id="ai/velocity" diameter="60" min="0" max="127" value="64"></webaudio-knob></div>
|
||||
<div><webaudio-knob id="ai/expressivity" diameter="60" min="0" max="127" value="64"></webaudio-knob></div>
|
||||
<div><webaudio-param link="ai/velocity" value="64"></webaudio-param></div>
|
||||
<div><webaudio-param link="ai/expressivity" value="64"></webaudio-param></div>
|
||||
<div class="lasertext">Velocity</div>
|
||||
<div class="lasertext">Express.</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<div class="spacer"></div>
|
||||
<div><webaudio-knob id="ai/sensibility" diameter="60" min="0" max="127" value="64"></webaudio-knob></div>
|
||||
<div><webaudio-knob id="ai/beauty" diameter="60" min="0" max="127" value="64"></webaudio-knob></div>
|
||||
<div><webaudio-param link="ai/sensibility" value="64"></webaudio-param></div>
|
||||
<div><webaudio-param link="ai/beauty" value="64"></webaudio-param></div>
|
||||
<div class="lasertext">Sens.</div>
|
||||
<div class="lasertext">Beauty</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<div class="spacer"></div>
|
||||
<div><webaudio-knob id="cc/1" diameter="60" min="1" max="127" value="64"></webaudio-knob></div>
|
||||
<div><webaudio-knob id="cc/2" diameter="60" min="1" max="127" value="64"></webaudio-knob></div>
|
||||
<div><webaudio-param link="cc/1" value="1"></webaudio-param></div>
|
||||
<div><webaudio-param link="cc/2" value="1"></webaudio-param></div>
|
||||
<div class="lasertext">CC 1</div>
|
||||
<div class="lasertext">CC 2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- sub right part : vjUI -->
|
||||
|
||||
<div id ="vjUI" style = "display: none;justify-items: center;">
|
||||
<!-- VJ Interface -->
|
||||
<!-- Stop and start switch -->
|
||||
<div><webaudio-switch id="vj/start" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/live.png"></webaudio-switch></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- sub right part : NozoidUI -->
|
||||
|
||||
<div id ="nozoidUI" style = "display: none;justify-items: center;">
|
||||
<!-- Stop and start switch -->
|
||||
<div>
|
||||
<div><webaudio-switch id="nozoid/start" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/nozoids.png"></webaudio-switch></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<!-- Nozoids list and leds -->
|
||||
<div>
|
||||
<webaudio-switch id="nozoid/mmo3" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/mmo3.png"></webaudio-switch>
|
||||
<webaudio-knob id="nozoid/mmo3/led" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
|
||||
|
||||
<webaudio-switch id="nozoid/ocs2" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/ocs2.png"></webaudio-switch>
|
||||
<webaudio-knob id="nozoid/ocs2/led" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Curve choice -->
|
||||
<div>
|
||||
<span class="lasertext" >Curve</span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="nozoid/curve 0">0</option>
|
||||
<option value="nozoid/curve 1">1</option>
|
||||
<option value="nozoid/curve 2">2</option>
|
||||
<option value="nozoid/curve 3">3</option>
|
||||
</select>
|
||||
|
||||
<!-- Color choice -->
|
||||
<span class="lasertext" >Color</span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="nozoid/color 255 0 0">Red</option>
|
||||
<option value="nozoid/color 0 255 0">Green</option>
|
||||
<option value="nozoid/color 0 0 255">Blue</option>
|
||||
<option value="nozoid/color 255 255 0">Yellow</option>
|
||||
<option value="nozoid/color 0 255 255">Cyan</option>
|
||||
<option value="nozoid/color 255 0 255">Magenta</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- X curve Line IN and X Curve choices -->
|
||||
<div>
|
||||
<span class="lasertext" >X : LineIN</span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="nozoid/X/IN 0">STOP</option>
|
||||
<option value="nozoid/X/IN 1">VCO1</option>
|
||||
<option value="nozoid/X/IN 2">VCO2</option>
|
||||
<option value="nozoid/X/IN 3">LFO1</option>
|
||||
<option value="nozoid/X/IN 4">LFO2</option>
|
||||
<option value="nozoid/X/IN 5">LFO3</option>
|
||||
<option value="nozoid/X/IN 6">CV/GEN</option>
|
||||
<option value="nozoid/X/IN 7">ADSR</option>
|
||||
<option value="nozoid/X/IN 8">LIGHT</option>
|
||||
<option value="nozoid/X/IN 9">LINE IN</option>
|
||||
<option value="nozoid/X/IN 10">MIDI</option>
|
||||
<option value="nozoid/X/IN 11">CV1</option>
|
||||
<option value="nozoid/X/IN 12">CV2</option>
|
||||
<option value="nozoid/X/IN 13">CV3</option>
|
||||
<option value="nozoid/X/IN 17">1 Out</option>
|
||||
<option value="nozoid/X/IN 18">2 Out</option>
|
||||
<option value="nozoid/X/IN 20">VCF</option>
|
||||
<option value="nozoid/X/IN 21">MIX</option>
|
||||
<option value="nozoid/X/IN 22">VCA</option>
|
||||
</select>
|
||||
<span class="lasertext" >Curve</span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="nozoid/X/IN 0">Stop</option>
|
||||
<option value="nozoid/X/IN 1">OSC1</option>
|
||||
<option value="nozoid/X/IN 2">OSC2</option>
|
||||
<option value="nozoid/X/IN 3">OSC3</option>
|
||||
<option value="nozoid/X/IN 4">LFO1</option>
|
||||
<option value="nozoid/X/IN 5">LFO2</option>
|
||||
<option value="nozoid/X/IN 6">LFO3</option>
|
||||
<option value="nozoid/X/IN 7">ADSR</option>
|
||||
<option value="nozoid/X/IN 8">CV</option>
|
||||
<option value="nozoid/X/IN 9">Line IN</option>
|
||||
<option value="nozoid/X/IN 10">Jstck</option>
|
||||
<option value="nozoid/X/IN 11">INL</option>
|
||||
<option value="nozoid/X/IN 12">INR</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Y curve Line IN and Y Curve choices -->
|
||||
<div>
|
||||
<span class="lasertext" >Y : LineIN</span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="nozoid/Y/IN 0">STOP</option>
|
||||
<option value="nozoid/Y/IN 1">VCO1</option>
|
||||
<option value="nozoid/Y/IN 2">VCO2</option>
|
||||
<option value="nozoid/Y/IN 3">LFO1</option>
|
||||
<option value="nozoid/Y/IN 4">LFO2</option>
|
||||
<option value="nozoid/Y/IN 5">LFO3</option>
|
||||
<option value="nozoid/Y/IN 6">CV/GEN</option>
|
||||
<option value="nozoid/Y/IN 7">ADSR</option>
|
||||
<option value="nozoid/Y/IN 8">LIGHT</option>
|
||||
<option value="nozoid/Y/IN 9">LINE IN</option>
|
||||
<option value="nozoid/Y/IN 10">MIDI</option>
|
||||
<option value="nozoid/Y/IN 11">CV1</option>
|
||||
<option value="nozoid/Y/IN 12">CV2</option>
|
||||
<option value="nozoid/Y/IN 13">CV3</option>
|
||||
<option value="nozoid/Y/IN 17">1 Out</option>
|
||||
<option value="nozoid/Y/IN 18">2 Out</option>
|
||||
<option value="nozoid/Y/IN 20">VCF</option>
|
||||
<option value="nozoid/Y/IN 21">MIX</option>
|
||||
<option value="nozoid/Y/IN 22">VCA</option>
|
||||
</select>
|
||||
<span class="lasertext" >Curve</span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="nozoid/Y/IN 0">Stop</option>
|
||||
<option value="nozoid/Y/IN 1">OSC1</option>
|
||||
<option value="nozoid/Y/IN 2">OSC2</option>
|
||||
<option value="nozoid/Y/IN 3">OSC3</option>
|
||||
<option value="nozoid/Y/IN 4">LFO1</option>
|
||||
<option value="nozoid/Y/IN 5">LFO2</option>
|
||||
<option value="nozoid/Y/IN 6">LFO3</option>
|
||||
<option value="nozoid/Y/IN 7">ADSR</option>
|
||||
<option value="nozoid/Y/IN 8">CV</option>
|
||||
<option value="nozoid/Y/IN 9">Line IN</option>
|
||||
<option value="nozoid/Y/IN 10">Jstck</option>
|
||||
<option value="nozoid/Y/IN 11">INL</option>
|
||||
<option value="nozoid/X/IN 12">INR</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Automodulation X and Y choice -->
|
||||
<div>
|
||||
<span class="lasertext" >Automod : X</span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="nozoid/auto/X/0">0</option>
|
||||
<option value="nozoid/auto/X/1 Out">1 Out</option>
|
||||
<option value="nozoid/auto/X/2 Out">2 Out</option>
|
||||
<option value="nozoid/auto/X/3 Out">3 Out</option>
|
||||
<option value="nozoid/auto/X/OutR">OutR</option>
|
||||
<option value="nozoid/auto/X/OutL">OutL</option>
|
||||
</select>
|
||||
<span class="lasertext">Y</span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="nozoid/auto/Y/0">0</option>
|
||||
<option value="nozoid/auto/Y/1 Out">1 Out</option>
|
||||
<option value="nozoid/auto/Y/2 Out">2 Out</option>
|
||||
<option value="nozoid/auto/Y/3 Out">3 Out</option>
|
||||
<option value="nozoid/auto/Y/OutR">OutR</option>
|
||||
<option value="nozoid/auto/Y/OutL">OutL</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Nozoid speed UP and Down -->
|
||||
<div>
|
||||
<webaudio-switch id="nozoid/down 50" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/slower.png"></webaudio-switch>
|
||||
<webaudio-switch id="nozoid/up 50" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/faster.png"></webaudio-switch>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Selection buttons grid
|
||||
<div id="cnvbuttons" class="cnvbuttons">
|
||||
<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><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><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/iconljay2.png" alt=" " class="icongrid" /></div>
|
||||
<div><img src="knobs/iconljay2.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>
|
||||
<div><button id ="noteon 27" onclick ="buttonClicked(this.id)" class="button">PL 3</button></div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -589,64 +964,64 @@
|
|||
<div>
|
||||
<span class="lasertext" >XCURVE LineIN</span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="x/IN 0">STOP</option>
|
||||
<option value="x/IN 1">VCO1</option>
|
||||
<option value="x/IN 2">VCO2</option>
|
||||
<option value="x/IN 3">LFO1</option>
|
||||
<option value="x/IN 4">LFO2</option>
|
||||
<option value="x/IN 5">LFO3</option>
|
||||
<option value="x/IN 6">CV/GEN</option>
|
||||
<option value="x/IN 7">ADSR</option>
|
||||
<option value="x/IN 8">LIGHT</option>
|
||||
<option value="x/IN 9">LINE IN</option>
|
||||
<option value="x/IN 10">MIDI</option>
|
||||
<option value="x/IN 11">CV1</option>
|
||||
<option value="x/IN 12">CV2</option>
|
||||
<option value="x/IN 13">CV3</option>
|
||||
<option value="x/IN 17">1 Out</option>
|
||||
<option value="x/IN 18">2 Out</option>
|
||||
<option value="x/IN 20">VCF</option>
|
||||
<option value="x/IN 21">MIX</option>
|
||||
<option value="x/IN 22">VCA</option>
|
||||
<option value="nozoid/X/IN 0">STOP</option>
|
||||
<option value="nozoid/X/IN 1">VCO1</option>
|
||||
<option value="nozoid/X/IN 2">VCO2</option>
|
||||
<option value="nozoid/X/IN 3">LFO1</option>
|
||||
<option value="nozoid/X/IN 4">LFO2</option>
|
||||
<option value="nozoid/X/IN 5">LFO3</option>
|
||||
<option value="nozoid/X/IN 6">CV/GEN</option>
|
||||
<option value="nozoid/X/IN 7">ADSR</option>
|
||||
<option value="nozoid/X/IN 8">LIGHT</option>
|
||||
<option value="nozoid/X/IN 9">LINE IN</option>
|
||||
<option value="nozoid/X/IN 10">MIDI</option>
|
||||
<option value="nozoid/X/IN 11">CV1</option>
|
||||
<option value="nozoid/X/IN 12">CV2</option>
|
||||
<option value="nozoid/X/IN 13">CV3</option>
|
||||
<option value="nozoid/X/IN 17">1 Out</option>
|
||||
<option value="nozoid/X/IN 18">2 Out</option>
|
||||
<option value="nozoid/X/IN 20">VCF</option>
|
||||
<option value="nozoid/X/IN 21">MIX</option>
|
||||
<option value="nozoid/X/IN 22">VCA</option>
|
||||
</select>
|
||||
|
||||
|
||||
<span class="lasertext" >XCURVE</span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="x/IN 0">Stop</option>
|
||||
<option value="x/IN 1">OSC1</option>
|
||||
<option value="x/IN 2">OSC2</option>
|
||||
<option value="x/IN 3">OSC3</option>
|
||||
<option value="x/IN 4">LFO1</option>
|
||||
<option value="x/IN 5">LFO2</option>
|
||||
<option value="x/IN 6">LFO3</option>
|
||||
<option value="x/IN 7">ADSR</option>
|
||||
<option value="x/IN 8">CV</option>
|
||||
<option value="x/IN 9">Line IN</option>
|
||||
<option value="x/IN 10">Jstck</option>
|
||||
<option value="x/IN 11">INL</option>
|
||||
<option value="x/IN 12">INR</option>
|
||||
<option value="nozoid/X/IN 0">Stop</option>
|
||||
<option value="nozoid/X/IN 1">OSC1</option>
|
||||
<option value="nozoid/X/IN 2">OSC2</option>
|
||||
<option value="nozoid/X/IN 3">OSC3</option>
|
||||
<option value="nozoid/X/IN 4">LFO1</option>
|
||||
<option value="nozoid/X/IN 5">LFO2</option>
|
||||
<option value="nozoid/X/IN 6">LFO3</option>
|
||||
<option value="nozoid/X/IN 7">ADSR</option>
|
||||
<option value="nozoid/X/IN 8">CV</option>
|
||||
<option value="nozoid/X/IN 9">Line IN</option>
|
||||
<option value="nozoid/X/IN 10">Jstck</option>
|
||||
<option value="nozoid/X/IN 11">INL</option>
|
||||
<option value="nozoid/X/IN 12">INR</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="lasertext" >Automodulation X ? </span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="auto/X/0">0</option>
|
||||
<option value="auto/X/1 Out">1 Out</option>
|
||||
<option value="auto/X/2 Out">2 Out</option>
|
||||
<option value="auto/X/3 Out">3 Out</option>
|
||||
<option value="auto/X/OutR">OutR</option>
|
||||
<option value="auto/X/OutL">OutL</option>
|
||||
<option value="nozoid/auto/X/0">0</option>
|
||||
<option value="nozoid/auto/X/1 Out">1 Out</option>
|
||||
<option value="nozoid/auto/X/2 Out">2 Out</option>
|
||||
<option value="nozoid/auto/X/3 Out">3 Out</option>
|
||||
<option value="nozoid/auto/X/OutR">OutR</option>
|
||||
<option value="nozoid/auto/X/OutL">OutL</option>
|
||||
</select>
|
||||
<span class="lasertext">Automodulation Y ? </span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="auto/Y/0">0</option>
|
||||
<option value="auto/Y/1 Out">1 Out</option>
|
||||
<option value="auto/Y/2 Out">2 Out</option>
|
||||
<option value="auto/Y/3 Out">3 Out</option>
|
||||
<option value="auto/Y/OutR">OutR</option>
|
||||
<option value="auto/Y/OutL">OutL</option>
|
||||
<option value="nozoid/auto/Y/0">0</option>
|
||||
<option value="nozoid/auto/Y/1 Out">1 Out</option>
|
||||
<option value="nozoid/auto/Y/2 Out">2 Out</option>
|
||||
<option value="nozoid/auto/Y/3 Out">3 Out</option>
|
||||
<option value="nozoid/auto/Y/OutR">OutR</option>
|
||||
<option value="nozoid/auto/Y/OutL">OutL</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -707,13 +1082,13 @@
|
|||
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);
|
||||
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);
|
||||
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++) {
|
||||
|
|
@ -722,7 +1097,7 @@
|
|||
function Dump(e) {
|
||||
var str="";
|
||||
str=e.type + " : " + e.target.id + " : " + e.target.value + " ";
|
||||
//console.log(str);
|
||||
console.log(str);
|
||||
log.unshift(str);
|
||||
log.length=1;
|
||||
str="";
|
||||
|
|
@ -734,27 +1109,52 @@
|
|||
evview.innerHTML=str;
|
||||
//console.log( e.type + "/" + e.target.id + "/" + e.target.value);
|
||||
|
||||
if (e.target.id === "noteon" && e.type ==="input")
|
||||
console.log("only noteon change are sent not input");
|
||||
if (e.target.id === "align" && e.type === "change") {
|
||||
showAlign();
|
||||
}
|
||||
if (e.target.id === "simu" && e.type === "change") {
|
||||
showCanvas();
|
||||
}
|
||||
if (e.target.id === "live" && e.type === "change") {
|
||||
showLive();
|
||||
}
|
||||
if (e.target.id === "nozoid" && e.type === "change") {
|
||||
showNozoid();
|
||||
}
|
||||
if (e.target.id === "planet" && e.type === "change") {
|
||||
showPlanet();
|
||||
}
|
||||
if (e.target.id === "run" && e.type === "change") {
|
||||
showRun();
|
||||
}
|
||||
if (e.target.id === "on" && e.type === "change") {
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
else
|
||||
_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")
|
||||
}
|
||||
// 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")
|
||||
}
|
||||
// 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")
|
||||
}
|
||||
if (e.target.id === "nozoid/down 50" && e.type === "input") {
|
||||
e.target.value = 1 ;
|
||||
}
|
||||
|
||||
if (e.target.id === "noteon" && e.type ==="input")
|
||||
console.log("only noteon change are sent not input");
|
||||
else
|
||||
_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")
|
||||
}
|
||||
// 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")
|
||||
}
|
||||
// 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")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -783,7 +1183,8 @@
|
|||
return { x: evt.clientX - rect.left, y: evt.clientY - rect.top };
|
||||
}
|
||||
|
||||
function MouseDown(evt)
|
||||
|
||||
function MouseDown(evt)
|
||||
{
|
||||
mousePosDown = getMousePos(aligncanvas, evt);
|
||||
mouseMsgDown = mousePosDown.x + ' ' + mousePosDown.y;
|
||||
|
|
|
|||
BIN
webui/knobs/align.png
Normal file
BIN
webui/knobs/align.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 5.7 KiB |
BIN
webui/knobs/faster.png
Normal file
BIN
webui/knobs/faster.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 3.1 KiB |
BIN
webui/knobs/live.png
Normal file
BIN
webui/knobs/live.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8 KiB After Width: | Height: | Size: 7.3 KiB |
BIN
webui/knobs/mmo3.png
Normal file
BIN
webui/knobs/mmo3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 5 KiB |
BIN
webui/knobs/nozoid.png
Normal file
BIN
webui/knobs/nozoid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
webui/knobs/nozoids.png
Normal file
BIN
webui/knobs/nozoids.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
webui/knobs/ocs2.png
Normal file
BIN
webui/knobs/ocs2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
webui/knobs/planet.png
Normal file
BIN
webui/knobs/planet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
webui/knobs/power.png
Normal file
BIN
webui/knobs/power.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
webui/knobs/run.png
Normal file
BIN
webui/knobs/run.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
webui/knobs/simu.png
Normal file
BIN
webui/knobs/simu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
webui/knobs/slower.png
Normal file
BIN
webui/knobs/slower.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Loading…
Add table
Add a link
Reference in a new issue