From bc2976c0db7967d71df36db94592a80a87b80d94 Mon Sep 17 00:00:00 2001
From: unknown <frankherko@gmail.com>
Date: Mon, 28 Dec 2020 09:20:00 +0100
Subject: [PATCH] redesign speedometer

---
 static/scripts/speedometer.js | 112 +++++++++++++++++++++++++++++++---
 templates/index.html          |  25 +++++++-
 2 files changed, 125 insertions(+), 12 deletions(-)

diff --git a/static/scripts/speedometer.js b/static/scripts/speedometer.js
index b8de7cd..18d0de1 100644
--- a/static/scripts/speedometer.js
+++ b/static/scripts/speedometer.js
@@ -13,7 +13,7 @@ var options1 = {
                     'rgba(255, 255, 255 ,1)',
                     'rgba(255, 255, 255 ,1)'
                 ],
-                borderWidth: 2
+                borderWidth: 0
             },
             {
                 label: 'speedSERIAl',
@@ -26,7 +26,7 @@ var options1 = {
                     'rgba(255, 255, 255 ,1)',
                     'rgba(255, 255, 255 ,1)'
                 ],
-                borderWidth: 2
+                borderWidth: 0
             }
         ]
     },
@@ -41,19 +41,116 @@ var options1 = {
             enabled: false,
             display: false
         },
-        cutoutPercentage: 50
+        cutoutPercentage: 40
+    }
+}
+var options2 = {
+    type: 'doughnut',
+    data: {
+        datasets: [
+            {
+                label: 'speedMarks',
+                data: [50,50,50,50],
+                backgroundColor: [
+                    'rgba(30, 130, 76, 1)',
+                    'rgba(244, 208, 63, 1)',
+                    'rgba(235, 151, 78, 1)',
+                    'rgba(217, 30, 24, 1)'
+                ],
+                borderColor: [
+                    'rgba(30, 130, 76, 1)',
+                    'rgba(244, 208, 63, 1)',
+                    'rgba(235, 151, 78, 1)',
+                    'rgba(217, 30, 24, 1)'
+                ],
+                borderWidth: 0
+            },
+            {
+                label: 'transparent',
+                data: [100],
+                backgroundColor: [
+                    'rgba(0, 0, 0, 0)'
+                ],
+                borderColor: [
+                    'rgba(0, 0, 0, 0)'
+                ],
+                borderWidth: 2
+            },
+            {
+                label: 'transparent1',
+                data: [100],
+                backgroundColor: [
+                    'rgba(0, 0, 0, 0)'
+                ],
+                borderColor: [
+                    'rgba(0, 0, 0, 0)'
+                ],
+                borderWidth: 2
+            },
+            {
+                label: 'transparent2',
+                data: [100],
+                backgroundColor: [
+                    'rgba(0, 0, 0, 0)'
+                ],
+                borderColor: [
+                    'rgba(0, 0, 0, 0)'
+                ],
+                borderWidth: 2
+            },
+            {
+                label: 'transparent3',
+                data: [100],
+                backgroundColor: [
+                    'rgba(0, 0, 0, 0)'
+                ],
+                borderColor: [
+                    'rgba(0, 0, 0, 0)'
+                ],
+                borderWidth: 2
+            },
+            {
+                label: 'speedMarks1',
+                data: [50,50,50,50],
+                backgroundColor: [
+                    'rgba(30, 130, 76, 1)',
+                    'rgba(244, 208, 63, 1)',
+                    'rgba(235, 151, 78, 1)',
+                    'rgba(217, 30, 24, 1)'
+                ],
+                borderColor: [
+                    'rgba(30, 130, 76, 1)',
+                    'rgba(244, 208, 63, 1)',
+                    'rgba(235, 151, 78, 1)',
+                    'rgba(217, 30, 24, 1)'
+                ],
+                borderWidth: 0
+            },
+        ]
+    },
+    options: {
+        rotation: 1 * Math.PI,
+        circumference: 1 * Math.PI,
+        legend: {
+            display: false,
+            enabled: false
+        },
+        tooltips: {
+            enabled: false,
+            display: false
+        },
+        cutoutPercentage: 65
     }
 }
 
 var ctx1 = document.getElementById('speedometer').getContext('2d');
 var mySpeedometer = new Chart(ctx1, options1);
+var ctx2 = document.getElementById('speedometerSpeeds').getContext('2d');
+var mySpeedometer2 = new Chart(ctx2, options2);
 
 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 Ublox (km/h): " + speedSERIALkmh.toFixed(1)
     mySpeedometer.update();
@@ -62,9 +159,6 @@ function addSpeedSerial(speedSERIAL){
 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();
diff --git a/templates/index.html b/templates/index.html
index e05a410..f8356f8 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -63,13 +63,29 @@
       bottom: 0;
       margin-bottom: -50px;
     }
+    .speed14 {
+      position: absolute;
+      left: 8%;
+      transform: translate(-50%, 0);
+      font-size: 20px;
+      bottom: 0;
+      margin-bottom: 90px;
+    }
     .speedMed {
       position: absolute;
       left: 50%;
       transform: translate(-50%, 0);
-      font-size: 30px;
+      font-size: 20px;
       bottom: 0;
-      margin-bottom: 150px;
+      margin-bottom: 140px;
+    }
+    .speed34 {
+      position: absolute;
+      left: 92%;
+      transform: translate(-50%, 0);
+      font-size: 20px;
+      bottom: 0;
+      margin-bottom: 90px;
     }
     .speedMax {
       position: absolute;
@@ -234,9 +250,12 @@
       <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>
+        <canvas id="speedometer" width="320" height="230"></canvas>
+        <canvas id="speedometerSpeeds" width="320" height="230"></canvas>
         <p class="speedMin">0</p>
+        <p class="speed14">62</p>
         <p class="speedMed">125</p>
+        <p class="speed34">188</p>
         <p class="speedMax">250</p>
       </div>
     </div><br>