256 lines
9.1 KiB
HTML
256 lines
9.1 KiB
HTML
<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>
|
|
<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>
|
|
<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="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");
|
|
} 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;
|
|
}
|
|
$("#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 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.subnet + "</td>"
|
|
t += "<td>" + e.art.value + "</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);
|
|
$("#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);
|
|
$("#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)
|
|
//throw new Error("not implemented");
|
|
}
|
|
|
|
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.subnet = $("#esu").val();
|
|
el.art.value = $("#eval").val();
|
|
socket.emit("set", el);
|
|
$("#eid").val("");
|
|
$("#eh").val("");
|
|
$("#em").val("");
|
|
$("#es").val("");
|
|
$("#ef").val("");
|
|
$("#esu").val("");
|
|
$("#eval").val("");
|
|
}
|
|
|
|
function loadSequence(){
|
|
socket.emit("load", selected.id);
|
|
}
|
|
|
|
function startSequence(){
|
|
socket.emit("play");
|
|
}
|
|
|
|
function stopSequence(){
|
|
socket.emit("stop");
|
|
}
|
|
|
|
$(document).keyup(function(e) {
|
|
if (e.keyCode === 27) {
|
|
$("#eid").val("");
|
|
$("#eh").val("");
|
|
$("#em").val("");
|
|
$("#es").val("");
|
|
$("#ef").val("");
|
|
$("#esu").val("");
|
|
$("#eval").val("");
|
|
} // esc
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|