From b0b0b487dcee80db75a81760bdc7ea547e936473 Mon Sep 17 00:00:00 2001
From: unknown <frankherko@gmail.com>
Date: Mon, 21 Dec 2020 13:36:52 +0100
Subject: [PATCH 01/11] add speedometer

---
 static/scripts/speedometer.js | 58 ++++++++++++++++++++++
 static/scripts/websocket.js   | 55 ++++++++++-----------
 templates/index.html          | 91 ++++++++++++++++++++++++-----------
 3 files changed, 149 insertions(+), 55 deletions(-)

diff --git a/static/scripts/speedometer.js b/static/scripts/speedometer.js
index e69de29..3d32d1d 100644
--- a/static/scripts/speedometer.js
+++ b/static/scripts/speedometer.js
@@ -0,0 +1,58 @@
+var options1 = {
+    type: 'doughnut',
+    data: {
+        datasets: [
+            {
+                label: 'speedTCP',
+                data: [50,50],
+                backgroundColor: [
+                    'rgba(231, 76, 60, 1)',
+                    'rgba(191, 191, 191, 1)'
+                ],
+                borderColor: [
+                    'rgba(255, 255, 255 ,1)',
+                    'rgba(255, 255, 255 ,1)'
+                ],
+                borderWidth: 2
+            },
+            {
+                label: 'speedSERIAl',
+                data: [20, 80],
+                backgroundColor: [
+                    'rgba(0, 177, 106, 1)',
+                    'rgba(191, 191, 191, 1)'
+                ],
+                borderColor: [
+                    'rgba(255, 255, 255 ,1)',
+                    'rgba(255, 255, 255 ,1)'
+                ],
+                borderWidth: 2
+            }
+        ]
+    },
+    options: {
+        rotation: 1 * Math.PI,
+        circumference: 1 * Math.PI,
+        legend: {
+            display: false
+        },
+        tooltip: {
+            enabled: false
+        },
+        legend: {
+            enabled: false
+        },
+        cutoutPercentage: 50
+    }
+}
+
+var ctx1 = document.getElementById('speedometer').getContext('2d');
+var mySpeedometer = new Chart(ctx1, options1);
+
+function addSpeedData(speedTCP, speedSERIAL){
+    var speedTCPpercent = (speedTCP/250)*100;
+    var speedSERIALpercent = (speedSERIAL/250)*100;
+    mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
+    mySpeedometer.data.datasets[1].data = [speedSERIALpercent, 100-speedSERIALpercent];
+    mySpeedometer.update();
+}
\ No newline at end of file
diff --git a/static/scripts/websocket.js b/static/scripts/websocket.js
index 5cadbfa..452ff04 100644
--- a/static/scripts/websocket.js
+++ b/static/scripts/websocket.js
@@ -32,6 +32,28 @@ window.addEventListener("load", function(evt) {
             ws = null;
             print2("CLOSE");
         }
+
+        if(checkBoxSmartphone.checked && checkBoxUblox.checked){
+            fetch('http://localhost:3011/trackings?serial=true&tcp=true', { method: 'POST', body: 'some test data'})
+                .then(results => results.json())
+                .then(console.log);
+        }
+        else if(!(checkBoxSmartphone.checked) && checkBoxUblox.checked){
+            fetch('http://localhost:3011/trackings?serial=true&tcp=false', { method: 'POST', body: 'some test data'})
+                .then(results => results.json())
+                .then(console.log);
+        }
+        else if(checkBoxSmartphone.checked && !(checkBoxUblox.checked)){
+            fetch('http://localhost:3011/trackings?serial=false&tcp=true', { method: 'POST', body: 'some test data'})
+                .then(results => results.json())
+                .then(console.log);
+        }
+        else if(!(checkBoxSmartphone.checked) && !(checkBoxUblox.checked)){
+            fetch('http://localhost:3011/trackings?serial=false&tcp=false', { method: 'POST', body: 'some test data'})
+                .then(results => results.json())
+                .then(console.log);
+        }
+
         ws.onmessage = function(evt) {
             //print2("RESPONSE: " + evt.data);
             // let dat = JSON.parse(evt.data)["bmi26x gyroscope"]
@@ -44,7 +66,6 @@ window.addEventListener("load", function(evt) {
             //console.log(dat.SOURCE_TCP.Orientation)
             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)`
-                addData(dat.SOURCE_TCP.Orientation[0])
             }
             if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && !(dat.SOURCE_SERIAL.Orientation[1] === 0) && !(dat.SOURCE_SERIAL.Orientation[2] === 0)){
                 document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(${dat.SOURCE_SERIAL.Orientation[2]}deg)`
@@ -82,10 +103,6 @@ window.addEventListener("load", function(evt) {
 
             //updateMap(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0], dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0])
 
-            var long = dat.SOURCE_TCP.Position[1]
-            var lat = dat.SOURCE_TCP.Position[0]
-            console.log(long , lat)
-
             if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
                 updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]);
             }
@@ -95,6 +112,8 @@ window.addEventListener("load", function(evt) {
                 map.panTo([dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]])
             }
 
+            addSpeedData(dat.SOURCE_TCP.Speed, dat.SOURCE_SERIAL.Speed);
+
             // addData(dat[0])
             //document.getElementById("gyroscope").style.transform = `rotateX(${-orientation[0]}deg) rotateY(${orientation[1]}deg) rotateZ(${-orientation[2]}deg) translateZ(50px)`
         }
@@ -121,29 +140,11 @@ window.addEventListener("load", function(evt) {
 
     //------------------------Buttons------------------------------
 
-    document.getElementById("livetracking").onclick = function(evt) {
+    document.getElementById("messung starten").onclick = function(evt) {
         if (ws) {
-            print2("LIVETRACKING");
-            if(checkBoxSmartphone.checked && checkBoxUblox.checked){
-                fetch('http://localhost:3011/trackings?serial=true&tcp=true', { method: 'POST', body: 'some test data'})
-                    .then(results => results.json())
-                    .then(console.log);
-            }
-            else if(!(checkBoxSmartphone.checked) && checkBoxUblox.checked){
-                fetch('http://localhost:3011/trackings?serial=true&tcp=false', { method: 'POST', body: 'some test data'})
-                    .then(results => results.json())
-                    .then(console.log);
-            }
-            else if(checkBoxSmartphone.checked && !(checkBoxUblox.checked)){
-                fetch('http://localhost:3011/trackings?serial=false&tcp=true', { method: 'POST', body: 'some test data'})
-                    .then(results => results.json())
-                    .then(console.log);
-            }
-            else if(!(checkBoxSmartphone.checked) && !(checkBoxUblox.checked)){
-                fetch('http://localhost:3011/trackings?serial=false&tcp=false', { method: 'POST', body: 'some test data'})
-                    .then(results => results.json())
-                    .then(console.log);
-            }
+            fetch('http://localhost:3011/trackings/', { method: 'PATCH', body: 'some data'})
+                .then(results => results.json())
+                .then(console.log);
         }
         return false;
     };
diff --git a/templates/index.html b/templates/index.html
index 18dde89..4b4ca9a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -45,6 +45,34 @@
       padding: 20px;
     }
 
+    .outer {
+      position: relative;
+      width: 300px;
+      height: 200px;
+      margin: 50px;
+    }
+
+    canvas {
+      position: absolute;
+    }
+    .speedMin {
+      position: absolute;
+      left: 0%;
+      transform: translate(-50%, 0);
+      font-size: 30px;
+      bottom: 0;
+      margin-bottom: -50px;
+    }
+    .speedMax {
+      position: absolute;
+      Left: 100%;
+      transform: translate(-50%, 0);
+      font-size: 30px;
+      bottom: 0;
+      margin-bottom: -50px;
+    }
+
+
     .scene {
       width: 200px;
       height: 200px;
@@ -101,27 +129,25 @@
 <body>
 <table style="font-size: small">
   <tr>
-    <td valign="top" width="50%">
-      <p>Click "Open" to create a connection to the server. {{.}}
-      </p>
-      <form>
-        <button id="open">Verbinden</button>
-        <button id="close">Trennen</button>
-        <p style="display: none" >
-          <input id="input" type="text" value="Hello world!">
-          <button id="send">Send</button>
-        </p>
-      </form>
+    <td valign="top" width="100%">
+      <p>"Verbinden" clicken um eine Verbindung mit dem Server aufzubauen. {{.}}</p>
+      <label><input type="checkbox" id="checkbox1" value="smartphone"> TCP</label><br>
+      <label><input type="checkbox" id="checkbox2" value="ublox"> SERIAL</label><br>
+      <button id="open">Verbinden</button>
+      <button id="close">Trennen</button>
+      <p style="display: none" ><input id="input" type="text" value="Hello world!"><button id="send">Send</button></p>
 
-      <label><input type="checkbox" id="checkbox1" value="smartphone"> Smartphone</label><br>
-      <label><input type="checkbox" id="checkbox2" value="ublox"> Ublox</label><br>
-
-      <button id="livetracking">Livetracking</button>
       <button id="messung starten">Messung starten</button>
       <button id="messung beenden">Messung beenden</button>
       <button id="messung speichern">Messung speichern</button>
       <button id="messung verwerfen">Messung verwerfen</button>
-      <button id="messung laden">Messung laden</button></li>
+      <button id="messung laden">Messung laden</button><br>
+      <label id="TCPlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone long: </label>
+      <label id="TCPlat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone lat: </label>
+      <label id="SERIALlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox long: </label>
+      <label id="SERIALlat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox lat: </label>
+      <label id="diffLong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Differenz long: </label>
+      <label id="diffLat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Differenz lat: </label>
     </td>
     <td valign="top" width="100%">
       <div id="output"></div>
@@ -131,12 +157,6 @@
 
 <div class="float-container">
   <div class="float-child">
-    <label id="TCPlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone long: </label>
-    <label id="TCPlat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone lat: </label>
-    <label id="SERIALlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox long: </label>
-    <label id="SERIALlat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox lat: </label><br>
-    <label id="diffLong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Differenz long: </label>
-    <label id="diffLat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Differenz lat: </label>
     <div class="scene" style='width: 500px; height: 500px;'>
       <div id="map" style='width: 500px; height: 500px;'></div>
       <div id="state-legend" class="legend">
@@ -146,6 +166,22 @@
       </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: </label><br>
+      <label id="speedSERIAL" style="color: forestgreen; font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Ublox: </label><br>
+      <canvas id="speedometer" width="300" height="200"></canvas>
+      <p class="speedMin">0</p>
+      <p class="speedMax">250</p>
+    </div>
+
+  </div>
+</div>
+
+<script src="static/scripts/map.js"></script>
+<script src="static/scripts/speedometer.js"></script>
+
+<div class="float-container">
   <div class="float-child">
     <div class="scene">
       <p style="font-size: large">Smartphone</p>
@@ -171,14 +207,13 @@
       </div>
     </div>
   </div>
+  <div class="float-child">
+    <div style="width: 600px; height: 400px;">
+      <canvas id="myChart" width="400" height="200"></canvas>
+    </div>
+  </div>
 </div>
-
 <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-<script src="static/scripts/map.js"></script>
-
-<div style="width: 600px; height: 400px;">
-  <canvas id="myChart" width="400" height="200"></canvas>
-</div>
 <script src="static/scripts/chart.js"></script>
 </body>
 </html>
\ No newline at end of file

From 8a26d8bf6120d845fa56739424e1b0907edcc836 Mon Sep 17 00:00:00 2001
From: unknown <frankherko@gmail.com>
Date: Fri, 25 Dec 2020 19:28:37 +0100
Subject: [PATCH 02/11] ignore if no incoming TCP or serial data

---
 static/scripts/map.js         |  2 +-
 static/scripts/speedometer.js | 12 ++++--
 static/scripts/websocket.js   | 79 +++++++++++++++++++----------------
 templates/index.html          |  5 ++-
 4 files changed, 56 insertions(+), 42 deletions(-)

diff --git a/static/scripts/map.js b/static/scripts/map.js
index 77cca94..c2cafc7 100644
--- a/static/scripts/map.js
+++ b/static/scripts/map.js
@@ -55,7 +55,7 @@ map.on('load', function () {
             'visibility': 'visible'
         },
         'paint': {
-            'line-color': 'yellow',
+            'line-color': 'red',
             'line-opacity': 0.75,
             'line-width': 5
         }
diff --git a/static/scripts/speedometer.js b/static/scripts/speedometer.js
index 3d32d1d..0be1698 100644
--- a/static/scripts/speedometer.js
+++ b/static/scripts/speedometer.js
@@ -49,10 +49,14 @@ 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 speedSERIALpercent = (speedSERIAL/250)*100;
-    mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
+function addSpeedData(/*speedTCP,*/ speedSERIAL){
+    //var speedTCPpercent = (speedTCP/250)*100;
+    var serialSpeedKmh = (speedSERIAL * 0.0036)
+    var speedSERIALpercent = (serialSpeedKmh/250)*100;
+    console.log("speed percent", speedSERIALpercent)
+    console.log("actual speed", speedSERIAL)
+    console.log("speed kmh", serialSpeedKmh)
+    //mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
     mySpeedometer.data.datasets[1].data = [speedSERIALpercent, 100-speedSERIALpercent];
     mySpeedometer.update();
 }
\ No newline at end of file
diff --git a/static/scripts/websocket.js b/static/scripts/websocket.js
index 452ff04..e2d7686 100644
--- a/static/scripts/websocket.js
+++ b/static/scripts/websocket.js
@@ -53,6 +53,8 @@ window.addEventListener("load", function(evt) {
                 .then(results => results.json())
                 .then(console.log);
         }
+        checkBoxSmartphone.disabled = true;
+        checkBoxUblox.disabled = true;
 
         ws.onmessage = function(evt) {
             //print2("RESPONSE: " + evt.data);
@@ -63,32 +65,40 @@ window.addEventListener("load", function(evt) {
             dataSmartphone.push(dat)
             //console.log(evt.data)
             console.log("JSON geparsed onmessage", dat)
-            //console.log(dat.SOURCE_TCP.Orientation)
-            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)`
-            }
-            if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && !(dat.SOURCE_SERIAL.Orientation[1] === 0) && !(dat.SOURCE_SERIAL.Orientation[2] === 0)){
-                document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(${dat.SOURCE_SERIAL.Orientation[2]}deg)`
-            }
 
-            if(!(dat.SOURCE_TCP.Position[0] === 0) && !(dat.SOURCE_TCP.Position[1] === 0)){
-                document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
-                document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0]
-            }
 
-            if(!(dat.SOURCE_SERIAL.Position[0] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 0)){
-                document.getElementById("SERIALlong").innerHTML = "Ublox long: " + dat.SOURCE_SERIAL.Position[1]
-                document.getElementById("SERIALlat").innerHTML = "Ublox lat: " + dat.SOURCE_SERIAL.Position[0]
+            if(checkBoxSmartphone.checked){
+                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)`
+                }
+                if(!(dat.SOURCE_TCP.Position[0] === 0) && !(dat.SOURCE_TCP.Position[1] === 0)){
+                    document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
+                    document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0]
+                }
+                if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
+                    updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]);
+                }
             }
-
-            if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 0)){
-                document.getElementById("diffLong").innerHTML = "Differenz long: " + Math.abs(dat.SOURCE_TCP.Position[1] - dat.SOURCE_SERIAL.Position[1])
+            if(checkBoxUblox.checked){
+                if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && !(dat.SOURCE_SERIAL.Orientation[1] === 0) && !(dat.SOURCE_SERIAL.Orientation[2] === 0)){
+                    document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(${dat.SOURCE_SERIAL.Orientation[2]}deg)`
+                }
+                if(!(dat.SOURCE_SERIAL.Position[0] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 0)){
+                    document.getElementById("SERIALlong").innerHTML = "Ublox long: " + dat.SOURCE_SERIAL.Position[1]
+                    document.getElementById("SERIALlat").innerHTML = "Ublox lat: " + dat.SOURCE_SERIAL.Position[0]
+                }
+                if(!(dat.SOURCE_SERIAL.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
+                    updateMapSERIAL(dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]);
+                }
             }
-
-            if(!(dat.SOURCE_TCP.Position[0] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
-                document.getElementById("diffLat").innerHTML = "Differenz lat: " + Math.abs(dat.SOURCE_TCP.Position[0] - dat.SOURCE_SERIAL.Position[0])
+            if(checkBoxSmartphone.checked && checkBoxUblox.checked){
+                if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 0)){
+                    document.getElementById("diffLong").innerHTML = "Differenz long: " + Math.abs(dat.SOURCE_TCP.Position[1] - dat.SOURCE_SERIAL.Position[1])
+                }
+                if(!(dat.SOURCE_TCP.Position[0] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
+                    document.getElementById("diffLat").innerHTML = "Differenz lat: " + Math.abs(dat.SOURCE_TCP.Position[0] - dat.SOURCE_SERIAL.Position[0])
+                }
             }
-
             /*
                                 console.log(dat)
                                 orientation[0] += dat[0] * multiplier
@@ -100,23 +110,11 @@ window.addEventListener("load", function(evt) {
                                 // }
                                 // addData(orientation[0] / multiplier)
             */
-
-            //updateMap(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0], dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0])
-
-            if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
-                updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]);
-            }
-
-            if(!(dat.SOURCE_SERIAL.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
-                updateMapSERIAL(dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]);
-                map.panTo([dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]])
-            }
-
-            addSpeedData(dat.SOURCE_TCP.Speed, dat.SOURCE_SERIAL.Speed);
+            addSpeedData(/*dat.SOURCE_TCP.Speed,*/ dat.SOURCE_SERIAL.Speed);
 
             // addData(dat[0])
-            //document.getElementById("gyroscope").style.transform = `rotateX(${-orientation[0]}deg) rotateY(${orientation[1]}deg) rotateZ(${-orientation[2]}deg) translateZ(50px)`
         }
+
         ws.onerror = function(evt) {
             print("ERROR: " + evt.data);
         }
@@ -148,4 +146,15 @@ window.addEventListener("load", function(evt) {
         }
         return false;
     };
+
+    document.getElementById("alles beenden").onclick = function(evt) {
+        if (ws) {
+            fetch('http://localhost:3011/trackings/', { method: 'DELETE', body: 'some data'})
+                .then(results => results.json())
+                .then(console.log);
+            checkBoxSmartphone.disabled = false;
+            checkBoxUblox.disabled = false;
+        }
+        return false;
+    };
 });
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 4b4ca9a..4da1492 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -141,7 +141,8 @@
       <button id="messung beenden">Messung beenden</button>
       <button id="messung speichern">Messung speichern</button>
       <button id="messung verwerfen">Messung verwerfen</button>
