<!DOCTYPE html> <html> <head> <title>OCS-2</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; } .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="text"> <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"> <!-- VCO 1 vertical Grid --> <div class="encodersGrid"> <div id="title"> VCO 1 </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/0" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">FQ -0</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/1" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">WF -1</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/2" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">Mod 1 -2</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/3" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">Mod 2 -3</div> </div> </div> <!-- VCO 2 vertical Grid --> <div class="encodersGrid"> <div id="title"> VCO 2 </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/5" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">FQ -5</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/6" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">WF -6</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/7" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">Mod 1 -7</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/8" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">Mod 2 -8</div> </div> </div> <!-- VCF vertical Grid --> <div class="encodersGrid"> <div id="title"> VCF </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/9" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">FQ -9</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/10" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">Q -10</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/11" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">Mod 1 -11</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/12" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">Mod 2 -12</div> </div> </div> <!-- LFO 1 vertical Grid --> <div class="encodersGrid"> <div id="title"> LFO 1 </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/13" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">FQ -13</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/14" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">WF -14</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/15" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">SYM -15</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/16" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">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="ocs2/cc/17" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">FQ -17</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/18" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">WF -18</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/19" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">SYM -19</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/20" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">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="ocs2/cc/21" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">FQ -21</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/22" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">MOD -22</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/23" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">WET EFFECT -23</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/24" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">SUSTAIN -24</div> </div> </div> <!-- CV GEN vertical Grid --> <div class="encodersGrid"> <div id="title"> CV GEN </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/25" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">PARAM 1 -25</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/26" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">PARAM 2 -26</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/27" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">MOD EFFECT -27</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/28" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">RELEASE -28</div> </div> </div> <!-- VCA vertical Grid --> <div class="encodersGrid"> <div id="title"> VCA </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/29" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">MIX 1/2 -29</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/30" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">MOD -30</div> </div> <div class="encoders"> <div><webaudio-knob id="ocs2/cc/31" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div> <div></div> <div id="text">VOL -31</div> </div> <div class="encoders"> <webaudio-switch id="ocs2/reset" value="1" height="70" width="70" tooltip="Switch-B" src="knobs/rebuild.png" type="toggle"></webaudio-switch> </div> </div> </div> </div> </div> </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="OCS-2"; break; case "/playe": divtext.innerHTML="OCS-2 ("+res[1]+" player(s))"; divtextp.innerHTML=" ("+res[1]+" player(s))"; 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); 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('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'); 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); //socket.emit('message', '/' + e.target.id + ' ' + e.target.value); _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> <div id="title" align ="center" style="font-family: 'Lucida Grande', Verdana, Arial, sans-serif; text-align: center;color: #ddd;font-size: 2ex;"> <a href="mmo3.html">MMO-3</a> <span id="players"></span> </div> </body> </html>