node_vlc_remote_timecodes/web/index.html

256 lines
9.1 KiB
HTML
Raw Normal View History

<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-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>
<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>
<div>
<canvas id="canvas" height="50">
</canvas>
2017-06-20 09:15:17 +00:00
<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"/>
2017-06-20 12:53:08 +00:00
<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;
}
2017-06-20 11:05:36 +00:00
var socket = io(":5001");
socket.emit("get");
var tracks = {};
var selected = undefined;
2017-06-20 09:15:17 +00:00
var timenow = undefined;
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];
opt += '<option value="' + e.id + '">' + e.displayName + '</option>';
}
2017-06-20 09:15:17 +00:00
tracks = data.tracks;
if(selected){
2017-06-20 09:15:17 +00:00
selected = data.tracks[selected.id];
}
$("#track_select").html(opt);
2017-06-20 09:15:17 +00:00
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)=>{
2017-06-20 15:25:12 +00:00
$("#fplay").html(data.filePlaying);
if(data.playing){
$("#playbutton").css("color", "greenyellow");
} 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);
});
$("#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 : "");
2017-06-20 15:50:09 +00:00
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>"
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>"
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);
}
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);
$("#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("");
}
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
$(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>