Basic support is ready, canvas is not implemented jet

This commit is contained in:
Fabian Stamm 2017-06-19 20:22:21 +02:00
parent 880636a183
commit 9f529422a3
17 changed files with 15615 additions and 28 deletions

50
db.json
View File

@ -3,7 +3,55 @@
"displayName": "test", "displayName": "test",
"id": "3d47edcdc882", "id": "3d47edcdc882",
"triggers": [ "triggers": [
{
"art": {
"subnet": 1,
"value": 4
},
"time": {
"lframe": 15,
"lseconds": 5,
"lminutes": 0,
"lhours": 0,
"lmilliseconds": 5600
},
"id": "c06d59297199"
},
{
"art": {
"subnet": "1",
"value": "1"
},
"time": {
"lframe": "1",
"lseconds": "1",
"lminutes": "1",
"lhours": "1",
"lmilliseconds": 3661040
},
"id": "4725a8a0a91d"
}
]
},
"7d83e98feaa1": {
"displayName": "TEST2",
"file": "testv.mp4",
"id": "7d83e98feaa1",
"triggers": [
{
"art": {
"subnet": "0",
"value": "0"
},
"time": {
"lframe": 0,
"lseconds": 0,
"lminutes": 0,
"lhours": 0,
"lmilliseconds": 0
},
"id": "cc954c0f41e0"
}
] ]
} }
} }

View File

