tvolkmann/gyrogpsc
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases 1 Wiki Activity

ignore if no incoming TCP or serial data

Browse Source
This commit is contained in:
unknown 2020-12-25 19:28:37 +01:00
parent 104fcb8066
commit 8a26d8bf61
4 changed files with 56 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/scripts/map.js
View File

@ -55,7 +55,7 @@ map.on('load', function () {
'visibility': 'visible'
},
'paint': {
'line-color': 'yellow',
'line-color': 'red',
'line-opacity': 0.75,
'line-width': 5
}

12
static/scripts/speedometer.js
View File

@ -49,10 +49,14 @@ var options1 = {
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];
function addSpeedData(/*speedTCP,*/ speedSERIAL){
//var speedTCPpercent = (speedTCP/250)*100;
var serialSpeedKmh = (speedSERIAL * 0.0036)
var speedSERIALpercent = (serialSpeedKmh/250)*100;
console.log("speed percent", speedSERIALpercent)
console.log("actual speed", speedSERIAL)
console.log("speed kmh", serialSpeedKmh)
//mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
mySpeedometer.data.datasets[1].data = [speedSERIALpercent, 100-speedSERIALpercent];
mySpeedometer.update();
}

79
static/scripts/websocket.js
View File

@ -53,6 +53,8 @@ window.addEventListener("load", function(evt) {
.then(results => results.json())
.then(console.log);
}
checkBoxSmartphone.disabled = true;
checkBoxUblox.disabled = true;
ws.onmessage = function(evt) {
//print2("RESPONSE: " + evt.data);
@ -63,32 +65,40 @@ 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)`
}
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_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]
}
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]
if(checkBoxSmartphone.checked){
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[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]
}
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_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(checkBoxUblox.checked){
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[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]
}
if(!(dat.SOURCE_SERIAL.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
updateMapSERIAL(dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]);
}
}
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])
if(checkBoxSmartphone.checked && checkBoxUblox.checked){
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])
}
}
/*
console.log(dat)
orientation[0] += dat[0] * multiplier
@ -100,23 +110,11 @@ 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])
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]])
}
addSpeedData(dat.SOURCE_TCP.Speed, dat.SOURCE_SERIAL.Speed);
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)`
}
ws.onerror = function(evt) {
print("ERROR: " + evt.data);
}
@ -148,4 +146,15 @@ window.addEventListener("load", function(evt) {
}
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;
}
return false;
};
});

5
templates/index.html
View File

@ -141,7 +141,8 @@
<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><br>
<button id="messung laden">Messung laden</button>
<button id="alles beenden">Alles Beenden</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>
@ -161,7 +162,7 @@
<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: red"></span>Ublox</div>
<div><span style="background-color: blue"></span>Smartphone</div>
</div>
</div>