This commit is contained in:
sam 2020-05-02 02:38:06 +02:00
parent 98f039b2ee
commit 012bef55b1
11 changed files with 435 additions and 171 deletions

View file

@ -28,6 +28,12 @@
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;
}
@ -93,7 +99,7 @@
Buttons Line
<div></div>
<div class="buttons-container" id="text">
<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>
@ -119,22 +125,22 @@
<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 id="smalltext">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 id="smalltext">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 id="smalltext">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 id="smalltext">Mod 2 -3</div>
</div>
</div>
@ -147,22 +153,22 @@
<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 id="smalltext">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 id="smalltext">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 id="smalltext">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 id="smalltext">Mod 2 -8</div>
</div>
</div>
@ -175,22 +181,22 @@
<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 id="smalltext">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 id="smalltext">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 id="smalltext">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 id="smalltext">Mod 2 -12</div>
</div>
</div>
<!-- LFO 1 vertical Grid -->
@ -201,22 +207,22 @@
<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 id="smalltext">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 id="smalltext">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 id="smalltext">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 id="smalltext">ATTACK -16</div>
</div>
</div>
@ -228,22 +234,22 @@
<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 id="smalltext">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 id="smalltext">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 id="smalltext">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 id="smalltext">DECAY -20</div>
</div>
</div>
@ -255,22 +261,22 @@
<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 id="smalltext">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 id="smalltext">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 id="smalltext">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 id="smalltext">SUSTAIN -24</div>
</div>
</div>
@ -282,22 +288,22 @@
<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 id="smalltext">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 id="smalltext">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 id="smalltext">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 id="smalltext">RELEASE -28</div>
</div>
</div>
@ -309,17 +315,17 @@
<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 id="smalltext">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 id="smalltext">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 id="smalltext">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>
@ -334,14 +340,24 @@
</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="mmo3.html">MMO-3</a>
<span id="players"></span>
</div>
<!-- LJ style WS : A nettoyer ! -->
<script type="text/javascript">
<!-- var LJ = 'ws://xrkia.org:8081/' -->
var LJ = 'ws://xrkia.org:8081/'
<!-- var LJ = 'ws://laser.teamlaser.fr:8081/' -->
var LJ = 'ws://127.0.0.1:8081/'
<!-- var LJ = 'ws://127.0.0.1:8081/' -->
var _WS = {
uri: LJ,
ws: null,
@ -367,7 +383,7 @@
onMessage: function (e) {
var res = e.data.split(" ");
console.log(e.data)
//console.log(e.data)
//console.log(res[0].substring(0,6))
//console.log(res)
//console.log(res[0].slice(1))
@ -381,20 +397,27 @@
divtext.innerHTML="OCS-2";
break;
case "/playe":
divtext.innerHTML="OCS-2 ("+res[1]+" player(s))";
divtextp.innerHTML=" ("+res[1]+" player(s))";
//divtext.innerHTML="OCS-2 ("+res[1]+" player(s))";
//divtextp.innerHTML=" ("+res[1]+" player(s))";
divtext.innerHTML="OCS-2 "+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);
document.getElementById(res[0].slice(1)).value = res[1];
//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);
}
},
@ -436,7 +459,7 @@
}
};
window.addEventListener('load', _WS.init, false);
window.addEventListener('load', _WS.init, false);
</script>
@ -451,6 +474,7 @@
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);
@ -471,7 +495,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="";
@ -483,33 +507,72 @@
//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);
//console.log('/' + e.target.id + ' ' + e.target.value + ' ' + e.type);
//socket.emit('message', '/' + e.target.id + ' ' + e.target.value);
_WS.send("/" + 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') ;
}
}
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 ;
}
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>
<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>