ignore if no incoming TCP or serial data

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
         }

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){
+function addSpeedData(/*speedTCP,*/ speedSERIAL){
-    var speedTCPpercent = (speedTCP/250)*100;
+    //var speedTCPpercent = (speedTCP/250)*100;
-    var speedSERIALpercent = (speedSERIAL/250)*100;
+    var serialSpeedKmh = (speedSERIAL * 0.0036)
-    mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
+    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();
 }

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(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_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_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
+                    updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]);
+                }
+            }
+            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(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)
             */
-
+            addSpeedData(/*dat.SOURCE_TCP.Speed,*/ dat.SOURCE_SERIAL.Speed);
-            //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);
 
             // 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;
+    };
 });

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>