diff --git a/static/scripts/chart.js b/static/scripts/chart.js index f9220bb..594b6d9 100644 --- a/static/scripts/chart.js +++ b/static/scripts/chart.js @@ -18,8 +18,8 @@ var myChart = new Chart(ctx, { yAxes: [{ ticks: { // beginAtZero: true - min: -100, - max: 100 + min: -2000, + 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); diff --git a/static/scripts/compass.js b/static/scripts/compass.js new file mode 100644 index 0000000..329f354 --- /dev/null +++ b/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(); +} diff --git a/static/scripts/map.js b/static/scripts/map.js index 77cca94..c9e9598 100644 --- a/static/scripts/map.js +++ b/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]); } diff --git a/static/scripts/speedometer.js b/static/scripts/speedometer.js index e69de29..18d0de1 100644 --- a/static/scripts/speedometer.js +++ b/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(); +} \ No newline at end of file diff --git a/static/scripts/websocket.js b/static/scripts/websocket.js index 5cadbfa..8f1575c 100644 --- a/static/scripts/websocket.js +++ b/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)){ - 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]) + + 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)` + } + 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)){ - 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)` + catch{ + console.log("no TCP data") } - if(!(dat.SOURCE_TCP.Position[0] === 0) && !(dat.SOURCE_TCP.Position[1] === 0)){ - document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1] - document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0] + try{ + 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)` + } + 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)){ - document.getElementById("SERIALlong").innerHTML = "Ublox long: " + dat.SOURCE_SERIAL.Position[1] - document.getElementById("SERIALlat").innerHTML = "Ublox lat: " + dat.SOURCE_SERIAL.Position[0] + try{ + if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 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)){ - document.getElementById("diffLong").innerHTML = "Differenz long: " + Math.abs(dat.SOURCE_TCP.Position[1] - dat.SOURCE_SERIAL.Position[1]) + if(!(dat.SOURCE_SERIAL.Position[2] === 0)){ + 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"); - 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); - } + fetch('http://localhost:3011/trackings/', { method: 'PATCH', body: 'some data'}) + .then(results => results.json()) + .then(console.log); + document.getElementById("tracking state").innerHTML = "Tracking state: RECORD" + } + return false; + }; + + document.getElementById("messung beenden").onclick = function(evt) { + if (ws) { + fetch('http://localhost:3011/trackings/', { method: 'PUT', body: 'some data'}) + .then(results => results.json()) + .then(console.log); + document.getElementById("tracking state").innerHTML = "Tracking state: LIVE" + } + return false; + }; + + document.getElementById("alles beenden").onclick = function(evt) { + 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; }; diff --git a/templates/index.html b/templates/index.html index 18dde89..f8356f8 100644 --- a/templates/index.html +++ b/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 @@ -
-

Click "Open" to create a connection to the server. {{.}} -

-
- - -

- - -

-
+ 		+

"Verbinden" clicken um eine Verbindung mit dem Server aufzubauen. {{.}}

+
+
+ + +

-
-
- - - - - + +
+
+ + + + + +
@@ -131,22 +214,14 @@
- - - -
- -

Legende

-
Ublox
-
Smartphone
+
Ublox
+
Smartphone
-
-

Smartphone

@@ -158,7 +233,6 @@
bottom
-

Ublox

@@ -171,14 +245,48 @@
+
+
+
+
+
+ + +

0

+

62

+

125

+

188

+

250

+
+

+
+
+
+ +

N

+

E

+

W

+

S

+
+
+
+ +
- + + -
- +
+
+ +
+ +
+
+ \ No newline at end of file