add compass functionality

static/scripts/compass.js

@@ -4,16 +4,12 @@ var options2 = {
         datasets: [
             {
                 label: 'compassTCP',
-                data: [50,50,50,50],
+                data: [360,0],
                 backgroundColor: [
-                    'rgba(191, 191, 191, 1)',
-                    'rgba(191, 191, 191, 1)',
                     'rgba(30, 139, 195, 1)',
                     'rgba(30, 139, 195, 1)'
                 ],
                 borderColor: [
-                    'rgba(255, 255, 255 ,1)',
-                    'rgba(255, 255, 255 ,1)',
                     'rgba(255, 255, 255 ,1)',
                     'rgba(255, 255, 255 ,1)'
                 ],
@@ -21,16 +17,12 @@ var options2 = {
             },
             {
                 label: 'compassSERIAL',
-                data: [50,50,50,50],
+                data: [360,0],
                 backgroundColor: [
-                    'rgba(191, 191, 191, 1)',
-                    'rgba(191, 191, 191, 1)',
                     'rgba(214, 69, 65, 1)',
-                    'rgba(214, 69, 65, 1)'
+                    'rgba(214, 69, 65, 1)',
                 ],
                 borderColor: [
-                    'rgba(255, 255, 255 ,1)',
-                    'rgba(255, 255, 255 ,1)',
                     'rgba(255, 255, 255 ,1)',
                     'rgba(255, 255, 255 ,1)'
                 ],
@@ -58,6 +50,23 @@ var myCompass = new Chart(ctx2, options2);
 
 
 function addCompassSerial(deg){
-    myCompass.data.datasets[1].data = [0,0,0,0];
+    var c = Math.abs(90-deg);
+    if(deg<90){
+        myCompass.data.datasets[1].data = [360-c,c];
+    }
+    if(deg>90){
+        myCompass.data.datasets[1].data = [c,360-c];
+    }
+    myCompass.update();
+}
+
+function addCompassTCP(deg){
+    var c = Math.abs(90-deg);
+    if(deg<90){
+        myCompass.data.datasets[0].data = [360-c,c];
+    }
+    if(deg>90){
+        myCompass.data.datasets[0].data = [c,360-c];
+    }
     myCompass.update();
 }

static/scripts/websocket.js

@@ -69,11 +69,6 @@ window.addEventListener("load", function(evt) {
             //console.log(evt.data)
             console.log("JSON geparsed onmessage", dat)
 
-            if(!(dat.SOURCE_SERIAL.HeadDevice === 0)){
-                console.log("Compass" + dat.SOURCE_SERIAL.HeadDevice)
-                addCompassSerial(dat.SOURCE_SERIAL.HeadDevice)
-            }
-
             try{
                 if(!(dat.SOURCE_TCP.Orientation[0] === 0) && !(dat.SOURCE_TCP.Orientation[1] === 0) && !(dat.SOURCE_TCP.Orientation[2] === 0)){
                     document.getElementById("gyroscopeTCP").style.transform = `rotateX(${dat.SOURCE_TCP.Orientation[0]}deg) rotateY(${dat.SOURCE_TCP.Orientation[1]}deg) rotateZ(${dat.SOURCE_TCP.Orientation[2]}deg)`
@@ -84,8 +79,14 @@ window.addEventListener("load", function(evt) {
                     updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0])
                     map.panTo([dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]])
                 }
+                if(!(dat.SOURCE_TCP.Speed === 0)){
                     addSpeedTcp(dat.SOURCE_TCP.Speed);
                 }
+                if(!(dat.SOURCE_TCP.HeadDevice === 0)){
+                    addCompassTCP(dat.SOURCE_TCP.HeadDevice)
+                    document.getElementById("compassTCP").innerHTML = "Smartphone: " + dat.SOURCE_TCP.HeadDevice.toFixed(0) + "°"
+                }
+            }
             catch{
                 console.log("no TCP data")
             }
@@ -100,7 +101,13 @@ window.addEventListener("load", function(evt) {
                     updateMapSERIAL(dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0])
                     map.panTo([dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]])
                 }
+                if(!(dat.SOURCE_SERIAL.Speed === 0)){
                     addSpeedSerial(dat.SOURCE_SERIAL.Speed);
+                }
+                if(!(dat.SOURCE_SERIAL.HeadDevice === 0)){
+                    addCompassSerial(dat.SOURCE_SERIAL.HeadDevice)
+                    document.getElementById("compassSERIAL").innerHTML = "Ublox: " + dat.SOURCE_SERIAL.HeadDevice.toFixed(0) + "°"
+                }
             }catch{
                 console.log("no serial data")
             }

templates/index.html

@@ -63,6 +63,14 @@
       bottom: 0;
       margin-bottom: -50px;
     }
+    .speedMed {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, 0);
+      font-size: 30px;
+      bottom: 0;
+      margin-bottom: 150px;
+    }
     .speedMax {
       position: absolute;
       Left: 100%;
@@ -225,9 +233,12 @@
     <div class="outer">
       <label id="speedTCP" style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Smartphone (km/h): </label><br>
       <label id="speedSERIAL" style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Ublox (km/h): </label><br>
+      <div>
         <canvas id="speedometer" width="300" height="200"></canvas>
         <p class="speedMin">0</p>
+        <p class="speedMed">125</p>
         <p class="speedMax">250</p>
+      </div>
     </div><br>
     <div class="outer">
       <label id="compassTCP" style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone </label><br>