-      <button id="messung laden">Messung laden</button><br>
+      <button id="messung laden">Messung laden</button>
+      <button id="alles beenden">Alles Beenden</button><br>
       <label id="TCPlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone long: </label>
       <label id="TCPlat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone lat: </label>
       <label id="SERIALlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox long: </label>
@@ -161,7 +162,7 @@
       <div id="map" style='width: 500px; height: 500px;'></div>
       <div id="state-legend" class="legend">
         <h4>Legende</h4>
-        <div><span style="background-color: yellow"></span>Ublox</div>
+        <div><span style="background-color: red"></span>Ublox</div>
         <div><span style="background-color: blue"></span>Smartphone</div>
       </div>
     </div>

From a64aa0db7c4dd976a87729655402b2ba94176798 Mon Sep 17 00:00:00 2001
From: unknown <frankherko@gmail.com>
Date: Fri, 25 Dec 2020 19:48:23 +0100
Subject: [PATCH 03/11] make map follow one sensor if other is not connected

---
 static/scripts/map.js       |  2 +-
 static/scripts/websocket.js | 28 ++++++++++++++++++----------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/static/scripts/map.js b/static/scripts/map.js
index c2cafc7..952a095 100644
--- a/static/scripts/map.js
+++ b/static/scripts/map.js
@@ -93,5 +93,5 @@ function updateMapTCP (TCPlong, TCPlat) {
 function updateMapSERIAL (SERIALlong, SERIALlat) {
     emptySERIAL.features[0].geometry.coordinates.push([SERIALlong, SERIALlat]);
     map.getSource('routeSERIAL').setData(emptySERIAL);
-    map.panTo([SERIALlong, SERIALlat]);
+    //map.panTo([SERIALlong, SERIALlat]);
 }
diff --git a/static/scripts/websocket.js b/static/scripts/websocket.js
index e2d7686..0eea593 100644
--- a/static/scripts/websocket.js
+++ b/static/scripts/websocket.js
@@ -67,31 +67,39 @@ window.addEventListener("load", function(evt) {
             console.log("JSON geparsed onmessage", dat)
 
 
-            if(checkBoxSmartphone.checked){
+            if(checkBoxSmartphone.checked && !checkBoxUblox.checked){
                 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)`
                 }
-                if(!(dat.SOURCE_TCP.Position[0] === 0) && !(dat.SOURCE_TCP.Position[1] === 0)){
+                if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
                     document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
                     document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0]
-                }
-                if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
-                    updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]);
+                    updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0])
+                    map.panTo([dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]])
                 }
             }
-            if(checkBoxUblox.checked){
+            if(checkBoxUblox.checked && !checkBoxSmartphone.checked){
                 if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && !(dat.SOURCE_SERIAL.Orientation[1] === 0) && !(dat.SOURCE_SERIAL.Orientation[2] === 0)){
                     document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(${dat.SOURCE_SERIAL.Orientation[2]}deg)`
                 }
-                if(!(dat.SOURCE_SERIAL.Position[0] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 0)){
+                if(!(dat.SOURCE_SERIAL.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
                     document.getElementById("SERIALlong").innerHTML = "Ublox long: " + dat.SOURCE_SERIAL.Position[1]
                     document.getElementById("SERIALlat").innerHTML = "Ublox lat: " + dat.SOURCE_SERIAL.Position[0]
-                }
-                if(!(dat.SOURCE_SERIAL.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
-                    updateMapSERIAL(dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]);
+                    updateMapSERIAL(dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0])
+                    map.panTo([dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]])
                 }
             }
             if(checkBoxSmartphone.checked && checkBoxUblox.checked){
+                if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
+                    document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
+                    document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0]
+                }
+                if(!(dat.SOURCE_SERIAL.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
+                    document.getElementById("SERIALlong").innerHTML = "Ublox long: " + dat.SOURCE_SERIAL.Position[1]
+                    document.getElementById("SERIALlat").innerHTML = "Ublox lat: " + dat.SOURCE_SERIAL.Position[0]
+                    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_TCP.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 0)){
                     document.getElementById("diffLong").innerHTML = "Differenz long: " + Math.abs(dat.SOURCE_TCP.Position[1] - dat.SOURCE_SERIAL.Position[1])
                 }

From fffda650bb53fb6c82e73256e11871c86e7ce9d2 Mon Sep 17 00:00:00 2001
From: unknown <frankherko@gmail.com>
Date: Fri, 25 Dec 2020 22:19:37 +0100
Subject: [PATCH 04/11] convert speed to kmh and display it in browser

---
 static/scripts/speedometer.js | 9 +++++----
 static/scripts/websocket.js   | 3 ++-
 templates/index.html          | 4 ++--
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/static/scripts/speedometer.js b/static/scripts/speedometer.js
index 0be1698..e20a2c1 100644
--- a/static/scripts/speedometer.js
+++ b/static/scripts/speedometer.js
@@ -51,12 +51,13 @@ var mySpeedometer = new Chart(ctx1, options1);
 
 function addSpeedData(/*speedTCP,*/ speedSERIAL){
     //var speedTCPpercent = (speedTCP/250)*100;
-    var serialSpeedKmh = (speedSERIAL * 0.0036)
-    var speedSERIALpercent = (serialSpeedKmh/250)*100;
-    console.log("speed percent", speedSERIALpercent)
-    console.log("actual speed", speedSERIAL)
+    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];
     mySpeedometer.data.datasets[1].data = [speedSERIALpercent, 100-speedSERIALpercent];
+    document.getElementById("speedSERIAL").innerHTML = "Speed Smartphone (km/h): " + serialSpeedKmh.toFixed(3)
     mySpeedometer.update();
 }
