507 lines
20 KiB
HTML
507 lines
20 KiB
HTML
<!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;
|
|
}
|
|
.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">
|
|
|
|
<!-- 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="text">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="text">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="text">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="text">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="text">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="text">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="text">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="text">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="text">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="text">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="text">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="text">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="text">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="text">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="text">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="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="mmo3/cc/17" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div>
|
|
<div></div>
|
|
<div id="text">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="text">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="text">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="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="mmo3/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="mmo3/cc/22" diameter="70" min="0" max="127" value="64"></webaudio-knob> </div>
|
|
<div></div>
|
|
<div id="text">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="text">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="text">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="text">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="text">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="text">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="text">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="text">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>
|
|
|
|
|
|
<!-- 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;">
|
|
<a href="ocs2.html">OCS-2</a>
|
|
<span id="players"></span>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|