add chart that shows tcp and serial speed over time

static/scripts/chartfull.js

@@ -1,3 +1,30 @@
+/*var tcpServertimesSpeedsPos = {
+    data: [
+        {
+            dataset: {
+                times: [],
+                speeds: [],
+                positions: []
+            }
+        }
+    ]
+}
+
+var serialServertimesSpeedsPos = {
+    data: [
+        {
+            dataset: {
+                times: [],
+                speeds: [],
+                positions: []
+            }
+        }
+    ]
+}*/
+
+let allSpeedsSerial = []
+let indexes = []
+
 var arrayTCP = [];
 var arraySERIAL = [];
 
@@ -12,7 +39,7 @@ var myChart = new Chart(ctx, {
             borderColor: 'rgba(214, 69, 65, 1)',
             borderWidth: 1,
             fill: false,
-            pointRadius: 0,
+            pointRadius: 1,
             lineTension: 0.5,
             data: arraySERIAL
         },
@@ -22,7 +49,7 @@ var myChart = new Chart(ctx, {
             borderColor: 'rgba(30, 139, 195, 1)',
             borderWidth: 1,
             fill: false,
-            pointRadius: 0,
+            pointRadius: 1,
             lineTension: 0.5,
             data: arrayTCP
         }]
@@ -32,7 +59,8 @@ var myChart = new Chart(ctx, {
             yAxes: [{
                 ticks: {
                     min: 0,
-                    max: 250
+                    max: 250,
+                    stepSize: 25
                 }
             }],
             xAxes: [{
@@ -50,27 +78,13 @@ 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(serialdataList, tcpdataList) {
+function addSerialSpeedData() {
-    let speedsSerial = []
+    let speeds = []
-    let times = []
-    serialdataList.forEach(sensordata => {
-        if (sensordata.Speed === 0) {
-            return;
-        }
-        let speed = sensordata.Speed
-        speedsSerial.push(speed * 3.6, timestamp);
-        let time = sensordata.Servertime
-        times.push(time)
 
+    indexes.forEach(index => {
+        speeds.push((allSpeedsSerial[index].toFixed(2) * 3.6 * 3.6))
     })
-
+    myChart.data.datasets[0].data = speeds;
-    myChart.data.labels = times;
-    myChart.data.datasets[0].data = speedsSerial;
-
-    /*while (myChart.data.labels.length >= GRAPH_RES) {
-        myChart.data.labels.shift();
-        myChart.data.datasets.forEach((dataset) => dataset.data.shift())
-    }*/
     myChart.update();
 };
 
@@ -83,12 +97,12 @@ function addTCPSpeedData(sensordataList) {
             return;
         }
         let speed = sensordata.Speed
-        speedsTCP.push(speed);
+        speedsTCP.push(speed * 3.6);
         let time = sensordata.Servertime
         times.push(time)
 
     })
-    //myChart.data.labels = times;
+    myChart.data.labels = times;
     myChart.data.datasets[1].data = speedsTCP;
 
     /*while (myChart.data.labels.length >= GRAPH_RES) {
@@ -97,3 +111,26 @@ function addTCPSpeedData(sensordataList) {
     }*/
     myChart.update();
 };
+
+function findSerialDataIndex(tcpdataList, serialdataList) {
+    let allSerialTimes = []
+
+    serialdataList.forEach(sensordata => {
+        if (!(sensordata.Speed === 0)) {
+            let serialTimestamp;
+            allSpeedsSerial.push(sensordata.Speed)
+            serialTimestamp = composeServertime(sensordata.Servertime)
+            allSerialTimes.push(serialTimestamp)
+        }
+    })
+
+    tcpdataList.forEach(sensordata => {
+        if (!(sensordata.Speed === 0)) {
+            let tcpTimestamp = composeServertime(sensordata.Servertime)
+            let index = findBestTimeMatch(tcpTimestamp, allSerialTimes)[1]
+
+            indexes.push(index)
+        }
+    })
+    console.log("indexes: " + indexes)
+};

static/scripts/refull.js

@@ -1,5 +1,29 @@
 var trackingdata = null;
 
+function composeServertime(servertime){
+    var composed;
+    composed = servertime.slice(11,25).split(':').join("").split('.').join("");
+    return composed;
+}
+
+function findBestTimeMatch(num, arr) {
+    var mid;
+    var lo = 0;
+    var hi = arr.length - 1;
+    while (hi - lo > 1) {
+        mid = Math.floor ((lo + hi) / 2);
+        if (arr[mid] < num) {
+            lo = mid;
+        } else {
+            hi = mid;
+        }
+    }
+    if (num - arr[lo] <= arr[hi] - num) {
+        return [arr[lo], lo];
+    }
+    return [arr[hi], hi];
+}
+
 window.addEventListener("load", function(evt) {
     //------------------------Buttons------------------------------
 
@@ -35,13 +59,14 @@ window.addEventListener("load", function(evt) {
         }).then(r => {
             console.log(r.data.Data)
             console.log(r.data)
+            findSerialDataIndex(r.data.Data.SOURCE_TCP, r.data.Data.SOURCE_SERIAL)
             if ('SOURCE_TCP' in r.data.Data && r.data.Data.SOURCE_TCP.length > 0) {
                 updateMapTCPbulk(r.data.Data.SOURCE_TCP)
                 addTCPSpeedData(r.data.Data.SOURCE_TCP)
             }
             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, r.data.Data.SOURCE_TCP)
+                addSerialSpeedData()
             }
         })
 

static/scripts/websocket.js

@@ -22,7 +22,6 @@ window.addEventListener("load", function(evt) {
         dataSmartphone.push(dat)
         //console.log(evt.data)
         console.log("JSON geparsed onmessage", dat)
-
         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)`
@@ -40,6 +39,7 @@ window.addEventListener("load", function(evt) {
                 document.getElementById("compassTCP").innerHTML = "Smartphone: <br>" + dat.SOURCE_TCP.HeadDevice.toFixed(0) + "°"
                 document.getElementById("needleTCP").style.transform = `rotate(${dat.SOURCE_TCP.HeadDevice}deg)`
             }
+
         }
         catch{
             console.log("no TCP data")
@@ -108,20 +108,6 @@ window.addEventListener("load", function(evt) {
         catch{
             console.log("no TCP acc")
         }
-
-
-
-        /*
-                            console.log(dat)
-                            orientation[0] += dat[0] * multiplier
-                            orientation[1] += dat[1] * multiplier
-                            orientation[2] += dat[2] * multiplier
-                            // dataset.push(orientation[0])
-                            // while (dataset.length >= 50) {
-                            //     dataset.shift();
-                            // }
-                            // addData(orientation[0] / multiplier)
-        */
     }
 
     ws.onerror = function(evt) {