Early working version
This commit is contained in:
leduc
parent
50376aa518
commit
7aef822563
39 changed files with 9836 additions and 75 deletions
313
www/index.html
Normal file
313
www/index.html
Normal file
|
|
@ -0,0 +1,313 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Nerves</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="apple-mobile-web-app-title" content="Nerves">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina-mmo3.png">
|
||||
|
||||
<!-- 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="css/newstyle.css" />
|
||||
<link rel="stylesheet" type="text/css" href="selector.min.css">
|
||||
<script type="application/javascript" src="selector.min.js"></script>
|
||||
<script type="application/javascript" src="config.js"></script>
|
||||
</head>
|
||||
|
||||
<body style="background-color: #000000;background-image: linear-gradient(174deg, #101010,#030303);">
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
Screen Rack
|
||||
-->
|
||||
<div class="content">
|
||||
<div class="TopRackGrid">
|
||||
<div>
|
||||
<h2>
|
||||
Nerves
|
||||
</h2>
|
||||
<webaudio-switch id="on" value="1" tooltip="Switch-B" height="35" width="85" src="knobs/power.png">
|
||||
</webaudio-switch>
|
||||
</div>
|
||||
<div class="webaudiobut" style="background: #111;">
|
||||
<div id="status" class="busled" align="center">
|
||||
Nerves
|
||||
</div>
|
||||
<div id="players" class="busled" align="center">
|
||||
0 Connected
|
||||
</div>
|
||||
</div>
|
||||
<div align ="center" class="encoders">
|
||||
<webaudio-switch class="webaudiobut" id="func" value="0" height="68" width="68" tooltip=" Switch-B" src="knobs/funcs.png" type="toggle"></webaudio-switch>
|
||||
</div>
|
||||
<div>
|
||||
<webaudio-switch class="webaudiobut" id="down" value="0" height="68" width="68" tooltip=" Switch-B" src="knobs/down2.png" type="toggle"></webaudio-switch>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
|
||||
<!--
|
||||
JS
|
||||
-->
|
||||
|
||||
<!-- LJ style WS : A nettoyer ! -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
|
||||
var LJ = websocket_uri
|
||||
|
||||
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 to "+LJ;
|
||||
},
|
||||
|
||||
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="Nerves";
|
||||
break;
|
||||
case "/playe":
|
||||
//divtext.innerHTML="OCS-2 ("+res[1]+" player(s))";
|
||||
//divtextp.innerHTML=" ("+res[1]+" player(s))";
|
||||
divtext.innerHTML="Nerves ";
|
||||
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 === "on" && e.type === "change") {
|
||||
window.location.reload();
|
||||
}
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue