From 5e26faa798a20e049dae207f86ab305079dcc775 Mon Sep 17 00:00:00 2001
From: alban <git@albancrommer.com>
Date: Sat, 3 Oct 2020 17:51:26 +0200
Subject: [PATCH] [fix] www: rework the simulator page

---
 www/simu.html | 201 +++++++++++++++++++++-----------------------------
 1 file changed, 85 insertions(+), 116 deletions(-)
diff --git a/www/simu.html b/www/simu.html
index 95ae133..39f5fb3 100644
--- a/www/simu.html
+++ b/www/simu.html
@@ -10,8 +10,8 @@
         <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
         <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
         <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
-        
-        
+
+
         <!-- Page specific styles -->
         <style>
 
@@ -38,7 +38,7 @@
 
     <body style="background-color:#222;">
 
- 
+
   <!--
      Navigation Rack
   -->
@@ -49,7 +49,7 @@
 
         <a href="index.html">
         <div class="webaudiobut">
-          <div align="center" class="navled"> 
+          <div align="center" class="navled">
           Index
           </div>
         </div>
@@ -57,7 +57,7 @@
 
         <a href="align.html">
         <div class="webaudiobut">
-          <div align="center" class="navled"> 
+          <div align="center" class="navled">
           Align
           </div>
         </div>
@@ -65,7 +65,7 @@
 
         <a href="auralls.html">
         <div class="webaudiobut">
-          <div align="center" class="navled"> 
+          <div align="center" class="navled">
           Aurora
           </div>
         </div>
@@ -73,15 +73,15 @@
 
         <a href="trckr/trckrcam1.html">
         <div class="webaudiobut">
-          <div align="center" class="navled"> 
+          <div align="center" class="navled">
           Lasercam
           </div>
         </div>
         </a>
-          
+
         <a href="simu.html">
         <div class="webaudiobut">
-          <div align="center" class="navled"> 
+          <div align="center" class="navled">
           Simu
           </div>
         </div>
@@ -110,7 +110,7 @@
     -->
 
     <div class="content">
-      <div class="TopRackGrid"> 
+      <div class="TopRackGrid">
         <div>
           <h2>
           /TL Simu
@@ -120,10 +120,10 @@
           </webaudio-switch>
         </div>
         <div class="webaudiobut" style="background-image: linear-gradient(174deg,  #111,#030303);">
-          <div align="center" id="line1" class="busled"> 
+          <div align="center" id="line1" class="busled">
           Simu Rack
           </div>
-          <div align="center" id="status" class="busled"> 
+          <div align="center" id="status" class="busled">
           /team/laser
           </div>
         </div>
@@ -149,7 +149,7 @@
     Laser Rack
     -->
     <div class="content">
-      <div class="Rackgrid"> 
+      <div class="Rackgrid">
         <div>
         <h2>Lasers</h2>
         </div>
@@ -171,7 +171,7 @@
     <!--
     Simu Rack
     -->
-   <div class="content" style="background-image: linear-gradient(174deg,  #111,#030303);"> 
+   <div class="content" style="background-image: linear-gradient(174deg,  #111,#030303);">
     <canvas id="canvas" width="400" height="400"  style="margin-left: 200px;margin-top : 20px;background-image:">canvas>
    </div>
 
@@ -179,7 +179,7 @@
         <!--
         Encoders Line
 
-          # /aurora/radius       layernumber radius [0-1] 
+          # /aurora/radius       layernumber radius [0-1]
           # /aurora/rotdirec layer axe direc
           # /aurora/linesize layer value
           # /aurora/rotdirec layer axe direc
@@ -190,9 +190,9 @@
         -->
 
         <!--
-        JS 
+        JS
         -->
-        
+
         <!-- LJ style WS : A nettoyer ! -->
 
         <script type="text/javascript">
@@ -207,7 +207,7 @@
             uri: LJ,
             ws: null,
 
-        
+
             init : function (e) {
               _WS.s = new WebSocket(_WS.uri);
               _WS.s.onopen = function (e) { _WS.onOpen(e); };
@@ -238,7 +238,7 @@
             document.getElementById("on").value = 1;
 
               },
-        
+
 
             onMessage: function (e) {
               var res = e.data.split(" ");
@@ -251,7 +251,7 @@
 
 
               switch (res[0].substring(0,6)) {
-                
+
                 case "/statu":
                       _WS.showline1("connected to "+LJ);
                       if (res[2]==="Disconnected"){
@@ -283,7 +283,7 @@
                       //divtext.innerHTML="connected to "+LJ;
                       divtext1.innerHTML='<span style="color: red;">'+ res[1]+" "+res[2]+'</span>';
                       break;
-                      
+
                 case "/plpoi":
                     //console.log("plpoint");
                     break;
@@ -294,29 +294,29 @@
                     break
                 }
               },
-        
+
             onError: function (e) {
               _WS.showstatus('<span style="color: red;">ERROR:</span> ' + e.data);
               },
-        
+
             showin: function (message) {
                 var divtext = document.getElementById('status');
                 divtext.innerHTML="";
                 divtext.innerHTML= message.toString();
               },
-        
+
             showout: function (message) {
                 var divtext = document.getElementById('status');
                 divtext.innerHTML="";
                 divtext.innerHTML= message.toString();
               },
-        
+
             showstatus: function (message) {
                 var divtext = document.getElementById('status');
                 divtext.innerHTML="";
                 divtext.innerHTML= message.toString();
               },
-        
+
             showline1: function (message) {
                 var divtext = document.getElementById('line1');
                 divtext.innerHTML="";
@@ -331,47 +331,47 @@
                 _WS.s.send(message);
               }
             },
-        
+
             close: function () {
               _WS.showstatus('GOODBYE !');
               _WS.s.close();
             }
           };
-        
-          window.addEventListener('load', _WS.init, false);    
+
+          window.addEventListener('load', _WS.init, false);
         //
         // Forms submits
         //
-        
+
           function onSubmit(clicked_id) {
             var input = document.getElementById(clicked_id);
             //console.log("/" + clicked_id + " " + input.value);
             _WS.send("/" + clicked_id + " " + input.value);
             }
-        
+
         </script>
 
-      <!-- 
-        web audio encoders scripts 
+      <!--
+        web audio encoders scripts
       -->
-      
+
       <script type="text/javascript">
         var message="";
         var log=[];
         var knobs = document.getElementsByTagName('webaudio-knob');
-        
+
         for(var i = 0; i < knobs.length; i++){
             knobs[i].addEventListener("input",Dump,false);
             knobs[i].addEventListener("change",Dump,false);
         }
         var sliders = document.getElementsByTagName('webaudio-slider');
-        
+
         for(var i = 0; i < sliders.length; i++){
             sliders[i].addEventListener("input",Dump,false);
             sliders[i].addEventListener("change",Dump,false);
         }
         var switches = document.getElementsByTagName('webaudio-switch');
-        
+
         for(var i = 0; i < switches.length; i++) {
             switches[i].addEventListener("change",Dump,false);
         }
@@ -418,8 +418,8 @@
           var x = document.getElementById("aurora/fx/0 Trckr");
             x.value = 0 ;
           }
