245 lines
10 KiB
JavaScript
245 lines
10 KiB
JavaScript
const GRAPH_RES = 100;
|
|
var dataSmartphone = [];
|
|
window.addEventListener("load", function(evt) {
|
|
var output = document.getElementById("output");
|
|
var checkBoxSmartphone = document.getElementById("checkbox1");
|
|
var checkBoxUblox = document.getElementById("checkbox2");
|
|
var ws;
|
|
ws = new WebSocket("ws://localhost:3011/ws");
|
|
ws.onopen = function(evt) {
|
|
print("OPEN");
|
|
}
|
|
ws.onclose = function(evt) {
|
|
ws = null;
|
|
print2("CLOSE");
|
|
}
|
|
ws.onmessage = function(evt) {
|
|
//print2("RESPONSE: " + evt.data);
|
|
// let dat = JSON.parse(evt.data)["bmi26x gyroscope"]
|
|
// let dat = JSON.parse(evt.data)["lsm6dsm gyroscope"]
|
|
//let dat = JSON.parse(evt.data)["lsm6ds3c gyroscope"]
|
|
let dat = JSON.parse(evt.data)
|
|
dataSmartphone.push(dat)
|
|
//console.log(evt.data)
|
|
console.log("JSON geparsed onmessage", dat)
|
|
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)){
|
|
document.getElementById("compassTCP").innerHTML = "Smartphone: <br>" + dat.SOURCE_TCP.HeadDevice.toFixed(0) + "°"
|
|
document.getElementById("needleTCP").style.transform = `rotate(${dat.SOURCE_TCP.HeadDevice}deg)`
|
|
}
|
|
|
|
}
|
|
catch{
|
|
console.log("no TCP data")
|
|
}
|
|
|
|
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)){
|
|
document.getElementById("compassSERIAL").innerHTML = "Ublox: " + dat.SOURCE_SERIAL.HeadDevice.toFixed(0) + "°"
|
|
document.getElementById("needle").style.transform = `rotate(${dat.SOURCE_SERIAL.HeadDevice}deg)`
|
|
}
|
|
}catch{
|
|
console.log("no serial data")
|
|
}
|
|
|
|
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")
|
|
}
|
|
|
|
try{
|
|
if(!(dat.SOURCE_SERIAL.Position[2] === 0)){
|
|
addSerialAltData(dat.SOURCE_SERIAL.Position[2])
|
|
}
|
|
}
|
|
catch{
|
|
console.log("no altitude data")
|
|
}
|
|
try{
|
|
if(!(dat.SOURCE_SERIAL.HAcc === 0) && !(dat.SOURCE_SERIAL.VAcc === 0)){
|
|
addSerialAccuracy(dat.SOURCE_SERIAL.HAcc, dat.SOURCE_SERIAL.VAcc)
|
|
document.getElementById("serialHAcc").innerHTML = "Ublox HAcc: " + dat.SOURCE_SERIAL.HAcc.toFixed(2) + " m"
|
|
document.getElementById("serialVAcc").innerHTML = "Ublox VAcc: " + dat.SOURCE_SERIAL.VAcc.toFixed(2) + " m"
|
|
console.log("acc: " + dat.SOURCE_SERIAL.HAcc, dat.SOURCE_SERIAL.VAcc)
|
|
}
|
|
}
|
|
catch{
|
|
console.log("no Serial acc")
|
|
}
|
|
try{
|
|
if(!(dat.SOURCE_TCP.HAcc === 0) && !(dat.SOURCE_TCP.VAcc === 0)){
|
|
addTCPAccuracy(dat.SOURCE_TCP.HAcc, dat.SOURCE_TCP.VAcc)
|
|
document.getElementById("tcpHAcc").innerHTML = "Smartphone HAcc: " + dat.SOURCE_TCP.HAcc.toFixed(2) + " m"
|
|
document.getElementById("tcpVAcc").innerHTML = "Smartphone VAcc: " + dat.SOURCE_TCP.VAcc.toFixed(2) + " m"
|
|
console.log("acc: " + dat.SOURCE_TCP.HAcc, dat.SOURCE_TCP.VAcc)
|
|
}
|
|
}
|
|
catch{
|
|
console.log("no TCP acc")
|
|
}
|
|
}
|
|
|
|
ws.onerror = function(evt) {
|
|
print("ERROR: " + evt.data);
|
|
}
|
|
|
|
|
|
|
|
var print = function(message) {
|
|
var d = document.createElement("div");
|
|
d.textContent = message;
|
|
output.appendChild(d);
|
|
};
|
|
var print2 = function(message) {
|
|
var d = document.createElement("p");
|
|
d.innerText = message;
|
|
oldNode = output.firstChild
|
|
output.replaceChild(d, oldNode)
|
|
};
|
|
document.getElementById("open").onclick = function(evt) {
|
|
// if (ws && ws.OPEN) {
|
|
// print2("Websocket already open")
|
|
// return false;
|
|
// }
|
|
|
|
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;
|
|
|
|
return false;
|
|
};
|
|
document.getElementById("close").onclick = function(evt) {
|
|
if (!ws) {
|
|
return false;
|
|
}
|
|
ws.close();
|
|
return false;
|
|
};
|
|
|
|
//------------------------Buttons------------------------------
|
|
|
|
document.getElementById("messungstarten").onclick = function(evt) {
|
|
if (ws) {
|
|
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("messungbeenden").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("allesbeenden").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;
|
|
document.getElementById("tracking state").innerHTML = "Tracking state: PIPELINE CLOSED"
|
|
ws.close();
|
|
}
|
|
return false;
|
|
};
|
|
var trackings = null;
|
|
document.getElementById("messungladen").onclick = function(evt) {
|
|
fetch('http://localhost:3011/trackings/', { method: 'GET'}).then(results => {
|
|
return results.json()
|
|
}).then(r => {
|
|
console.log(r)
|
|
if (!'data' in r) {
|
|
return
|
|
}
|
|
trackings = r.data
|
|
let sel = document.getElementById("meas")
|
|
r.data.forEach(tracking => {
|
|
console.log(tracking)
|
|
var option = document.createElement("option");
|
|
option.text = tracking.TimeCreated + " Size: " + tracking.Size
|
|
sel.add(option)
|
|
})
|
|
sel.disabled = false
|
|
document.getElementById("replaystarten").disabled = false
|
|
|
|
})
|
|
};
|
|
|
|
document.getElementById("replaystarten").onclick = function(evt) {
|
|
let sel = document.getElementById("meas")
|
|
console.log(trackings[sel.selectedIndex].UUID)
|
|
fetch(`http://localhost:3011/trackings/${trackings[sel.selectedIndex].UUID}?replay=true`, { method: 'GET'}).then(results => {
|
|
return results.json()
|
|
}).then(r => {
|
|
console.log(r.data.Data)
|
|
})
|
|
document.getElementById("tracking state").innerHTML = "Tracking state: REPLAY"
|
|
}
|
|
|
|
document.getElementById("fullReplay").onclick = function(evt) {
|
|
window.open('http://localhost:3011/tracking')
|
|
}
|
|
});
|
|
|