129 lines
5.7 KiB
HTML
129 lines
5.7 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="static/scripts/websocket.js"></script>
|
|
<link rel="stylesheet" href="static/style.css">
|
|
</head>
|
|
<body>
|
|
<table style="font-size: small">
|
|
<tr>
|
|
<td valign="top" width="100%">
|
|
<p>"Verbinden" klicken um eine Verbindung mit dem Server aufzubauen. {{.}}</p>
|
|
<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>
|
|
|
|
|
|
</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>
|
|
<label id="diffLong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Differenz long: </label>
|
|
<label id="diffLat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Differenz lat: </label>
|
|
</td>
|
|
<td valign="top" width="100%">
|
|
<div id="output"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="float-container">
|
|
<div class="float-child">
|
|
<div class="scene" style='width: 500px; height: 500px;'>
|
|
<div id="map" style='width: 500px; height: 500px;'></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="scene">
|
|
<p style="font-size: large">Smartphone</p>
|
|
<div id="gyroscopeTCP" class="cube">
|
|
<div class="cube__face cube__face--front">front</div>
|
|
<div class="cube__face cube__face--back">back</div>
|
|
<div class="cube__face cube__face--right">right</div>
|
|
<div class="cube__face cube__face--left">left</div>
|
|
<div class="cube__face cube__face--top">top</div>
|
|
<div class="cube__face cube__face--bottom">bottom</div>
|
|
</div>
|
|
</div>
|
|
<div class="scene">
|
|
<p style="font-size: large">Ublox</p>
|
|
<div id="gyroscopeSERIAL" class="cube">
|
|
<div class="cube__face cube__face--front">front</div>
|
|
<div class="cube__face cube__face--back">back</div>
|
|
<div class="cube__face cube__face--right">right</div>
|
|
<div class="cube__face cube__face--left">left</div>
|
|
<div class="cube__face cube__face--top">top</div>
|
|
<div class="cube__face cube__face--bottom">bottom</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="float-child">
|
|
<div class="outer">
|
|
<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>
|
|
<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><br>
|
|
<div class="outer">
|
|
<label id="compassTCP" style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone </label><br>
|
|
<label id="compassSERIAL" style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox </label><br>
|
|
<canvas id="compass" width="300" height="200"></canvas>
|
|
<p class="compassNorth">N</p>
|
|
<p class="compassEast">E</p>
|
|
<p class="compassWest">W</p>
|
|
<p class="compassSouth">S</p>
|
|
</div>
|
|
</div>
|
|
<div class="float-child">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script src="static/scripts/map.js"></script>
|
|
<script src="static/scripts/speedometer.js"></script>
|
|
<script src="static/scripts/compass.js"></script>
|
|
|
|
<div class="float-container">
|
|
<div class="float-child">
|
|
|
|
<div style="width: 600px; height: 400px;">
|
|
<canvas id="myChart" width="400" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
|
<script src="static/scripts/chart.js"></script>
|
|
</body>
|
|
</html>
|