diff --git a/static/scripts/speedometer.js b/static/scripts/speedometer.js index e69de29..3d32d1d 100644 --- a/static/scripts/speedometer.js +++ b/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(); +} \ No newline at end of file diff --git a/static/scripts/websocket.js b/static/scripts/websocket.js index 5cadbfa..452ff04 100644 --- a/static/scripts/websocket.js +++ b/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,29 +140,11 @@ 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); } return false; }; diff --git a/templates/index.html b/templates/index.html index 18dde89..4b4ca9a 100644 --- a/templates/index.html +++ b/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 @@ -
-

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

-
- - -

- - -

-
+ 		+

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

+
+
+ + +

-
-
- - - +
+ + + + + +
@@ -131,12 +157,6 @@
- - - -
- -
@@ -146,6 +166,22 @@
+
+
+
+
+ +

0

+

250

+
+ +
+
+ + + + +

Smartphone

@@ -171,14 +207,13 @@
+
+
+ +
+
- - - -
- -
\ No newline at end of file