<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> <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> <label id="fplay"></label> </div> <hr> <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> <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> <label id="actualtime"></label> </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"/> <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> </form> <table id="events" class="event_table" border="1"> </table> </div> </div> </div> <script> function f(){ event.preventDefault(); return false; } var socket = io(":5001"); socket.emit("get"); var tracks = {}; var selected = undefined; var timenow = undefined; socket.on("get_data", (data)=>{ console.log("got data", data); var opt = "<option value=''></option>"; for(var prop in data.tracks){ var e = data.tracks[prop]; opt += '<option value="' + e.id + '">' + e.displayName + '</option>'; } tracks = data.tracks; if(selected){ selected = data.tracks[selected.id]; } $("#track_select").html(opt); if(data.loaded) $("#loaded").html(data.loaded.displayName); 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)=>{ $("#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"); } 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); }); $("#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; } 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>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; 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>" 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>" 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); $("#eu").val(el.art.universe); $("#esu").val(el.art.subnet); $("#eval").val(el.art.value); } 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); $("#eu").val(el.art.universe); $("#esu").val(el.art.subnet); $("#eval").val(el.art.value); } function remove(id) { socket.emit("delete", {track:selected.id, id:id}) console.log("remove with id", id) } function fire(id){ if(!selected) return; selected.triggers.forEach(e=>{ console.log(e); if(e.id == id) socket.emit("fire", e.art); }); } 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 = {}; el.art.universe = $("#eu").val(); el.art.subnet = $("#esu").val(); el.art.value = $("#eval").val(); socket.emit("set", el); $("#eid").val(""); $("#eh").val(""); $("#em").val(""); $("#es").val(""); $("#ef").val(""); $("#eu").val(""); $("#esu").val(""); $("#eval").val(""); } function loadSequence(){ socket.emit("load", selected.id); } function startSequence(){ socket.emit("play"); } function stopSequence(){ socket.emit("stop"); } function pauseSequence(){ socket.emit("pause"); } $(document).keyup(function(e) { if (e.keyCode === 27) { $("#eid").val(""); $("#eh").val(""); $("#em").val(""); $("#es").val(""); $("#ef").val(""); $("#eu").val(""); $("#esu").val(""); $("#eval").val(""); } }); 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("load_event", data); } </script> </body> </html>