\ No newline at end of file
diff --git a/static/scripts/websocket.js b/static/scripts/websocket.js
index 0eea593..83fab8e 100644
--- a/static/scripts/websocket.js
+++ b/static/scripts/websocket.js
@@ -79,7 +79,7 @@ window.addEventListener("load", function(evt) {
                 }
             }
             if(checkBoxUblox.checked && !checkBoxSmartphone.checked){
-                if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && !(dat.SOURCE_SERIAL.Orientation[1] === 0) && !(dat.SOURCE_SERIAL.Orientation[2] === 0)){
+                if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && /*!(dat.SOURCE_SERIAL.Orientation[1] === 0) &&*/ !(dat.SOURCE_SERIAL.Orientation[2] === 0)){
                     document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(${dat.SOURCE_SERIAL.Orientation[2]}deg)`
                 }
                 if(!(dat.SOURCE_SERIAL.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
@@ -162,6 +162,7 @@ window.addEventListener("load", function(evt) {
                 .then(console.log);
             checkBoxSmartphone.disabled = false;
             checkBoxUblox.disabled = false;
+            ws.close();
         }
         return false;
     };
diff --git a/templates/index.html b/templates/index.html
index 4da1492..5945da9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -169,8 +169,8 @@
   </div>
   <div class="float-child">
     <div class="outer">
-      <label id="speedTCP" style="color: firebrick; font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Smartphone: </label><br>
-      <label id="speedSERIAL" style="color: forestgreen; font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Ublox: </label><br>
+      <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>
       <canvas id="speedometer" width="300" height="200"></canvas>
       <p class="speedMin">0</p>
       <p class="speedMax">250</p>

From 1bde599b4642d5f95303320c7e287d71ad0e10bd Mon Sep 17 00:00:00 2001
From: unknown <frankherko@gmail.com>
Date: Sun, 27 Dec 2020 02:20:18 +0100
Subject: [PATCH 05/11] catch errors if there is no sensor data

---
 static/scripts/websocket.js | 59 ++++++++++++++++++++++---------------
 1 file changed, 36 insertions(+), 23 deletions(-)

diff --git a/static/scripts/websocket.js b/static/scripts/websocket.js
index 83fab8e..6ebadb3 100644
--- a/static/scripts/websocket.js
+++ b/static/scripts/websocket.js
@@ -68,15 +68,19 @@ window.addEventListener("load", function(evt) {
 
 
             if(checkBoxSmartphone.checked && !checkBoxUblox.checked){
-                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)`
-                }
-                if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
-                    document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
-                    document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0]
-                    updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0])
-                    map.panTo([dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]])
+                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)`
+                    }
+                    if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
+                        document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
+                        document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0]
+                        updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0])
+                        map.panTo([dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]])
+                    }
                 }
+                catch{}
+
             }
             if(checkBoxUblox.checked && !checkBoxSmartphone.checked){
                 if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && /*!(dat.SOURCE_SERIAL.Orientation[1] === 0) &&*/ !(dat.SOURCE_SERIAL.Orientation[2] === 0)){
@@ -90,22 +94,31 @@ window.addEventListener("load", function(evt) {
                 }
             }
             if(checkBoxSmartphone.checked && checkBoxUblox.checked){
-                if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
-                    document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
-                    document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0]
-                }
-                if(!(dat.SOURCE_SERIAL.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
-                    document.getElementById("SERIALlong").innerHTML = "Ublox long: " + dat.SOURCE_SERIAL.Position[1]
-                    document.getElementById("SERIALlat").innerHTML = "Ublox lat: " + dat.SOURCE_SERIAL.Position[0]
-                    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_TCP.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 0)){
-                    document.getElementById("diffLong").innerHTML = "Differenz long: " + Math.abs(dat.SOURCE_TCP.Position[1] - dat.SOURCE_SERIAL.Position[1])
-                }
-                if(!(dat.SOURCE_TCP.Position[0] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
-                    document.getElementById("diffLat").innerHTML = "Differenz lat: " + Math.abs(dat.SOURCE_TCP.Position[0] - dat.SOURCE_SERIAL.Position[0])
+                try{
+                    if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
+                        document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
+                        document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0]
+                    }
+                }catch{}
+
+                try{
+                    if(!(dat.SOURCE_SERIAL.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
+                        document.getElementById("SERIALlong").innerHTML = "Ublox long: " + dat.SOURCE_SERIAL.Position[1]
+                        document.getElementById("SERIALlat").innerHTML = "Ublox lat: " + dat.SOURCE_SERIAL.Position[0]
+                        updateMapSERIAL(dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0])
+                        map.panTo([dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]])
+                    }
+                }catch{}
+
+                try{
+                    if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 0)){
+                        document.getElementById("diffLong").innerHTML = "Differenz long: " + Math.abs(dat.SOURCE_TCP.Position[1] - dat.SOURCE_SERIAL.Position[1])
+                    }
+                    if(!(dat.SOURCE_TCP.Position[0] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
+                        document.getElementById("diffLat").innerHTML = "Differenz lat: " + Math.abs(dat.SOURCE_TCP.Position[0] - dat.SOURCE_SERIAL.Position[0])
+                    }
                 }
+                catch{}
             }
             /*
                                 console.log(dat)

From 5fb76a76ca88b5bda13aadd7c640f71796736528 Mon Sep 17 00:00:00 2001
From: unknown <frankherko@gmail.com>
Date: Sun, 27 Dec 2020 14:57:17 +0100
Subject: [PATCH 06/11] improves error handling when there is no sensor data

---
 static/scripts/websocket.js | 79 +++++++++++++++++++------------------
 templates/index.html        |  3 +-
 2 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/static/scripts/websocket.js b/static/scripts/websocket.js
index 6ebadb3..683d32f 100644
--- a/static/scripts/websocket.js
+++ b/static/scripts/websocket.js
@@ -53,6 +53,9 @@ window.addEventListener("load", function(evt) {
                 .then(results => results.json())
                 .then(console.log);
         }
+
+        document.getElementById("tracking state").innerHTML = "Tracking state: LIVE"
+
         checkBoxSmartphone.disabled = true;
         checkBoxUblox.disabled = true;
 
@@ -66,23 +69,22 @@ window.addEventListener("load", function(evt) {
             //console.log(evt.data)
             console.log("JSON geparsed onmessage", dat)
 
-
-            if(checkBoxSmartphone.checked && !checkBoxUblox.checked){
-                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)`
-                    }
-                    if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
-                        document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
-                        document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0]
-                        updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0])
-                        map.panTo([dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]])
-                    }
+            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)`
+                }
+                if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
+                    document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
+                    document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0]
+                    updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0])
+                    map.panTo([dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]])
                 }
-                catch{}
-
             }
-            if(checkBoxUblox.checked && !checkBoxSmartphone.checked){
+            catch{
+                console.log("no TCP data")
+            }
+
+            try{
                 if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && /*!(dat.SOURCE_SERIAL.Orientation[1] === 0) &&*/ !(dat.SOURCE_SERIAL.Orientation[2] === 0)){
                     document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(${dat.SOURCE_SERIAL.Orientation[2]}deg)`
                 }
