Merge branch 'frank-dev2' into timo

static/scripts/chart.js

@@ -18,8 +18,8 @@ var myChart = new Chart(ctx, {
             yAxes: [{
                 ticks: {
                     // beginAtZero: true
-                    min: -100,
+                    min: -2000,
-                    max: 100
+                    max: 2000
                 }
             }]
         },
@@ -30,7 +30,7 @@ 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 addData(data) {
+function addSerialAltData(data) {
     myChart.data.labels.push("");
     myChart.data.datasets.forEach((dataset) => {
         dataset.data.push(data);

static/scripts/compass.js

@@ -0,0 +1,72 @@
+var options2 = {
+    type: 'doughnut',
+    data: {
+        datasets: [
+            {
+                label: 'compassTCP',
+                data: [360,0],
+                backgroundColor: [
+                    'rgba(30, 139, 195, 1)',
+                    'rgba(30, 139, 195, 1)'
+                ],
+                borderColor: [
+                    'rgba(255, 255, 255 ,1)',
+                    'rgba(255, 255, 255 ,1)'
+                ],
+                borderWidth: 4
+            },
+            {
+                label: 'compassSERIAL',
+                data: [360,0],
+                backgroundColor: [
+                    'rgba(214, 69, 65, 1)',
+                    'rgba(214, 69, 65, 1)',
+                ],
+                borderColor: [
+                    'rgba(255, 255, 255 ,1)',
+                    'rgba(255, 255, 255 ,1)'
+                ],
+                borderWidth: 4
+            }
+        ]
+    },
+    options: {
+        rotation: 2 * Math.PI,
+        circumference: 2 * Math.PI,
+        legend: {
+            display: false,
+            enabled: false
+        },
+        tooltips: {
+            enabled: false,
+            display: false
+        },
+        cutoutPercentage: 50
+    }
+}
+
+var ctx2 = document.getElementById('compass').getContext('2d');
+var myCompass = new Chart(ctx2, options2);
+
+
+function addCompassSerial(deg){
+    var c = Math.abs(90-deg);
+    if(deg<90){
+        myCompass.data.datasets[1].data = [360-c,c];
+    }
+    if(deg>90){
+        myCompass.data.datasets[1].data = [c,360-c];
+    }
+    myCompass.update();
+}
+
+function addCompassTCP(deg){
+    var c = Math.abs(90-deg);
+    if(deg<90){
+        myCompass.data.datasets[0].data = [360-c,c];
+    }
+    if(deg>90){
+        myCompass.data.datasets[0].data = [c,360-c];
+    }
+    myCompass.update();
+}

static/scripts/map.js

@@ -41,7 +41,7 @@ map.on('load', function () {
             'visibility': 'visible'
         },
         'paint': {
-            'line-color': 'blue',
+            'line-color': 'rgba(30, 139, 195, 1)',
             'line-opacity': 0.75,
             'line-width': 5
         }
@@ -55,7 +55,7 @@ map.on('load', function () {
             'visibility': 'visible'
         },
         'paint': {
-            'line-color': 'yellow',
+            'line-color': 'rgba(214, 69, 65, 1)',
             'line-opacity': 0.75,
             'line-width': 5
         }
@@ -93,5 +93,5 @@ function updateMapTCP (TCPlong, TCPlat) {
 function updateMapSERIAL (SERIALlong, SERIALlat) {
     emptySERIAL.features[0].geometry.coordinates.push([SERIALlong, SERIALlat]);
     map.getSource('routeSERIAL').setData(emptySERIAL);
-    map.panTo([SERIALlong, SERIALlat]);
+    //map.panTo([SERIALlong, SERIALlat]);
 }

static/scripts/speedometer.js

@@ -0,0 +1,165 @@
+var options1 = {
+    type: 'doughnut',
+    data: {
+        datasets: [
+            {
+                label: 'speedTCP',
+                data: [50,50],
+                backgroundColor: [
+                    'rgba(30, 139, 195, 1)',
+                    'rgba(191, 191, 191, 1)'
+                ],
+                borderColor: [
+                    'rgba(255, 255, 255 ,1)',
+                    'rgba(255, 255, 255 ,1)'
+                ],
+                borderWidth: 0
+            },
+            {
+                label: 'speedSERIAl',
+                data: [50, 50],
+                backgroundColor: [
+                    'rgba(214, 69, 65, 1)',
+                    'rgba(191, 191, 191, 1)'
+                ],
+                borderColor: [
+                    'rgba(255, 255, 255 ,1)',
+                    'rgba(255, 255, 255 ,1)'
+                ],
+                borderWidth: 0
+            }
+        ]
+    },
+    options: {
+        rotation: 1 * Math.PI,
+        circumference: 1 * Math.PI,
+        legend: {
+            display: false,
+            enabled: false
+        },
+        tooltips: {
+            enabled: false,
+            display: false
+        },
+        cutoutPercentage: 40
+    }
+}
+var options2 = {
+    type: 'doughnut',
+    data: {
+        datasets: [
+            {
+                label: 'speedMarks',
+                data: [50,50,50,50],
+                backgroundColor: [
+                    'rgba(30, 130, 76, 1)',
+                    'rgba(244, 208, 63, 1)',
+                    'rgba(235, 151, 78, 1)',
+                    'rgba(217, 30, 24, 1)'
+                ],
+                borderColor: [
+                    'rgba(30, 130, 76, 1)',
+                    'rgba(244, 208, 63, 1)',
+                    'rgba(235, 151, 78, 1)',
+                    'rgba(217, 30, 24, 1)'
+                ],
+                borderWidth: 0
+            },
+            {
+                label: 'transparent',
+                data: [100],
+                backgroundColor: [
+                    'rgba(0, 0, 0, 0)'
+                ],
+                borderColor: [
+                    'rgba(0, 0, 0, 0)'
+                ],
+                borderWidth: 2
+            },
+            {
+                label: 'transparent1',
+                data: [100],
+                backgroundColor: [
+                    'rgba(0, 0, 0, 0)'
+                ],
+                borderColor: [
+                    'rgba(0, 0, 0, 0)'
+                ],
+                borderWidth: 2
+            },
+            {
+                label: 'transparent2',
+                data: [100],
+                backgroundColor: [
+                    'rgba(0, 0, 0, 0)'
+                ],
+                borderColor: [
+                    'rgba(0, 0, 0, 0)'
+                ],
+                borderWidth: 2
+            },
+            {
+                label: 'transparent3',
+                data: [100],
+                backgroundColor: [
+                    'rgba(0, 0, 0, 0)'
+                ],
+                borderColor: [
+                    'rgba(0, 0, 0, 0)'
+                ],
+                borderWidth: 2
+            },
+            {
+                label: 'speedMarks1',
+                data: [50,50,50,50],
+                backgroundColor: [
+                    'rgba(30, 130, 76, 1)',
+                    'rgba(244, 208, 63, 1)',
+                    'rgba(235, 151, 78, 1)',
+                    'rgba(217, 30, 24, 1)'
+                ],
+                borderColor: [
+                    'rgba(30, 130, 76, 1)',
+                    'rgba(244, 208, 63, 1)',
+                    'rgba(235, 151, 78, 1)',
+                    'rgba(217, 30, 24, 1)'
+                ],
+                borderWidth: 0
+            },
+        ]
+    },
+    options: {
+        rotation: 1 * Math.PI,
+        circumference: 1 * Math.PI,
+        legend: {
+            display: false,
+            enabled: false
+        },
+        tooltips: {
+            enabled: false,
+            display: false
+        },
+        cutoutPercentage: 65
+    }
+}
+
+var ctx1 = document.getElementById('speedometer').getContext('2d');
+var mySpeedometer = new Chart(ctx1, options1);
+var ctx2 = document.getElementById('speedometerSpeeds').getContext('2d');
+var mySpeedometer2 = new Chart(ctx2, options2);
+
+function addSpeedSerial(speedSERIAL){
+    var speedSERIALkmh = (speedSERIAL * 3.6)
+    var speedSERIALpercent = (speedSERIALkmh/250)*100
+    mySpeedometer.data.datasets[1].data = [speedSERIALpercent, 100-speedSERIALpercent];
+    document.getElementById("speedSERIAL").innerHTML = "Speed Ublox (km/h): " + speedSERIALkmh.toFixed(1)
+    mySpeedometer.update();
+}
+
+function addSpeedTcp(speedTCP){
+    var speedTCPkmh = (speedTCP * 3.6)
+    var speedTCPpercent = (speedTCPkmh/250)*100;
+    mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
+    document.getElementById("speedTCP").innerHTML = "Speed Smartphone (km/h): " + speedTCPkmh.toFixed(1)
+    mySpeedometer.update();
+}

static/scripts/websocket.js

@@ -32,6 +32,33 @@ 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);
+        }
+
+        document.getElementById("tracking state").innerHTML = "Tracking state: LIVE"
+
+        checkBoxSmartphone.disabled = true;
+        checkBoxUblox.disabled = true;
+
         ws.onmessage = function(evt) {
             //print2("RESPONSE: " + evt.data);
             // let dat = JSON.parse(evt.data)["bmi26x gyroscope"]
@@ -41,32 +68,66 @@ 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(!(dat.SOURCE_TCP.Orientation[0] === 0) && !(dat.SOURCE_TCP.Orientation[1] === 0) && !(dat.SOURCE_TCP.Orientation[2] === 0)){
+            try{
-                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_TCP.Orientation[0] === 0) && !(dat.SOURCE_TCP.Orientation[1] === 0) && !(dat.SOURCE_TCP.Orientation[2] === 0)){
-                addData(dat.SOURCE_TCP.Orientation[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_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
+                    document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
+                    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]])
+                }
+                if(!(dat.SOURCE_TCP.Speed === 0)){
+                    addSpeedTcp(dat.SOURCE_TCP.Speed);
+                }
+                if(!(dat.SOURCE_TCP.HeadDevice === 0)){
+                    addCompassTCP(dat.SOURCE_TCP.HeadDevice)
+                    document.getElementById("compassTCP").innerHTML = "Smartphone: " + dat.SOURCE_TCP.HeadDevice.toFixed(0) + "°"
+                }
             }
-            if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && !(dat.SOURCE_SERIAL.Orientation[1] === 0) && !(dat.SOURCE_SERIAL.Orientation[2] === 0)){
+            catch{
-                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)`
+                console.log("no TCP data")
             }
 
-            if(!(dat.SOURCE_TCP.Position[0] === 0) && !(dat.SOURCE_TCP.Position[1] === 0)){
+            try{
-                document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
+                if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && /*!(dat.SOURCE_SERIAL.Orientation[1] === 0) &&*/ !(dat.SOURCE_SERIAL.Orientation[2] === 0)){
-                document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[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[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
+                    document.getElementById("SERIALlong").innerHTML = "Ublox long: " + dat.SOURCE_SERIAL.Position[1]
+                    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]])
+                }
+                if(!(dat.SOURCE_SERIAL.Speed === 0)){
+                    addSpeedSerial(dat.SOURCE_SERIAL.Speed);
+                }
+                if(!(dat.SOURCE_SERIAL.HeadDevice === 0)){
+                    addCompassSerial(dat.SOURCE_SERIAL.HeadDevice)
+                    document.getElementById("compassSERIAL").innerHTML = "Ublox: " + dat.SOURCE_SERIAL.HeadDevice.toFixed(0) + "°"
+                }
+            }catch{
+                console.log("no serial data")
             }
 
-            if(!(dat.SOURCE_SERIAL.Position[0] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 0)){
+            try{
-                document.getElementById("SERIALlong").innerHTML = "Ublox long: " + dat.SOURCE_SERIAL.Position[1]
+                if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 0)){
-                document.getElementById("SERIALlat").innerHTML = "Ublox lat: " + dat.SOURCE_SERIAL.Position[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])
+                }
+            }
+            catch{
+                console.log("no data to compare")
             }
 
-            if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 0)){
+            if(!(dat.SOURCE_SERIAL.Position[2] === 0)){
-                document.getElementById("diffLong").innerHTML = "Differenz long: " + Math.abs(dat.SOURCE_TCP.Position[1] - dat.SOURCE_SERIAL.Position[1])
+                addSerialAltData(dat.SOURCE_SERIAL.Position[2])
             }
 
-            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)
@@ -79,25 +140,8 @@ window.addEventListener("load", function(evt) {
                                 // }
                                 // addData(orientation[0] / multiplier)
             */
-
-            //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]);
-            }
-
-            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]])
-            }
-
-            // 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);
         }
@@ -121,29 +165,34 @@ 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){
+                .then(results => results.json())
-                fetch('http://localhost:3011/trackings?serial=true&tcp=true', { method: 'POST', body: 'some test data'})
+                .then(console.log);
-                    .then(results => results.json())
+            document.getElementById("tracking state").innerHTML = "Tracking state: RECORD"
-                    .then(console.log);
+        }
-            }
+        return false;
-            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())
+    document.getElementById("messung beenden").onclick = function(evt) {
-                    .then(console.log);
+        if (ws) {
-            }
+            fetch('http://localhost:3011/trackings/', { method: 'PUT', body: 'some data'})
-            else if(checkBoxSmartphone.checked && !(checkBoxUblox.checked)){
+                .then(results => results.json())
-                fetch('http://localhost:3011/trackings?serial=false&tcp=true', { method: 'POST', body: 'some test data'})
+                .then(console.log);
-                    .then(results => results.json())
+            document.getElementById("tracking state").innerHTML = "Tracking state: LIVE"
-                    .then(console.log);
+        }
-            }
+        return false;
-            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())
+    document.getElementById("alles beenden").onclick = function(evt) {
-                    .then(console.log);
+        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;
+            ws.close();
         }
         return false;
     };

templates/index.html

@@ -45,6 +45,91 @@
       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;
+    }
+    .speed14 {
+      position: absolute;
+      left: 8%;
+      transform: translate(-50%, 0);
+      font-size: 20px;
+      bottom: 0;
+      margin-bottom: 90px;
+    }
+    .speedMed {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, 0);
+      font-size: 20px;
+      bottom: 0;
+      margin-bottom: 140px;
+    }
+    .speed34 {
+      position: absolute;
+      left: 92%;
+      transform: translate(-50%, 0);
+      font-size: 20px;
+      bottom: 0;
+      margin-bottom: 90px;
+    }
+    .speedMax {
+      position: absolute;
+      Left: 100%;
+      transform: translate(-50%, 0);
+      font-size: 30px;
+      bottom: 0;
+      margin-bottom: -50px;
+    }
+
+    .compassNorth {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, 0);
+      font-size: 30px;
+      bottom: 70%;
+      margin-bottom: 50px;
+    }
+    .compassSouth {
+      position: absolute;
+      Left: 50%;
+      transform: translate(-50%, 0);
+      font-size: 30px;
+      bottom: -70%;
+      margin-bottom: 50px;
+    }
+    .compassWest {
+      position: absolute;
+      left: 0%;
+      transform: translate(-50%, 0);
+      font-size: 30px;
+      bottom: 50%;
+      margin-bottom: -50px;
+    }
+    .compassEast {
+      position: absolute;
+      Left: 100%;
+      transform: translate(-50%, 0);
+      font-size: 30px;
+      bottom: 50%;
+      margin-bottom: -50px;
+    }
+
+
     .scene {
       width: 200px;
       height: 200px;
@@ -101,27 +186,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="open">Verbinden</button>
-        <button id="close">Trennen</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 laden">Messung laden</button>
-      <button id="messung verwerfen">Messung verwerfen</button>
+      <button id="alles beenden">Alles Beenden</button><br>
-      <button id="messung laden">Messung laden</button></li>
+      <label id="tracking state" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Tracking state: </label><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,22 +214,14 @@
 
 <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">
         <h4>Legende</h4>
-        <div><span style="background-color: yellow"></span>Ublox</div>
+        <div><span style="background-color: rgba(214, 69, 65, 1)"></span>Ublox</div>
-        <div><span style="background-color: blue"></span>Smartphone</div>
+        <div><span style="background-color: rgba(30, 139, 195, 1)"></span>Smartphone</div>
       </div>
     </div>
-  </div>
-  <div class="float-child">
     <div class="scene">
       <p style="font-size: large">Smartphone</p>
       <div id="gyroscopeTCP" class="cube">
@@ -158,7 +233,6 @@
         <div class="cube__face cube__face--bottom">bottom</div>
       </div>
     </div>
-
     <div class="scene">
       <p style="font-size: large">Ublox</p>
       <div id="gyroscopeSERIAL" class="cube">
@@ -171,14 +245,48 @@
       </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>
+      <label id="speedSERIAL" style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Ublox (km/h): </label><br>
+      <div>
+        <canvas id="speedometer" width="320" height="230"></canvas>
+        <canvas id="speedometerSpeeds" width="320" height="230"></canvas>
+        <p class="speedMin">0</p>
+        <p class="speed14">62</p>
+        <p class="speedMed">125</p>
+        <p class="speed34">188</p>
+        <p class="speedMax">250</p>
+      </div>
+    </div><br>
+    <div class="outer">
+      <label id="compassTCP" style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone </label><br>
+      <label id="compassSERIAL" style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox </label><br>
+      <canvas id="compass" width="300" height="200"></canvas>
+      <p class="compassNorth">N</p>
+      <p class="compassEast">E</p>
+      <p class="compassWest">W</p>
+      <p class="compassSouth">S</p>
+    </div>
+  </div>
+  <div class="float-child">
+
+  </div>
 </div>
 
-<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 <script src="static/scripts/map.js"></script>
+<script src="static/scripts/speedometer.js"></script>
+<script src="static/scripts/compass.js"></script>
 
-<div style="width: 600px; height: 400px;">
+<div class="float-container">
-  <canvas id="myChart" width="400" height="200"></canvas>
+  <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>
 </body>
 </html>