<!DOCTYPE html> <html> <head> <title>MMO-3</title> <meta charset="utf-8" /> <style> .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 0.8fr 47px 0.7fr 2.8fr; grid-template-areas: ". . ." ". . ." ". . ." ". . ."; } .buttons-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; grid-template-areas: ". . ." ". . ." ". . ." ". . ."; } #title{ font-family: "Lucida Grande", Verdana, Arial, sans-serif; text-align: center; color: #ddd; font-size: 4ex; } #text{ font-family: "Lucida Grande", Verdana, Arial, sans-serif; text-align: center; color: #ccc; font-size: 2ex; } #smalltext{ font-family: "Lucida Grande", Verdana, Arial, sans-serif; text-align: center; color: #ccc; font-size: 1.6ex; } .encoders{ margin: 0 auto; } .mainGrid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; gap: 1px 1px; grid-template-areas: ". . . . . . . ."; } .encodersGrid { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; gap: 1px 1px; grid-template-areas: "." "." "." "." "."; } a:link { color: white; } a:visited { color: gray; } a:visited { color: gray; } </style> <!-- Web audio buttons defaults --> <script type="application/javascript" src="webcomponents-lite.js"></script> <script> WebAudioControlsOptions={ useMidi:1, knobSrc:"knobs/simplegray.png", knobSprites:100, switchSrc:"knobs/switch_toggle.png", sliderSrc:"knobs/vsliderbody.png", sliderKnobsrc:"knobs/vsliderknob.png", } </script> <script src="webaudio-controls.js"></script> <!-- link rel="stylesheet" href="LJgrid.css" / --> <link rel="stylesheet" type="text/css" href="selector.min.css"> <script type="application/javascript" src="selector.min.js"></script> </head> <body style="background-color:#000;"> <!-- Top Line --> <div id="status" style="font-family: 'Lucida Grande', Verdana, Arial, sans-serif; text-align: center;color: #ddd;font-size: 3ex;">not available </div> <!-- Buttons Line <div></div> <div class="buttons-container" id="smalltext"> <div> <webaudio-switch id="select" value="1" height="35" width="100" tooltip="Switch-B" src="knobs/select.png" type="toggle" onclick="socket.emit('message', '/select');"></webaudio-switch> </div> <div> <webaudio-switch id="rate" value="1" height="35" width="100" tooltip="Switch-B" src="knobs/rate.png" type="toggle" onclick="socket.emit('message', '/rate');"></webaudio-switch> </div> <div> <webaudio-switch id="steps" value="1" height="35" width="100" tooltip="Switch-B" src="knobs/steps.png" type="toggle" onclick="socket.emit('message', '/steps');"></webaudio-switch> </div> </div> <div></div> --> <!-- OCS 2 encoders 1 x 8 horizontal grid --> <div class="mainGrid"> <!-- OSC 1 vertical Grid --> <div class="encodersGrid"> <div id="title"> OSC 1 </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/0" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">FQ -0</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/1" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">Mod 1 -1</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/2" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">Mod 2 -2</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/3" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">Mod 3 -3</div> </div> </div> <!-- OSC 2 vertical Grid --> <div class="encodersGrid"> <div id="title"> OCS 2 </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/5" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">FQ -5</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/6" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">Mod 1 -6</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/7" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">Mod 2 -7</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/8" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">Mod 3 -8</div> </div> </div> <!-- OSC 3 vertical Grid --> <div class="encodersGrid"> <div id="title"> OSC 3 </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/9" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">FQ -9</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/10" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">Mod 1 -10</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/11" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">Mod 2 -11</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/12" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">Mod 3 -12</div> </div> </div> <!-- LFO 1 vertical Grid --> <div class="encodersGrid"> <div id="title"> LFO 1 </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/13" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">FQ -13</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/14" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">WF -14</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/15" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">SYM -15</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/16" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">ATTACK -16</div> </div> </div> <!-- LFO 2 vertical Grid --> <div class="encodersGrid"> <div id="title"> LFO 2 </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/17" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">FQ 1 -17</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/18" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">FQ 2 -18</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/19" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">MOD -19</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/20" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">DECAY -20</div> </div> </div> <!-- LFO 3 vertical Grid --> <div class="encodersGrid"> <div id="title"> LFO 3 </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/21" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">FQ -21</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/22" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">Param 1 -22</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/23" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">Param 2 -23</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/24" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">SUSTAIN -24</div> </div> </div> <!-- MIX vertical Grid --> <div class="encodersGrid"> <div id="title"> MIX </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/25" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">OSC 1 -25</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/26" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">OSC 2 -26</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/27" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">OSC 3 -27</div> </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/28" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">RELEASE -28</div> </div> </div> <!-- AUDIO vertical Grid --> <div class="encodersGrid"> <div id="title"> AUDIO </div> <div class="encoders"> <div><webaudio-knob id="mmo3/cc/29" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="smalltext">VOL -29</div> </div> <div> </div> <div> </div> <div class="encoders"> <webaudio-switch id="mmo3/reset" value="1" height="70" width="70" tooltip="Switch-B" src="knobs/rebuild.png" type="toggle"></webaudio-switch> </div> </div> </div> </div> </div> </div> <div align ="center" class="encoders"> <webaudio-switch id="store" value="1" height="45" width="45" tooltip="Switch-B" src="knobs/save.png" type="toggle"></webaudio-switch> <webaudio-switch id="load" value="1" height="45" width="45" tooltip="Switch-B" src="knobs/load.png" type="toggle"></webaudio-switch> </div> <div id="title" align ="center" style="font-family: 'Lucida Grande', Verdana, Arial, sans-serif; text-align: center;color: #ddd;font-size: 2ex;"> <a href="ocs2.html">OCS-2</a> <span id="players"></span> </div> <!-- LJ style WS : A nettoyer ! --> <script type="text/javascript"> var LJ = 'ws://xrkia.org:8081/' <!-- var LJ = 'ws://laser.teamlaser.fr:8081/' --> <!-- var LJ = 'ws://127.0.0.1:8081/' --> var _WS = { uri: LJ, ws: null, init : function (e) { _WS.s = new WebSocket(_WS.uri); _WS.s.onopen = function (e) { _WS.onOpen(e); }; _WS.s.onclose = function (e) { _WS.onClose(e); }; _WS.s.onmessage = function (e) { _WS.onMessage(e); }; _WS.s.onerror = function (e) { _WS.onError(e); }; }, onOpen: function () { var divtext = document.getElementById('status'); divtext.innerHTML=""; divtext.innerHTML= "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)) //console.log(res) //console.log(res[0].slice(1)) var divtext = document.getElementById('status'); var divtextp = document.getElementById('players'); switch (res[0].substring(0,6)) { case "/statu": divtext.innerHTML="MMO-3"; break; case "/playe": //divtext.innerHTML="OCS-2 ("+res[1]+" player(s))"; //divtextp.innerHTML=" ("+res[1]+" player(s))"; divtext.innerHTML="MMO-3 "+res[1]; divtextp.innerHTML=" "+res[1]; //console.log(res) break; case "/simul": pl = e.data.slice(7); //console.log(pl) pl2 = eval(pl.replace(/[()]/g, '')); break; case "/plpoi": //console.log("plpoint"); break; default: //console.log(e); //console.log(res[0].slice(1)) //console.log(document.getElementById(res[0].slice(1))); //console.log(res[0].slice(1)+" "+res[1]) //let documentX = document.getElementById(res[0].slice(1)); //documentX.value=res[1]; //document.getElementById(res[0].slice(1)).value = res[1]; document.getElementById(res[0].slice(1)).setAttribute('value',res[1]); //document.getElementById(res[0].slice(1)).setValue(res[1],true); document.getElementById(res[0].slice(1)).setValue(res[1],false); //console.log(documentX.value) //console.log(document.getElementById(res[0].slice(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('status'); divtext.innerHTML=""; divtext.innerHTML= message.toString(); }, showout: function (message) { var divtext = document.getElementById('status'); divtext.innerHTML=""; divtext.innerHTML= message.toString(); }, showstatus: function (message) { var divtext = document.getElementById('status'); divtext.innerHTML=""; divtext.innerHTML= message.toString(); }, 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> <!-- web audio encoders scripts --> <script type="text/javascript"> var message=""; var log=[]; var knobs = document.getElementsByTagName('webaudio-knob'); var knobState = [] for(var i = 0; i < knobs.length; i++){ knobs[i].addEventListener("input",Dump,false); knobs[i].addEventListener("change",Dump,false); } var sliders = document.getElementsByTagName('webaudio-slider'); for(var i = 0; i < sliders.length; i++){ sliders[i].addEventListener("input",Dump,false); sliders[i].addEventListener("change",Dump,false); } var switches = document.getElementsByTagName('webaudio-switch'); for(var i = 0; i < switches.length; i++) { switches[i].addEventListener("change",Dump,false); } function 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; //console.log( e.type + "/" + e.target.id + "/" + e.target.value); //console.log('/' + e.target.id + ' ' + e.target.value + ' ' + e.type); //socket.emit('message', '/' + e.target.id + ' ' + e.target.value); if (e.target.id === "load" || e.target.id === "store") { if (e.type === "change") { if (e.target.id === "store") { //var knobState = [] //var knobs = document.getElementsByTagName('webaudio-knob'); for (var i = 0; i < knobs.length; i++) { var knob = knobs[i] ; //console.log(knob) ; knobState[i] = knob.getAttribute('id')+" "+knob.getAttribute('value') ; localStorage.setItem(knob.getAttribute('id'),knob.getAttribute('value')) ; } //console.log(knobState) ; console.log('store clique') ; } if (e.target.id === "load") { if (knobState.length > 0) { for (var i = 0; i < knobState.length; i++) { ccstate=knobState[i] ; _WS.send("/" + ccstate) ; } } else { for (var i = 0; i < knobs.length; i++) { var knob = knobs[i]; var value = localStorage.getItem(knob.getAttribute('id')); if ( value != null) { ccstate = knob.getAttribute('id')+" "+value; _WS.send("/" + ccstate) ; console.log(ccstate) ; } else console.log("no localstorage"); } } console.log('load clique') ; } } } else { _WS.send("/" + e.target.id + " " + e.target.value); if (e.target.id === "on" && e.type === "change") { window.location.reload(); } if (e.target.id === "rate" && e.type === "change") { e.target.value = 1 ; } if (e.target.id === "range" && e.type === "change") { e.target.value = 1 ; } if (e.target.id === "select" && e.type === "change") { e.target.value = 1 ; } } } </script> </body> </html>