tvolkmann/gyrogpsc
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases 1 Wiki Activity
0c8cc110ab
gyrogpsc/templates/index.html

165 lines
7.4 KiB
HTML
Raw Blame History

<!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>
<button id="fullReplay">Gesamte Wiedergabe</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" width="100%">
<div id="output"><p>.</p></div>
</td>
</tr>
</table>
<div class="float-container">
<div class="float-child">
<div class="sceneMap" 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="container">
<div style="width: 500px; height: 150px;">
<canvas id="accuracy" width="500" height="150"></canvas>
</div>
<div class="float container">
<div class="float-child">
<div class="container" style="width: 200px; height: 50px">
<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="serialVAcc" style= "color: rgba(214, 69, 65, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox VAcc: </label>
</div>
</div>
<div class="float-child">
<div class="container" style="width: 200px; height: 50px">
<label id="tcpHAcc" style= "color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone HAcc: </label><br>
<label id="tcpVAcc" style= "color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone VAcc: </label>
</div>
</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="float-container">
<div class="float-child">
<div id="compass">
<label id="compassSERIAL" style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox </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">E</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>
<div class="float-child">
<div id="compass1">
<label id="compassTCP" style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone </label><br>
<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">E</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>
<div class="float-child">
</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>
Reference in New Issue View Git Blame Copy Permalink