@@ -92,34 +94,22 @@ 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]])
                 }
+            }catch{
+                console.log("no serial data")
             }
-            if(checkBoxSmartphone.checked && checkBoxUblox.checked){
-                try{
-                    if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
-                        document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
-                        document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0]
-                    }
-                }catch{}
 
-                try{
-                    if(!(dat.SOURCE_SERIAL.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
-                        document.getElementById("SERIALlong").innerHTML = "Ublox long: " + dat.SOURCE_SERIAL.Position[1]
-                        document.getElementById("SERIALlat").innerHTML = "Ublox lat: " + dat.SOURCE_SERIAL.Position[0]
-                        updateMapSERIAL(dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0])
-                        map.panTo([dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]])
-                    }
-                }catch{}
-
-                try{
-                    if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 0)){
-                        document.getElementById("diffLong").innerHTML = "Differenz long: " + Math.abs(dat.SOURCE_TCP.Position[1] - dat.SOURCE_SERIAL.Position[1])
-                    }
-                    if(!(dat.SOURCE_TCP.Position[0] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
-                        document.getElementById("diffLat").innerHTML = "Differenz lat: " + Math.abs(dat.SOURCE_TCP.Position[0] - dat.SOURCE_SERIAL.Position[0])
-                    }
+            try{
+                if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 0)){
+                    document.getElementById("diffLong").innerHTML = "Differenz long: " + Math.abs(dat.SOURCE_TCP.Position[1] - dat.SOURCE_SERIAL.Position[1])
+                }
+                if(!(dat.SOURCE_TCP.Position[0] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
+                    document.getElementById("diffLat").innerHTML = "Differenz lat: " + Math.abs(dat.SOURCE_TCP.Position[0] - dat.SOURCE_SERIAL.Position[0])
                 }
-                catch{}
             }
