diff --git a/static/scripts/cubes.js b/static/scripts/cubes.js index 27c8179..1ce2920 100644 --- a/static/scripts/cubes.js +++ b/static/scripts/cubes.js @@ -58,14 +58,17 @@ cube2.position.x = 0 let manCalibration = new THREE.Euler( 0, 0, 0, 'XYZ' ) let calibrationRot = new THREE.Quaternion() +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, z, y, 'YXZ' ); // let eul = new THREE.Euler( x, z, y, 'ZXY' ); // XYZ XZY YZX YXZ ZXY ZYX + cube2.quaternion.setFromEuler(eul).multiply(calibrationRot).multiply(calibration) - cube2.quaternion.setFromEuler(eul).multiply(calibrationRot)//.multiply(calibration) + quaternionOffset.innerHTML = `Lage Abweichung: ${(cube2.quaternion.angleTo(cube.quaternion) * 180 / Math.PI).toFixed(2) }°` renderer.render(scene, camera); } @@ -114,15 +117,16 @@ function manualCalibration(evt) { let con = document.getElementById("manCalContainer") console.log("mancal", con.style.display) if (calState === false) { + delCalibration() calState = !calState console.log("mancal ON") con.style.display = "block" - delCalibration() } else { + delCalibration() calState = !calState console.log("mancal OFF") con.style.display = "none" - manCalibration = new THREE.Euler( 0, 0, 0, 'YXZ' ) + manCalibration = new THREE.Euler( 0, 0, 0, 'XYZ' ) pitchRange.value = 0 yawRange.value = 0 rollRange.value = 0 @@ -138,3 +142,82 @@ function calibrate(evt) { document.getElementById("deleteCalibration").onclick = delCalibration document.getElementById("manualCalibration").onclick = manualCalibration document.getElementById("calibrate").onclick = calibrate + + +// indicators // + +var 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 + heading: 0, // Heading angle in degrees for an heading indicator + vario: 0, // Variometer in 1000 feets/min for the variometer indicator + airspeed: 0, // Air speed in knots for an air speed indicator + altitude: 0, // Altitude in feets for an altimeter indicator + pressure: 1000, // Pressure in hPa for an altimeter indicator + showBox : true, // Sets if the outer squared box is visible or not (true or false) + 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); + +var airspeedLabel = document.getElementById("airspeedLabel") +var 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 * -1) + //attitudeTcp.setRoll(sensordata.Orientation[1]) + attitudeTcp.setRoll(-q.z * 180 / Math.PI * -1) + } + + // 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) + } +} + +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.HeadDevice + if (heading !== 0) { + headingSer.setHeading(heading) + } + if (sensordata.Speed !== 0) { + airspeed.setAirSpeed(sensordata.Speed * 3.6) + airspeedLabel.innerHTML = `Ref. Speed: ${(sensordata.Speed * 3.6).toFixed(1)} km/h` + } + if (sensordata.Position[2] !== 0) { + altimeter.setAltitude((sensordata.Position[2] * 10).toFixed()) + altitudeLabel.innerHTML = `HMSL: ${(sensordata.Position[2]).toFixed(2)} m` + } +} + diff --git a/static/scripts/speedometer.js b/static/scripts/speedometer.js index 2ceb297..315e209 100644 --- a/static/scripts/speedometer.js +++ b/static/scripts/speedometer.js @@ -152,7 +152,7 @@ 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) + document.getElementById("speedSERIAL").innerHTML = `Ublox: ${speedSERIALkmh.toFixed(1)} km/h` mySpeedometer.update(); } @@ -160,6 +160,6 @@ 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) + document.getElementById("speedTCP").innerHTML = `Phone: ${speedTCPkmh.toFixed(1)} km/h` mySpeedometer.update(); } diff --git a/static/scripts/websocket.js b/static/scripts/websocket.js index 5868447..11ba5d8 100644 --- a/static/scripts/websocket.js +++ b/static/scripts/websocket.js @@ -10,7 +10,7 @@ window.addEventListener("load", function(evt) { const wsOnCloseF = function (evt) { ws = null; - print2("CLOSE"); + print2("CLOSED"); var intervalId; intervalId = setInterval(() => { console.log("reconnect websocket...") @@ -29,21 +29,18 @@ window.addEventListener("load", function(evt) { }, 1000) } const wsOnMessageF = 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) + //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)){ - // document.getElementById("gyroscopeTCP").style.transform = `rotateX(${(dat.SOURCE_TCP.Orientation[0])%360}deg) rotateY(${(dat.SOURCE_TCP.Orientation[1])%360}deg) rotateZ(0deg)` - // document.getElementById("gyroscopeTCP").style.transform = `rotateY(0deg) rotateX(${(-dat.SOURCE_TCP.Orientation[0])}deg) rotateZ(${(dat.SOURCE_TCP.Orientation[1])}deg) ` - // document.getElementById("gyroscopeTCP").style.transform = `rotateX(${(dat.SOURCE_TCP.Orientation[0])%360}deg) rotateZ(${(dat.SOURCE_TCP.Orientation[1])%360}deg) rotateY(${(dat.SOURCE_TCP.Orientation[2])%360}deg)` - // console.log(dat.SOURCE_TCP.Orientation) - renderTCP(dat.SOURCE_TCP.Orientation[0]*Math.PI/180,-dat.SOURCE_TCP.Orientation[1]*Math.PI/180,dat.SOURCE_TCP.Orientation[2]*Math.PI/180) + 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") } + + renderTCP(dat.SOURCE_TCP.Orientation[0]*Math.PI/180,-dat.SOURCE_TCP.Orientation[1]*Math.PI/180,heading*Math.PI/180) } if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){ document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1] @@ -55,15 +52,20 @@ window.addEventListener("load", function(evt) { addSpeedTcp(dat.SOURCE_TCP.Speed); } if(!(dat.SOURCE_TCP.HeadDevice === 0)){ - document.getElementById("compassTCP").innerHTML = "Smartphone:
" + dat.SOURCE_TCP.HeadDevice.toFixed(0) + "°" - document.getElementById("needleTCP").style.transform = `rotate(${dat.SOURCE_TCP.HeadDevice}deg)` + 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)) { + document.getElementById("compassTCPMot").innerHTML = "Heading Motion: " + dat.SOURCE_TCP.HeadMotion.toFixed(2) + "°" } } 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)` @@ -80,8 +82,11 @@ window.addEventListener("load", function(evt) { 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)` + 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)) { + document.getElementById("compassSERIALMot").innerHTML = "Heading Motion: " + dat.SOURCE_SERIAL.HeadDevice.toFixed(2) + "°" } }catch{ // console.log("no serial data") @@ -92,22 +97,22 @@ window.addEventListener("load", function(evt) { 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) + // console.log("acc: " + dat.SOURCE_SERIAL.HAcc, dat.SOURCE_SERIAL.VAcc) } } catch{ - console.log("no Serial acc") + // 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) + // console.log("acc: " + dat.SOURCE_TCP.HAcc, dat.SOURCE_TCP.VAcc) } } catch{ - console.log("no TCP acc") + // console.log("no TCP acc") } } const wsOnOpenF = function (evt) { diff --git a/static/style.css b/static/style.css index 763548d..6afe762 100644 --- a/static/style.css +++ b/static/style.css @@ -49,6 +49,7 @@ body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman" display: flex; flex-flow: wrap; width: 34%; + max-width: 460px; } .left-col { display: flex; @@ -469,3 +470,7 @@ label { margin-right: 10px; } width: 100%; height: 360px; } + +.compass-digital { + width: 400px; +} diff --git a/templates/index.html b/templates/index.html index 9d8c1cb..c8cd8af 100644 --- a/templates/index.html +++ b/templates/index.html @@ -8,15 +8,15 @@ + + + - -
-

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



@@ -33,7 +33,7 @@ - +

-

.

+

CLOSED
@@ -121,40 +121,61 @@
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
-
-
-
-
-
- N - O - S - W -
-
-
-
+ style="display:inline-block; width: 200px; margin-right: 0; color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">
-
-
-
-
-
- N - O - S - W -
-
+ style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">
+ +
+
+ + + + + +
+