From c59d4823331f06a39c85261e047ffe9892187d01 Mon Sep 17 00:00:00 2001
From: unknown <frankherko@gmail.com>
Date: Sun, 27 Dec 2020 17:15:57 +0100
Subject: [PATCH] adds TCP speed data

---
 static/scripts/map.js         |  4 ++--
 static/scripts/speedometer.js | 44 +++++++++++++++++++++--------------
 static/scripts/websocket.js   |  4 ++--
 templates/index.html          |  8 +++----
 4 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/static/scripts/map.js b/static/scripts/map.js
index 952a095..c9e9598 100644
--- a/static/scripts/map.js
+++ b/static/scripts/map.js
@@ -41,7 +41,7 @@ map.on('load', function () {
             'visibility': 'visible'
         },
         'paint': {
-            'line-color': 'blue',
+            'line-color': 'rgba(30, 139, 195, 1)',
             'line-opacity': 0.75,
             'line-width': 5
         }
@@ -55,7 +55,7 @@ map.on('load', function () {
             'visibility': 'visible'
         },
         'paint': {
-            'line-color': 'red',
+            'line-color': 'rgba(214, 69, 65, 1)',
             'line-opacity': 0.75,
             'line-width': 5
         }
diff --git a/static/scripts/speedometer.js b/static/scripts/speedometer.js
index e20a2c1..1d6eed2 100644
--- a/static/scripts/speedometer.js
+++ b/static/scripts/speedometer.js
@@ -6,7 +6,7 @@ var options1 = {
                 label: 'speedTCP',
                 data: [50,50],
                 backgroundColor: [
-                    'rgba(231, 76, 60, 1)',
+                    'rgba(30, 139, 195, 1)',
                     'rgba(191, 191, 191, 1)'
                 ],
                 borderColor: [
@@ -17,9 +17,9 @@ var options1 = {
             },
             {
                 label: 'speedSERIAl',
-                data: [20, 80],
+                data: [50, 50],
                 backgroundColor: [
-                    'rgba(0, 177, 106, 1)',
+                    'rgba(214, 69, 65, 1)',
                     'rgba(191, 191, 191, 1)'
                 ],
                 borderColor: [
@@ -34,14 +34,13 @@ var options1 = {
         rotation: 1 * Math.PI,
         circumference: 1 * Math.PI,
         legend: {
+            display: false,
+            enabled: false
+        },
+        tooltips: {
+            enabled: false,
             display: false
         },
-        tooltip: {
-            enabled: false
-        },
-        legend: {
-            enabled: false
-        },
         cutoutPercentage: 50
     }
 }
@@ -49,15 +48,24 @@ var options1 = {
 var ctx1 = document.getElementById('speedometer').getContext('2d');
 var mySpeedometer = new Chart(ctx1, options1);
 
-function addSpeedData(/*speedTCP,*/ speedSERIAL){
-    //var speedTCPpercent = (speedTCP/250)*100;
-    var serialSpeedKmh = (speedSERIAL * 3.6)
-    var speedSERIALpercent = (serialSpeedKmh/250)*100
-    console.log("speed ms", speedSERIAL)
-    console.log("speed kmh", serialSpeedKmh)
-    console.log("speed percent", speedSERIALpercent)
-    //mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
+function addSpeedSerial(speedSERIAL){
+    var speedSERIALkmh = (speedSERIAL * 3.6)
+    var speedSERIALpercent = (speedSERIALkmh/250)*100
+    console.log("SERIAL speed ms", speedSERIAL)
+    console.log("SERIAL speed kmh", speedSERIALkmh)
+    console.log("SERIAL speed percent", speedSERIALpercent)
     mySpeedometer.data.datasets[1].data = [speedSERIALpercent, 100-speedSERIALpercent];
-    document.getElementById("speedSERIAL").innerHTML = "Speed Smartphone (km/h): " + serialSpeedKmh.toFixed(3)
+    document.getElementById("speedSERIAL").innerHTML = "Speed Ublox (km/h): " + speedSERIALkmh.toFixed(1)
+    mySpeedometer.update();
+}
+
+function addSpeedTcp(speedTCP){
+    var speedTCPkmh = (speedTCP * 3.6)
+    var speedTCPpercent = (speedTCPkmh/250)*100;
+    console.log("TCP speed ms", speedSERIAL)
+    console.log("TCP speed kmh", serialSpeedKmh)
+    console.log("TCP speed percent", speedSERIALpercent)
+    mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
+    document.getElementById("speedTCP").innerHTML = "Speed Smartphone (km/h): " + speedTCPkmh.toFixed(1)
     mySpeedometer.update();
 }
\ No newline at end of file
diff --git a/static/scripts/websocket.js b/static/scripts/websocket.js
index 683d32f..f864f20 100644
--- a/static/scripts/websocket.js
+++ b/static/scripts/websocket.js
@@ -79,6 +79,7 @@ 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]])
                 }
+                addSpeedTcp(dat.SOURCE_TCP.Speed);
             }
             catch{
                 console.log("no TCP data")
@@ -94,6 +95,7 @@ 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]])
                 }
+                addSpeedSerial(dat.SOURCE_SERIAL.Speed);
             }catch{
                 console.log("no serial data")
             }
@@ -121,8 +123,6 @@ window.addEventListener("load", function(evt) {
                                 // }
                                 // addData(orientation[0] / multiplier)
             */
-            addSpeedData(/*dat.SOURCE_TCP.Speed,*/ dat.SOURCE_SERIAL.Speed);
-
             // addData(dat[0])
         }
 
diff --git a/templates/index.html b/templates/index.html
index 7748486..4acb5ea 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -161,15 +161,15 @@
       <div id="map" style='width: 500px; height: 500px;'></div>
       <div id="state-legend" class="legend">
         <h4>Legende</h4>
-        <div><span style="background-color: red"></span>Ublox</div>
-        <div><span style="background-color: blue"></span>Smartphone</div>
+        <div><span style="background-color: rgba(214, 69, 65, 1)"></span>Ublox</div>
+        <div><span style="background-color: rgba(30, 139, 195, 1)"></span>Smartphone</div>
       </div>
     </div>
   </div>
   <div class="float-child">
     <div class="outer">
-      <label id="speedTCP" style="color: firebrick; font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Smartphone (km/h): </label><br>
-      <label id="speedSERIAL" style="color: forestgreen; font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Ublox (km/h): </label><br>
+      <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>
       <canvas id="speedometer" width="300" height="200"></canvas>
       <p class="speedMin">0</p>
       <p class="speedMax">250</p>