adds accuracy chart for trackings

static/scripts/accuracy.js

@@ -0,0 +1,44 @@
+var ctx = document.getElementById("accuracy").getContext('2d');
+var barChart = new Chart(ctx, {
+    type: 'horizontalBar',
+    data: {
+        labels: ["Horizontal Acc.", "Vertical Acc."],
+        datasets: [{
+            label: 'Ublox',
+            data: [0, 0],
+            backgroundColor: "rgba(214, 69, 65, 1)"
+        }, {
+            label: 'Smartphone',
+            data: [0, 0],
+            backgroundColor: "rgba(30, 139, 195, 1)"
+        }]
+    },
+    options: {
+        scales: {
+            xAxes: [{
+                ticks: {
+                    min: 0,
+                    max: 10
+                }
+            }]
+        },
+        legend: {
+            display: true,
+            enabled: true
+        },
+        tooltips: {
+            enabled: false,
+            display: false
+        }
+    }
+});
+
+function addSerialAccuracy(hacc, vacc){
+    barChart.data.datasets[0].data = [hacc, vacc];
+    barChart.update();
+}
+
+function addTCPAccuracy(hacc, vacc){
+    barChart.data.datasets[1].data = [hacc, vacc];
+    barChart.update();
+}

static/scripts/chartfull.js

@@ -36,11 +36,10 @@ var myChart = new Chart(ctx, {
                 }
             }],
             xAxes: [{
-                ticks: {
+                type: 'time',
-                    min: 0,
+                time: {
-                    max: 25
+                    unit: 'second'
-                },
+                }
-                stepSize: 1
             }]
         },
         animation: {
@@ -51,15 +50,15 @@ 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 addSerialSpeedData(sensordataList) {
+function addSerialSpeedData(serialdataList, tcpdataList) {
     let speedsSerial = []
     let times = []
-    sensordataList.forEach(sensordata => {
+    serialdataList.forEach(sensordata => {
         if (sensordata.Speed === 0) {
             return;
         }
         let speed = sensordata.Speed
-        speedsSerial.push(speed);
+        speedsSerial.push(speed * 3.6, timestamp);
         let time = sensordata.Servertime
         times.push(time)
 

static/scripts/refull.js

@@ -41,7 +41,7 @@ window.addEventListener("load", function(evt) {
             }
             if ('SOURCE_SERIAL' in r.data.Data && r.data.Data.SOURCE_SERIAL.length > 0) {
                 updateMapSERIALbulk(r.data.Data.SOURCE_SERIAL)
-                addSerialSpeedData(r.data.Data.SOURCE_SERIAL)
+                addSerialSpeedData(r.data.Data.SOURCE_SERIAL, r.data.Data.SOURCE_TCP)
             }
         })
 

static/scripts/websocket.js

@@ -84,7 +84,29 @@ window.addEventListener("load", function(evt) {
             }
         }
         catch{
-            console.log("no data")
+            console.log("no altitude data")
+        }
+        try{
+            if(!(dat.SOURCE_SERIAL.HAcc === 0) && !(dat.SOURCE_SERIAL.VAcc === 0)){
+                addSerialAccuracy(dat.SOURCE_SERIAL.HAcc, dat.SOURCE_SERIAL.VAcc)
+                document.getElementById("serialHAcc").innerHTML = "Ublox HAcc: " + dat.SOURCE_SERIAL.HAcc.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{
+            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("tcpVAcc").innerHTML = "Smartphone 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")
         }
 
 

templates/index.html

@@ -57,6 +57,27 @@
         <div><span style="background-color: rgba(30, 139, 195, 1)"></span>Smartphone</div>
       </div>
     </div>
+
+    <div class="container">
+      <div style="width: 500px; height: 150px;">
+        <canvas id="accuracy" width="500" height="150"></canvas>
+      </div>
+      <div class="float container">
+        <div class="float-child">
+          <div class="container" style="width: 200px; height: 50px">
+            <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="serialVAcc" style= "color: rgba(214, 69, 65, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox VAcc: </label>
+          </div>
+        </div>
+        <div class="float-child">
+          <div class="container" style="width: 200px; height: 50px">
+            <label id="tcpHAcc" style= "color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone HAcc: </label><br>
+            <label id="tcpVAcc" style= "color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone VAcc: </label>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="scene">
       <p style="font-size: large">Smartphone</p>
       <div id="gyroscopeTCP" class="cube">
@@ -80,6 +101,7 @@
       </div>
     </div>
   </div>
+
   <div class="float-child">
     <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>
@@ -137,15 +159,11 @@
 <script src="static/scripts/map.js"></script>
 <script src="static/scripts/speedometer.js"></script>
 
-<div class="float-container">
-  <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/chart.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
+<script src="static/scripts/accuracy.js"></script>
+<!--<script src="static/scripts/chart.js"></script>-->
 </body>
 </html>