Addingm manual Event fireing, Universe as event property, and event when loading track

This commit is contained in:
2017-06-21 23:19:08 +02:00
parent 218834c175
commit 7a67a0e436
5 changed files with 153 additions and 16 deletions

View File

@ -14,6 +14,7 @@
<div>
<button onclick="stopSequence()">Stop</button>
<button onclick="startSequence()" id="playbutton">Play</button>
<button onclick="pauseSequence()" id="pausebutton" style="display:none;">Pause</button>
<label >Loaded: </label>
<label id="loaded"></label>
<label >File playing: </label>
@ -35,6 +36,12 @@
<center><h2 id="trackname"></h1></center>
<center><h2 id="trackfile"></h2></center>
<button onclick="loadSequence()">Load</button>
<form onsubmit="f()">
<input type="text" id="universe" placeholder="universe"></input>
<input type="text" id="channel" placeholder="channel"></input>
<input type="text" id="value" placeholder="value"></input>
<button onclick="saveLoad()">speichern</button>
</form>
<div>
<canvas id="canvas" height="50">
</canvas>
@ -47,6 +54,7 @@
<input type="text" id="em" placeholder="minute"/>
<input type="text" id="es" placeholder="second"/>
<input type="text" id="ef" placeholder="frame"/>
<input type="text" id="eu" placeholder="universe"/>
<input type="text" id="esu" placeholder="channel"/>
<input type="text" id="eval" placeholder="value"/>
<button onclick="saveEvent()">Speichern</button>
@ -98,6 +106,11 @@
$("#fplay").html(data.filePlaying);
if(data.playing){
$("#playbutton").css("color", "greenyellow");
if(data.paused) {
$("#pausebutton").css("display", "none");
} else {
$("#pausebutton").css("display", "inline-block");
}
} else {
$("#playbutton").css("color", "white");
}
@ -138,9 +151,14 @@
$("#trdv").css("display","none");
return;
}
if(selected.load){
$("#universe").val(selected.load.universe);
$("#channel").val(selected.load.subnet);
$("#value").val(selected.load.value);
}
$("#trackname").html(selected.displayName);
$("#trackfile").html(selected.file !==undefined ? selected.file : "");
var t = "<tr><th>ID</th><th>Stunde</th><th>Minute</th><th>Sekunde</th><th>Frame</th><th>ArtNet-Kanal</th><th>Art-Net Value</th><th>Copy</th><th>Edit</th><th>Del</th></tr>";
var t = "<tr><th>ID</th><th>Stunde</th><th>Minute</th><th>Sekunde</th><th>Frame</th><th>Universe</th><th>ArtNet-Kanal</th><th>Art-Net Value</th><th>Run</th><th>Copy</th><th>Edit</th><th>Del</th></tr>";
var sorted = selected.triggers.sort((a, b)=>{
if(a.time.lmilliseconds < b.time.lmilliseconds) return -1;
if(a.time.lmilliseconds > b.time.lmilliseconds) return 1;
@ -153,8 +171,10 @@
t += "<td>" + e.time.lminutes + "</td>"
t += "<td>" + e.time.lseconds + "</td>"
t += "<td>" + e.time.lframe + "</td>"
t += "<td>" + e.art.universe + "</td>"
t += "<td>" + e.art.subnet + "</td>"
t += "<td>" + e.art.value + "</td>"
t += "<td><button onclick='fire(\"" + e.id + "\")'><i class='fa fa-play' aria-hidden='true'></i></button></td>"
t += "<td><button onclick='copy(\"" + e.id + "\")'><i class='fa fa-clone' aria-hidden='true'></i></button></td>"
t += "<td><button onclick='edit(\"" + e.id + "\")'><i class='fa fa-pencil-square-o' aria-hidden='true'></i></button></td>"
t += "<td><button onclick='remove(\"" + e.id + "\")'><i class='fa fa-trash-o' aria-hidden='true'></i></button></td>"
@ -177,6 +197,7 @@
$("#em").val(el.time.lminutes);
$("#es").val(el.time.lseconds);
$("#ef").val(el.time.lframe);
$("#eu").val(el.art.universe);
$("#esu").val(el.art.subnet);
$("#eval").val(el.art.value);
}
@ -194,6 +215,7 @@
$("#em").val(el.time.lminutes);
$("#es").val(el.time.lseconds);
$("#ef").val(el.time.lframe);
$("#eu").val(el.art.universe);
$("#esu").val(el.art.subnet);
$("#eval").val(el.art.value);
}
@ -201,7 +223,13 @@
function remove(id) {
socket.emit("delete", {track:selected.id, id:id})
console.log("remove with id", id)
//throw new Error("not implemented");
}
function fire(id){
if(!selected) return;
selected.triggers.forEach(e=>{
if(e.id == id) socket.emit("fire", e.art);
});
}
function saveEvent() {
@ -214,6 +242,7 @@
el.time.seconds = $("#es").val();
el.time.frame = $("#ef").val();
el.art = {};
el.art.universe = $("#eu").val();
el.art.subnet = $("#esu").val();
el.art.value = $("#eval").val();
socket.emit("set", el);
@ -222,6 +251,7 @@
$("#em").val("");
$("#es").val("");
$("#ef").val("");
$("#eu").val("");
$("#esu").val("");
$("#eval").val("");
}
@ -238,6 +268,10 @@
socket.emit("stop");
}
function pauseSequence(){
socket.emit("pause");
}
$(document).keyup(function(e) {
if (e.keyCode === 27) {
$("#eid").val("");
@ -245,10 +279,22 @@
$("#em").val("");
$("#es").val("");
$("#ef").val("");
$("#eu").val("");
$("#esu").val("");
$("#eval").val("");
} // esc
}
});
function saveLoad(){
var data = {};
data.id = selected.id;
data.art = {};
data.art.universe = $("#universe").val();
data.art.subnet = $("#channel").val();
data.art.value = $("#value").val();
console.log(data);
socket.emit("event", data);
}
</script>
</body>
</html>