Basic support is ready, canvas is not implemented jet

db.json

@@ -3,7 +3,55 @@
     "displayName": "test",
     "id": "3d47edcdc882",
     "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"
+      }
     ]
   }
 }

lib/timec.js

@@ -11,12 +11,9 @@ var http = httpp.createServer();
 const io = require("socket.io");
 var ioClient = require("socket.io-client")("http://localhost:5000");
 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 {
     constructor(millis) {
         this.lframe = 0;
@@ -28,8 +25,8 @@ class FrameTime {
             this.milliseconds = millis;
         }
         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.lminutes = millis.minutes;
                 this.lhours = millis.hours;
@@ -95,12 +92,16 @@ class Timecode {
         var d = new Date().getTime() - this.startTime;
         this.toTrigger.forEach(e => {
             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);
                 this.toTrigger.splice(i, 1);
             }
         });
+        var data = {};
+        data.time = new FrameTime(d);
+        data.track = this.activeTrack.id;
+        ios.emit("update", data);
     }
     loadTrack(trackid) {
         this.playing = false;
@@ -145,6 +146,9 @@ class Track {
 }
 var timecode = new Timecode();
 ios.on("connection", socket => {
+    function senddata() {
+        ios.emit("get_data", db.getState());
+    }
     console.log("Client", socket.id, "connected");
     socket.on("load", (id) => {
         var track = db.get(id).value();
@@ -171,31 +175,26 @@ ios.on("connection", socket => {
         track.triggers = [];
         db.set(track.id, track).write();
         socket.emit("created", track);
+        senddata();
     });
     socket.on("set", (data) => {
         var tid = data.track;
-        var midi = data.midi;
         var time = new FrameTime(data.time);
         var tracke = new TrackEvent();
-        tracke.midi = midi;
+        tracke.art = data.art;
         tracke.time = time;
+        tracke.id = sid.generate();
         db.get(tid + ".triggers").push(tracke).write();
         socket.emit("set_finished", tracke);
+        senddata();
     });
     socket.on("get", () => {
         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);
-    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

src/timec.ts

@@ -27,8 +27,8 @@ class FrameTime{
       if(Number.isInteger(millis)){
          this.milliseconds = millis;
       } 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.lminutes = millis.minutes;
             this.lhours = millis.hours;
@@ -121,6 +121,10 @@ class Timecode {
             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) {
@@ -164,6 +168,7 @@ class Timecode {
 }
 
 class TrackEvent {
+   id:string;
    art: {
       subnet:number,
       value:number
@@ -186,6 +191,10 @@ interface VlcUpdate {
 
 var timecode = new Timecode();
 ios.on("connection", socket=>{
+   function senddata(){
+      ios.emit("get_data", db.getState());
+   }
+
    console.log("Client", socket.id, "connected");
    socket.on("load", (id)=>{
       var track = db.get(id).value();
@@ -212,6 +221,7 @@ ios.on("connection", socket=>{
       track.triggers = [];
       db.set(track.id, track).write();
       socket.emit("created", track);
+      senddata();
    });
    socket.on("set", (data)=>{
       var tid = data.track;
@@ -219,13 +229,20 @@ ios.on("connection", socket=>{
       var tracke = new TrackEvent();
       tracke.art = data.art;
       tracke.time = time;
+      tracke.id = sid.generate();
       db.get(tid + ".triggers").push(tracke).write();
       socket.emit("set_finished", tracke);
+      senddata();
    });
 
    socket.on("get", ()=>{
       socket.emit("get_data", db.getState());
    });
+
+   socket.on("delete", (data)=>{
+      db.get(data.track + ".triggers").remove({id:data.id}).write();
+      senddata();
+   });
 });
 
 http.listen(5001);

web/design.css

@@ -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;
+}

web/index.html

@@ -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>
+