change

db.json

@@ -1,119 +0,0 @@
-{
-  "3d47edcdc882": {
-    "displayName": "test",
-    "id": "3d47edcdc882",
-    "triggers": [
-      {
-        "art": {
-          "subnet": "4",
-          "value": "4"
-        },
-        "time": {
-          "lframe": "2",
-          "lseconds": "10",
-          "lminutes": "0",
-          "lhours": "0",
-          "lmilliseconds": 10080
-        },
-        "id": "719be4487857"
-      },
-      {
-        "art": {
-          "subnet": "5",
-          "value": "5"
-        },
-        "time": {
-          "lframe": "5",
-          "lseconds": "5",
-          "lminutes": "5",
-          "lhours": "5",
-          "lmilliseconds": 18305200
-        },
-        "id": "d747ecb81661"
-      },
-      {
-        "art": {
-          "subnet": "0",
-          "value": "0"
-        },
-        "time": {
-          "lframe": "15",
-          "lseconds": "10",
-          "lminutes": "0",
-          "lhours": "0",
-          "lmilliseconds": 10600
-        },
-        "id": "1c599cfdb9df"
-      }
-    ]
-  },
-  "7d83e98feaa1": {
-    "displayName": "TEST2",
-    "file": "testv.mp4",
-    "id": "7d83e98feaa1",
-    "triggers": [
-      {
-        "art": {
-          "subnet": "20",
-          "value": "120"
-        },
-        "time": {
-          "lframe": "0",
-          "lseconds": "5",
-          "lminutes": "0",
-          "lhours": "0",
-          "lmilliseconds": 5000
-        },
-        "id": "cc954c0f41e0"
-      },
-      {
-        "art": {
-          "subnet": "30",
-          "value": "255"
-        },
-        "time": {
-          "lframe": "0",
-          "lseconds": "6",
-          "lminutes": "0",
-          "lhours": "0",
-          "lmilliseconds": 6000
-        },
-        "id": "6a1343d12135"
-      },
-      {
-        "art": {
-          "subnet": "21",
-          "value": "255"
-        },
-        "time": {
-          "lframe": "0",
-          "lseconds": "7",
-          "lminutes": "0",
-          "lhours": "0",
-          "lmilliseconds": 7000
-        },
-        "id": "2e3919ef1e3b"
-      },
-      {
-        "art": {
-          "subnet": "2",
-          "value": "255"
-        },
-        "time": {
-          "lframe": "0",
-          "lseconds": "0",
-          "lminutes": "0",
-          "lhours": "0",
-          "lmilliseconds": 0
-        },
-        "id": "4c93060ca00f"
-      }
-    ]
-  },
-  "af3f2ed07c21": {
-    "displayName": "t2",
-    "file": "t2.mp4",
-    "id": "af3f2ed07c21",
-    "triggers": []
-  }
-}

lib/timec.js

@@ -120,9 +120,10 @@ class Timecode {
         data.time = new FrameTime(d);
         data.track = this.activeTrack.id;
         data.filePlaying = this.filePlaying;
+        data.playing = this.playing;
         ios.emit("update", data);
     }
-    update(time) {
+    update() {
         var d = new Date().getTime() - this.startTime;
         this.toTrigger.forEach(e => {
             if (e.time.milliseconds <= d) {
@@ -137,6 +138,7 @@ class Timecode {
         data.time = new FrameTime(d);
         data.track = this.activeTrack.id;
         data.filePlaying = this.filePlaying;
+        data.playing = this.playing;
         ios.emit("update", data);
     }
     loadTrack(trackid) {
@@ -179,6 +181,7 @@ class Timecode {
     stop() {
         clearInterval(this.interval);
         this.playing = false;
+        this.update();
         if (this.filePlaying) {
             ioClient.emit("stop");
             ios.emit("stopped");

src/index.ts

@@ -140,10 +140,11 @@ class Timecode {
       data.time = new FrameTime(d);
       data.track = this.activeTrack.id;
       data.filePlaying = this.filePlaying;
+      data.playing = this.playing;
       ios.emit("update", data);
    }
 
-   update(time:FrameTime) {
+   update() {
       var d = new Date().getTime() - this.startTime;
       this.toTrigger.forEach(e=>{
          if(e.time.milliseconds <= d) {
@@ -158,6 +159,7 @@ class Timecode {
       data.time = new FrameTime(d);
       data.track = this.activeTrack.id;
       data.filePlaying = this.filePlaying;
+      data.playing = this.playing;
       ios.emit("update", data);
    }
 
@@ -201,6 +203,7 @@ class Timecode {
    stop() {
       clearInterval(this.interval);
       this.playing = false;
+      this.update();
       if(this.filePlaying){
          ioClient.emit("stop");
          ios.emit("stopped");

web/design.css

@@ -82,4 +82,8 @@ canvas {
 
 .event_table {
     margin-top: 10px;
+}
+
+.playing {
+    color: greenyellow;
 }

web/index.html

@@ -13,7 +13,7 @@
       <hr>
       <div>
          <button onclick="stopSequence()">Stop</button>
-         <button onclick="startSequence()">Play</button>
+         <button onclick="startSequence()" id="playbutton">Play</button>
          <label >Loaded: </label>
          <label id="loaded"></label>
          <label >File playing: </label>
@@ -95,11 +95,16 @@
          });
          
          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);
-            $("#fplay").html(data.filePlaying);
          });
 
          $("#track_select").on("change", function () {
@@ -108,12 +113,7 @@
                return;
             }
             selected = tracks[this.value];
-
-            //var canvas = document.getElementById("canvas");
-            //var ctx = canvas.getContext("2d");
-            //ctx.moveTo(0,0);
             drawSelected();
-            //ToDo canvas
          });
 
          function drawCanvas(){
@@ -131,8 +131,6 @@
             var canvas = document.getElementById("canvas");
             var ctx = canvas.getContext("2d");
             ctx.moveTo(0,0);
-
-
          }
 
          function drawSelected(){