jamidi/web/indexaurora.html
2020-04-21 15:06:01 +02:00

289 lines
9.4 KiB
HTML

<!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>