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

clean up js code

Browse Source
This commit is contained in:
unknown 2021-01-13 13:16:59 +01:00
parent 205c0bdec0
commit c3246200d0
11 changed files with 152 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.idea/vcs.xml generated
View File

@ -2,5 +2,6 @@
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
<mapping directory="$PROJECT_DIR$/static/indicators" vcs="Git" />
</component>
</project>

107
static/scripts/accChart.js
View File

@ -1,9 +1,8 @@
let allAccSerial = []
let allSerialCoords = []
var ctx = document.getElementById('accChart').getContext('2d');
var accChart = new Chart(ctx, {
let ctx = document.getElementById('accChart').getContext('2d');
let accChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
@ -59,42 +58,7 @@ var accChart = new Chart(ctx, {
}
});
function addDistances(tcpDataList, serialDataList){
let tcpCoords = []
let serialCoords = []
let tcpTimes = []
let serialHAccs = []
let distances = []
indexes.forEach(index => {
serialHAccs.push(allAccSerial[index].toFixed(2))
serialCoords.push(allSerialCoords[index])
})
tcpDataList.forEach(sensordata => {
if(!(sensordata.Speed === 0) && !(sensordata.HAcc === 0)){
if (!(sensordata.Position[0] === 0) && !(sensordata.Position[1] === 0)) {
let tcpCoord = [sensordata.Position[1], sensordata.Position[0]]
tcpCoords.push(tcpCoord)
let time = sensordata.Timestamp
tcpTimes.push(time)
}
}
})
for(let i = 0; i < tcpCoords.length; i++){
let distance = distanceInMetersBetweenEarthCoordinates(serialCoords[i],tcpCoords[i])
distances.push(distance)
}
accChart.data.labels = tcpTimes
accChart.data.datasets[0].data = serialHAccs
accChart.data.datasets[1].data = distances
accChart.update()
}
function addDistancesNew(data){
function addDistances(data){
let serialHAccs = data.map(el => {
return el.ser.HAcc
})
@ -122,25 +86,24 @@ function addDistancesNew(data){
accChart.update()
}
//https://www.movable-type.co.uk/scripts/latlong.html
function distanceInMetersBetweenEarthCoordinates(coord1, coord2) {
var long1 = coord1[0]
var lat1 = coord1[1]
var long2 = coord2[0]
var lat2 = coord2[1]
let long1 = coord1[0]
let lat1 = coord1[1]
let long2 = coord2[0]
let lat2 = coord2[1]
var earthRadiusM = 6371000
let earthRadiusM = 6371000
var phi1 = lat1 * Math.PI / 180
var phi2 = lat2 * Math.PI / 180
let phi1 = lat1 * Math.PI / 180
let phi2 = lat2 * Math.PI / 180
var dlat = (lat2-lat1) * Math.PI / 180
var dlong = (long2 - long1) * Math.PI / 180
let dlat = (lat2-lat1) * Math.PI / 180
let dlong = (long2 - long1) * Math.PI / 180
var a = Math.sin(dlat/2) * Math.sin(dlat/2) +
let a = Math.sin(dlat/2) * Math.sin(dlat/2) +
Math.cos(phi1) * Math.cos(phi2) *
Math.sin(dlong/2) * Math.sin(dlong/2)
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))
let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))
return earthRadiusM * c
}
@ -152,26 +115,26 @@ function distVincenty(coord1, coord2) {
const lat1 = coord1[1]
const lon2 = coord2[0]
const lat2 = coord2[1]
var a = 6378137, b = 6356752.314245, f = 1/298.257223563; // WGS-84 ellipsoid params
var L = (lon2-lon1).toRad()
var U1 = Math.atan((1-f) * Math.tan(lat1.toRad()));
var U2 = Math.atan((1-f) * Math.tan(lat2.toRad()));
var sinU1 = Math.sin(U1), cosU1 = Math.cos(U1);
var sinU2 = Math.sin(U2), cosU2 = Math.cos(U2);
const a = 6378137, b = 6356752.314245, f = 1/298.257223563; // WGS-84 ellipsoid params
let L = (lon2-lon1).toRad()
let U1 = Math.atan((1-f) * Math.tan(lat1.toRad()));
let U2 = Math.atan((1-f) * Math.tan(lat2.toRad()));
let sinU1 = Math.sin(U1), cosU1 = Math.cos(U1);
let sinU2 = Math.sin(U2), cosU2 = Math.cos(U2);
var lambda = L, lambdaP, iterLimit = 100;
let lambda = L, lambdaP, iterLimit = 100;
do {
var sinLambda = Math.sin(lambda), cosLambda = Math.cos(lambda);
var sinSigma = Math.sqrt((cosU2*sinLambda) * (cosU2*sinLambda) +
let sinLambda = Math.sin(lambda), cosLambda = Math.cos(lambda);
let sinSigma = Math.sqrt((cosU2*sinLambda) * (cosU2*sinLambda) +
(cosU1*sinU2-sinU1*cosU2*cosLambda) * (cosU1*sinU2-sinU1*cosU2*cosLambda));
if (sinSigma===0) return 0; // co-incident points
var cosSigma = sinU1*sinU2 + cosU1*cosU2*cosLambda;
var sigma = Math.atan2(sinSigma, cosSigma);
var sinAlpha = cosU1 * cosU2 * sinLambda / sinSigma;
var cosSqAlpha = 1 - sinAlpha*sinAlpha;
var cos2SigmaM = cosSigma - 2*sinU1*sinU2/cosSqAlpha;
let cosSigma = sinU1*sinU2 + cosU1*cosU2*cosLambda;
let sigma = Math.atan2(sinSigma, cosSigma);
let sinAlpha = cosU1 * cosU2 * sinLambda / sinSigma;
let cosSqAlpha = 1 - sinAlpha*sinAlpha;
let cos2SigmaM = cosSigma - 2*sinU1*sinU2/cosSqAlpha;
if (isNaN(cos2SigmaM)) cos2SigmaM = 0; // equatorial line: cosSqAlpha=0 (§6)
var C = f/16*cosSqAlpha*(4+f*(4-3*cosSqAlpha));
let C = f/16*cosSqAlpha*(4+f*(4-3*cosSqAlpha));
lambdaP = lambda;
lambda = L + (1-C) * f * sinAlpha *
(sigma + C*sinSigma*(cos2SigmaM+C*cosSigma*(-1+2*cos2SigmaM*cos2SigmaM)));
@ -179,13 +142,13 @@ function distVincenty(coord1, coord2) {
if (iterLimit===0) return NaN // formula failed to converge
var uSq = cosSqAlpha * (a*a - b*b) / (b*b);
var A = 1 + uSq/16384*(4096+uSq*(-768+uSq*(320-175*uSq)));
var B = uSq/1024 * (256+uSq*(-128+uSq*(74-47*uSq)));
var deltaSigma = B*sinSigma*(cos2SigmaM+B/4*(cosSigma*(-1+2*cos2SigmaM*cos2SigmaM)-
let uSq = cosSqAlpha * (a*a - b*b) / (b*b);
let A = 1 + uSq/16384*(4096+uSq*(-768+uSq*(320-175*uSq)));
let B = uSq/1024 * (256+uSq*(-128+uSq*(74-47*uSq)));
let deltaSigma = B*sinSigma*(cos2SigmaM+B/4*(cosSigma*(-1+2*cos2SigmaM*cos2SigmaM)-
B/6*cos2SigmaM*(-3+4*sinSigma*sinSigma)*(-3+4*cos2SigmaM*cos2SigmaM)));
var s = b*A*(sigma-deltaSigma);
let s = b*A*(sigma-deltaSigma);
s = s.toFixed(3); // round to 1mm precision
return s;
}
}

7
static/scripts/accuracy.js
View File

@ -50,9 +50,4 @@ function addTCPAccuracy(hacc, vacc){
function addDistanceToBarChart(dist){
barChart.data.datasets[2].data = [dist];
barChart.update();
}
//Farbe der Lampen ändern
// AN: document.getElementById("greenlamp").style.backgroundColor = 'rgba(0, 230, 64, 1)'
// AUS: document.getElementById("greenlamp").style.backgroundColor = 'rgba(0, 100, 0, 1)'
// AN: document.getElementById("redlamp").style.backgroundColor = 'rgba(242, 38, 19, 1)'
// AUS: document.getElementById("redlamp").style.backgroundColor = 'rgba(139, 0, 0, 1)'
}

92
static/scripts/cubes.js
View File

@ -1,44 +1,42 @@
var width = document.getElementById("viewport").offsetWidth
var height = 300;
let width = document.getElementById("viewport").offsetWidth
let height = 300;
var renderer = new THREE.WebGLRenderer({ antialias: true });
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.getElementById("viewport").appendChild(renderer.domElement);
var scene = new THREE.Scene();
let scene = new THREE.Scene();
let cubeGeometry = new THREE.CubeGeometry(100, 100/2, 100*1.5);
let cubeGeometry2 = new THREE.CubeGeometry(120, 120/2, 120*1.5);
var cubeGeometry = new THREE.CubeGeometry(100, 100/2, 100*1.5);
var cubeGeometry2 = new THREE.CubeGeometry(120, 120/2, 120*1.5);
// var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
const color = new THREE.Color("rgb(255, 0, 0)");
var cubeMaterial = new THREE.MeshPhongMaterial({
let cubeMaterial = new THREE.MeshPhongMaterial({
color: color,
opacity: 1,
transparent: true,
});
const color2 = new THREE.Color("rgb(48,117,255)");
var cubeMaterial2 = new THREE.MeshPhongMaterial({
let cubeMaterial2 = new THREE.MeshPhongMaterial({
color: color2,
opacity: 0.5,
transparent: true,
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
var cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
// cube.rotation.y = Math.PI * 45 / 180;
// cube2.rotation.y = Math.PI * 45 / 180;
let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
let cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
scene.add(cube);
scene.add(cube2);
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 6000);
let camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 6000);
camera.position.y = 100;
camera.position.z = 240;
camera.lookAt(cube.position);
scene.add(camera);
var skyboxGeometry = new THREE.CubeGeometry(5000, 5000, 5000);
var skyboxMaterial = new THREE.MeshBasicMaterial({ color: 0x232323, side: THREE.BackSide });
var skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);
let skyboxGeometry = new THREE.CubeGeometry(5000, 5000, 5000);
let skyboxMaterial = new THREE.MeshBasicMaterial({ color: 0x232323, side: THREE.BackSide });
let skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);
scene.add(skybox);
@ -46,7 +44,7 @@ const colorl = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(colorl, intensity);
var pointLight = new THREE.PointLight(0xffffff);
let pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 300, 200);
light.position.set(0, 300, 200);
@ -66,10 +64,8 @@ let quaternionOffset = document.getElementById("quaternionOffset")
function renderTCP(x, y, z) {
let calibration = new THREE.Quaternion().setFromEuler(manCalibration)
// let calibration = new THREE.Quaternion().setFromEuler(new THREE.Euler( radFromAngle, 0, 0, 'YXZ' ))
let eul = new THREE.Euler( x, y, z, 'YXZ' );
// let eul = new THREE.Euler( x, z, y, 'ZXY' ); // XYZ XZY YZX YXZ ZXY ZYX
cube2.quaternion.setFromEuler(eul).multiply(calibrationRot).multiply(calibration)
quaternionOffset.innerHTML = `Lage Abweichung: ${(cube2.quaternion.angleTo(cube.quaternion) * 180 / Math.PI).toFixed(2) }°`
@ -78,8 +74,6 @@ function renderTCP(x, y, z) {
}
function renderSerial(x, y, z) {
// requestAnimationFrame(renderSerial);
let eul = new THREE.Euler( x, y, z, 'YXZ' ); // XYZ XZY YZX YXZ ZXY ZYX
cube.quaternion.setFromEuler(eul)
@ -90,14 +84,12 @@ function renderSerial(x, y, z) {
renderTCP(0, 0, 0);
renderSerial(0, 0, 0);
var pitchRange = document.getElementById("pitchRange");
var yawRange = document.getElementById("yawRange");
var rollRange = document.getElementById("rollRange");
let pitchRange = document.getElementById("pitchRange");
let yawRange = document.getElementById("yawRange");
let rollRange = document.getElementById("rollRange");
pitchRange.oninput = () => {
manCalibration.x = pitchRange.value * Math.PI / 180
// let rot = new THREE.Euler().setFromQuaternion( cube2.quaternion, 'YXZ' );
// renderTCP(rot.x, rot.y, rot.z)
}
yawRange.oninput = () => {
manCalibration.y = yawRange.value * Math.PI / 180
@ -116,7 +108,7 @@ function delCalibration(evt) {
calPitch = 0
}
var calState = false;
let calState = false;
function manualCalibration(evt) {
let con = document.getElementById("manCalContainer")
console.log("mancal", con.style.display)
@ -134,7 +126,6 @@ function manualCalibration(evt) {
pitchRange.value = 0
yawRange.value = 0
rollRange.value = 0
}
}
function calibrate(evt) {
@ -150,7 +141,7 @@ function calibrate(evt) {
calYaw = dif.y // * 180/Math.PI
calRoll = dif.z // * 180/Math.PI
calibrationRot = diff
};
}
document.getElementById("deleteCalibration").onclick = delCalibration
document.getElementById("manualCalibration").onclick = manualCalibration
document.getElementById("calibrate").onclick = calibrate
@ -158,7 +149,7 @@ document.getElementById("calibrate").onclick = calibrate
// indicators //
var options = {
let options = {
size : 200, // Sets the size in pixels of the indicator (square)
roll : 0, // Roll angle in degrees for an attitude indicator
pitch : 0, // Pitch angle in degrees for an attitude indicator
@ -171,34 +162,23 @@ var options = {
img_directory : 'static/indicators/img/' // The directory where the images are saved to
}
var headingSer = $.flightIndicator('#headingSer', 'heading', options);
var headingTcp = $.flightIndicator('#headingTcp', 'heading', options);
var attitudeSer = $.flightIndicator('#attitudeSer', 'attitude', options);
var attitudeTcp = $.flightIndicator('#attitudeTcp', 'attitude', options);
// var variometer = $.flightIndicator('#variometer', 'variometer', options);
var airspeed = $.flightIndicator('#airspeed', 'airspeed', options);
var altimeter = $.flightIndicator('#altimeter', 'altimeter', options);
let headingSer = $.flightIndicator('#headingSer', 'heading', options);
let headingTcp = $.flightIndicator('#headingTcp', 'heading', options);
let attitudeSer = $.flightIndicator('#attitudeSer', 'attitude', options);
let attitudeTcp = $.flightIndicator('#attitudeTcp', 'attitude', options);
let airspeed = $.flightIndicator('#airspeed', 'airspeed', options);
let altimeter = $.flightIndicator('#altimeter', 'altimeter', options);
var airspeedLabel = document.getElementById("airspeedLabel")
var altitudeLabel = document.getElementById("altitudeLabel")
let airspeedLabel = document.getElementById("airspeedLabel")
let altitudeLabel = document.getElementById("altitudeLabel")
function setIndicatorsTcp(sensordata) {
// let q = new THREE.Euler().setFromQuaternion( quaternionRawTcp, 'YXZ' ) // XYZ XZY YZX YXZ ZXY ZYX
let q = new THREE.Euler().setFromQuaternion( cube2.quaternion, 'YXZ' ) // XYZ XZY YZX YXZ ZXY ZYX
if (sensordata.Orientation[0] !== 0 && sensordata.Orientation[1] !== 0) {
//attitudeTcp.setPitch(sensordata.Orientation[0])
attitudeTcp.setPitch(q.x * 180 / Math.PI)
//attitudeTcp.setRoll(sensordata.Orientation[1])
attitudeTcp.setRoll(q.z * 180 / Math.PI)
}
// Heading from quaternion
// if (sensordata.Orientation[2] !== 0) {
// // headingTcp.setHeading((-sensordata.Orientation[2]-90)%360)
// let h = q.y * 180 / Math.PI * -1
// headingTcp.setHeading(h)
// }
let heading = sensordata.HeadDevice
if (heading !== 0) {
headingTcp.setHeading(heading)
@ -206,19 +186,10 @@ function setIndicatorsTcp(sensordata) {
}
function setIndicatorsSer(sensordata) {
let q = new THREE.Euler().setFromQuaternion( cube.quaternion, 'YXZ' )
if (sensordata.Orientation[0] !== 0 && sensordata.Orientation[1] !== 0) {
attitudeSer.setPitch(sensordata.Orientation[0])
attitudeSer.setRoll(sensordata.Orientation[1])
}
// Heading from quaternion
// if (sensordata.Orientation[2] !== 0) {
// // headingTcp.setHeading((-sensordata.Orientation[2]-90)%360)
// let h = q.y * 180 / Math.PI * -1
// headingSer.setHeading(h)
// }
let heading = sensordata.HeadMotion
if (heading !== 0) {
headingSer.setHeading(heading)
@ -231,5 +202,4 @@ function setIndicatorsSer(sensordata) {
altimeter.setAltitude((sensordata.Position[2] * 10).toFixed())
altitudeLabel.innerHTML = `HMSL: ${(sensordata.Position[2]).toFixed(2)} m`
}
}
}

25
static/scripts/map.js
View File

@ -1,10 +1,10 @@
mapboxgl.accessToken = 'pk.eyJ1IjoiZmhlcmtvbW0iLCJhIjoiY2tobm81bXppMGVuNzMyazY3eDU0M2dyaSJ9.qWJrwtv7KitW60pzs6h3Gg';
var map = new mapboxgl.Map({
let map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-v9',
zoom: 0
});
var emptyTCP = {
let emptyTCP = {
type: "FeatureCollection",
features: [
{
@ -16,7 +16,7 @@ var emptyTCP = {
}]
}
var emptySERIAL = {
let emptySERIAL = {
type: "FeatureCollection",
features: [
{
@ -65,33 +65,16 @@ map.on('load', function () {
map.jumpTo({ 'center': [9.19640999, 49.12283027], 'zoom': 16 });
map.setPitch(30);
var stateLegendEl = document.getElementById('state-legend');
let stateLegendEl = document.getElementById('state-legend');
stateLegendEl.style.display = 'block';
})
/*function updateMap (TCPlong, TCPlat, SERIALlong, SERIALlat) {
if(!(TCPlong === 0) && !(TCPlat === 0)){
emptyTCP.features[0].geometry.coordinates.push([TCPlong, TCPlat]);
map.getSource('routeTCP').setData(emptyTCP);
}
if(!(SERIALlong === 0) && !(SERIALlat === 0)){
emptySERIAL.features[0].geometry.coordinates.push([SERIALlong, SERIALlat]);
map.getSource('routeSERIAL').setData(emptySERIAL);
}
// else if (!([TCPlong, TCPlat] = [0,0])) {
// map.panTo([TCPlong, TCPlat]);
// }
map.panTo([TCPlong, TCPlat]);
}*/
function updateMapTCP (TCPlong, TCPlat) {
emptyTCP.features[0].geometry.coordinates.push([TCPlong, TCPlat]);
map.getSource('routeTCP').setData(emptyTCP);
//map.panTo([TCPlong, TCPlat]);
}
function updateMapSERIAL (SERIALlong, SERIALlat) {
emptySERIAL.features[0].geometry.coordinates.push([SERIALlong, SERIALlat]);
map.getSource('routeSERIAL').setData(emptySERIAL);
//map.panTo([SERIALlong, SERIALlat]);
}

4
static/scripts/mapfull.js
View File

@ -1,5 +1,5 @@
mapboxgl.accessToken = 'pk.eyJ1IjoiZmhlcmtvbW0iLCJhIjoiY2tobm81bXppMGVuNzMyazY3eDU0M2dyaSJ9.qWJrwtv7KitW60pzs6h3Gg';
var map = new mapboxgl.Map({
let map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-v9',
zoom: 0
@ -42,7 +42,7 @@ map.on('load', function () {
map.jumpTo({ 'center': [9.19640999, 49.12283027], 'zoom': 16 });
map.setPitch(30);
var stateLegendEl = document.getElementById('state-legend');
let stateLegendEl = document.getElementById('state-legend');
stateLegendEl.style.display = 'block';
})

35
static/scripts/refull.js
View File

@ -1,16 +1,15 @@
var trackingdata = null;
let indexes
function composeTimestamp(servertime){
var composed;
let composed;
composed = servertime.slice(11,25).split(':').join("").split('.').join("");
return composed;
}
function findBestTimeMatch(num, arr) {
var mid;
var lo = 0;
var hi = arr.length - 1;
let mid;
let lo = 0;
let hi = arr.length - 1;
while (hi - lo > 1) {
mid = Math.floor ((lo + hi) / 2);
if (arr[mid] < num) {
@ -29,10 +28,10 @@ function findSerialDataIndex(tcpdataList, serialdataList) {
let allSerialTimes = []
serialdataList.forEach(sensordata => {
if (!(sensordata.Speed === 0) && !(sensordata.HAcc === 0)) {
if (sensordata.Speed !== 0 && sensordata.HAcc !== 0) {
allSpeedsSerial.push(sensordata.Speed)
allAccSerial.push(sensordata.HAcc)
if(!(sensordata.Position[1] === 0) && !(sensordata.Position[0] === 0)){
if(sensordata.Position[1] !== 0 && sensordata.Position[0] !== 0){
allSerialCoords.push([sensordata.Position[1], sensordata.Position[0]])
}
let serialTimestamp = composeTimestamp(sensordata.Timestamp)
@ -41,7 +40,7 @@ function findSerialDataIndex(tcpdataList, serialdataList) {
})
tcpdataList.forEach(sensordata => {
if (!(sensordata.Speed === 0) && !(sensordata.HAcc === 0)) {
if (sensordata.Speed !== 0 && sensordata.HAcc !== 0) {
let tcpTimestamp = composeTimestamp(sensordata.Timestamp)
let index = findBestTimeMatch(tcpTimestamp, allSerialTimes)[1]
@ -51,9 +50,10 @@ function findSerialDataIndex(tcpdataList, serialdataList) {
}
window.addEventListener("load", function(evt) {
//------------------------Buttons------------------------------
var trackings = null;
let trackings = null;
document.getElementById("messungladen").onclick = function(evt) {
fetch('http://localhost:3011/trackings/', { method: 'GET'}).then(results => {
return results.json()
@ -68,7 +68,7 @@ window.addEventListener("load", function(evt) {
r.data.sort((a,b) => new Date(b.TimeCreated).getTime() - new Date(a.TimeCreated).getTime());
r.data.forEach(tracking => {
console.log(tracking)
var option = document.createElement("option");
let option = document.createElement("option");
option.text = tracking.TimeCreated + " Size: " + tracking.Size
sel.add(option)
})
@ -89,12 +89,10 @@ window.addEventListener("load", function(evt) {
fetch(`http://localhost:3011/trackings/${trackings[sel.selectedIndex].UUID}`, { method: 'GET'}).then(results => {
return results.json()
}).then(r => {
console.log(r.data.Data)
console.log(r.data)
// if('SOURCE_TCP' in r.data.Data && r.data.Data.SOURCE_TCP.length > 0 && 'SOURCE_SERIAL' in r.data.Data && r.data.Data.SOURCE_SERIAL.length > 0){
// console.log(r.data.Data)
// console.log(r.data)
findSerialDataIndex(r.data.Data.SOURCE_TCP, r.data.Data.SOURCE_SERIAL)
// addDistances(r.data.Data.SOURCE_TCP, r.data.Data.SOURCE_SERIAL)
// }
if ('SOURCE_TCP' in r.data.Data && r.data.Data.SOURCE_TCP.length > 0) {
updateMapTCPbulk(r.data.Data.SOURCE_TCP)
addTCPSpeedData(r.data.Data.SOURCE_TCP)
@ -103,10 +101,8 @@ window.addEventListener("load", function(evt) {
updateMapSERIALbulk(r.data.Data.SOURCE_SERIAL)
addSerialSpeedData()
}
addDistancesNew(prepareForDistanceCalc(r.data.Data))
addDistances(prepareForDistanceCalc(r.data.Data))
})
}
});
@ -114,7 +110,6 @@ function prepareForDistanceCalc(data) {
if('SOURCE_TCP' in data && data.SOURCE_TCP.length > 0 && 'SOURCE_SERIAL' in data && data.SOURCE_SERIAL.length > 0) {
let sensorPoints = [];
data.SOURCE_TCP.forEach(element => {
// let ts = Date.parse(element.Timestamp)
if (element.Position[0] !== 0 && element.Position[1] !== 0) {
sensorPoints.push({
differenceMs: Number.MAX_VALUE,
@ -142,4 +137,4 @@ function prepareForDistanceCalc(data) {
return newSensorPoints
}
return null
}
}

8
static/scripts/speedChart.js
View File

@ -1,7 +1,7 @@
let allSpeedsSerial = []
var ctx = document.getElementById('speedChart').getContext('2d');
var speedChart = new Chart(ctx, {
let ctx = document.getElementById('speedChart').getContext('2d');
let speedChart = new Chart(ctx, {
type: 'line',
data: {
labels: new Array(),
@ -56,7 +56,6 @@ function addSerialSpeedData() {
})
speedChart.data.datasets[0].data = speeds;
speedChart.update();
console.log("speeds serial " + speeds.length)
}
function addTCPSpeedData(sensordataList) {
@ -73,10 +72,7 @@ function addTCPSpeedData(sensordataList) {
times.push(time)
})
console.log("speeds tcp " + speedsTCP.length)
speedChart.data.labels = times;
speedChart.data.datasets[1].data = speedsTCP;
speedChart.update();
}

30
static/scripts/speedometer.js
View File

@ -1,4 +1,4 @@
var options1 = {
let options1 = {
type: 'doughnut',
data: {
datasets: [
@ -31,8 +31,8 @@ var options1 = {
]
},
options: {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
rotation: Math.PI,
circumference: Math.PI,
legend: {
display: false,
enabled: false
@ -44,7 +44,7 @@ var options1 = {
cutoutPercentage: 40
}
}
var options2 = {
let options2 = {
type: 'doughnut',
data: {
datasets: [
@ -129,8 +129,8 @@ var options2 = {
]
},
options: {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
rotation: Math.PI,
circumference: Math.PI,
legend: {
display: false,
enabled: false
@ -143,23 +143,23 @@ var options2 = {
}
}
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);
let ctx1 = document.getElementById('speedometer').getContext('2d');
let mySpeedometer = new Chart(ctx1, options1);
let ctx2 = document.getElementById('speedometerSpeeds').getContext('2d');
let mySpeedometer2 = new Chart(ctx2, options2);
function addSpeedSerial(speedSERIAL){
var speedSERIALkmh = (speedSERIAL * 3.6)
var speedSERIALpercent = (speedSERIALkmh/250)*100
let speedSERIALkmh = (speedSERIAL * 3.6)
let speedSERIALpercent = (speedSERIALkmh/250)*100
mySpeedometer.data.datasets[1].data = [speedSERIALpercent, 100-speedSERIALpercent];
document.getElementById("speedSERIAL").innerHTML = `Ublox: ${speedSERIALkmh.toFixed(1)} km/h`
mySpeedometer.update();
}
function addSpeedTcp(speedTCP){
var speedTCPkmh = (speedTCP * 3.6)
var speedTCPpercent = (speedTCPkmh/250)*100;
let speedTCPkmh = (speedTCP * 3.6)
let speedTCPpercent = (speedTCPkmh/250)*100;
mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
document.getElementById("speedTCP").innerHTML = `Phone: ${speedTCPkmh.toFixed(1)} km/h`
mySpeedometer.update();
}
}

144
static/scripts/websocket.js
View File

@ -1,19 +1,17 @@
const GRAPH_RES = 100;
var dataSmartphone = [];
var tempTCPCoords = null;
var tempSERIALCoords = null;
var tempDist = 0;
let tempTCPCoords = null;
let tempSERIALCoords = null;
let tempDist = 0;
window.addEventListener("load", function(evt) {
var output = document.getElementById("output");
var checkBoxSmartphone = document.getElementById("checkbox1");
var checkBoxUblox = document.getElementById("checkbox2");
var ws;
let output = document.getElementById("output");
let checkBoxSmartphone = document.getElementById("checkbox1");
let checkBoxUblox = document.getElementById("checkbox2");
let ws;
const wsOnCloseF = function (evt) {
ws = null;
print2("CLOSED");
var intervalId;
let intervalId;
intervalId = setInterval(() => {
console.log("reconnect websocket...")
if (ws !== null && ws.CONNECTING) {
@ -31,79 +29,66 @@ window.addEventListener("load", function(evt) {
}, 1000)
}
const wsOnMessageF = function (evt) {
let dat = JSON.parse(evt.data)
// console.log(dat)
if ('SOURCE_TCP' in dat) {
setIndicatorsTcp(dat.SOURCE_TCP)
}
try{
if(!(dat.SOURCE_TCP.Orientation[0] === 0) && !(dat.SOURCE_TCP.Orientation[1] === 0) && !(dat.SOURCE_TCP.Orientation[2] === 0)){
let heading = (dat.SOURCE_TCP.Orientation[2]+90)%360 // dat.SOURCE_TCP.Orientation[2] //
// if (dat.SOURCE_TCP.HeadDevice !== 0) { heading = dat.SOURCE_TCP.HeadDevice; }
// if (dat.SOURCE_TCP.HeadMotion !== 0) { heading = dat.SOURCE_TCP.HeadMotion; console.log("head motion") }
if(dat.SOURCE_TCP.Orientation[0] !== 0 && dat.SOURCE_TCP.Orientation[1] !== 0 && dat.SOURCE_TCP.Orientation[2] !== 0){
let heading = (dat.SOURCE_TCP.Orientation[2]+90)%360
renderTCP((dat.SOURCE_TCP.Orientation[0]*Math.PI/180),heading*Math.PI/180,-(dat.SOURCE_TCP.Orientation[1]*Math.PI/180))
}
if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
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]])
tempTCPCoords = [dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]]
}
if(!(dat.SOURCE_TCP.Speed === 0)){
if(dat.SOURCE_TCP.Speed !== 0){
addSpeedTcp(dat.SOURCE_TCP.Speed);
}
if(!(dat.SOURCE_TCP.HeadDevice === 0)){
if(dat.SOURCE_TCP.HeadDevice !== 0){
document.getElementById("compassTCP").innerHTML = " Heading Device: " + dat.SOURCE_TCP.HeadDevice.toFixed(2) + "°"
// document.getElementById("needleTCP").style.transform = `rotate(${dat.SOURCE_TCP.HeadDevice}deg)`
}
if(!(dat.SOURCE_TCP.HeadMotion === 0)) {
if(dat.SOURCE_TCP.HeadMotion !== 0) {
document.getElementById("compassTCPMot").innerHTML = "Heading Motion: " + dat.SOURCE_TCP.HeadMotion.toFixed(2) + "°"
}
if(dat.SOURCE_TCP.HAcc !== 0 && dat.SOURCE_TCP.VAcc !== 0){
addTCPAccuracy(dat.SOURCE_TCP.HAcc, dat.SOURCE_TCP.VAcc)
document.getElementById("tcpHAcc").innerHTML = "Phone HAcc: " + dat.SOURCE_TCP.HAcc.toFixed(2) + " m"
document.getElementById("tcpVAcc").innerHTML = "Phone VAcc: " + dat.SOURCE_TCP.VAcc.toFixed(2) + " m"
}
}
}
catch{
// console.log("no TCP data")
}
if ('SOURCE_SERIAL' in dat) {
setIndicatorsSer(dat.SOURCE_SERIAL)
}
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(0deg)`
// 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.Orientation[0] !== 0 && dat.SOURCE_SERIAL.Orientation[2] !== 0){
renderSerial(dat.SOURCE_SERIAL.Orientation[0]*Math.PI/180,-dat.SOURCE_SERIAL.Orientation[2]*Math.PI/180,dat.SOURCE_SERIAL.Orientation[1]*Math.PI/180)
}
if(!(dat.SOURCE_SERIAL.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
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]])
tempSERIALCoords = [dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]]
if (!(tempTCPCoords == null)) {
console.log("tcp: " + tempTCPCoords)
console.log("serial: " + tempSERIALCoords)
if (tempTCPCoords !== null) {
let long1 = tempTCPCoords[0]
let lat1 = tempTCPCoords[1]
let long2 = tempSERIALCoords[0]
let lat2 = tempSERIALCoords[1]
var long1 = tempTCPCoords[0]
var lat1 = tempTCPCoords[1]
var long2 = tempSERIALCoords[0]
var lat2 = tempSERIALCoords[1]
let earthRadiusM = 6371000
var earthRadiusM = 6371000
let phi1 = lat1 * Math.PI / 180
let phi2 = lat2 * Math.PI / 180
var phi1 = lat1 * Math.PI / 180
var phi2 = lat2 * Math.PI / 180
let dlat = (lat2-lat1) * Math.PI / 180
let dlong = (long2 - long1) * Math.PI / 180
var dlat = (lat2-lat1) * Math.PI / 180
var dlong = (long2 - long1) * Math.PI / 180
var a = Math.sin(dlat/2) * Math.sin(dlat/2) +
let a = Math.sin(dlat/2) * Math.sin(dlat/2) +
Math.cos(phi1) * Math.cos(phi2) *
Math.sin(dlong/2) * Math.sin(dlong/2)
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))
let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))
tempDist = (earthRadiusM * c).toFixed(3)
console.log("Dist: " + tempDist)
addDistanceToBarChart(tempDist)
document.getElementById("distance").innerHTML = "Distance: " + tempDist
@ -118,46 +103,22 @@ window.addEventListener("load", function(evt) {
}
tempTCPCoords = null
}
if(!(dat.SOURCE_SERIAL.Speed === 0)){
if(dat.SOURCE_SERIAL.Speed !== 0){
addSpeedSerial(dat.SOURCE_SERIAL.Speed);
}
if(!(dat.SOURCE_SERIAL.HeadDevice === 0)){
if(dat.SOURCE_SERIAL.HeadDevice !== 0){
document.getElementById("compassSERIAL").innerHTML = "Heading Device: " + dat.SOURCE_SERIAL.HeadDevice.toFixed(2) + "°"
// document.getElementById("needle").style.transform = `rotate(${dat.SOURCE_SERIAL.HeadDevice}deg)`
}
if(!(dat.SOURCE_SERIAL.HeadMotion === 0)) {
if(dat.SOURCE_SERIAL.HeadMotion !== 0) {
document.getElementById("compassSERIALMot").innerHTML = "Heading Motion: " + dat.SOURCE_SERIAL.HeadMotion.toFixed(2) + "°"
}
}catch{
// console.log("no serial data")
}
try{
if(!(dat.SOURCE_SERIAL.HAcc === 0) && !(dat.SOURCE_SERIAL.VAcc === 0)){
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(3) + " 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 = "Phone HAcc: " + dat.SOURCE_TCP.HAcc.toFixed(2) + " m"
document.getElementById("tcpVAcc").innerHTML = "Phone 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")
}
}
const wsOnOpenF = function (evt) {
print2("OPEN");
@ -167,48 +128,35 @@ window.addEventListener("load", function(evt) {
print2("ERROR: " + evt);
}
ws = new WebSocket("ws://localhost:3011/ws");
ws.onopen = wsOnOpenF
ws.onclose = wsOnCloseF
ws.onmessage = wsOnMessageF
ws.onerror = wsOnErrorF
var print = function(message) {
var d = document.createElement("div");
d.textContent = message;
output.appendChild(d);
};
var print2 = function(message) {
var d = document.createElement("p");
const print2 = function(message) {
let 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){
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)){
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)){
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);
@ -259,10 +207,10 @@ window.addEventListener("load", function(evt) {
checkBoxSmartphone.disabled = false;
checkBoxUblox.disabled = false;
document.getElementById("tracking state").innerHTML = "Tracking state: CLOSED"
//ws.close();
}
return false;
};
var trackings = null;
document.getElementById("messungladen").onclick = function(evt) {
fetch('http://localhost:3011/trackings/', { method: 'GET'}).then(results => {
@ -277,7 +225,7 @@ window.addEventListener("load", function(evt) {
r.data.sort((a,b) => new Date(b.TimeCreated).getTime() - new Date(a.TimeCreated).getTime());
r.data.forEach(tracking => {
console.log(tracking)
var option = document.createElement("option");
let option = document.createElement("option");
option.text = tracking.TimeCreated + " Size: " + tracking.Size
sel.add(option)
})

27
templates/index.html
View File

@ -124,32 +124,6 @@
<div class="float-child right-col">
<div class="compass-container">
<!-- <div id="compass">-->
<!-- <div id="bezel"></div>-->
<!-- <div id="NWSE" class="quad"></div>-->
<!-- <div id="NESW" class="quad"></div>-->
<!-- <div id="NS" class="quad"></div>-->
<!-- <div id="WE" class="quad"></div>-->
<!-- <span id="N" class="dir">N</span>-->
<!-- <span id="E" class="dir">O</span>-->
<!-- <span id="S" class="dir">S</span>-->
<!-- <span id="W" class="dir">W</span>-->
<!-- <div id="needle"></div>-->
<!-- <div id="axis"></div>-->
<!-- </div>-->
<!-- <div id="compass1">-->
<!-- <div id="bezelTCP"></div>-->
<!-- <div id="NWSETCP" class="quad"></div>-->
<!-- <div id="NESWTCP" class="quad"></div>-->
<!-- <div id="NSTCP" class="quad"></div>-->
<!-- <div id="WETCP" class="quad"></div>-->
<!-- <span id="NTCP" class="dir">N</span>-->
<!-- <span id="ETCP" class="dir">O</span>-->
<!-- <span id="STCP" class="dir">S</span>-->
<!-- <span id="WTCP" class="dir">W</span>-->
<!-- <div id="needleTCP"></div>-->
<!-- <div id="axisTCP"></div>-->
<!-- </div>-->
<label id="airspeedLabel"
style="display:inline-block; width: 200px; margin-right: 0; color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ref. Speed:</label>
<label id="altitudeLabel"
@ -172,7 +146,6 @@
<span id="headingTcp"></span>
<span id="attitudeSer"></span>
<span id="attitudeTcp"></span>
<!-- <span id="variometer"></span>-->
<div>
<div id="viewport">