add speedometer

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();
+}

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,30 +140,12 @@ window.addEventListener("load", function(evt) {
 
     //------------------------Buttons------------------------------
 
-    document.getElementById("livetracking").onclick = function(evt) {
+    document.getElementById("messung starten").onclick = function(evt) {
         if (ws) {
-            print2("LIVETRACKING");
+            fetch('http://localhost:3011/trackings/', { method: 'PATCH', body: 'some data'})
-            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);
-            }
-        }
         return false;
     };
 });

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%">
+    <td valign="top" width="100%">
-      <p>Click "Open" to create a connection to the server. {{.}}
+      <p>"Verbinden" clicken um eine Verbindung mit dem Server aufzubauen. {{.}}</p>
-      </p>
+      <label><input type="checkbox" id="checkbox1" value="smartphone"> TCP</label><br>
-      <form>
+      <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" >
+      <p style="display: none" ><input id="input" type="text" value="Hello world!"><button id="send">Send</button></p>
-          <input id="input" type="text" value="Hello world!">
-          <button id="send">Send</button>
-        </p>
-      </form>
 
-      <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>
+  <div class="float-child">
-
-<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>
+  </div>
+</div>
+<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 <script src="static/scripts/chart.js"></script>
 </body>
 </html>