188 lines
8.5 KiB
HTML
188 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
|
|
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
|
|
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
|
|
<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="static/scripts/distanceCalc.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">
|
|
</head>
|
|
<body>
|
|
<table style="font-size: small">
|
|
<tr>
|
|
<td valign="top" width="100%">
|
|
<div class="controls">
|
|
<label><input type="checkbox" id="checkbox1" value="smartphone"> TCP</label><br>
|
|
<label><input type="checkbox" id="checkbox2" value="ublox"> SERIAL</label><br>
|
|
<button id="open">Livetracking starten</button>
|
|
<button id="close" style="display: none">Trennen</button>
|
|
|
|
<button id="allesbeenden" style="margin-right: 16px;">Pipeline stoppen</button>
|
|
<button id="messungstarten">Aufnahme starten</button>
|
|
<button id="messungbeenden" style="margin-right: 16px;">Aufnahme beenden</button>
|
|
<button id="messungladen" style="margin-right: 16px;">Aufnahmen laden</button>
|
|
|
|
<label>Aufnahmen:
|
|
<select name="meas" id="meas" disabled>
|
|
</select>
|
|
</label>
|
|
<button id="replaystarten" style="margin-right: 16px;" disabled>Wiedergabe starten</button>
|
|
<button id="fullReplay">TRACKINGANALYSE</button>
|
|
</div>
|
|
<br>
|
|
<label id="tracking state" style="font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Tracking
|
|
state: </label><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>
|
|
<label id="SERIALlat" style="font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox lat: </label>
|
|
</td>
|
|
<td valign="top">
|
|
<div id="output"><p>CLOSED</p></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="float-container">
|
|
<div class="float-child left-col">
|
|
<div class="sceneMap">
|
|
<div id="map"></div>
|
|
<div id="state-legend" class="legend">
|
|
<h4>Legende</h4>
|
|
<div><span style="background-color: rgba(214, 69, 65, 1)"></span>Ublox</div>
|
|
<div><span style="background-color: rgba(30, 139, 195, 1)"></span>Smartphone</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="outer">
|
|
<div>
|
|
<label id="speedTCP"
|
|
style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed
|
|
Smartphone (km/h): </label><br>
|
|
<label id="speedSERIAL"
|
|
style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed
|
|
Ublox
|
|
(km/h): </label><br>
|
|
</div>
|
|
<div>
|
|
<canvas id="speedometer" width="320" height="230"></canvas>
|
|
<canvas id="speedometerSpeeds" width="320" height="230"></canvas>
|
|
<p class="speedMin">0</p>
|
|
<p class="speed14">62</p>
|
|
<p class="speedMed">125</p>
|
|
<p class="speed34">188</p>
|
|
<p class="speedMax">250</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="led-container">
|
|
<div class="lamps">
|
|
<div class="lamp">
|
|
<div class="lampinner" id="greenlamp" style="background-color: darkgreen"></div>
|
|
</div>
|
|
<div class="lamp">
|
|
<div class="lampinner" id="yellow" style="background-color: #9D7519"></div>
|
|
</div>
|
|
<div class="lamp">
|
|
<div class="lampinner" id="redlamp" style="background-color: #8b0000"></div>
|
|
</div>
|
|
<label style="margin:auto; margin-left: 10px">Smartphone Genauigkeit</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accuracy-container">
|
|
<div style="width: 500px; height: 150px;">
|
|
<canvas id="accuracy" width="500" height="150"></canvas>
|
|
</div>
|
|
<div class="accuracy-values">
|
|
<div class="container" style="width: 150px; height: 70px">
|
|
<label id="serialHAcc"
|
|
style="color: rgba(214, 69, 65, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox
|
|
HAcc: </label><br>
|
|
<label id="tcpHAcc"
|
|
style="color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Phone
|
|
HAcc: </label><br>
|
|
<label id="distance"
|
|
style="color: rgba(30, 139, 0, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">
|
|
Distance: </label>
|
|
|
|
</div>
|
|
<div class="container" style="width: 150px; height: 50px">
|
|
<label id="serialVAcc"
|
|
style="color: rgba(214, 69, 65, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox
|
|
VAcc: </label><br>
|
|
<label id="tcpVAcc"
|
|
style="color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Phone
|
|
VAcc: </label><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="float-child right-col">
|
|
<div class="compass-container">
|
|
<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"
|
|
style="display:inline-block; width: 200px; margin-right: 0; color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif"></label>
|
|
<label id="compassTCP"
|
|
style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif"></label><br>
|
|
<label id="compassSERIALMot"
|
|
style="display:inline-block; width: 200px; margin-right: 0; color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif"></label>
|
|
<label id="compassTCPMot"
|
|
style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif"></label><br>
|
|
|
|
</div>
|
|
</div>
|
|
<span id="headingSer"></span>
|
|
<span id="headingTcp"></span>
|
|
<span id="attitudeSer"></span>
|
|
<span id="attitudeTcp"></span>
|
|
|
|
<div>
|
|
<div id="viewport">
|
|
</div>
|
|
<label id="quaternionOffset"
|
|
style="color: grey; font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Lage Abweichung: </label><br>
|
|
<div class="slidecontainer">
|
|
<button id="calibrate">Smartphone Ausrichtung kalibrieren</button>
|
|
<button id="deleteCalibration">Kalibrierung zurücksetzen</button>
|
|
<button id="manualCalibration">Manuelle Kalibrierung</button>
|
|
<div id="manCalContainer">
|
|
<p><br>Manuelle Kalibrierung</p>
|
|
<label>Pitch<input type="range" min="-180" max="180" value="0" class="slider" id="pitchRange"
|
|
style="margin: 10px 0px"></label>
|
|
<label>Yaw<input type="range" min="-180" max="180" value="0" class="slider" id="yawRange"
|
|
style="margin: 10px 0px"></label>
|
|
<label>Roll<input type="range" min="-180" max="180" value="0" class="slider" id="rollRange"
|
|
style="margin: 10px 0px"></label>
|
|
</div>
|
|
</div>
|
|
<script src="static/scripts/indicators.js"></script>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="static/scripts/map.js"></script>
|
|
<script src="static/scripts/speedometer.js"></script>
|
|
|
|
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
|
|
<script src="static/scripts/accuracy.js"></script>
|
|
</body>
|
|
</html>
|