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

BIG FRONTEND REFRESH =)

Browse Source
This commit is contained in:
Timo Volkmann 2021-01-11 00:01:00 +01:00
parent 9f91328c08
commit 1301333629
5 changed files with 173 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
static/scripts/cubes.js
View File

@ -58,14 +58,17 @@ cube2.position.x = 0
let manCalibration = new THREE.Euler( 0, 0, 0, 'XYZ' ) let manCalibration = new THREE.Euler( 0, 0, 0, 'XYZ' )
let calibrationRot = new THREE.Quaternion() let calibrationRot = new THREE.Quaternion()
let quaternionOffset = document.getElementById("quaternionOffset")
function renderTCP(x, y, z) { function renderTCP(x, y, z) {
let calibration = new THREE.Quaternion().setFromEuler(manCalibration) let calibration = new THREE.Quaternion().setFromEuler(manCalibration)
// let calibration = new THREE.Quaternion().setFromEuler(new THREE.Euler( radFromAngle, 0, 0, 'YXZ' )) // 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, 'YXZ' );
// let eul = new THREE.Euler( x, z, y, 'ZXY' ); // XYZ XZY YZX YXZ ZXY ZYX // 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); renderer.render(scene, camera);
} }
@ -114,15 +117,16 @@ function manualCalibration(evt) {
let con = document.getElementById("manCalContainer") let con = document.getElementById("manCalContainer")
console.log("mancal", con.style.display) console.log("mancal", con.style.display)
if (calState === false) { if (calState === false) {
delCalibration()
calState = !calState calState = !calState
console.log("mancal ON") console.log("mancal ON")
con.style.display = "block" con.style.display = "block"
delCalibration()
} else { } else {
delCalibration()
calState = !calState calState = !calState
console.log("mancal OFF") console.log("mancal OFF")
con.style.display = "none" con.style.display = "none"
manCalibration = new THREE.Euler( 0, 0, 0, 'YXZ' ) manCalibration = new THREE.Euler( 0, 0, 0, 'XYZ' )
pitchRange.value = 0 pitchRange.value = 0
yawRange.value = 0 yawRange.value = 0
rollRange.value = 0 rollRange.value = 0
@ -138,3 +142,82 @@ function calibrate(evt) {
document.getElementById("deleteCalibration").onclick = delCalibration document.getElementById("deleteCalibration").onclick = delCalibration
document.getElementById("manualCalibration").onclick = manualCalibration document.getElementById("manualCalibration").onclick = manualCalibration
document.getElementById("calibrate").onclick = calibrate 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`
}
}

4
static/scripts/speedometer.js
View File

@ -152,7 +152,7 @@ function addSpeedSerial(speedSERIAL){
var speedSERIALkmh = (speedSERIAL * 3.6) var speedSERIALkmh = (speedSERIAL * 3.6)
var speedSERIALpercent = (speedSERIALkmh/250)*100 var speedSERIALpercent = (speedSERIALkmh/250)*100
mySpeedometer.data.datasets[1].data = [speedSERIALpercent, 100-speedSERIALpercent]; 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(); mySpeedometer.update();
} }
@ -160,6 +160,6 @@ function addSpeedTcp(speedTCP){
var speedTCPkmh = (speedTCP * 3.6) var speedTCPkmh = (speedTCP * 3.6)
var speedTCPpercent = (speedTCPkmh/250)*100; var speedTCPpercent = (speedTCPkmh/250)*100;
mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent]; 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(); mySpeedometer.update();
} }

49
static/scripts/websocket.js
View File

@ -10,7 +10,7 @@ window.addEventListener("load", function(evt) {
const wsOnCloseF = function (evt) { const wsOnCloseF = function (evt) {
ws = null; ws = null;
print2("CLOSE"); print2("CLOSED");
var intervalId; var intervalId;
intervalId = setInterval(() => { intervalId = setInterval(() => {
console.log("reconnect websocket...") console.log("reconnect websocket...")
@ -29,21 +29,18 @@ window.addEventListener("load", function(evt) {
}, 1000) }, 1000)
} }
const wsOnMessageF = function (evt) { 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) let dat = JSON.parse(evt.data)
// dataSmartphone.push(dat) //console.log(dat)
//console.log(evt.data) if ('SOURCE_TCP' in dat) {
// console.log("JSON geparsed onmessage", dat) setIndicatorsTcp(dat.SOURCE_TCP)
}
try{ try{
if(!(dat.SOURCE_TCP.Orientation[0] === 0) && !(dat.SOURCE_TCP.Orientation[1] === 0) && !(dat.SOURCE_TCP.Orientation[2] === 0)){ 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)` let heading = (dat.SOURCE_TCP.Orientation[2]+90)%360 // dat.SOURCE_TCP.Orientation[2]//
// document.getElementById("gyroscopeTCP").style.transform = `rotateY(0deg) rotateX(${(-dat.SOURCE_TCP.Orientation[0])}deg) rotateZ(${(dat.SOURCE_TCP.Orientation[1])}deg) ` // if (dat.SOURCE_TCP.HeadDevice !== 0) { heading = dat.SOURCE_TCP.HeadDevice; }
// 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)` // if (dat.SOURCE_TCP.HeadMotion !== 0) { heading = dat.SOURCE_TCP.HeadMotion; console.log("head motion") }
// 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) 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)){ 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("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
@ -55,15 +52,20 @@ window.addEventListener("load", function(evt) {
addSpeedTcp(dat.SOURCE_TCP.Speed); addSpeedTcp(dat.SOURCE_TCP.Speed);
} }
if(!(dat.SOURCE_TCP.HeadDevice === 0)){ if(!(dat.SOURCE_TCP.HeadDevice === 0)){
document.getElementById("compassTCP").innerHTML = "Smartphone: <br>" + dat.SOURCE_TCP.HeadDevice.toFixed(0) + "°" document.getElementById("compassTCP").innerHTML = " Heading Device: " + dat.SOURCE_TCP.HeadDevice.toFixed(2) + "°"
document.getElementById("needleTCP").style.transform = `rotate(${dat.SOURCE_TCP.HeadDevice}deg)` // 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{ catch{
// console.log("no TCP data") // console.log("no TCP data")
} }
if ('SOURCE_SERIAL' in dat) {
setIndicatorsSer(dat.SOURCE_SERIAL)
}
try{ try{
if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && /*!(dat.SOURCE_SERIAL.Orientation[1] === 0) &&*/ !(dat.SOURCE_SERIAL.Orientation[2] === 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(0deg)` // 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); addSpeedSerial(dat.SOURCE_SERIAL.Speed);
} }
if(!(dat.SOURCE_SERIAL.HeadDevice === 0)){ if(!(dat.SOURCE_SERIAL.HeadDevice === 0)){
document.getElementById("compassSERIAL").innerHTML = "Ublox: " + dat.SOURCE_SERIAL.HeadDevice.toFixed(0) + "°" document.getElementById("compassSERIAL").innerHTML = "Heading Device: " + dat.SOURCE_SERIAL.HeadDevice.toFixed(2) + "°"
document.getElementById("needle").style.transform = `rotate(${dat.SOURCE_SERIAL.HeadDevice}deg)` // 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{ }catch{
// console.log("no serial data") // console.log("no serial data")
@ -92,22 +97,22 @@ window.addEventListener("load", function(evt) {
addSerialAccuracy(dat.SOURCE_SERIAL.HAcc, dat.SOURCE_SERIAL.VAcc) addSerialAccuracy(dat.SOURCE_SERIAL.HAcc, dat.SOURCE_SERIAL.VAcc)
document.getElementById("serialHAcc").innerHTML = "Ublox HAcc: " + dat.SOURCE_SERIAL.HAcc.toFixed(2) + " m" 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" 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{ catch{
console.log("no Serial acc") // console.log("no Serial acc")
} }
try{ try{
if(!(dat.SOURCE_TCP.HAcc === 0) && !(dat.SOURCE_TCP.VAcc === 0)){ if(!(dat.SOURCE_TCP.HAcc === 0) && !(dat.SOURCE_TCP.VAcc === 0)){
addTCPAccuracy(dat.SOURCE_TCP.HAcc, dat.SOURCE_TCP.VAcc) addTCPAccuracy(dat.SOURCE_TCP.HAcc, dat.SOURCE_TCP.VAcc)
document.getElementById("tcpHAcc").innerHTML = "Smartphone HAcc: " + dat.SOURCE_TCP.HAcc.toFixed(2) + " m" 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" 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{ catch{
console.log("no TCP acc") // console.log("no TCP acc")
} }
} }
const wsOnOpenF = function (evt) { const wsOnOpenF = function (evt) {

5
static/style.css
View File

@ -49,6 +49,7 @@ body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman"
display: flex; display: flex;
flex-flow: wrap; flex-flow: wrap;
width: 34%; width: 34%;
max-width: 460px;
} }
.left-col { .left-col {
display: flex; display: flex;
@ -469,3 +470,7 @@ label { margin-right: 10px; }
width: 100%; width: 100%;
height: 360px; height: 360px;
} }
.compass-digital {
width: 400px;
}

85
templates/index.html
View File

@ -8,15 +8,15 @@
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet"/> <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.js"></script>
<script src="static/scripts/websocket.js"></script> <script src="static/scripts/websocket.js"></script>
<link rel="stylesheet" type="text/css" href="static/indicators/css/flightindicators.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="static/indicators/js/jquery.flightindicators.js"></script>
<link rel="stylesheet" href="static/style.css"> <link rel="stylesheet" href="static/style.css">
<!-- <script src="http://www.x3dom.org/release/x3dom.js"></script>-->
<!-- <link rel="stylesheet" href="http://www.x3dom.org/release/x3dom.css">-->
</head> </head>
<body> <body>
<table style="font-size: small"> <table style="font-size: small">
<tr> <tr>
<td valign="top" width="100%"> <td valign="top" width="100%">
<p>"Verbinden" klicken um eine Verbindung mit dem Server aufzubauen. {{.}}</p>
<div class="controls"> <div class="controls">
<label><input type="checkbox" id="checkbox1" value="smartphone"> TCP</label><br> <label><input type="checkbox" id="checkbox1" value="smartphone"> TCP</label><br>
<label><input type="checkbox" id="checkbox2" value="ublox"> SERIAL</label><br> <label><input type="checkbox" id="checkbox2" value="ublox"> SERIAL</label><br>
@ -33,7 +33,7 @@
</select> </select>
</label> </label>
<button id="replaystarten" style="margin-right: 16px;" disabled>Wiedergabe starten</button> <button id="replaystarten" style="margin-right: 16px;" disabled>Wiedergabe starten</button>
<button id="fullReplay">Gesamte Wiedergabe</button> <button id="fullReplay">TRACKINGANALYSE</button>
</div> </div>
<br> <br>
<label id="tracking state" style="font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Tracking <label id="tracking state" style="font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Tracking
@ -45,7 +45,7 @@
<label id="SERIALlat" style="font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox lat: </label> <label id="SERIALlat" style="font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox lat: </label>
</td> </td>
<td valign="top"> <td valign="top">
<div id="output"><p>.</p></div> <div id="output"><p>CLOSED</p></div>
</td> </td>
</tr> </tr>
</table> </table>
@ -121,40 +121,61 @@
<div class="float-child right-col"> <div class="float-child right-col">
<div class="compass-container"> <div class="compass-container">
<div id="compass"> <!-- <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"
style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Altitude: </label><br>
<span id="airspeed"></span>
<span id="altimeter"></span>
<div class="compass-digital">
<label id="compassSERIAL" <label id="compassSERIAL"
style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox </label> style="display:inline-block; width: 200px; margin-right: 0; color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif"></label>
<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">
<label id="compassTCP" <label id="compassTCP"
style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone </label><br> style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif"></label><br>
<div id="bezelTCP"></div> <label id="compassSERIALMot"
<div id="NWSETCP" class="quad"></div> style="display:inline-block; width: 200px; margin-right: 0; color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif"></label>
<div id="NESWTCP" class="quad"></div> <label id="compassTCPMot"
<div id="NSTCP" class="quad"></div> style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif"></label><br>
<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> </div>
</div> </div>
<span id="headingSer"></span>
<span id="headingTcp"></span>
<span id="attitudeSer"></span>
<span id="attitudeTcp"></span>
<!-- <span id="variometer"></span>-->
<div> <div>
<div id="viewport"> <div id="viewport">
</div> </div>
<label id="quaternionOffset"
style="color: grey; font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Lage Abweichung: </label><br>
<div class="slidecontainer"> <div class="slidecontainer">
<button id="calibrate">Smartphone Ausrichtung kalibrieren</button> <button id="calibrate">Smartphone Ausrichtung kalibrieren</button>
<button id="deleteCalibration">Kalibrierung zurücksetzen</button> <button id="deleteCalibration">Kalibrierung zurücksetzen</button>