+            catch{
+                console.log("no data to compare")
+            }
+
             /*
                                 console.log(dat)
                                 orientation[0] += dat[0] * multiplier
@@ -164,6 +154,17 @@ window.addEventListener("load", function(evt) {
             fetch('http://localhost:3011/trackings/', { method: 'PATCH', body: 'some data'})
                 .then(results => results.json())
                 .then(console.log);
+            document.getElementById("tracking state").innerHTML = "Tracking state: RECORD"
+        }
+        return false;
+    };
+
+    document.getElementById("messung beenden").onclick = function(evt) {
+        if (ws) {
+            fetch('http://localhost:3011/trackings/', { method: 'PUT', body: 'some data'})
+                .then(results => results.json())
+                .then(console.log);
+            document.getElementById("tracking state").innerHTML = "Tracking state: LIVE"
         }
         return false;
     };
diff --git a/templates/index.html b/templates/index.html
index 5945da9..7748486 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -139,10 +139,9 @@
 
       <button id="messung starten">Messung starten</button>
       <button id="messung beenden">Messung beenden</button>
-      <button id="messung speichern">Messung speichern</button>
-      <button id="messung verwerfen">Messung verwerfen</button>
       <button id="messung laden">Messung laden</button>
       <button id="alles beenden">Alles Beenden</button><br>
+      <label id="tracking state" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Tracking state: </label><br>
       <label id="TCPlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone long: </label>
       <label id="TCPlat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone lat: </label>
       <label id="SERIALlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox long: </label>

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 07/11] 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>

From 292d93622ffd0fa4d3c60e117e31277dc8d6e5df Mon Sep 17 00:00:00 2001
From: unknown <frankherko@gmail.com>
Date: Sun, 27 Dec 2020 18:19:13 +0100
Subject: [PATCH 08/11] adds compass to the page

---
 static/scripts/compass.js | 80 +++++++++++++++++++++++++++++++++++++++
 templates/index.html      | 45 +++++++++++++++++++++-
 2 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 static/scripts/compass.js

diff --git a/static/scripts/compass.js b/static/scripts/compass.js
new file mode 100644
index 0000000..eaf7d00
--- /dev/null
+++ b/static/scripts/compass.js
@@ -0,0 +1,80 @@
+var options2 = {
+    type: 'doughnut',
+    data: {
+        datasets: [
+            {
+                label: 'compassTCP',
+                data: [50,50,50,50],
+                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)'
+                ],
+                borderWidth: 4
+            },
+            {
+                label: 'compassSERIAL',
+                data: [50,50,50,50],
+                backgroundColor: [
+                    'rgba(191, 191, 191, 1)',
+                    'rgba(191, 191, 191, 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)'
+                ],
+                borderWidth: 4
+            }
+        ]
+    },
+    options: {
+        rotation: 2 * Math.PI,
+        circumference: 2 * Math.PI,
+        legend: {
+            display: false,
+            enabled: false
+        },
+        tooltips: {
+            enabled: false,
+            display: false
+        },
+        cutoutPercentage: 50
+    }
+}
+
+var ctx2 = document.getElementById('compass').getContext('2d');
+var myCompass = 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();
+}
+
+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 4acb5ea..68d750b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -72,6 +72,39 @@
       margin-bottom: -50px;
     }
 
+    .compassNorth {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, 0);
+      font-size: 30px;
+      bottom: 70%;
+      margin-bottom: 50px;
+    }
+    .compassSouth {
+      position: absolute;
+      Left: 50%;
+      transform: translate(-50%, 0);
+      font-size: 30px;
+      bottom: -70%;
+      margin-bottom: 50px;
+    }
+    .compassWest {
+      position: absolute;
+      left: 0%;
+      transform: translate(-50%, 0);
+      font-size: 30px;
+      bottom: 50%;
+      margin-bottom: -50px;
+    }
+    .compassEast {
+      position: absolute;
+      Left: 100%;
+      transform: translate(-50%, 0);
+      font-size: 30px;
+      bottom: 50%;
+      margin-bottom: -50px;
+    }
+
 
     .scene {
       width: 200px;
@@ -173,13 +206,23 @@
       <canvas id="speedometer" width="300" height="200"></canvas>
       <p class="speedMin">0</p>
       <p class="speedMax">250</p>
+    </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>
+      <label id="compassSERIAL" style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox </label><br>
+      <canvas id="compass" width="300" height="200"></canvas>
+      <p class="compassNorth">N</p>
+      <p class="compassEast">E</p>
+      <p class="compassWest">W</p>
+      <p class="compassSouth">S</p>
     </div>
-
   </div>
+
 </div>
 
 <script src="static/scripts/map.js"></script>
 <script src="static/scripts/speedometer.js"></script>
+<script src="static/scripts/compass.js"></script>
 
 <div class="float-container">
   <div class="float-child">

From c0ae64b035163dc60a5bebdade03229b3641898e Mon Sep 17 00:00:00 2001
From: unknown <frankherko@gmail.com>
Date: Mon, 28 Dec 2020 06:53:49 +0100
Subject: [PATCH 09/11] add compass

---
 static/scripts/chart.js       |  6 ++---
 static/scripts/compass.js     | 25 +++---------------
 static/scripts/speedometer.js |  8 +++---
 static/scripts/websocket.js   | 11 +++++++-
 templates/index.html          | 48 +++++++++++++++++------------------
 5 files changed, 45 insertions(+), 53 deletions(-)

diff --git a/static/scripts/chart.js b/static/scripts/chart.js
index f9220bb..594b6d9 100644
--- a/static/scripts/chart.js
+++ b/static/scripts/chart.js
@@ -18,8 +18,8 @@ var myChart = new Chart(ctx, {
             yAxes: [{
                 ticks: {
                     // beginAtZero: true
-                    min: -100,
-                    max: 100
+                    min: -2000,
+                    max: 2000
                 }
             }]
         },
@@ -30,7 +30,7 @@ var myChart = new Chart(ctx, {
 });
 myChart.data.labels.fill("", 0, GRAPH_RES);
 myChart.data.datasets.forEach((dataset) => dataset.data.fill(0, 0, GRAPH_RES))
-function addData(data) {
+function addSerialAltData(data) {
     myChart.data.labels.push("");
     myChart.data.datasets.forEach((dataset) => {
         dataset.data.push(data);
diff --git a/static/scripts/compass.js b/static/scripts/compass.js
index eaf7d00..c411087 100644
--- a/static/scripts/compass.js
+++ b/static/scripts/compass.js
@@ -56,25 +56,8 @@ var options2 = {
 var ctx2 = document.getElementById('compass').getContext('2d');
 var myCompass = 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();
-}
 
-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();
-}*/
+function addCompassSerial(deg){
+    myCompass.data.datasets[1].data = [0,0,0,0];
+    myCompass.update();
+}
diff --git a/static/scripts/speedometer.js b/static/scripts/speedometer.js
index 1d6eed2..b8de7cd 100644
--- a/static/scripts/speedometer.js
+++ b/static/scripts/speedometer.js
@@ -51,9 +51,9 @@ var mySpeedometer = new Chart(ctx1, options1);
 function addSpeedSerial(speedSERIAL){
     var speedSERIALkmh = (speedSERIAL * 3.6)
     var speedSERIALpercent = (speedSERIALkmh/250)*100
-    console.log("SERIAL speed ms", speedSERIAL)
+    /*console.log("SERIAL speed ms", speedSERIAL)
     console.log("SERIAL speed kmh", speedSERIALkmh)
-    console.log("SERIAL speed percent", speedSERIALpercent)
+    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 +62,9 @@ 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 ms", speedSERIAL)
     console.log("TCP speed kmh", serialSpeedKmh)
-    console.log("TCP speed percent", speedSERIALpercent)
+    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/static/scripts/websocket.js b/static/scripts/websocket.js
index f864f20..849d51a 100644
--- a/static/scripts/websocket.js
+++ b/static/scripts/websocket.js
@@ -69,6 +69,11 @@ 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)`
@@ -112,6 +117,11 @@ window.addEventListener("load", function(evt) {
                 console.log("no data to compare")
             }
 
+            if(!(dat.SOURCE_SERIAL.Position[2] === 0)){
+                addSerialAltData(dat.SOURCE_SERIAL.Position[2])
+            }
+
+
             /*
                                 console.log(dat)
                                 orientation[0] += dat[0] * multiplier
@@ -123,7 +133,6 @@ window.addEventListener("load", function(evt) {
                                 // }
                                 // addData(orientation[0] / multiplier)
             */
-            // addData(dat[0])
         }
 
         ws.onerror = function(evt) {
diff --git a/templates/index.html b/templates/index.html
index 68d750b..816fdd6 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -198,6 +198,28 @@
         <div><span style="background-color: rgba(30, 139, 195, 1)"></span>Smartphone</div>
       </div>
     </div>
+    <div class="scene">
+      <p style="font-size: large">Smartphone</p>
+      <div id="gyroscopeTCP" class="cube">
+        <div class="cube__face cube__face--front">front</div>
+        <div class="cube__face cube__face--back">back</div>
+        <div class="cube__face cube__face--right">right</div>
+        <div class="cube__face cube__face--left">left</div>
+        <div class="cube__face cube__face--top">top</div>
+        <div class="cube__face cube__face--bottom">bottom</div>
+      </div>
+    </div>
+    <div class="scene">
+      <p style="font-size: large">Ublox</p>
+      <div id="gyroscopeSERIAL" class="cube">
+        <div class="cube__face cube__face--front">front</div>
+        <div class="cube__face cube__face--back">back</div>
+        <div class="cube__face cube__face--right">right</div>
+        <div class="cube__face cube__face--left">left</div>
+        <div class="cube__face cube__face--top">top</div>
+        <div class="cube__face cube__face--bottom">bottom</div>
+      </div>
+    </div>
   </div>
   <div class="float-child">
     <div class="outer">
@@ -217,7 +239,9 @@
       <p class="compassSouth">S</p>
     </div>
   </div>
+  <div class="float-child">
 
+  </div>
 </div>
 
 <script src="static/scripts/map.js"></script>
@@ -226,31 +250,7 @@
 
 <div class="float-container">
   <div class="float-child">
-    <div class="scene">
-      <p style="font-size: large">Smartphone</p>
-      <div id="gyroscopeTCP" class="cube">
-        <div class="cube__face cube__face--front">front</div>
-        <div class="cube__face cube__face--back">back</div>
-        <div class="cube__face cube__face--right">right</div>
-        <div class="cube__face cube__face--left">left</div>
-        <div class="cube__face cube__face--top">top</div>
-        <div class="cube__face cube__face--bottom">bottom</div>
-      </div>
-    </div>
 
-    <div class="scene">
-      <p style="font-size: large">Ublox</p>
-      <div id="gyroscopeSERIAL" class="cube">
-        <div class="cube__face cube__face--front">front</div>
-        <div class="cube__face cube__face--back">back</div>
-        <div class="cube__face cube__face--right">right</div>
-        <div class="cube__face cube__face--left">left</div>
-        <div class="cube__face cube__face--top">top</div>
-        <div class="cube__face cube__face--bottom">bottom</div>
-      </div>
-    </div>
-  </div>
-  <div class="float-child">
     <div style="width: 600px; height: 400px;">
       <canvas id="myChart" width="400" height="200"></canvas>
     </div>

From 2a9bb7f8882d594325e75ddb1a8473ba6400ea4e Mon Sep 17 00:00:00 2001
From: unknown <frankherko@gmail.com>
Date: Mon, 28 Dec 2020 08:26:23 +0100
Subject: [PATCH 10/11] add compass functionality

---
 static/scripts/compass.js   | 33 +++++++++++++++++++++------------
 static/scripts/websocket.js | 21 ++++++++++++++-------
 templates/index.html        | 17 ++++++++++++++---
 3 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/static/scripts/compass.js b/static/scripts/compass.js
index c411087..329f354 100644
--- a/static/scripts/compass.js
+++ b/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();
 }
diff --git a/static/scripts/websocket.js b/static/scripts/websocket.js
index 849d51a..8f1575c 100644
--- a/static/scripts/websocket.js
+++ b/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,7 +79,13 @@ 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);
+                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]])
                 }
-                addSpeedSerial(dat.SOURCE_SERIAL.Speed);
+                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")
             }
diff --git a/templates/index.html b/templates/index.html
index 816fdd6..e05a410 100644
--- a/templates/index.html
+++ b/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>
-      <canvas id="speedometer" width="300" height="200"></canvas>
-      <p class="speedMin">0</p>
-      <p class="speedMax">250</p>
+      <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>

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 11/11] 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>