implements green and red lamp tolerance functionality

static/scripts/accuracy.js

@@ -2,15 +2,15 @@ var ctx = document.getElementById("accuracy").getContext('2d');
 var barChart = new Chart(ctx, {
     type: 'horizontalBar',
     data: {
-        labels: ["Horizontal Acc.", "Vertical Acc."],
+        labels: ["Meters"],
         datasets: [{
-            label: 'Ublox',
+            label: 'Ublox Horizontal acc.',
             data: [0, 0],
             backgroundColor: "rgba(214, 69, 65, 1)"
         }, {
-            label: 'Smartphone',
+            label: 'Dist. Ublox-Smartphone',
             data: [0, 0],
-            backgroundColor: "rgba(30, 139, 195, 1)"
+            backgroundColor: "rgba(30, 139, 0, 1)"
         }]
     },
     options: {
@@ -33,14 +33,19 @@ var barChart = new Chart(ctx, {
     }
 });
 
-function addSerialAccuracy(hacc, vacc){
+function addSerialAccuracy(hacc){
-    barChart.data.datasets[0].data = [hacc, vacc];
+    barChart.data.datasets[0].data = [hacc];
     barChart.update();
 }
 
-function addTCPAccuracy(hacc, vacc){
+/*function addTCPAccuracy(hacc, vacc){
     barChart.data.datasets[1].data = [hacc, vacc];
     barChart.update();
+}*/
+
+function addDistanceToBarChart(dist){
+    barChart.data.datasets[1].data = [dist];
+    barChart.update();
 }
 //Farbe der Lampen ändern
 // AN: document.getElementById("greenlamp").style.backgroundColor = 'rgba(0, 230, 64, 1)'

static/scripts/websocket.js

@@ -1,6 +1,8 @@
 const GRAPH_RES = 100;
 var dataSmartphone = [];
-
+var tempTCPCoords = null;
+var tempSERIALCoords = null;
+var tempDist = 0;
 
 window.addEventListener("load", function(evt) {
     var output = document.getElementById("output");
@@ -50,6 +52,7 @@ window.addEventListener("load", function(evt) {
                 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]])
+                tempTCPCoords = [dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]]
             }
             if(!(dat.SOURCE_TCP.Speed === 0)){
                 addSpeedTcp(dat.SOURCE_TCP.Speed);
@@ -75,6 +78,45 @@ window.addEventListener("load", function(evt) {
                 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]])
+                tempSERIALCoords = [dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]]
+                if (!(tempTCPCoords == null)) {
+                    console.log("tcp: " + tempTCPCoords)
+                    console.log("serial: " + tempSERIALCoords)
+
+                    var long1 = tempTCPCoords[0]
+                    var lat1 = tempTCPCoords[1]
+                    var long2 = tempSERIALCoords[0]
+                    var lat2 = tempSERIALCoords[1]
+
+                    var earthRadiusM = 6371000
+
+                    var phi1 = lat1 * Math.PI / 180
+                    var phi2 = lat2 * Math.PI / 180
+
+                    var dlat = (lat2-lat1) * Math.PI / 180
+                    var dlong = (long2 - long1) * Math.PI / 180
+
+                    var a = Math.sin(dlat/2) * Math.sin(dlat/2) +
+                        Math.cos(phi1) * Math.cos(phi2) *
+                        Math.sin(dlong/2) * Math.sin(dlong/2)
+                    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))
+                    tempDist = (earthRadiusM * c).toFixed(3)
+                    console.log("Dist: " + tempDist)
+                    addDistanceToBarChart(tempDist)
+                    document.getElementById("distance").innerHTML = "Distance: " + tempDist
+
+                    if(tempDist <= dat.SOURCE_SERIAL.HAcc){
+                        document.getElementById("greenlamp").style.backgroundColor = 'rgba(0, 230, 64, 1)'
+                        document.getElementById("redlamp").style.backgroundColor = 'rgba(139, 0, 0, 1)'
+                    }
+                    else{
+                        document.getElementById("greenlamp").style.backgroundColor = 'rgba(0, 100, 0, 1)'
+                        document.getElementById("redlamp").style.backgroundColor = 'rgba(242, 38, 19, 1)'
+                    }
+
+                }
+                tempTCPCoords = null
+
             }
             if(!(dat.SOURCE_SERIAL.Speed === 0)){
                 addSpeedSerial(dat.SOURCE_SERIAL.Speed);
@@ -87,28 +129,32 @@ window.addEventListener("load", function(evt) {
             // console.log("no serial data")
         }
 
+
+
         try{
             if(!(dat.SOURCE_SERIAL.HAcc === 0) && !(dat.SOURCE_SERIAL.VAcc === 0)){
-                addSerialAccuracy(dat.SOURCE_SERIAL.HAcc, dat.SOURCE_SERIAL.VAcc)
+                addSerialAccuracy(dat.SOURCE_SERIAL.HAcc)
-                document.getElementById("serialHAcc").innerHTML = "Ublox HAcc: " + dat.SOURCE_SERIAL.HAcc.toFixed(2) + " m"
+                document.getElementById("serialHAcc").innerHTML = "Ublox HAcc: " + dat.SOURCE_SERIAL.HAcc.toFixed(3) + " m"
-                document.getElementById("serialVAcc").innerHTML = "Ublox VAcc: " + dat.SOURCE_SERIAL.VAcc.toFixed(2) + " m"
+                //document.getElementById("serialVAcc").innerHTML = "Ublox VAcc: " + dat.SOURCE_SERIAL.VAcc.toFixed(2) + " m"
                 console.log("acc: " + dat.SOURCE_SERIAL.HAcc, dat.SOURCE_SERIAL.VAcc)
             }
         }
         catch{
             console.log("no Serial acc")
         }
-        try{
+
+        /*try{
             if(!(dat.SOURCE_TCP.HAcc === 0) && !(dat.SOURCE_TCP.VAcc === 0)){
                 addTCPAccuracy(dat.SOURCE_TCP.HAcc, dat.SOURCE_TCP.VAcc)
-                document.getElementById("tcpHAcc").innerHTML = "Smartphone HAcc: " + dat.SOURCE_TCP.HAcc.toFixed(2) + " m"
+                document.getElementById("tcpHAcc").innerHTML = "Phone HAcc: " + dat.SOURCE_TCP.HAcc.toFixed(2) + " m"
-                document.getElementById("tcpVAcc").innerHTML = "Smartphone VAcc: " + dat.SOURCE_TCP.VAcc.toFixed(2) + " m"
+                document.getElementById("tcpVAcc").innerHTML = "Phone VAcc: " + dat.SOURCE_TCP.VAcc.toFixed(2) + " m"
                 console.log("acc: " + dat.SOURCE_TCP.HAcc, dat.SOURCE_TCP.VAcc)
             }
         }
         catch{
             console.log("no TCP acc")
-        }
+        }*/
+
     }
     const wsOnOpenF = function (evt) {
         print2("OPEN");

templates/index.html

@@ -103,18 +103,21 @@
           <label id="serialHAcc"
                  style="color: rgba(214, 69, 65, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox
             HAcc: </label><br>
-          <label id="tcpHAcc"
+          <label id="distance"
+                 style="color: rgba(30, 139, 0, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">
+            Distance: </label>
+          <!--<label id="tcpHAcc"
                  style="color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Phone
-            HAcc: </label>
+            HAcc: </label>-->
         </div>
-        <div class="container" style="width: 150px; height: 50px">
+        <!--<div class="container" style="width: 150px; height: 50px">
           <label id="serialVAcc"
                  style="color: rgba(214, 69, 65, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox
             VAcc: </label><br>
           <label id="tcpVAcc"
                  style="color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Phone
             VAcc: </label>
-        </div>
+        </div>-->
       </div>
     </div>
   </div>