@ -11,12 +11,9 @@ var http = httpp.createServer();
const io = require("socket.io"); const io = require("socket.io");
var ioClient = require("socket.io-client")("http://localhost:5000"); var ioClient = require("socket.io-client")("http://localhost:5000");
var ios = io(http); var ios = io(http);
const rtpmidi = require("rtpmidi"); const artnetp = require("artnet");
var midisession = rtpmidi.manager.createSession({ const universe = 21;
localName: "node", var artnet = artnetp({ host: "192.168.1.255" });
bonjourName: "node",
port: 5004
});
class FrameTime { class FrameTime {
constructor(millis) { constructor(millis) {
this.lframe = 0; this.lframe = 0;
@ -28,8 +25,8 @@ class FrameTime {
this.milliseconds = millis; this.milliseconds = millis;
} }
else if (typeof millis === "object") { else if (typeof millis === "object") {
if (Number.isInteger(millis.frames) && Number.isInteger(millis.seconds) && Number.isInteger(millis.minutes) && Number.isInteger(millis.hours)) { if (Number.isInteger(Number(millis.frame)) && Number.isInteger(Number(millis.seconds)) && Number.isInteger(Number(millis.minutes)) && Number.isInteger(Number(millis.hours))) {
this.lframe = millis.frames; //use the local, because its mor performant this.lframe = millis.frame; //use the local, because its mor performant
this.lseconds = millis.seconds; this.lseconds = millis.seconds;
this.lminutes = millis.minutes; this.lminutes = millis.minutes;
this.lhours = millis.hours; this.lhours = millis.hours;
@ -95,12 +92,16 @@ class Timecode {
var d = new Date().getTime() - this.startTime; var d = new Date().getTime() - this.startTime;
this.toTrigger.forEach(e => { this.toTrigger.forEach(e => {
if (e.time.milliseconds <= d) { if (e.time.milliseconds <= d) {
ios.emit("midi", e.midi); ios.emit("artnet", e.art);
midisession.sendMessage([e.midi.channel, e.midi.note, e.midi.value]); artnet.set(universe, e.art.subnet);
var i = this.toTrigger.indexOf(e); var i = this.toTrigger.indexOf(e);
this.toTrigger.splice(i, 1); this.toTrigger.splice(i, 1);
} }
}); });
var data = {};
data.time = new FrameTime(d);
data.track = this.activeTrack.id;
ios.emit("update", data);
} }
loadTrack(trackid) { loadTrack(trackid) {
this.playing = false; this.playing = false;
@ -145,6 +146,9 @@ class Track {
} }
var timecode = new Timecode(); var timecode = new Timecode();
ios.on("connection", socket => { ios.on("connection", socket => {
function senddata() {
ios.emit("get_data", db.getState());
}
console.log("Client", socket.id, "connected"); console.log("Client", socket.id, "connected");
socket.on("load", (id) => { socket.on("load", (id) => {
var track = db.get(id).value(); var track = db.get(id).value();
@ -171,31 +175,26 @@ ios.on("connection", socket => {
track.triggers = []; track.triggers = [];
db.set(track.id, track).write(); db.set(track.id, track).write();
socket.emit("created", track); socket.emit("created", track);
senddata();
}); });
socket.on("set", (data) => { socket.on("set", (data) => {
var tid = data.track; var tid = data.track;
var midi = data.midi;
var time = new FrameTime(data.time); var time = new FrameTime(data.time);
var tracke = new TrackEvent(); var tracke = new TrackEvent();
tracke.midi = midi; tracke.art = data.art;
tracke.time = time; tracke.time = time;
tracke.id = sid.generate();
db.get(tid + ".triggers").push(tracke).write(); db.get(tid + ".triggers").push(tracke).write();
socket.emit("set_finished", tracke); socket.emit("set_finished", tracke);
senddata();
}); });
socket.on("get", () => { socket.on("get", () => {
socket.emit("get_data", db.getState()); socket.emit("get_data", db.getState());
}); });
socket.on("delete", (data) => {
db.get(data.track + ".triggers").remove({ id: data.id }).write();
senddata();
});
}); });
midisession.on("ready", () => { http.listen(5001);
http.listen(5001);
setInterval(() => {
midisession.sendMessage([0x80, 0x40]);
midisession.sendMessage([0x90, 0x40, 0x7f]);
//midisession.sendMessage([1, 5, 100]);
}, 500);
});
midisession.on('message', function (deltaTime, message) {
console.log('Received a message', message);
});
midisession.connect({ address: "dmx.event.margau.net", port: 5004 });
//# sourceMappingURL=timec.js.map //# sourceMappingURL=timec.js.map

File diff suppressed because one or more lines are too long

View File

@ -27,8 +27,8 @@ class FrameTime{
if(Number.isInteger(millis)){ if(Number.isInteger(millis)){
this.milliseconds = millis; this.milliseconds = millis;
} else if(typeof millis === "object"){ } else if(typeof millis === "object"){
if(Number.isInteger(millis.frames) && Number.isInteger(millis.seconds) && Number.isInteger(millis.minutes) && Number.isInteger(millis.hours) ){ if(Number.isInteger(Number(millis.frame)) && Number.isInteger(Number(millis.seconds)) && Number.isInteger(Number(millis.minutes)) && Number.isInteger(Number(millis.hours))){
this.lframe = millis.frames; //use the local, because its mor performant this.lframe = millis.frame; //use the local, because its mor performant
this.lseconds = millis.seconds; this.lseconds = millis.seconds;
this.lminutes = millis.minutes; this.lminutes = millis.minutes;
this.lhours = millis.hours; this.lhours = millis.hours;
@ -121,6 +121,10 @@ class Timecode {
this.toTrigger.splice(i, 1); this.toTrigger.splice(i, 1);
} }
}); });
var data:any = {};
data.time = new FrameTime(d);
data.track = this.activeTrack.id;
ios.emit("update", data);
} }
loadTrack(trackid:string) { loadTrack(trackid:string) {
@ -164,6 +168,7 @@ class Timecode {
} }
class TrackEvent { class TrackEvent {
id:string;
art: { art: {
subnet:number, subnet:number,
value:number value:number
@ -186,6 +191,10 @@ interface VlcUpdate {
var timecode = new Timecode(); var timecode = new Timecode();
ios.on("connection", socket=>{ ios.on("connection", socket=>{
function senddata(){
ios.emit("get_data", db.getState());
}
console.log("Client", socket.id, "connected"); console.log("Client", socket.id, "connected");
socket.on("load", (id)=>{ socket.on("load", (id)=>{
var track = db.get(id).value(); var track = db.get(id).value();
@ -212,6 +221,7 @@ ios.on("connection", socket=>{
track.triggers = []; track.triggers = [];
db.set(track.id, track).write(); db.set(track.id, track).write();
socket.emit("created", track); socket.emit("created", track);
senddata();
}); });
socket.on("set", (data)=>{ socket.on("set", (data)=>{
var tid = data.track; var tid = data.track;
@ -219,13 +229,20 @@ ios.on("connection", socket=>{
var tracke = new TrackEvent(); var tracke = new TrackEvent();
tracke.art = data.art; tracke.art = data.art;
tracke.time = time; tracke.time = time;
tracke.id = sid.generate();
db.get(tid + ".triggers").push(tracke).write(); db.get(tid + ".triggers").push(tracke).write();
socket.emit("set_finished", tracke); socket.emit("set_finished", tracke);
senddata();
}); });
socket.on("get", ()=>{ socket.on("get", ()=>{
socket.emit("get_data", db.getState()); socket.emit("get_data", db.getState());
}); });
socket.on("delete", (data)=>{
db.get(data.track + ".triggers").remove({id:data.id}).write();
senddata();
});
}); });
http.listen(5001); http.listen(5001);

2337
web/css/font-awesome.css vendored Normal file

File diff suppressed because it is too large Load Diff

4
web/css/font-awesome.min.css vendored Normal file

File diff suppressed because one or more lines are too long

85
web/design.css Normal file
View File

@ -0,0 +1,85 @@
body {
background: #000000;
color: #FFFFFF;
}
button {
background: #000000;
color: #FFFFFF;
height: 30px;
margin: 2px;
font-size: 16px;
}
input[type=text]{
padding:3px;
background: #000000;
color: #FFFFFF;
border: 1px solid rgb(255,255,255);
height: 30px;
margin:2px;
font-size: 16px;
}
select {
border: 1px solid rgb(255,255,255);
background: #000000;
color:#FFFFFF;
height: 30px;
font-size: 16px;
}
select:hover{
background: #02243a;
color: #FFF;
}
label {
font-size: 16px;
height: 30px;
font: normal 16px arial !important;
}
table {
background: #000;
color: #FFF;
width: 100%;
}
table, tr, td {
border: 1px solid rgb(255,255,255);
border-collapse: collapse;
text-align: center;
}
th {
border-bottom: 2px solid rgb(255,255,255) !important;
}
canvas {
width: calc(100%);
margin: 15px 0;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #AAA;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #AAA;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #AAA;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #AAA;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #AAA;
}
.event_table {
margin-top: 10px;
}

BIN
web/fonts/FontAwesome.otf Normal file

Binary file not shown.

Binary file not shown.

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 434 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

203
web/index.html Normal file
View File

@ -0,0 +1,203 @@
<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 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>
<div>
<canvas id="canvas" height="50">
</canvas>
</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="subnet"/>
<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("localhost: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){
var e = data[prop];
opt += '<option value="' + e.id + '">' + e.displayName + '</option>';
}
tracks = data;
if(selected){
selected = data[selected.id];
}
$("#track_select").html(opt);
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)=>{
});
$("#track_select").on("change", function () {
if(this.value === ""){
selected = undefined;
return;
}
selected = tracks[this.value];
//var canvas = document.getElementById("canvas");
//var ctx = canvas.getContext("2d");
//ctx.moveTo(0,0);
drawSelected();
//ToDo canvas
});
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-ID</th><th>Art-Net Value</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=>{
console.log(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='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 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("");
}
socket.on("set_finished", (e)=>{
socket.emit("get");
});
</script>
</body>
</html>

0
web/index.js Normal file
View File

10220
web/jquery-3.1.1.js vendored Normal file

File diff suppressed because it is too large Load Diff

3
web/socket.io.slim.js Normal file

File diff suppressed because one or more lines are too long