2017-06-19 18:22:21 +00:00
< html >
< head >
< script src = "./index.js" > < / script >
< script src = "./jquery-3.1.1.js" > < / script >
< script src = "./socket.io.slim.js" > < / script >
< title > Timecodes< / title >
< link rel = "stylesheet" href = "./design.css" >
< link rel = "stylesheet" href = "./css/font-awesome.min.css" >
< meta charset = "utf8" / >
< / head >
< body >
< center > < h1 > Timecode Abiball2017< / h1 > < / center >
< hr >
2017-06-20 09:15:17 +00:00
< div >
< button onclick = "stopSequence()" > Stop< / button >
2017-06-20 15:25:12 +00:00
< button onclick = "startSequence()" id = "playbutton" > Play< / button >
2017-06-21 21:19:08 +00:00
< button onclick = "pauseSequence()" id = "pausebutton" style = "display:none;" > Pause< / button >
2017-06-20 09:15:17 +00:00
< label > Loaded: < / label >
< label id = "loaded" > < / label >
2017-06-20 11:01:30 +00:00
< label > File playing: < / label >
< label id = "fplay" > < / label >
2017-06-20 09:15:17 +00:00
< / div >
< hr >
2017-06-19 18:22:21 +00:00
< div id = "track_select_div" >
< label for = "track_select" > Select Preset: < / label >
< select id = "track_select" > < / select >
< form style = "margin-top: 15px" onsubmit = "f()" >
< label > Neu: < / label >
< input type = "text" id = "ntn" placeholder = "Name" / >
< input type = "text" id = "ntf" placeholder = "(optional) filename" / >
< button onclick = "saveNewTrack()" > Speichern< / button >
< / from >
< hr >
< div id = "trdv" style = "display:none;" >
< center > < h2 id = "trackname" > < / h1 > < / center >
< center > < h2 id = "trackfile" > < / h2 > < / center >
2017-06-20 09:15:17 +00:00
< button onclick = "loadSequence()" > Load< / button >
2017-06-21 21:19:08 +00:00
< 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 >
2017-06-19 18:22:21 +00:00
< div >
< canvas id = "canvas" height = "50" >
< / canvas >
2017-06-20 09:15:17 +00:00
< label id = "actualtime" > < / label >
2017-06-19 18:22:21 +00:00
< / div >
< div >
< form onsubmit = "f()" >
< input type = "text" id = "eid" placeholder = "id (leer wenn neu)" / > < br / >
< input type = "text" id = "eh" placeholder = "hour" / >
< input type = "text" id = "em" placeholder = "minute" / >
< input type = "text" id = "es" placeholder = "second" / >
< input type = "text" id = "ef" placeholder = "frame" / >
2017-06-21 21:19:08 +00:00
< input type = "text" id = "eu" placeholder = "universe" / >
2017-06-20 12:53:08 +00:00
< input type = "text" id = "esu" placeholder = "channel" / >
2017-06-19 18:22:21 +00:00
< input type = "text" id = "eval" placeholder = "value" / >
< button onclick = "saveEvent()" > Speichern< / button >
< / form >
< table id = "events" class = "event_table" border = "1" >
< / table >
< / div >
< / div >
< / div >
< script >
function f(){
event.preventDefault();
return false;
}
2017-06-20 11:05:36 +00:00
var socket = io(":5001");
2017-06-19 18:22:21 +00:00
socket.emit("get");
var tracks = {};
var selected = undefined;
2017-06-20 09:15:17 +00:00
var timenow = undefined;
2017-06-19 18:22:21 +00:00
socket.on("get_data", (data)=>{
console.log("got data", data);
var opt = "< option value = '' > < / option > ";
2017-06-20 09:15:17 +00:00
for(var prop in data.tracks){
var e = data.tracks[prop];
2017-06-19 18:22:21 +00:00
opt += '< option value = "' + e.id + '" > ' + e.displayName + '< / option > ';
}
2017-06-20 09:15:17 +00:00
tracks = data.tracks;
2017-06-19 18:22:21 +00:00
if(selected){
2017-06-20 09:15:17 +00:00
selected = data.tracks[selected.id];
2017-06-19 18:22:21 +00:00
}
$("#track_select").html(opt);
2017-06-20 09:15:17 +00:00
if(data.loaded)
$("#loaded").html(data.loaded.displayName);
2017-06-19 18:22:21 +00:00
drawSelected();
});
function saveNewTrack(){
var d = {};
d.name = $("#ntn").val();
d.file = $("#ntf").val();
socket.emit("create", d);
}
socket.on("created", ()=>{
socket.emit("get");
});
socket.on("update", (data)=>{
2017-06-20 15:25:12 +00:00
$("#fplay").html(data.filePlaying);
if(data.playing){
$("#playbutton").css("color", "greenyellow");
2017-06-21 21:19:08 +00:00
if(data.paused) {
$("#pausebutton").css("display", "none");
} else {
$("#pausebutton").css("display", "inline-block");
}
2017-06-20 15:25:12 +00:00
} else {
$("#playbutton").css("color", "white");
}
2017-06-20 09:15:17 +00:00
if(!selected) return;
if(selected.id !== data.track) return; //Nur wenn abgespielter track ausgewählt
timenow = data.time.lmilliseconds;
$("#actualtime").html(data.time.lhours + ":" + data.time.lminutes + ":" + data.time.lseconds + ":" + data.time.lframe);
2017-06-19 18:22:21 +00:00
});
$("#track_select").on("change", function () {
if(this.value === ""){
selected = undefined;
return;
}
selected = tracks[this.value];
drawSelected();
});
function drawCanvas(){
if(!selected || !timenow) return;
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;
return 0;
});
var maxval = 0;
var m = sorted[sorted.length -1];
if(m.lmilliseconds > timenow) maxval = m.lmilliseconds;
else maxval = timenow;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
}
function drawSelected(){
if(selected == undefined) {
$("#trdv").css("display","none");
return;
}
2017-06-21 21:19:08 +00:00
if(selected.load){
$("#universe").val(selected.load.universe);
$("#channel").val(selected.load.subnet);
$("#value").val(selected.load.value);
}
2017-06-19 18:22:21 +00:00
$("#trackname").html(selected.displayName);
$("#trackfile").html(selected.file !==undefined ? selected.file : "");
2017-06-21 21:19:08 +00:00
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 > ";
2017-06-19 18:22:21 +00:00
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;
return 0;
});
sorted.forEach(e=>{
t += "< tr > ";
t += "< td > " + e.id + "< / td > "
t += "< td > " + e.time.lhours + "< / td > "
t += "< td > " + e.time.lminutes + "< / td > "
t += "< td > " + e.time.lseconds + "< / td > "
t += "< td > " + e.time.lframe + "< / td > "
2017-06-21 21:19:08 +00:00
t += "< td > " + e.art.universe + "< / td > "
2017-06-19 18:22:21 +00:00
t += "< td > " + e.art.subnet + "< / td > "
t += "< td > " + e.art.value + "< / td > "
2017-06-21 21:19:08 +00:00
t += "< td > < button onclick = 'fire(\"" + e.id + "\")' > < i class = 'fa fa-play' aria-hidden = 'true' > < / i > < / button > < / td > "
2017-06-20 15:50:09 +00:00
t += "< td > < button onclick = 'copy(\"" + e.id + "\")' > < i class = 'fa fa-clone' aria-hidden = 'true' > < / i > < / button > < / td > "
2017-06-19 18:22:21 +00:00
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 > "
t += "< / tr > ";
});
$("#events").html(t);
$("#trdv").css("display","block");
}
function edit(id) {
console.log("edit with id", id)
var el = undefined;
selected.triggers.forEach(e=>{
if(e.id === id){
el = e;
}
})
$("#eid").val(el.id);
$("#eh").val(el.time.lhours);
$("#em").val(el.time.lminutes);
$("#es").val(el.time.lseconds);
$("#ef").val(el.time.lframe);
2017-06-21 21:19:08 +00:00
$("#eu").val(el.art.universe);
2017-06-19 18:22:21 +00:00
$("#esu").val(el.art.subnet);
$("#eval").val(el.art.value);
}
2017-06-20 15:50:09 +00:00
function copy(id) {
console.log("edit with id", id)
var el = undefined;
selected.triggers.forEach(e=>{
if(e.id === id){
el = e;
}
})
$("#eh").val(el.time.lhours);
$("#eh").focus();
$("#em").val(el.time.lminutes);
$("#es").val(el.time.lseconds);
$("#ef").val(el.time.lframe);
2017-06-21 21:19:08 +00:00
$("#eu").val(el.art.universe);
2017-06-20 15:50:09 +00:00
$("#esu").val(el.art.subnet);
$("#eval").val(el.art.value);
}
2017-06-19 18:22:21 +00:00
function remove(id) {
socket.emit("delete", {track:selected.id, id:id})
console.log("remove with id", id)
2017-06-21 21:19:08 +00:00
}
function fire(id){
if(!selected) return;
selected.triggers.forEach(e=>{
2017-06-22 13:53:00 +00:00
console.log(e);
if(e.id == id) socket.emit("fire", e.art);
2017-06-21 21:19:08 +00:00
});
2017-06-19 18:22:21 +00:00
}
function saveEvent() {
var el = {};
el.track = selected.id;
el.id = $("#eid").val();
el.time = {};
el.time.hours = $("#eh").val();
el.time.minutes = $("#em").val();
el.time.seconds = $("#es").val();
el.time.frame = $("#ef").val();
el.art = {};
2017-06-21 21:19:08 +00:00
el.art.universe = $("#eu").val();
2017-06-19 18:22:21 +00:00
el.art.subnet = $("#esu").val();
el.art.value = $("#eval").val();
socket.emit("set", el);
$("#eid").val("");
$("#eh").val("");
$("#em").val("");
$("#es").val("");
$("#ef").val("");
2017-06-21 21:19:08 +00:00
$("#eu").val("");
2017-06-19 18:22:21 +00:00
$("#esu").val("");
$("#eval").val("");
}
2017-06-20 09:15:17 +00:00
function loadSequence(){
socket.emit("load", selected.id);
}
function startSequence(){
socket.emit("play");
}
function stopSequence(){
socket.emit("stop");
}
2017-06-20 15:50:09 +00:00
2017-06-21 21:19:08 +00:00
function pauseSequence(){
socket.emit("pause");
}
2017-06-20 15:50:09 +00:00
$(document).keyup(function(e) {
if (e.keyCode === 27) {
$("#eid").val("");
$("#eh").val("");
$("#em").val("");
$("#es").val("");
$("#ef").val("");
2017-06-21 21:19:08 +00:00
$("#eu").val("");
2017-06-20 15:50:09 +00:00
$("#esu").val("");
$("#eval").val("");
2017-06-21 21:19:08 +00:00
}
2017-06-20 15:50:09 +00:00
});
2017-06-21 21:19:08 +00:00
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);
}
2017-06-19 18:22:21 +00:00
< / script >
< / body >
< / html >
