V2
This commit is contained in:
+31
-36
@@ -4,13 +4,14 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Sub Control</title>
|
||||
<link rel="stylesheet" href="styles.css?v=20260826-controls-v2">
|
||||
<link rel="stylesheet" href="styles.css?v=20260827-bridge-v5">
|
||||
</head>
|
||||
<body>
|
||||
<main class="app-shell">
|
||||
|
||||
<!-- ── DECK (Connection, 3D Model, Battery, Deck Controls, Status) ── -->
|
||||
<aside class="sidebar-deck pywebview-drag-region" aria-label="Vehicle Deck and Status">
|
||||
<aside class="sidebar-deck" aria-label="Vehicle Deck and Status">
|
||||
<div class="sidebar-drag-surface pywebview-drag-region" aria-hidden="true"></div>
|
||||
<!-- Connection Controls -->
|
||||
<div class="deck-connection">
|
||||
<div class="port-row">
|
||||
@@ -33,9 +34,7 @@
|
||||
<!-- Telemetry / Status Zone -->
|
||||
<section class="telemetry-zone" aria-label="Vehicle Telemetry and Status">
|
||||
<div class="deck-card model-card">
|
||||
<div class="eyebrow">live vehicle</div>
|
||||
<div class="rov-stage" aria-label="Top view of three-thruster ROV">
|
||||
<div class="water-ring r1"></div><div class="water-ring r2"></div>
|
||||
<canvas id="model-canvas" aria-label="Interactive STL vehicle model"></canvas>
|
||||
<div id="model-status" class="model-status">Initializing…</div>
|
||||
<div class="model-tools">
|
||||
@@ -43,11 +42,6 @@
|
||||
<input id="model-input" type="file" accept=".stl,.STL" hidden>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vehicle-name">
|
||||
<small>vehicle</small>
|
||||
<strong>SimpleROV-3</strong>
|
||||
<span>3 thrusters • differential drive</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Battery Status -->
|
||||
@@ -57,27 +51,15 @@
|
||||
</button>
|
||||
|
||||
<div class="deck-status-bar">
|
||||
<div class="status-line">
|
||||
<span id="status-dot" class="status-dot"></span>
|
||||
<p id="status-text">Disconnected — select a port and connect</p>
|
||||
<a id="logs" class="logs-link" title="Open session logs" aria-label="Open session logs">logs</a>
|
||||
</div>
|
||||
<ol class="activity-history" aria-label="Last three events" aria-live="polite">
|
||||
<li id="activity-oldest" hidden></li>
|
||||
<li id="activity-previous" hidden></li>
|
||||
<li id="status-text">Not connected</li>
|
||||
</ol>
|
||||
<header class="activity-heading"><span>Recent activity</span><a id="logs" class="logs-link" title="Open session logs" aria-label="Open session logs">Logs</a></header>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Output Limit & Motor Setup -->
|
||||
<div class="deck-card controls-deck">
|
||||
<label class="output-limit">
|
||||
<span>output limit <b id="gain-value">20%</b></span>
|
||||
<div class="range-pill">
|
||||
<button id="gain-down" type="button" aria-label="Decrease output limit">‹</button>
|
||||
<input id="gain" type="range" min="5" max="50" value="20">
|
||||
<button id="gain-up" type="button" aria-label="Increase output limit">›</button>
|
||||
</div>
|
||||
</label>
|
||||
<button class="button subtle config-btn" data-open="motors-modal">Motor Setup</button>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<!-- ── PRIMARY CONTROL ZONE ── -->
|
||||
@@ -95,13 +77,14 @@
|
||||
<section class="primary-control-zone" aria-label="Primary Control Zone">
|
||||
<!-- Reserved Engage / Disarm row -->
|
||||
<div class="engage-header-zone">
|
||||
<span class="zone-label">vehicle control</span>
|
||||
<button id="engage" class="button subtle engage-button" aria-label="Engage" title="Engage (F2)">
|
||||
<button id="engage" class="button subtle engage-button" aria-label="Engage" aria-describedby="control-status" title="Engage (F2)">
|
||||
<span class="engage-face">
|
||||
<span id="engage-label" class="engage-label">ENGAGE</span>
|
||||
<span class="engage-progress-label" aria-hidden="true">ENGAGE</span>
|
||||
<span id="engage-label" class="engage-label">engage</span>
|
||||
<span class="engage-sheen-label" aria-hidden="true">engage</span>
|
||||
<span class="engage-progress-label" aria-hidden="true">engage</span>
|
||||
</span>
|
||||
</button>
|
||||
<p id="control-status" class="control-status" role="status" aria-live="polite">Connect to receive vehicle state.</p>
|
||||
</div>
|
||||
|
||||
<!-- Main Joysticks & Thrust Control Grid -->
|
||||
@@ -109,12 +92,12 @@
|
||||
<!-- Steering / Throttle Joystick -->
|
||||
<article class="control-card steer-card">
|
||||
<header>
|
||||
<div><small>steer + throttle</small><strong>differential drive</strong></div>
|
||||
<div><small>steer + throttle</small></div>
|
||||
<span class="key-hint">w a s d</span>
|
||||
</header>
|
||||
<div class="joystick-pad">
|
||||
<div id="joystick" class="joystick" touch-action="none">
|
||||
<canvas id="joystick-canvas" aria-label="3D Interactive Spherical Joystick"></canvas>
|
||||
<canvas id="joystick-canvas" aria-label="Steering and throttle joystick; W A S D keys"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
@@ -126,7 +109,7 @@
|
||||
<!-- Vertical Thruster Slider -->
|
||||
<article class="control-card vertical-card">
|
||||
<header>
|
||||
<div><small>vertical</small><strong>center thruster</strong></div>
|
||||
<div><small>vertical</small></div>
|
||||
<span class="key-hint">r / f</span>
|
||||
</header>
|
||||
<div class="heave-pad">
|
||||
@@ -145,6 +128,17 @@
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
<div class="control-toolbar">
|
||||
<label class="output-limit">
|
||||
<span>Output limit <b id="gain-value">20%</b></span>
|
||||
<div class="range-pill">
|
||||
<button id="gain-down" type="button" aria-label="Decrease output limit">‹</button>
|
||||
<input id="gain" aria-label="Output limit" type="range" min="5" max="50" value="20">
|
||||
<button id="gain-up" type="button" aria-label="Increase output limit">›</button>
|
||||
</div>
|
||||
</label>
|
||||
<button class="button subtle config-btn" data-open="motors-modal">Motor setup</button>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
@@ -157,7 +151,8 @@
|
||||
<dialog id="motors-modal" class="modal motor-modal"><button class="modal-close" data-close>×</button><small>configuration</small><h2>Motor Outputs</h2><p class="note">Function and direction are read one parameter at a time to protect the low-bandwidth link.</p><div class="motor-head"><span>Output</span><span>Function</span><span>Direction</span><span></span></div><div id="motor-list" class="motor-list"></div></dialog>
|
||||
|
||||
<script src="model-viewer.js?v=20260826-controls-v2"></script>
|
||||
<script src="joystick-3d.js?v=20260826-controls-v2"></script>
|
||||
<script src="app.js?v=20260826-controls-v2"></script>
|
||||
<script src="joystick-3d.js?v=20260827-polish-v3"></script>
|
||||
<script src="control-state.js?v=20260827-state-v1"></script>
|
||||
<script src="app.js?v=20260827-bridge-v6"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user