change

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(){