polar-recorder
Version:
A SignalK plugin to record boat polars based on sailing performance
204 lines (156 loc) • 7.14 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/theme.css">
<link rel="stylesheet" href="css/sidebar.css">
<link rel="stylesheet" href="css/layout.auto.css">
<link rel="stylesheet" href="css/layout.manual.css">
<link rel="stylesheet" href="css/recording.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/errors.css">
<link rel="stylesheet" href="css/utilities.css">
<link rel="stylesheet" href="css/table.css"> <!-- tu tabla -->
</head>
<body>
<div id="container"></div>
<!----------------------------------- MANUAL ----------------------------------->
<div id="manualRecording">
<div id="recordingStatus" class="control-card">
<div class="section-title">RECORDING</div>
<div class="status-row">
<div class="red-dot"></div>
<span id="autoRecordText"></span>
</div>
<div class="file-row">
File: <span id="current-file-manual" class="file-pill">—</span>
</div>
</div>
<div id="errors-manual" class="errors-container">
<ul id="errors-manual-list"></ul>
</div>
<!-- 1) Selected file -->
<div id="selectedFileCard" class="control-card">
<div class="section-title">SELECTED FILE</div>
<select id="polarFileSelect"></select>
</div>
<!-- 2) File actions -->
<div id="fileActionsCard" class="control-card">
<div class="section-title">FILE ACTIONS</div>
<div class="row-actions">
<button id="exportPolarBtn">Export current polar</button>
<button id="importPolarBtn">Import polar file</button>
<button id="newPolarBtn">Create new Polar</button>
</div>
<!-- input oculto para importar -->
<input type="file" id="importFileInput" accept=".json,.csv" style="display:none">
</div>
<!-- 3) Recording actions -->
<div id="recordActionsCard" class="control-card">
<div class="section-title">RECORD</div>
<div class="row-actions">
<button id="recordPolarBtn">Record Polar</button>
<button id="stopSaveBtn" class="hidden">Stop Recording</button>
</div>
</div>
<div id="lastPolarUpdate" class="control-card">
<div class="section-title">LAST UPDATE</div>
<div>TWA: <b id="last-twa">--</b>°</div>
<div>TWS: <b id="last-tws">--</b> kt</div>
<div>STW: <b id="last-stw">--</b> kt</div>
<div>Date: <b id="last-date">--</b> <span id="last-relative" class="badge muted">(—)</span></div>
</div>
<div id="liveData">
<div class="section-title">NOW</div>
<div>TWA: <b id="now-twa">--</b>°</div>
<div>TWS: <b id="now-tws">--</b> kt</div>
<div>STW: <b id="now-stw">--</b> kt</div>
<hr class="section-sep">
<div class="section-title">POLAR</div>
<div>TWA: <b id="polar-twa">--</b>°</div>
<div>TWS: <b id="polar-tws">--</b> kt</div>
<div>STWexp: <b id="polar-stw">--</b> kt</div>
<hr class="section-sep">
<div class="section-title">Δ STW</div>
<div>
<span id="delta-abs" class="badge">-- kt</span>
<span id="delta-pct" class="badge muted" style="margin-left:6px">(--%)</span>
<span id="delta-trend" class="muted" style="margin-left:6px">–</span>
</div>
</div>
<div id="optionsCard" class="control-card">
<button id="toggleFullChartBtnManual" class="toggleFullChartBtn">Half polar</button>
<button id="showTableBtn" class="js-show-table">Show Table</button>
</div>
</div>
<!----------------------------------- AUTO ----------------------------------->
<div id="autoRecording">
<div id="recordingStatus" class="control-card">
<div class="section-title">RECORDING</div>
<div class="status-row">
<div class="red-dot"></div>
<span id="autoRecordText">Automatic recording in progress</span>
</div>
<div class="file-row">
File: <span id="current-file-auto" class="file-pill">—</span>
</div>
</div>
<div id="errors-auto" class="errors-container">
<ul id="errors-auto-list"></ul>
</div>
<div id="lastPolarUpdate" class="control-card">
<div class="section-title">LAST UPDATE</div>
<div>TWA: <b id="last-twa">--</b>°</div>
<div>TWS: <b id="last-tws">--</b> kt</div>
<div>STW: <b id="last-stw">--</b> kt</div>
<div>Date: <b id="last-date">--</b> <span id="last-relative" class="badge muted">(—)</span></div>
</div>
<div id="liveData">
<div class="section-title">NOW</div>
<div>TWA: <b id="now-twa">--</b>°</div>
<div>TWS: <b id="now-tws">--</b> kt</div>
<div>STW: <b id="now-stw">--</b> kt</div>
<hr class="section-sep">
<div class="section-title">POLAR</div>
<div>TWA: <b id="polar-twa">--</b>°</div>
<div>TWS: <b id="polar-tws">--</b> kt</div>
<div>STWexp: <b id="polar-stw">--</b> kt</div>
<hr class="section-sep">
<div class="section-title">Δ STW</div>
<div>
<span id="delta-abs" class="badge">-- kt</span>
<span id="delta-pct" class="badge muted" style="margin-left:6px">(--%)</span>
<span id="delta-trend" class="muted" style="margin-left:6px">–</span>
</div>
</div>
<div id="optionsCard" class="control-card">
<button id="toggleFullChartBtnAuto" class="toggleFullChartBtn">Half polar</button>
<button id="showTableBtn" class="js-show-table">Show Table</button>
</div>
</div>
<!-------------------------------- OTHER STUFF ----------------------------------->
<div id="toggleTableContainer">
<button id="closeTableBtn">Close</button>
<div id="tableWrapper">
<table id="polarTable">
<thead></thead>
<tbody id="polarTableBody"></tbody>
</table>
</div>
</div>
<div id="motoringOverlay" class="">
Recording disabled while motoring...
</div>
<div id="errorOverlay">
<h1>
Something bad happened. Try to reload the page.
</h1>
</div>
<script type="module" src="./scripts/main.js"></script>
</body>
</html>