-          
-      
+
+
         function nocolor0() {
           console.log("nocolor0")
           var x = document.getElementById("aurora/color/0 red");
@@ -444,7 +444,7 @@
             log.unshift(str);
             log.length=1;
             str="";
-            
+
             for(var i=19;i>=0;--i) {
                 if(log[i])
                     str+=log[i]+"<br/>";
@@ -452,33 +452,33 @@
 
             _WS.send("/" + e.target.id + " " +  e.target.value);
 
-          var res = e.target.id.split(" "); 
+          var res = e.target.id.split(" ");
 
           // on off
-          if (e.target.id === "on" && e.type === "change") {   
+          if (e.target.id === "on" && e.type === "change") {
             window.location.reload();
             }
 
           // Go to index
-          if (e.target.id === "index" && e.type === "change") {   
+          if (e.target.id === "index" && e.type === "change") {
             window.location.assign("index.html");
             }
 
           // Fx
-          if (res[0].substring(7,9) === "fx" && e.type === "change") {   
+          if (res[0].substring(7,9) === "fx" && e.type === "change") {
 
-            var layer = res[0].substring(10,12);  
-            nofx0();  
+            var layer = res[0].substring(10,12);
+            nofx0();
             var x = document.getElementById(e.target.id);
             x.value = 1 ;
             _WS.showstatus(e.target.id);
-            
+
             }
 
           // Colors
-          if (res[0].substring(7,9) === "co" && e.type === "change") {  
+          if (res[0].substring(7,9) === "co" && e.type === "change") {
 
-              var layer = res[0].substring(13,14);  
+              var layer = res[0].substring(13,14);
               console.log(layer)
               nocolor0();
               var x = document.getElementById(e.target.id);
@@ -486,9 +486,9 @@
               _WS.showstatus(e.target.id);
               }
 
-      
+
           // Lasers
-          if (res[0] === "noteon" && e.type === "change") {  
+          if (res[0] === "noteon" && e.type === "change") {
               //console.log(e.target.id)
               nolaser();
               var x = document.getElementById(e.target.id);
@@ -500,88 +500,57 @@
     </script>
 
 
-    <!-- 
-      Simulator Point lists drawing scripts 
+    <!--
+      Simulator Point lists drawing scripts
     -->
-    
+
     <script type="text/javascript">
-    
+
       //
       // Simulator canvas : store Reference To The Canvas & Set Context
       //
-    
+
       var canvas = document.getElementById("canvas");
       var ctx = canvas.getContext("2d");
       var lastpoint = { x: 0, y: 0, color: 0};
       ctx.clearRect(0,0,400,400);
       var zoom = 0.5;
       //ctx.save
-    
-    
-      // Todo : laser point will have black points to go from a polyline to another. Need to discard those black points.
+
+      // Draws every segment received, except black colored target ones
       function draw() {
-    
-    
-          // Clear Canvas At The Start Of Every Frame
-          //ctx.restore
-          
           if (pl2.length > 0)
-            {
-    
-            // Begin a new path
-            // 0.7 reduces max coordinates in a more browser compatible resolution.
+          {
             ctx.clearRect(0,0,400,400);
-            ctx.beginPath();
-           
-            ctx.moveTo(pl2[0]*zoom, pl2[1]*zoom);
-            lastpoint.color = pl2[2];
-    
-            // Draw n Lines
-            for (var i = 0; i < pl2.length/3; i++) 
-              {
-              
-              // New point has the same color -> add a new line to the new point
-              if (pl2[2+(i*3)] === lastpoint.color)
-                {
-                ctx.lineTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom);
-                }
-    
-              // New point has different color -> stroke with previous color
-              if (pl2[2+(i*3)] != lastpoint.color) 
-                {
-                ctx.strokeStyle = "#"+(lastpoint.color + Math.pow(16, 6)).toString(16).slice(-6);
-                ctx.stroke();
-                ctx.closePath()
-                //ctx.restore
-                ctx.beginPath();
-                //ctx.clearRect(0,0,400,400);
-                
-                ctx.moveTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom);
-                }
-    
-              // Last point -> stroke with current color
-              if (i === (pl2.length/3)-1 ) 
-                {
-                ctx.moveTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom);
-                ctx.strokeStyle = "#"+((pl2[2+(i*3)]) + Math.pow(16, 6)).toString(16).slice(-6);
-                ctx.stroke();
-                
-                ctx.closePath()
-                //ctx.restore
-                //ctx.clearRect(0,0,400,400);
-                }
-    
-              // store point for comparison
-              lastpoint.x = pl2[i*3];
-              lastpoint.y = pl2[1+(i*3)];
-              lastpoint.color = pl2[2+(i*3)];
+            lastpoint = {
+              x:pl2[0],
+              y:pl2[1],
+              color:pl2[2]
+            }
+            for (var i = 0; i <= pl2.length; i+=3)
+            {
+              point = {
+                x:pl2[i],
+                y:pl2[i+1],
+                color:pl2[i+2]
               }
-    
-          } 
+              // console.log(lastpoint,point)
+              // if the target is black, skip drawing
+              if( point.color != 0){
+                ctx.beginPath()
+                ctx.strokeStyle = "#"+(point.color + Math.pow(16, 6)).toString(16).slice(-6);
+                ctx.moveTo(lastpoint.x * zoom, lastpoint.y * zoom);
+                ctx.lineTo(point.x * zoom, point.y * zoom);
+                ctx.stroke();
+                ctx.closePath()
+              }
+              lastpoint = point
+            }
+          }
           // Call Draw Function Again To Create Animation
           window.requestAnimationFrame(draw);
-        }
-          
+      }
+
       // Initialize The Draw Function
       draw();
     </script>
