polar-recorder
Version:
A SignalK plugin to record boat polars based on sailing performance
65 lines (59 loc) • 2.24 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polar Data Viewer</title>
<script src="./libs/highcharts.js"></script>
<script src="./libs/highcharts-more.js"></script>
<script src="./libs/exporting.js"></script>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="headerContainer">
<h2>Polar Data Viewer</h1>
<p id="updateTime">Polar file updated at: --:--:--</p>
<select id="polarFileSelect"></select>
<button id="exportPolarBtn">Export current polar</button>
<button id="importPolarBtn">Import polar file</button>
<!-- <button id="newPolarBtn">Create new Polar</button> -->
<!-- <button id="recordPolarBtn">Record Polar</button>
<div id="recordControls">
<button id="stopSaveBtn">Stop & Save</button>
<button id="stopCancelBtn">Stop & Cancel</button>
</div> -->
</div>
<div id="liveData">
<div>
<span id="windAngle">Wind Angle: --°</span> |
<span id="windSpeed">Wind Speed: -- kt</span> |
<span id="boatSpeed">Boat Speed: -- kt</span>
</div>
<div style="margin-top: 5px; font-size: 1em;">
<span id="closestPolar">Closest Polar: -- kt TWS / --° TWA</span> <br>
<span id="speedDifference">Difference: -- kt (--%)</span>
</div>
</div>
<div id="container"></div>
<div id="toggleTableContainer">
<button id="toggleTableBtn">Show Table</button>
<div id="tableWrapper">
<table id="polarTable">
<thead></thead>
<tbody id="polarTableBody"></tbody>
</table>
</div>
</div>
<div id="chartControls">
<button id="toggleFullChartBtn">Half polar</button>
</div>
<div id="motoringOverlay" class="">
Recording disabled while motoring...
</div>
<div id="recordingOverlay" class="">
<div class="red-dot"></div>
Recording in progress...
</div>
<script type="module" src="./scripts/main.js"></script>
</body>
</html>