<!DOCTYPE html> <html> <head> <title>Aurora</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;"> <div class="grid-container"> <!-- Title Line --> <div></div> <div> <h1 id="title">Aurora</h1> </div> <div id="status" style="font-family: 'Lucida Grande', Verdana, Arial, sans-serif; text-align: center;color: #ddd;font-size: 3ex;">not available </div> <!-- Encoders Line --> <div></div> <div class="buttons-container" id="text"> <div> <div><webaudio-knob id="mixer/value" diameter="70" min="0" max="127" value="64"></webaudio-knob></div> <div><webaudio-param link="mixer/value" value="0"></webaudio-param></div> <div>2 curves mixer</div> </div> <div> <div><webaudio-knob id="scaler/scale" diameter="70" min="0" max="127" value="64"></webaudio-knob></div> <div><webaudio-param link="scaler/scale" value="0"></webaudio-param></div> <div>Scale</div> </div> <div> <div><webaudio-knob id="duplicator/num" diameter="70" min="0" max="127" value="64"></webaudio-knob></div> <div><webaudio-param link="duplicator/num" value="0"></webaudio-param></div> <div>Copy</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="MMO-3"; break; case "/playe": divtext.innerHTML="MMO-3 ("+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("test "+res[0].slice(1)+" "+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('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/>"; } _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;"> <span id="players"></span> </div> </body> </html>