Compare commits
9 Commits
10cd37eea7
..
v2
| Author | SHA1 | Date | |
|---|---|---|---|
 PitresAli
|
8ccd7689f7 | ||
|
PitresAli
|
5e91c28f1e | ||
|
PitresAli
|
a4d8f1b7af | ||
|
PitresAli
|
31f720a316 | ||
|
PitresAli
|
0093f3f4aa | ||
|
PitresAli
|
7c85397af0 | ||
|
PitresAli
|
73c20a0ff2 | ||
|
PitresAli
|
84ec93543b | ||
|
PitresAli
|
25bbefda71 |
@@ -3,4 +3,10 @@ __pycache__/
|
||||
*.py[cod]
|
||||
logs/
|
||||
model_settings.json
|
||||
link_settings.json
|
||||
runtime/
|
||||
motor_settings.json
|
||||
|
||||
station_settings.json
|
||||
controller_profiles.json
|
||||
*.json.tmp
|
||||
|
||||
@@ -1,173 +1,40 @@
|
||||
# SUB Control
|
||||
# Argo V2 · SUB Control
|
||||
|
||||
A deliberately small, low-bandwidth MAVLink controller for bench-testing an
|
||||
ArduSub vehicle over a USB serial connection. It sends no parameter-list
|
||||
request and no telemetry-stream request.
|
||||
A Windows control station for ArduSub ROVs over serial or network MAVLink.
|
||||
|
||||
|
||||
V2 adds programmable Xbox inputs, six-axis motion, a camera dashboard, sensor readings and data logging. See the [V2 guide](docs/V2.md) for controls, supported frames, Raspberry Pi/fibre architecture, camera setup and hardware verification limits.
|
||||
|
||||
The desktop window uses a local HTML/CSS/JavaScript interface rendered by the
|
||||
Windows WebView. Python remains the only launcher and owns the MAVLink worker,
|
||||
arming, logging, output limiting, and parameter writes. It does not run a web
|
||||
server, open a browser tab, or require an internet connection.
|
||||
|
||||
|
||||
The WebView is frameless and uses the compact title bar drawn by the interface.
|
||||
The vehicle rail includes a local STL viewer: choose **Load STL** to start with
|
||||
an orthographic top-view silhouette, then drag to orbit or use the mouse wheel
|
||||
to zoom. A cached STL copy is stored locally under the ignored `runtime/`
|
||||
directory so the model can be restored on the next launch.
|
||||
STEP/STP CAD solids must first be tessellated/exported as STL because the
|
||||
embedded renderer intentionally does not include a full CAD kernel.
|
||||
Binary and ASCII STL faces are preserved in full; large assemblies are not
|
||||
rendered by skipping triangles. Imports are limited to 30 MB to keep startup
|
||||
and interactive orbiting responsive.
|
||||
## Quick start
|
||||
|
||||
## Safety first
|
||||
|
||||
- Remove propellers for initial tests and restrain the vehicle.
|
||||
- Verify the ArduSub frame and `SERVOx_FUNCTION`, motor direction, ESC range,
|
||||
leak/failsafe, and emergency-stop arrangements before arming.
|
||||
- The application starts disarmed and limits pilot demand to 20% by default.
|
||||
Once armed, control movement is sent directly with no additional gate.
|
||||
- Closing or disconnecting sends neutral controls and a disarm request, but a
|
||||
physical power cutoff is still required.
|
||||
|
||||
The controls are pilot-demand axes, not direct PWM values. ArduSub performs
|
||||
the frame mixing and generates the configured ESC outputs. For ArduSub,
|
||||
`MANUAL_CONTROL.z = 500` is neutral vertical thrust.
|
||||
|
||||
## Run on Windows
|
||||
|
||||
1. Install Python 3.11 or newer. A virtual environment installs packages, but
|
||||
it does not install Python itself.
|
||||
2. Open PowerShell in this folder and run `./run.ps1` (or right-click it and
|
||||
choose **Run with PowerShell**).
|
||||
3. Select the autopilot's COM port, then click **Connect**. Baud and control-rate
|
||||
settings are under the small `•••` link button (normally 57600 baud / 20 Hz).
|
||||
4. Confirm `ArduSub` and a live heartbeat are shown.
|
||||
5. Click **Set MANUAL**, then **ARM** only when the bench is safe.
|
||||
6. Move the controls. Once armed, no additional enable button is needed.
|
||||
|
||||
`run.ps1` automatically creates a private `.venv` on the first run, installs
|
||||
the versions declared in `requirements.txt`, and starts SUB Control. Later runs
|
||||
reuse the same environment and update missing dependencies when necessary.
|
||||
The `.venv` directory is intentionally ignored by Git: virtual environments
|
||||
contain machine-specific executables and can be recreated from
|
||||
`requirements.txt`.
|
||||
|
||||
## Repository layout
|
||||
|
||||
The Gitea repository is named `argo`. `SUB Control` is a normal directory inside
|
||||
that repository containing this application. A Gitea **Project** is a planning
|
||||
board for issues and tasks; source code is not attached to a Project board.
|
||||
Git tracks the folder automatically because its files are committed on the
|
||||
repository's `main` branch.
|
||||
|
||||
Keyboard controls for SimpleROV-3: W/S forward/back, A/D yaw left/right,
|
||||
Q/E alternative yaw control, and R/F rise/dive.
|
||||
Releasing movement keys eases their controls back to neutral.
|
||||
|
||||
## Three-thruster limitation
|
||||
|
||||
The common ArduSub `SimpleROV-3` arrangement controls forward, yaw, and depth.
|
||||
It cannot independently control lateral, roll, or pitch. Accordingly, the main
|
||||
pad is mapped to forward/yaw, while the vertical slider controls depth thrust.
|
||||
|
||||
## Link behavior
|
||||
|
||||
- MAVLink GCS heartbeat: 1 Hz
|
||||
- `MANUAL_CONTROL`: selectable 10 or 20 Hz (default 20 Hz). Lower rates are
|
||||
intentionally excluded because they make short return ramps become abrupt
|
||||
steps at the flight controller.
|
||||
- No full parameter download
|
||||
- On connection, inherited bulk telemetry streams are stopped. Only
|
||||
`SYS_STATUS` at 1 Hz and `SERVO_OUTPUT_RAW` / `RC_CHANNELS` at 2 Hz are
|
||||
requested, in addition to the normal heartbeat and event-driven status text.
|
||||
- Arm/disarm uses `MAV_CMD_COMPONENT_ARM_DISARM` and displays `COMMAND_ACK`
|
||||
- Link health is based on received autopilot heartbeats
|
||||
- Battery voltage is read from `SYS_STATUS` at 1 Hz and shown as pack voltage,
|
||||
estimated per-cell voltage, and a voltage-only percentage. Cell count,
|
||||
capacity, C rating, full/empty cell voltages, and warning percentage are
|
||||
configurable and saved locally in `battery_settings.json`. Capacity consumed
|
||||
cannot be measured without a current sensor.
|
||||
- Servo configuration scans `SERVO1_FUNCTION` through `SERVO16_FUNCTION` and
|
||||
ArduSub's `MOT_1_DIRECTION` through `MOT_12_DIRECTION` one at a time, waiting
|
||||
for each response and retrying missed replies. A selected output can be
|
||||
assigned to Motor 1–12 or set unassigned. Motor direction is toggled with the
|
||||
corresponding `MOT_n_DIRECTION` value while disarmed; `SERVOx_REVERSED` is
|
||||
intentionally not used for Motor functions. It never downloads the full
|
||||
parameter list.
|
||||
The diagnostic scan also reads `SERVO1`–`SERVO3` MIN/TRIM/MAX and ArduSub's
|
||||
joystick gain values into the local session log; these values remain
|
||||
read-only in the application.
|
||||
- Every session creates a local text log under `logs/`, including operator
|
||||
actions, outgoing manual-control values and commands, acknowledgements,
|
||||
status text, and all received MAVLink messages. This does not use ArduPilot's
|
||||
onboard logger or add any link traffic.
|
||||
|
||||
The car-style virtual joystick maps only to forward/reverse and continuous
|
||||
differential turning; it never sends lateral motion. The joystick and vertical
|
||||
slider ease back to center over 400 ms after mouse/key release, so neither can
|
||||
be left commanding motion.
|
||||
Focus loss, stale telemetry, disconnect, and disarm clear commanded inputs
|
||||
without easing. This is a neutral-command request, **not proof that motors have
|
||||
stopped** when the communication link is unavailable.
|
||||
|
||||
In addition, transmitted pilot demands have a small 4% input deadband and a
|
||||
0.25-second full-range slew limit. This makes both acceleration and deceleration
|
||||
arrive at the flight controller as a sequence of stable intermediate values.
|
||||
Forward and yaw are normalized as a SimpleROV-3 motor pair before the output
|
||||
limit is applied, preventing their mixer contributions from adding beyond the
|
||||
selected horizontal limit.
|
||||
|
||||
ArduPilot may ignore manual input when `MAV_GCS_SYSID` does not match this
|
||||
application's system ID (default 255), or when `MAV_OPTIONS` does not allow
|
||||
MAVLink input. Those parameters must already be correctly configured.
|
||||
|
||||
## Engage, confirmation, and interruption handling
|
||||
|
||||
The compact window opens at 1100 × 650. Empty sidebar areas drag the window;
|
||||
the STL viewer, buttons, and sliders are separate interactive regions. Output
|
||||
limit and Motor setup sit below the main controls. Recent activity retains the
|
||||
last three events, oldest at the top and newest emphasized at the bottom.
|
||||
Routine hold instructions are kept in tooltips;
|
||||
pending confirmations and safety warnings still appear above the controls.
|
||||
The full-width text control displays `engage` / `disengage`; disengage sends the
|
||||
same immediate disarm request described below.
|
||||
|
||||
- Hold **ENGAGE** for 1.4 seconds (or hold F2). Early release, leaving the
|
||||
button, interrupted touch, and focus loss cancel the hold without sending arm.
|
||||
- **ENGAGING…** means a request is pending. A send result or accepted command
|
||||
ACK alone does not prove that the vehicle armed: a fresh autopilot heartbeat
|
||||
reporting the requested state is the final confirmation. A heartbeat can
|
||||
confirm state even if the ACK packet was lost.
|
||||
- **DISARM** is one tap or F3, with no long hold. While confirmation is pending,
|
||||
**DISARMING…** stays red and driving is disabled. Disarm can also interrupt a
|
||||
pending Engage request. No forced-arm/disarm bypass is used.
|
||||
- Confirmation timeout: 5 seconds in the backend (6-second UI fallback).
|
||||
Rejection and timeout remain visible. Late heartbeat updates still determine
|
||||
the displayed state; the UI never substitutes an animation state for telemetry.
|
||||
- A heartbeat older than 3 seconds is stale. A missing bridge reply after
|
||||
1.5 seconds shows **STATE UNKNOWN**, preserving the last-known state without
|
||||
claiming disarm. Battery readings older than 5 seconds are marked stale.
|
||||
- The web frontend renews an input lease locally every 250 ms. If it stops for
|
||||
1 second, the worker clears stored demands and sends neutral at its configured
|
||||
control rate. This adds no MAVLink stream or parameter download. Focus loss
|
||||
clears both captured touch pointers and queued input; reconnect never replays
|
||||
the old joystick position. Normal release still eases back to center.
|
||||
- Link loss cannot deliver a stop over a broken tether. Verify the vehicle's
|
||||
own failsafe and use independent physical power isolation for bench tests.
|
||||
|
||||
### Regression checks (no hardware)
|
||||
|
||||
Run from this project folder after setting up the Python environment:
|
||||
Install Python 3.11+ with the Python launcher, then run:
|
||||
|
||||
```powershell
|
||||
.venv\Scripts\python.exe -m unittest discover -s tests -v
|
||||
node --test tests/control_ui.test.cjs
|
||||
./run.ps1
|
||||
```
|
||||
|
||||
Node is needed only for the frontend regression tests, not to run the app.
|
||||
The tests use mocked transport and synthetic pointer events, including independent
|
||||
joystick/vertical pointers. Validate physical multi-touch on the intended screen
|
||||
and FC failsafes on a restrained, propeller-free setup before powered operation.
|
||||
The script creates a virtual environment and installs dependencies automatically.
|
||||
On first launch, it also adds a **SUB Control** desktop shortcut.
|
||||
Select a COM port and **Connect**, or choose **Demo Mode** to try it without hardware.
|
||||
Connection settings are under **•••**.
|
||||
Click **Data link** for an extended connection test, or **Console** to open the right-side RX/TX panel. Filter routine traffic, pause the view, or expand a message for full details.
|
||||
|
||||
## UI design rule
|
||||
|
||||
Keep UI changes minimal and consistent with the existing app. Do not add explanatory text. Use labels of at most two words, prefer flat rows over nested containers, and keep controls from overlapping.
|
||||
|
||||
## Controls
|
||||
|
||||
- Joystick: forward/back and turning. Vertical slider: rise/dive.
|
||||
- Keyboard: **W/S** forward/back, **A/D** or **Q/E** turn, **R/F** rise/dive.
|
||||
- Physical controller: choose **Joystick**, then **Mapping** while disarmed. The trigger preset uses RT/LT for forward/back, B/A for rise/dive, and left stick X for turning. **Six axes** adds strafe, pitch and roll for compatible frames/firmware.
|
||||
- Hold **engage** for 0.6 seconds to request arming; tap **disengage** to request disarming. The app waits for vehicle confirmation.
|
||||
- Movement controls ease back to neutral when released.
|
||||
- In Joystick mode the graphics show the conditioned control demand and are read-only. Center sticks after switching modes, reconnecting, or returning focus. Controller buttons do not arm the vehicle.
|
||||
|
||||
Includes a 0–100% input limit, motor setup, live battery current/consumption when available, an STL viewer, WebRTC/HTTP camera viewing and WebM recording. Sensor CSV and session logs are in `logs/`; desktop videos are in `runtime/recordings/`.
|
||||
|
||||
## Safety
|
||||
|
||||
Verify motor direction, ESC settings, and vehicle failsafes before use. Remove propellers for initial bench tests and keep a physical power cutoff available. A lost connection cannot guarantee the motors stop.
|
||||
|
||||
@@ -3,4 +3,10 @@ __pycache__/
|
||||
*.py[cod]
|
||||
logs/
|
||||
model_settings.json
|
||||
link_settings.json
|
||||
runtime/
|
||||
motor_settings.json
|
||||
|
||||
station_settings.json
|
||||
controller_profiles.json
|
||||
*.json.tmp
|
||||
|
||||
+31
-164
@@ -1,173 +1,40 @@
|
||||
# SUB Control
|
||||
# Argo V2 · SUB Control
|
||||
|
||||
A deliberately small, low-bandwidth MAVLink controller for bench-testing an
|
||||
ArduSub vehicle over a USB serial connection. It sends no parameter-list
|
||||
request and no telemetry-stream request.
|
||||
A Windows control station for ArduSub ROVs over serial or network MAVLink.
|
||||
|
||||
|
||||
V2 adds programmable Xbox inputs, six-axis motion, a camera dashboard, sensor readings and data logging. See the [V2 guide](docs/V2.md) for controls, supported frames, Raspberry Pi/fibre architecture, camera setup and hardware verification limits.
|
||||
|
||||
The desktop window uses a local HTML/CSS/JavaScript interface rendered by the
|
||||
Windows WebView. Python remains the only launcher and owns the MAVLink worker,
|
||||
arming, logging, output limiting, and parameter writes. It does not run a web
|
||||
server, open a browser tab, or require an internet connection.
|
||||
|
||||
|
||||
The WebView is frameless and uses the compact title bar drawn by the interface.
|
||||
The vehicle rail includes a local STL viewer: choose **Load STL** to start with
|
||||
an orthographic top-view silhouette, then drag to orbit or use the mouse wheel
|
||||
to zoom. A cached STL copy is stored locally under the ignored `runtime/`
|
||||
directory so the model can be restored on the next launch.
|
||||
STEP/STP CAD solids must first be tessellated/exported as STL because the
|
||||
embedded renderer intentionally does not include a full CAD kernel.
|
||||
Binary and ASCII STL faces are preserved in full; large assemblies are not
|
||||
rendered by skipping triangles. Imports are limited to 30 MB to keep startup
|
||||
and interactive orbiting responsive.
|
||||
## Quick start
|
||||
|
||||
## Safety first
|
||||
|
||||
- Remove propellers for initial tests and restrain the vehicle.
|
||||
- Verify the ArduSub frame and `SERVOx_FUNCTION`, motor direction, ESC range,
|
||||
leak/failsafe, and emergency-stop arrangements before arming.
|
||||
- The application starts disarmed and limits pilot demand to 20% by default.
|
||||
Once armed, control movement is sent directly with no additional gate.
|
||||
- Closing or disconnecting sends neutral controls and a disarm request, but a
|
||||
physical power cutoff is still required.
|
||||
|
||||
The controls are pilot-demand axes, not direct PWM values. ArduSub performs
|
||||
the frame mixing and generates the configured ESC outputs. For ArduSub,
|
||||
`MANUAL_CONTROL.z = 500` is neutral vertical thrust.
|
||||
|
||||
## Run on Windows
|
||||
|
||||
1. Install Python 3.11 or newer. A virtual environment installs packages, but
|
||||
it does not install Python itself.
|
||||
2. Open PowerShell in this folder and run `./run.ps1` (or right-click it and
|
||||
choose **Run with PowerShell**).
|
||||
3. Select the autopilot's COM port, then click **Connect**. Baud and control-rate
|
||||
settings are under the small `•••` link button (normally 57600 baud / 20 Hz).
|
||||
4. Confirm `ArduSub` and a live heartbeat are shown.
|
||||
5. Click **Set MANUAL**, then **ARM** only when the bench is safe.
|
||||
6. Move the controls. Once armed, no additional enable button is needed.
|
||||
|
||||
`run.ps1` automatically creates a private `.venv` on the first run, installs
|
||||
the versions declared in `requirements.txt`, and starts SUB Control. Later runs
|
||||
reuse the same environment and update missing dependencies when necessary.
|
||||
The `.venv` directory is intentionally ignored by Git: virtual environments
|
||||
contain machine-specific executables and can be recreated from
|
||||
`requirements.txt`.
|
||||
|
||||
## Repository layout
|
||||
|
||||
The Gitea repository is named `argo`. `SUB Control` is a normal directory inside
|
||||
that repository containing this application. A Gitea **Project** is a planning
|
||||
board for issues and tasks; source code is not attached to a Project board.
|
||||
Git tracks the folder automatically because its files are committed on the
|
||||
repository's `main` branch.
|
||||
|
||||
Keyboard controls for SimpleROV-3: W/S forward/back, A/D yaw left/right,
|
||||
Q/E alternative yaw control, and R/F rise/dive.
|
||||
Releasing movement keys eases their controls back to neutral.
|
||||
|
||||
## Three-thruster limitation
|
||||
|
||||
The common ArduSub `SimpleROV-3` arrangement controls forward, yaw, and depth.
|
||||
It cannot independently control lateral, roll, or pitch. Accordingly, the main
|
||||
pad is mapped to forward/yaw, while the vertical slider controls depth thrust.
|
||||
|
||||
## Link behavior
|
||||
|
||||
- MAVLink GCS heartbeat: 1 Hz
|
||||
- `MANUAL_CONTROL`: selectable 10 or 20 Hz (default 20 Hz). Lower rates are
|
||||
intentionally excluded because they make short return ramps become abrupt
|
||||
steps at the flight controller.
|
||||
- No full parameter download
|
||||
- On connection, inherited bulk telemetry streams are stopped. Only
|
||||
`SYS_STATUS` at 1 Hz and `SERVO_OUTPUT_RAW` / `RC_CHANNELS` at 2 Hz are
|
||||
requested, in addition to the normal heartbeat and event-driven status text.
|
||||
- Arm/disarm uses `MAV_CMD_COMPONENT_ARM_DISARM` and displays `COMMAND_ACK`
|
||||
- Link health is based on received autopilot heartbeats
|
||||
- Battery voltage is read from `SYS_STATUS` at 1 Hz and shown as pack voltage,
|
||||
estimated per-cell voltage, and a voltage-only percentage. Cell count,
|
||||
capacity, C rating, full/empty cell voltages, and warning percentage are
|
||||
configurable and saved locally in `battery_settings.json`. Capacity consumed
|
||||
cannot be measured without a current sensor.
|
||||
- Servo configuration scans `SERVO1_FUNCTION` through `SERVO16_FUNCTION` and
|
||||
ArduSub's `MOT_1_DIRECTION` through `MOT_12_DIRECTION` one at a time, waiting
|
||||
for each response and retrying missed replies. A selected output can be
|
||||
assigned to Motor 1–12 or set unassigned. Motor direction is toggled with the
|
||||
corresponding `MOT_n_DIRECTION` value while disarmed; `SERVOx_REVERSED` is
|
||||
intentionally not used for Motor functions. It never downloads the full
|
||||
parameter list.
|
||||
The diagnostic scan also reads `SERVO1`–`SERVO3` MIN/TRIM/MAX and ArduSub's
|
||||
joystick gain values into the local session log; these values remain
|
||||
read-only in the application.
|
||||
- Every session creates a local text log under `logs/`, including operator
|
||||
actions, outgoing manual-control values and commands, acknowledgements,
|
||||
status text, and all received MAVLink messages. This does not use ArduPilot's
|
||||
onboard logger or add any link traffic.
|
||||
|
||||
The car-style virtual joystick maps only to forward/reverse and continuous
|
||||
differential turning; it never sends lateral motion. The joystick and vertical
|
||||
slider ease back to center over 400 ms after mouse/key release, so neither can
|
||||
be left commanding motion.
|
||||
Focus loss, stale telemetry, disconnect, and disarm clear commanded inputs
|
||||
without easing. This is a neutral-command request, **not proof that motors have
|
||||
stopped** when the communication link is unavailable.
|
||||
|
||||
In addition, transmitted pilot demands have a small 4% input deadband and a
|
||||
0.25-second full-range slew limit. This makes both acceleration and deceleration
|
||||
arrive at the flight controller as a sequence of stable intermediate values.
|
||||
Forward and yaw are normalized as a SimpleROV-3 motor pair before the output
|
||||
limit is applied, preventing their mixer contributions from adding beyond the
|
||||
selected horizontal limit.
|
||||
|
||||
ArduPilot may ignore manual input when `MAV_GCS_SYSID` does not match this
|
||||
application's system ID (default 255), or when `MAV_OPTIONS` does not allow
|
||||
MAVLink input. Those parameters must already be correctly configured.
|
||||
|
||||
## Engage, confirmation, and interruption handling
|
||||
|
||||
The compact window opens at 1100 × 650. Empty sidebar areas drag the window;
|
||||
the STL viewer, buttons, and sliders are separate interactive regions. Output
|
||||
limit and Motor setup sit below the main controls. Recent activity retains the
|
||||
last three events, oldest at the top and newest emphasized at the bottom.
|
||||
Routine hold instructions are kept in tooltips;
|
||||
pending confirmations and safety warnings still appear above the controls.
|
||||
The full-width text control displays `engage` / `disengage`; disengage sends the
|
||||
same immediate disarm request described below.
|
||||
|
||||
- Hold **ENGAGE** for 1.4 seconds (or hold F2). Early release, leaving the
|
||||
button, interrupted touch, and focus loss cancel the hold without sending arm.
|
||||
- **ENGAGING…** means a request is pending. A send result or accepted command
|
||||
ACK alone does not prove that the vehicle armed: a fresh autopilot heartbeat
|
||||
reporting the requested state is the final confirmation. A heartbeat can
|
||||
confirm state even if the ACK packet was lost.
|
||||
- **DISARM** is one tap or F3, with no long hold. While confirmation is pending,
|
||||
**DISARMING…** stays red and driving is disabled. Disarm can also interrupt a
|
||||
pending Engage request. No forced-arm/disarm bypass is used.
|
||||
- Confirmation timeout: 5 seconds in the backend (6-second UI fallback).
|
||||
Rejection and timeout remain visible. Late heartbeat updates still determine
|
||||
the displayed state; the UI never substitutes an animation state for telemetry.
|
||||
- A heartbeat older than 3 seconds is stale. A missing bridge reply after
|
||||
1.5 seconds shows **STATE UNKNOWN**, preserving the last-known state without
|
||||
claiming disarm. Battery readings older than 5 seconds are marked stale.
|
||||
- The web frontend renews an input lease locally every 250 ms. If it stops for
|
||||
1 second, the worker clears stored demands and sends neutral at its configured
|
||||
control rate. This adds no MAVLink stream or parameter download. Focus loss
|
||||
clears both captured touch pointers and queued input; reconnect never replays
|
||||
the old joystick position. Normal release still eases back to center.
|
||||
- Link loss cannot deliver a stop over a broken tether. Verify the vehicle's
|
||||
own failsafe and use independent physical power isolation for bench tests.
|
||||
|
||||
### Regression checks (no hardware)
|
||||
|
||||
Run from this project folder after setting up the Python environment:
|
||||
Install Python 3.11+ with the Python launcher, then run:
|
||||
|
||||
```powershell
|
||||
.venv\Scripts\python.exe -m unittest discover -s tests -v
|
||||
node --test tests/control_ui.test.cjs
|
||||
./run.ps1
|
||||
```
|
||||
|
||||
Node is needed only for the frontend regression tests, not to run the app.
|
||||
The tests use mocked transport and synthetic pointer events, including independent
|
||||
joystick/vertical pointers. Validate physical multi-touch on the intended screen
|
||||
and FC failsafes on a restrained, propeller-free setup before powered operation.
|
||||
The script creates a virtual environment and installs dependencies automatically.
|
||||
On first launch, it also adds a **SUB Control** desktop shortcut.
|
||||
Select a COM port and **Connect**, or choose **Demo Mode** to try it without hardware.
|
||||
Connection settings are under **•••**.
|
||||
Click **Data link** for an extended connection test, or **Console** to open the right-side RX/TX panel. Filter routine traffic, pause the view, or expand a message for full details.
|
||||
|
||||
## UI design rule
|
||||
|
||||
Keep UI changes minimal and consistent with the existing app. Do not add explanatory text. Use labels of at most two words, prefer flat rows over nested containers, and keep controls from overlapping.
|
||||
|
||||
## Controls
|
||||
|
||||
- Joystick: forward/back and turning. Vertical slider: rise/dive.
|
||||
- Keyboard: **W/S** forward/back, **A/D** or **Q/E** turn, **R/F** rise/dive.
|
||||
- Physical controller: choose **Joystick**, then **Mapping** while disarmed. The trigger preset uses RT/LT for forward/back, B/A for rise/dive, and left stick X for turning. **Six axes** adds strafe, pitch and roll for compatible frames/firmware.
|
||||
- Hold **engage** for 0.6 seconds to request arming; tap **disengage** to request disarming. The app waits for vehicle confirmation.
|
||||
- Movement controls ease back to neutral when released.
|
||||
- In Joystick mode the graphics show the conditioned control demand and are read-only. Center sticks after switching modes, reconnecting, or returning focus. Controller buttons do not arm the vehicle.
|
||||
|
||||
Includes a 0–100% input limit, motor setup, live battery current/consumption when available, an STL viewer, WebRTC/HTTP camera viewing and WebM recording. Sensor CSV and session logs are in `logs/`; desktop videos are in `runtime/recordings/`.
|
||||
|
||||
## Safety
|
||||
|
||||
Verify motor direction, ESC settings, and vehicle failsafes before use. Remove propellers for initial bench tests and keep a physical power cutoff available. A lost connection cannot guarantee the motors stop.
|
||||
|
||||
+674
-839
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
@@ -0,0 +1,14 @@
|
||||
"""Package the original PNG in a Windows ICO without altering its pixels."""
|
||||
from pathlib import Path
|
||||
import struct
|
||||
|
||||
root = Path(__file__).resolve().parent
|
||||
png = (root / "assets" / "sub-control-icon.png").read_bytes()
|
||||
if png[:8] != b"\x89PNG\r\n\x1a\n":
|
||||
raise ValueError("Icon source must be PNG")
|
||||
width, height = struct.unpack(">II", png[16:24])
|
||||
if not (1 <= width <= 256 and 1 <= height <= 256):
|
||||
raise ValueError("Windows icon source must be at most 256 x 256")
|
||||
header = struct.pack("<HHH", 0, 1, 1)
|
||||
entry = struct.pack("<BBBBHHII", width % 256, height % 256, 0, 0, 1, 32, len(png), 22)
|
||||
(root / "assets" / "sub-control.ico").write_bytes(header + entry + png)
|
||||
@@ -0,0 +1,43 @@
|
||||
param([switch]$UpdateIcon)
|
||||
$ErrorActionPreference = 'Stop'
|
||||
|
||||
$shortcutProject = $PSScriptRoot
|
||||
$shortcutMarker = Join-Path $shortcutProject 'runtime\desktop-shortcut-created.txt'
|
||||
if ((Test-Path -LiteralPath $shortcutMarker) -and -not $UpdateIcon) { return }
|
||||
|
||||
try {
|
||||
# Resolves the real Desktop, including a redirected/OneDrive Desktop.
|
||||
$shortcutDesktop = [Environment]::GetFolderPath('DesktopDirectory')
|
||||
if (-not $shortcutDesktop) { throw 'Windows Desktop folder is unavailable.' }
|
||||
$shortcutPath = Join-Path $shortcutDesktop 'SUB Control.lnk'
|
||||
|
||||
# Never replace a shortcut the user already has.
|
||||
if (-not (Test-Path -LiteralPath $shortcutPath)) {
|
||||
$shortcutShell = New-Object -ComObject WScript.Shell
|
||||
$shortcutLink = $shortcutShell.CreateShortcut($shortcutPath)
|
||||
$shortcutLink.TargetPath = Join-Path $env:SystemRoot 'System32\WindowsPowerShell\v1.0\powershell.exe'
|
||||
$shortcutLink.Arguments = '-NoProfile -WindowStyle Hidden -File "' + (Join-Path $shortcutProject 'run.ps1') + '"'
|
||||
$shortcutLink.WorkingDirectory = $shortcutProject
|
||||
$shortcutLink.Description = 'Launch SUB Control'
|
||||
$shortcutLink.WindowStyle = 7
|
||||
$shortcutIcon = Join-Path $shortcutProject 'assets\sub-control.ico'
|
||||
if (Test-Path -LiteralPath $shortcutIcon) { $shortcutLink.IconLocation = "$shortcutIcon,0" }
|
||||
$shortcutLink.Save()
|
||||
} elseif ($UpdateIcon) {
|
||||
$shortcutShell = New-Object -ComObject WScript.Shell
|
||||
$shortcutLink = $shortcutShell.CreateShortcut($shortcutPath)
|
||||
$expectedScript = '"' + (Join-Path $shortcutProject 'run.ps1') + '"'
|
||||
if ($shortcutLink.Arguments.Contains($expectedScript)) {
|
||||
$shortcutLink.IconLocation = (Join-Path $shortcutProject 'assets\sub-control.ico') + ',0'
|
||||
$shortcutLink.Save()
|
||||
} else {
|
||||
throw 'Existing shortcut belongs to another installation; left unchanged.'
|
||||
}
|
||||
}
|
||||
|
||||
New-Item -ItemType Directory -Path (Split-Path -Parent $shortcutMarker) -Force | Out-Null
|
||||
Set-Content -LiteralPath $shortcutMarker -Value $shortcutPath
|
||||
} catch {
|
||||
# Desktop permissions must not prevent the controller from starting.
|
||||
Write-Warning "Could not create the SUB Control desktop shortcut: $_"
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
"""Best-effort Windows first-run shortcut, including direct Python launches."""
|
||||
import os
|
||||
from pathlib import Path
|
||||
import subprocess
|
||||
|
||||
|
||||
def ensure_desktop_shortcut():
|
||||
if os.name != "nt":
|
||||
return
|
||||
root = Path(__file__).resolve().parent
|
||||
if (root / "runtime" / "desktop-shortcut-created.txt").exists():
|
||||
return
|
||||
powershell = Path(os.environ["SystemRoot"]) / "System32/WindowsPowerShell/v1.0/powershell.exe"
|
||||
try:
|
||||
subprocess.run(
|
||||
[str(powershell), "-NoProfile", "-NonInteractive", "-File", str(root / "create_shortcut.ps1")],
|
||||
cwd=root, timeout=10, check=True, capture_output=True,
|
||||
creationflags=subprocess.CREATE_NO_WINDOW,
|
||||
)
|
||||
except (OSError, subprocess.SubprocessError) as error:
|
||||
print(f"Desktop shortcut setup skipped: {error}")
|
||||
@@ -0,0 +1,44 @@
|
||||
# V2 verification — 22 October 2026
|
||||
|
||||
## Passing checks
|
||||
|
||||
- 41 Python tests: vehicle-state confirmation, control leases/watchdogs, six-axis packet values, unsupported firmware/frame gating, endpoint handling, telemetry conversion/staleness, persisted names/profiles, recording chunks, and relay acknowledgement.
|
||||
- `node tests/controller_v2.cjs`: synthetic Xbox triggers, B/A direction, opposing input cancellation, six axes, custom buttons, limits, invalid/missing inputs, migration, and actions.
|
||||
- `node tests/controller_input.cjs`: existing stick conditioning and console parser checks.
|
||||
- Python compilation, JavaScript syntax checks, and `git diff --check`.
|
||||
|
||||
No tests opened a real COM port or armed a physical vehicle.
|
||||
|
||||
## Rendered browser checks
|
||||
|
||||
Used the supported local in-app browser with the real app assets in Demo Mode:
|
||||
|
||||
- Mapping dialog: three-axis and six-axis presets, saving, reopening after a full page reload, and retained LB/RB roll bindings.
|
||||
- Vehicle settings: saved BlueROV1 six-thruster preview, independent accessory relay selectors, and consistent FC/demo status.
|
||||
- Drive: all six command controls at 1024×768, 960×580 (the native window minimum), and 700×572; no overlap with the output toolbar.
|
||||
- Active-output list: six rows for the six-thruster preview, with scrolling and reversal buttons. General frames disable the SimpleROV-3-specific independent-scale mode.
|
||||
- Engagement: held F2 in Demo Mode, inspected rendered **engaging**, then **disengaging** and their settled states. Both words are spelled correctly, centered, and have no trailing dots.
|
||||
- Dashboard: camera-off state, active simulated inspection view, missing/offline readings, explicit Demo labeling, sensor values and video controls at desktop and compact sizes.
|
||||
- Recording: started/stopped a canvas preview recording; the browser produced a 1,386,065-byte WebM file.
|
||||
- Accessories: demo lights toggle, camera power toggle, and viewing stops after demo power-off.
|
||||
|
||||
Reduced-motion CSS is included. The connected browser offers viewport testing but no media-preference emulation, so a rendered reduced-motion override was not verified.
|
||||
|
||||
## Existing harness limitation
|
||||
|
||||
The older `tests/control_ui.test.cjs` fake-DOM harness is not passing. It reports 23 failures on the saved pre-V2 checkpoint and 21 on V2. Most fail before app initialization because the harness lacks `ResizeObserver`; it also has obsolete markup/animation assertions and omits browser dependencies. It is not counted as a passing check. Actual browser checks above establish the rendered behavior of this implementation.
|
||||
|
||||
## Startup measurement
|
||||
|
||||
Three fresh-process worker-module imports on this laptop:
|
||||
|
||||
| Build | Samples | Median |
|
||||
| --- | --- | --- |
|
||||
| Pre-V2 checkpoint | 781.8 / 616.3 / 655.3 ms | 655.3 ms |
|
||||
| V2 | 402.8 / 362.4 / 399.1 ms | 399.1 ms |
|
||||
|
||||
This measures the module import, not total app startup. The launcher also avoids pip on subsequent launches when requirements have not changed, and starts the web interface directly.
|
||||
|
||||
## Physical verification still required
|
||||
|
||||
Real Xbox hardware, live six-axis FC motor allocation, live sensor calibration, WHEP video from a Raspberry Pi, native WebView full-video recording, physical relay outputs, and tether/underwater behavior were not verified. The browser recording and native chunk-writing path were checked separately. BlueOS native camera discovery/signaling is not integrated; this release uses an explicit WHEP, HTTP video, or MJPEG URL.
|
||||
@@ -0,0 +1,127 @@
|
||||
# Argo V2
|
||||
|
||||
V2 separates controller mapping, vehicle motion, ArduSub motor allocation, and camera transport. The pre-V2 app is preserved in commit `5e91c28` on `main`; development is on `v2`. A portable Git bundle was also saved locally. The checkpoint is also uploaded as `checkpoint/pre-v2-20261022`.
|
||||
|
||||
## Try it
|
||||
|
||||
1. Run `run.ps1`, select **Demo Mode**, and connect.
|
||||
2. Open **Vehicle**, select a **Preview frame**, and save. This changes the demo, never the connected FC's `FRAME_TYPE`.
|
||||
3. Open **Mapping**, choose **Triggers · 3** or **Six axes**, and save.
|
||||
4. Open **Dashboard** and press **Start** to see the simulated inspection camera. **Record** produces a WebM clip. The camera badge and sensor status identify demo data.
|
||||
|
||||
No physical port is opened in Demo Mode. Real TCP and UDP endpoints now connect to MAVLink instead of silently entering the demo.
|
||||
|
||||
## Xbox controls
|
||||
|
||||
| Motion | Triggers · 3 | Six axes |
|
||||
| --- | --- | --- |
|
||||
| Forward / back | RT / LT | RT / LT |
|
||||
| Rise / dive | B / A | B / A |
|
||||
| Turn | Left stick X | Left stick X |
|
||||
| Sideways | Unassigned | Right stick X |
|
||||
| Pitch | Unassigned | Left stick Y |
|
||||
| Roll | Unassigned | RB / LB |
|
||||
| Lights | X | X |
|
||||
| View stream | Y | Y |
|
||||
| Record | View | View |
|
||||
|
||||
Each motion has separate negative and positive bindings. Either direction can use a stick half, an analog trigger, a D-pad direction, or a button. Opposite commands cancel. Each motion has a limit; the profile also has dead zone and exponential response. The reverse arrow swaps its bindings. The **Buttons** disclosure configures optional accessory and media actions. Buttons do not arm the ROV.
|
||||
|
||||
Profiles are stored by controller ID in `controller_profiles.json`; **Xbox · offline** supplies a default before connecting a controller. Browser preview uses local storage. Existing stick mappings are migrated. Configuration is locked while armed or while the FC state is uncertain. Controls must return to neutral after input mode changes, reconnects, focus changes, or interruption. Accessory buttons also have to be released before they can trigger again.
|
||||
|
||||
Keyboard movement remains W/S, A/D (or Q/E), R/F. Additional axes use J/L for strafe, I/K for pitch, U/O for roll. The extra on-screen sliders return to center when released. F2 retains the 0.6-second engage hold; F3 requests disarm.
|
||||
|
||||
## Six thrusters and six axes
|
||||
|
||||
Your proposed arrangement can provide full control when the paired thrusters have useful moment arms:
|
||||
|
||||
| Pair | Shared thrust | Differential thrust |
|
||||
| --- | --- | --- |
|
||||
| Port / starboard, pointing forward | Surge | Yaw |
|
||||
| Front / rear, pointing vertically | Heave | Pitch |
|
||||
| Top / bottom, pointing sideways | Sway | Roll |
|
||||
|
||||
Translation uses the pair in the same direction; rotation uses opposite directions. Thruster directions, lever arms, balance and saturation still determine the result. The allocation matrix, whose columns are force direction and its moment `r × f`, must have rank six. Motor count alone does not establish this.
|
||||
|
||||
V2 sends body-motion demands to the FC. The autopilot owns its mixer and stabilization. Select/configure a firmware frame that matches the physical vehicle before using it. The app reads `FRAME_TYPE`; it does not infer a mixer from connected outputs or write a new frame automatically. Your orthogonal-pair design may require a custom firmware mixer if no stock frame matches its geometry.
|
||||
|
||||
| ArduSub frame | Motors | Available motion |
|
||||
| --- | --- | --- |
|
||||
| SimpleROV-3 (4) | 3 | Forward, vertical, yaw |
|
||||
| SimpleROV-4 (5) | 4 | Forward, vertical, yaw, roll |
|
||||
| SimpleROV-5 (6) | 5 | Forward, lateral, vertical, yaw, roll |
|
||||
| BlueROV1 (0) | 6 | All six axes |
|
||||
| Vectored (1) | 6 | All except pitch |
|
||||
| Vectored 6DOF (2, 3) | 8 | All six axes |
|
||||
|
||||
The verified six-axis wire mapping is ArduSub's `MANUAL_CONTROL`: X forward, Y lateral, Z vertical (500 neutral), R yaw, S pitch, T roll. Some generic joystick documentation describes S/T differently; this implementation follows ArduSub source. Firmware version is requested at connection; pitch/roll remain unavailable until compatible firmware is identified. ArduSub 4.5 uses S/T as ±400 PWM offsets; the current 4.8 development implementation scales normalized S/T. These encodings have automated checks; physical behavior is unverified.
|
||||
|
||||
The shared output limit applies to all motion axes. Full-frame demands use a conservative shared envelope before the FC mixer. This is an input-demand limit, not a calibrated thrust or electrical-current limit. The earlier independent motor-scale reconstruction is specific to SimpleROV-3 and is unavailable on other frames; applying it to a general mixer would be incorrect. Motor names, assignments, and direction controls remain available for active outputs.
|
||||
|
||||
References: [ArduSub frame configurations](https://ardupilot.org/sub/docs/sub-frames.html), [ArduSub 4.5 joystick source](https://github.com/ArduPilot/ardupilot/blob/Sub-4.5/ArduSub/joystick.cpp), [current joystick source](https://github.com/ArduPilot/ardupilot/blob/master/ArduSub/joystick.cpp), [Cockpit mapping and vehicle-version support](https://blueos.cloud/cockpit/docs/latest/usage/advanced/).
|
||||
|
||||
## Companion computer and tether
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
PC[Argo V2 on Windows] <-- Ethernet --> TOP[Topside media converter]
|
||||
TOP <-- Fibre tether --> ROV[Onboard media converter]
|
||||
ROV <-- Ethernet --> PI[Raspberry Pi / BlueOS]
|
||||
PI <-- USB or UART / MAVLink --> FC[ArduSub FC]
|
||||
CAM[USB or CSI camera] --> PI
|
||||
SENSOR[Pressure and power sensors] --> FC
|
||||
FC --> ESC[ESCs / thrusters]
|
||||
```
|
||||
|
||||
This is a proposed architecture, not installed hardware. Use a compatible Ethernet-to-fibre interface at each end, with optics, cable, terminations and housings selected for the tether length and environment. Fibre carries the data link; onboard power or a separate power path is still required. Ethernet lets telemetry and compressed video share a network while remaining separate application streams.
|
||||
|
||||
BlueOS is the researched companion option. It routes the FC's MAVLink traffic and manages cameras on supported Raspberry Pi hardware. In BlueOS, configure a MAVLink UDP output to the topside computer's tether-interface IP on port 14550. In Argo, choose **Network · UDP 14550**, or enter an explicit endpoint in Link settings. The listener uses `udpin:0.0.0.0:14550`; choose an interface-specific address with a custom endpoint if needed. The PC and Pi must be reachable on the same tether network.
|
||||
|
||||
Video uses an independent browser media connection. This release accepts **WebRTC · WHEP**, a browser-playable **HTTP video** URL, or **MJPEG**. It does not directly decode RTSP or raw UDP H.264. BlueOS's camera service has its own signaling interface, so entering its normal web-dashboard address as a WHEP URL will not work. Use a compatible WHEP endpoint, such as MediaMTX connected to the Pi camera or an RTSP source. Integrating BlueOS's native camera discovery/signaling is a separate follow-up.
|
||||
|
||||
Example MediaMTX path for a supported Pi camera:
|
||||
|
||||
```yaml
|
||||
paths:
|
||||
cam:
|
||||
source: rpiCamera
|
||||
```
|
||||
|
||||
With the server configured on the tether network, a typical WHEP endpoint is `http://<pi-address>:8889/cam/whep`. Verify it against your MediaMTX configuration. The browser needs CORS permission for the local Argo origin, and the negotiated WebRTC media ports must be reachable. Use a browser-compatible codec. No firewall, authentication, or origin policy is changed automatically by Argo.
|
||||
|
||||
**Start/Stop** controls viewing. **Camera power** is a separate optional relay action. **Record** records the incoming browser video; desktop clips are written incrementally to `runtime/recordings/`, and browser-preview clips download as WebM. MJPEG playback has no video recording control. For recordings that must survive tether loss, configure recording on the Pi as well.
|
||||
|
||||
References: [BlueOS companion hardware](https://blueos.cloud/docs/latest/integrations/hardware/required/onboard-computer/), [tether overview](https://blueos.cloud/docs/latest/integrations/hardware/required/tether/), [BlueOS endpoints and video services](https://blueos.cloud/docs/latest/usage/advanced/), [MediaMTX Pi cameras](https://mediamtx.org/docs/static-sources/raspberry-pi-cameras), [browser playback](https://mediamtx.org/docs/read/web-browsers).
|
||||
|
||||
## Sensors and electricity
|
||||
|
||||
The dashboard displays FC telemetry only when its group is fresh. Missing or stale values show a dash. Demo values are explicitly marked.
|
||||
|
||||
| Reading | Source | Units |
|
||||
| --- | --- | --- |
|
||||
| Pitch, roll, heading and angular rates | ATTITUDE | degrees, degrees/s |
|
||||
| Depth estimate relative to surface/home | GLOBAL_POSITION_INT.relative_alt | m, positive down |
|
||||
| Acceleration, gyroscope, magnetic field | SCALED_IMU | m/s², rad/s, gauss |
|
||||
| External pressure / temperature | SCALED_PRESSURE2 | hPa, °C |
|
||||
| Battery voltage, current and charge | SYS_STATUS / battery 0 BATTERY_STATUS | V, A, mAh |
|
||||
|
||||
Depth needs a correctly configured and calibrated external pressure sensor. Raw accelerometer values include gravity; they are not speed or a gravity-compensated acceleration estimate. Heading is FC-estimated yaw, not a separately read compass bearing.
|
||||
|
||||
Current is measured in **amps (A)** at the present moment. Power is **watts (W) = V × A**. Consumption is charge integrated over time, displayed as **mAh**; it is not amps per second. Use a correctly sized, calibrated voltage/current power monitor connected to the FC. Voltage alone cannot measure current. The app prefers reported consumption and otherwise integrates fresh current as a session estimate; source information is in Battery settings. A voltage update does not make an old current reading fresh.
|
||||
|
||||
**Log data** writes received normalized sensor values to `logs/sensors_<timestamp>.csv`. Existing raw MAVLink session logs remain in `logs/`. Rates for attitude, depth, IMU and pressure are independently configurable. Begin with low rates on RS-485; use a higher-bandwidth tether for video and increased telemetry.
|
||||
|
||||
Lights and camera power require configured, separate FC relay outputs. Configure relay assignments on the FC, then select their zero-based relay numbers in **Vehicle**. Buttons wait for command acknowledgement and expose timeout/rejection status. An accepted command confirms FC acceptance, not measured physical illumination or camera power.
|
||||
|
||||
Reference: [ArduSub battery monitor calibration](https://ardupilot.org/sub/docs/common-power-module-configuration-in-mission-planner.html), [MAVLink message definitions](https://mavlink.io/en/messages/common.html).
|
||||
|
||||
## Performance and verification
|
||||
|
||||
- The launcher only installs dependencies when the requirements fingerprint changes.
|
||||
- The production path launches `web_ui.py` directly. The old Tk frontend is loaded lazily from `legacy_ui.py`.
|
||||
- The asset server is threaded. Video frames stay in the browser's media pipeline.
|
||||
- Network MAVLink skips the redundant packet-leading heartbeat needed by the existing serial modules.
|
||||
- V2 controller input has one command ramp in the worker, avoiding the previous additional browser smoothing delay.
|
||||
- V2 controller-profile and station files are validated and replaced atomically. Existing input sequence, stale-bridge and heartbeat watchdogs cover all six motion axes.
|
||||
|
||||
Automated checks use synthetic gamepads, mock MAVLink transports, temporary configuration files and telemetry fixtures. Browser checks use Demo Mode and the actual rendered app. No live vehicle has been armed or commanded during development. Real controller hardware, Pi streaming, FC accessories, sensor calibration and water performance still need physical verification.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
@@ -0,0 +1,814 @@
|
||||
"""Optional Tk frontend. Imported only when explicitly requested."""
|
||||
import queue
|
||||
import json
|
||||
import os
|
||||
import threading
|
||||
import time
|
||||
import tkinter as tk
|
||||
import customtkinter as ctk
|
||||
from pathlib import Path
|
||||
from tkinter import messagebox, ttk
|
||||
from serial.tools import list_ports
|
||||
from app import Axes, MavlinkWorker, MOTOR_FUNCTIONS, NEUTRAL_Z, normalize_endpoint
|
||||
|
||||
class Joystick(tk.Canvas):
|
||||
def __init__(self, master, callback, **kwargs):
|
||||
self.size = 276
|
||||
self.center_point = self.size / 2
|
||||
self.radius = 108
|
||||
self.knob_radius = 24
|
||||
super().__init__(master, width=self.size, height=self.size, bg="#f5f5f2",
|
||||
highlightthickness=0, bd=0, **kwargs)
|
||||
self.callback = callback
|
||||
self.value = (0.0, 0.0)
|
||||
self.return_job = None
|
||||
c, r, k = self.center_point, self.radius, self.knob_radius
|
||||
self.create_oval(c-r, c-r, c+r, c+r, fill="#e9e9e5", outline="#d8d8d2", width=2)
|
||||
self.create_oval(c-70, c-70, c+70, c+70, outline="#deded8", width=1)
|
||||
self.create_line(c, c-r+12, c, c+r-12, fill="#d2d2cc", dash=(3, 6))
|
||||
self.create_line(c-r+12, c, c+r-12, c, fill="#d2d2cc", dash=(3, 6))
|
||||
self.create_text(c, 13, text="FORWARD", fill="#8a8a84", font=("Helvetica", 8, "bold"))
|
||||
self.create_text(c, self.size-13, text="REVERSE", fill="#8a8a84", font=("Helvetica", 8, "bold"))
|
||||
self.create_text(25, c, text="TURN\nLEFT", fill="#8a8a84", font=("Helvetica", 8, "bold"))
|
||||
self.create_text(self.size-25, c, text="TURN\nRIGHT", fill="#8a8a84", font=("Helvetica", 8, "bold"))
|
||||
self.knob = self.create_oval(c-k, c-k, c+k, c+k,
|
||||
fill="#575c61", outline="#42474b", width=2)
|
||||
self.bind("<Button-1>", self._move)
|
||||
self.bind("<B1-Motion>", self._move)
|
||||
self.bind("<ButtonRelease-1>", self._release)
|
||||
|
||||
def _move(self, event):
|
||||
if self.return_job is not None:
|
||||
self.after_cancel(self.return_job)
|
||||
self.return_job = None
|
||||
dx, dy = event.x - self.center_point, event.y - self.center_point
|
||||
length = max(1.0, (dx * dx + dy * dy) ** 0.5)
|
||||
if length > self.radius:
|
||||
dx, dy = dx * self.radius / length, dy * self.radius / length
|
||||
self.set_immediate(dx / self.radius, -dy / self.radius)
|
||||
|
||||
def set_immediate(self, x: float, y: float):
|
||||
if self.return_job is not None:
|
||||
self.after_cancel(self.return_job)
|
||||
self.return_job = None
|
||||
self.value = (x, y)
|
||||
c, k = self.center_point, self.knob_radius
|
||||
dx, dy = x * self.radius, -y * self.radius
|
||||
self.coords(self.knob, c-k+dx, c-k+dy, c+k+dx, c+k+dy)
|
||||
self.callback()
|
||||
|
||||
def _release(self, _event=None):
|
||||
start_x, start_y = self.value
|
||||
started = time.monotonic()
|
||||
duration = 0.40
|
||||
|
||||
def ease_back():
|
||||
elapsed = time.monotonic() - started
|
||||
progress = min(1.0, elapsed / duration)
|
||||
# Smoothstep has zero slope at both ends, avoiding a motor kick.
|
||||
eased = progress * progress * (3.0 - 2.0 * progress)
|
||||
remaining = 1.0 - eased
|
||||
x, y = start_x * remaining, start_y * remaining
|
||||
self.value = (x, y)
|
||||
c, k = self.center_point, self.knob_radius
|
||||
dx, dy = x * self.radius, -y * self.radius
|
||||
self.coords(self.knob, c-k+dx, c-k+dy, c+k+dx, c+k+dy)
|
||||
self.callback()
|
||||
if progress < 1.0:
|
||||
self.return_job = self.after(20, ease_back)
|
||||
else:
|
||||
self.return_job = None
|
||||
|
||||
if self.return_job is not None:
|
||||
self.after_cancel(self.return_job)
|
||||
ease_back()
|
||||
|
||||
def center(self):
|
||||
if self.return_job is not None:
|
||||
self.after_cancel(self.return_job)
|
||||
self.return_job = None
|
||||
self.value = (0.0, 0.0)
|
||||
c, k = self.center_point, self.knob_radius
|
||||
self.coords(self.knob, c-k, c-k, c+k, c+k)
|
||||
self.callback()
|
||||
|
||||
|
||||
class SpringScale(ctk.CTkSlider):
|
||||
"""A Scale that smoothly returns to zero when the pointer is released."""
|
||||
|
||||
def __init__(self, master, **kwargs):
|
||||
self.callback = kwargs.pop("command", None)
|
||||
kwargs.pop("showvalue", None)
|
||||
kwargs.pop("bg", None)
|
||||
kwargs.pop("troughcolor", None)
|
||||
kwargs.pop("activebackground", None)
|
||||
kwargs.pop("highlightthickness", None)
|
||||
kwargs.pop("bd", None)
|
||||
kwargs.pop("sliderrelief", None)
|
||||
if "orient" in kwargs:
|
||||
kwargs["orientation"] = kwargs.pop("orient")
|
||||
length = kwargs.pop("length", 200)
|
||||
if kwargs.get("orientation", "horizontal") == "vertical":
|
||||
kwargs.setdefault("height", length)
|
||||
kwargs.setdefault("width", 18)
|
||||
else:
|
||||
kwargs.setdefault("width", length)
|
||||
kwargs.setdefault("height", 18)
|
||||
super().__init__(master, command=self._changed, corner_radius=10,
|
||||
button_corner_radius=10, button_length=22,
|
||||
fg_color="#dbe3ee", progress_color="#60a5fa",
|
||||
button_color="#2563eb", button_hover_color="#1d4ed8",
|
||||
**kwargs)
|
||||
self.return_job = None
|
||||
self.bind("<ButtonPress-1>", self._cancel_return, add="+")
|
||||
self.bind("<ButtonRelease-1>", self._released, add="+")
|
||||
|
||||
def _changed(self, value):
|
||||
if self.callback:
|
||||
self.callback(value)
|
||||
|
||||
def _set_and_notify(self, value):
|
||||
self.set(value)
|
||||
if self.callback:
|
||||
self.callback(value)
|
||||
|
||||
def _cancel_return(self, _event=None):
|
||||
if self.return_job is not None:
|
||||
self.after_cancel(self.return_job)
|
||||
self.return_job = None
|
||||
|
||||
def _released(self, _event=None):
|
||||
# Wait until Tk's native Scale binding has applied its final value.
|
||||
self.after_idle(self.spring_to_center)
|
||||
|
||||
def set_immediate(self, value):
|
||||
self._cancel_return()
|
||||
self._set_and_notify(value)
|
||||
|
||||
def spring_to_center(self):
|
||||
self._cancel_return()
|
||||
start = float(self.get())
|
||||
if abs(start) < 0.5:
|
||||
self._set_and_notify(0)
|
||||
return
|
||||
started = time.monotonic()
|
||||
duration = 0.40
|
||||
|
||||
def ease_back():
|
||||
progress = min(1.0, (time.monotonic() - started) / duration)
|
||||
eased = progress * progress * (3.0 - 2.0 * progress)
|
||||
self._set_and_notify(start * (1.0 - eased))
|
||||
if progress < 1.0:
|
||||
self.return_job = self.after(20, ease_back)
|
||||
else:
|
||||
self._set_and_notify(0)
|
||||
self.return_job = None
|
||||
|
||||
ease_back()
|
||||
|
||||
|
||||
class App(tk.Tk):
|
||||
def __init__(self):
|
||||
super().__init__()
|
||||
self.title("SUB Control")
|
||||
self.geometry("1040x800")
|
||||
self.minsize(920, 720)
|
||||
self.events = queue.Queue()
|
||||
self.worker = MavlinkWorker(self.events)
|
||||
self.keys = set()
|
||||
self.keyboard_yaw = 0
|
||||
self.keyboard_vertical = 0
|
||||
self.keyboard_planar = (0, 0)
|
||||
self.servo_functions = {}
|
||||
self.motor_directions = {}
|
||||
self.battery_config_path = Path(__file__).resolve().parent / "battery_settings.json"
|
||||
self.battery_config = {
|
||||
"cells": 4,
|
||||
"capacity_mah": 5500,
|
||||
"c_rating": 35,
|
||||
"full_v_per_cell": 4.20,
|
||||
"empty_v_per_cell": 3.30,
|
||||
"warning_percent": 20,
|
||||
}
|
||||
self.battery_voltage = None
|
||||
self.battery_voltage_smoothed = None
|
||||
self._load_battery_settings()
|
||||
self._configure_styles()
|
||||
self.protocol("WM_DELETE_WINDOW", self.close)
|
||||
self._build()
|
||||
self.refresh_ports()
|
||||
self.bind_all("<KeyPress>", self._key_down)
|
||||
self.bind_all("<KeyRelease>", self._key_up)
|
||||
self.after(50, self._poll)
|
||||
self.after(500, self._link_watchdog)
|
||||
|
||||
def _configure_styles(self):
|
||||
self.configure(bg="#e8e9e7")
|
||||
style = ttk.Style(self)
|
||||
try:
|
||||
style.theme_use("clam")
|
||||
except tk.TclError:
|
||||
pass
|
||||
style.configure("TFrame", background="#fbfbf9")
|
||||
style.configure("TLabel", background="#fbfbf9", foreground="#202224",
|
||||
font=("Helvetica", 9))
|
||||
style.configure("TLabelframe", background="#f4f6f8", bordercolor="#d8dee8",
|
||||
borderwidth=1, relief="solid")
|
||||
style.configure("TLabelframe.Label", background="#f4f6f8", foreground="#475569",
|
||||
font=("Segoe UI", 9, "bold"))
|
||||
style.configure("TButton", font=("Segoe UI", 9), padding=(10, 7),
|
||||
background="#ffffff", foreground="#1e293b", bordercolor="#cbd5e1")
|
||||
style.map("TButton", background=[("active", "#e8eef7")])
|
||||
style.configure("Primary.TButton", background="#2563eb", foreground="#ffffff",
|
||||
bordercolor="#2563eb", font=("Segoe UI", 9, "bold"))
|
||||
style.map("Primary.TButton", background=[("active", "#1d4ed8")])
|
||||
style.configure("Danger.TButton", background="#dc2626", foreground="#ffffff",
|
||||
bordercolor="#dc2626", font=("Segoe UI", 9, "bold"))
|
||||
style.map("Danger.TButton", background=[("active", "#b91c1c")])
|
||||
style.configure("Title.TLabel", font=("Segoe UI", 18, "bold"), foreground="#0f172a")
|
||||
style.configure("Subtitle.TLabel", font=("Segoe UI", 9), foreground="#64748b")
|
||||
style.configure("Status.TLabel", font=("Segoe UI", 9, "bold"))
|
||||
style.configure("Footer.TLabel", background="#e9eef5", foreground="#475569",
|
||||
font=("Segoe UI", 9))
|
||||
style.configure("Treeview", rowheight=28, background="#ffffff", fieldbackground="#ffffff",
|
||||
foreground="#26282a", bordercolor="#e1e1dc", font=("Helvetica", 9))
|
||||
style.configure("Treeview.Heading", font=("Helvetica", 9, "bold"), padding=(6, 6),
|
||||
background="#f0f0ed", foreground="#4c4f52")
|
||||
style.map("Treeview", background=[("selected", "#dbeafe")],
|
||||
foreground=[("selected", "#1e3a8a")])
|
||||
style.configure("Horizontal.TProgressbar", troughcolor="#e2e8f0", background="#22c55e",
|
||||
bordercolor="#e2e8f0", lightcolor="#22c55e", darkcolor="#22c55e")
|
||||
|
||||
def _console_button(self, master, text, command, kind="neutral", width=112):
|
||||
colors = {
|
||||
"neutral": ("#f4f4f1", "#e9e9e4", "#343739", "#deded8"),
|
||||
"primary": ("#dcebd5", "#cde2c4", "#27401f", "#c4dcb9"),
|
||||
"danger": ("#f7dfdc", "#f1cfcb", "#7b3029", "#edcec9"),
|
||||
}
|
||||
color, hover, text_color, border = colors[kind]
|
||||
return ctk.CTkButton(
|
||||
master, text=text, command=command, width=width, height=34,
|
||||
corner_radius=11, fg_color=color, hover_color=hover,
|
||||
text_color=text_color, border_color=border, border_width=1,
|
||||
font=ctk.CTkFont("Helvetica", 12, "bold" if kind != "neutral" else "normal"),
|
||||
bg_color="transparent",
|
||||
)
|
||||
|
||||
def _console_combo(self, master, values, width):
|
||||
return ctk.CTkComboBox(
|
||||
master, values=[str(value) for value in values], width=width, height=34,
|
||||
corner_radius=10, border_width=1, border_color="#cbd5e1",
|
||||
fg_color="#ffffff", button_color="#e8eef7",
|
||||
button_hover_color="#dbeafe", dropdown_fg_color="#ffffff",
|
||||
dropdown_hover_color="#dbeafe", text_color="#1e293b",
|
||||
bg_color="transparent", state="readonly",
|
||||
)
|
||||
|
||||
def _build(self):
|
||||
shell = ctk.CTkFrame(self, fg_color="#f8f8f6", corner_radius=24,
|
||||
border_width=1, border_color="#d5d6d3")
|
||||
shell.pack(fill="both", expand=True, padx=18, pady=18)
|
||||
shell.grid_rowconfigure(0, weight=1)
|
||||
shell.grid_columnconfigure(1, weight=1)
|
||||
|
||||
rail = ctk.CTkFrame(shell, width=248, fg_color="#282d30", corner_radius=22)
|
||||
rail.grid(row=0, column=0, sticky="nsew")
|
||||
rail.grid_propagate(False)
|
||||
workspace = ctk.CTkFrame(shell, fg_color="#fbfbf9", corner_radius=22)
|
||||
workspace.grid(row=0, column=1, sticky="nsew")
|
||||
|
||||
ctk.CTkLabel(rail, text="SUB CONTROL / 03", text_color="#f4f4f1",
|
||||
font=ctk.CTkFont("Helvetica", 13, "bold")).pack(
|
||||
anchor="w", padx=24, pady=(24, 0))
|
||||
ctk.CTkLabel(rail, text="ArduSub vehicle", text_color="#8f9699",
|
||||
font=ctk.CTkFont("Helvetica", 10)).pack(anchor="w", padx=24, pady=(2, 14))
|
||||
|
||||
vehicle_art = tk.Canvas(rail, width=204, height=250, bg="#282d30",
|
||||
highlightthickness=0, bd=0)
|
||||
vehicle_art.pack(padx=20, pady=(5, 4))
|
||||
vehicle_art.create_oval(47, 27, 157, 223, fill="#353b3e", outline="#555c60", width=2)
|
||||
vehicle_art.create_oval(68, 49, 136, 201, fill="#303538", outline="#444a4e")
|
||||
vehicle_art.create_oval(80, 102, 124, 146, fill="#5e666a", outline="#788084", width=2)
|
||||
vehicle_art.create_oval(21, 57, 62, 100, fill="#202426", outline="#62696d", width=2)
|
||||
vehicle_art.create_oval(142, 57, 183, 100, fill="#202426", outline="#62696d", width=2)
|
||||
vehicle_art.create_line(42, 79, 72, 93, fill="#757d81", width=3)
|
||||
vehicle_art.create_line(162, 79, 132, 93, fill="#757d81", width=3)
|
||||
vehicle_art.create_text(102, 236, text="TOP VIEW • 3 THRUSTERS",
|
||||
fill="#7e8689", font=("Helvetica", 8, "bold"))
|
||||
|
||||
ctk.CTkLabel(rail, text="Vehicle", text_color="#959c9f",
|
||||
font=ctk.CTkFont("Helvetica", 10)).pack(anchor="w", padx=24, pady=(5, 0))
|
||||
self.vehicle_label = ctk.CTkLabel(rail, text="No heartbeat", text_color="#f4f4f1",
|
||||
font=ctk.CTkFont("Helvetica", 14, "bold"))
|
||||
self.vehicle_label.pack(anchor="w", padx=24)
|
||||
|
||||
rail_bottom = ctk.CTkFrame(rail, fg_color="transparent")
|
||||
rail_bottom.pack(side="bottom", fill="x", padx=24, pady=22)
|
||||
self.battery_summary = ctk.CTkLabel(
|
||||
rail_bottom, text="Battery —", text_color="#f4f4f1",
|
||||
font=ctk.CTkFont("Helvetica", 13, "bold"), anchor="w"
|
||||
)
|
||||
self.battery_summary.pack(fill="x")
|
||||
self.battery_meta = ctk.CTkLabel(
|
||||
rail_bottom, text="Waiting for voltage", text_color="#92999c",
|
||||
font=ctk.CTkFont("Helvetica", 9), anchor="w"
|
||||
)
|
||||
self.battery_meta.pack(fill="x", pady=(0, 5))
|
||||
self.battery_bar = ctk.CTkProgressBar(
|
||||
rail_bottom, height=7, corner_radius=4, fg_color="#454b4e",
|
||||
progress_color="#c4e46c"
|
||||
)
|
||||
self.battery_bar.set(0)
|
||||
self.battery_bar.pack(fill="x", pady=(0, 18))
|
||||
self.link_label = ctk.CTkLabel(
|
||||
rail_bottom, text="● DISCONNECTED", text_color="#f08a82",
|
||||
font=ctk.CTkFont("Helvetica", 10, "bold"), anchor="w"
|
||||
)
|
||||
self.link_label.pack(fill="x")
|
||||
|
||||
header = ctk.CTkFrame(workspace, fg_color="transparent")
|
||||
header.pack(fill="x", padx=28, pady=(24, 14))
|
||||
title = ctk.CTkFrame(header, fg_color="transparent")
|
||||
title.pack(side="left")
|
||||
ctk.CTkLabel(title, text="Drive", text_color="#17191a",
|
||||
font=ctk.CTkFont("Helvetica", 24, "bold")).pack(anchor="w")
|
||||
ctk.CTkLabel(title, text="Differential steering • MANUAL control",
|
||||
text_color="#8a8c8e", font=ctk.CTkFont("Helvetica", 10)).pack(anchor="w")
|
||||
|
||||
top = ctk.CTkFrame(header, fg_color="transparent")
|
||||
top.pack(side="right")
|
||||
self.port = self._console_combo(top, [], 190)
|
||||
self.port.grid(row=0, column=0, padx=4)
|
||||
self._console_button(top, "↻", self.refresh_ports, width=38).grid(row=0, column=1, padx=4)
|
||||
self.baud = self._console_combo(top, (9600, 19200, 38400, 57600, 115200), 105)
|
||||
self.baud.set("57600")
|
||||
self.rate = self._console_combo(top, (10, 20), 72)
|
||||
self.rate.set("20")
|
||||
self.link_settings_button = self._console_button(
|
||||
top, "•••", self._toggle_link_settings, width=38
|
||||
)
|
||||
self.link_settings_button.grid(row=0, column=2, padx=4)
|
||||
self.connect_button = self._console_button(
|
||||
top, "Connect", self.toggle_connect, kind="primary", width=110
|
||||
)
|
||||
self.connect_button.grid(row=0, column=3, padx=(4, 0))
|
||||
|
||||
separator = ctk.CTkFrame(workspace, height=1, fg_color="#e7e7e3")
|
||||
separator.pack(fill="x", padx=28)
|
||||
|
||||
controls = ctk.CTkFrame(workspace, fg_color="transparent")
|
||||
controls.pack(fill="both", expand=True, padx=28, pady=18)
|
||||
controls.grid_rowconfigure(0, weight=1)
|
||||
controls.grid_columnconfigure(0, weight=1)
|
||||
controls.grid_columnconfigure(1, minsize=214)
|
||||
|
||||
drive_card = ctk.CTkFrame(controls, fg_color="#f5f5f2", corner_radius=18)
|
||||
drive_card.grid(row=0, column=0, sticky="nsew", padx=(0, 12))
|
||||
ctk.CTkLabel(drive_card, text="STEER + THROTTLE", text_color="#66696b",
|
||||
font=ctk.CTkFont("Helvetica", 10, "bold")).pack(pady=(18, 0))
|
||||
self.joystick = Joystick(drive_card, self._axes_changed)
|
||||
self.joystick.pack(expand=True, pady=(4, 0))
|
||||
ctk.CTkLabel(drive_card, text="W / S drive • A / D steer",
|
||||
text_color="#969896", font=ctk.CTkFont("Helvetica", 9)).pack(pady=(0, 16))
|
||||
|
||||
heave_card = ctk.CTkFrame(controls, fg_color="#f5f5f2", corner_radius=18)
|
||||
heave_card.grid(row=0, column=1, sticky="nsew")
|
||||
ctk.CTkLabel(heave_card, text="VERTICAL", text_color="#66696b",
|
||||
font=ctk.CTkFont("Helvetica", 10, "bold")).pack(pady=(18, 2))
|
||||
ctk.CTkLabel(heave_card, text="RISE", text_color="#969896",
|
||||
font=ctk.CTkFont("Helvetica", 8, "bold")).pack()
|
||||
self.vertical = SpringScale(
|
||||
heave_card, from_=100, to=-100, orient="vertical", length=230,
|
||||
command=lambda _: self._axes_changed()
|
||||
)
|
||||
self.vertical.set(0)
|
||||
self.vertical.pack(expand=True, pady=8)
|
||||
ctk.CTkLabel(heave_card, text="DIVE", text_color="#969896",
|
||||
font=ctk.CTkFont("Helvetica", 8, "bold")).pack()
|
||||
ctk.CTkLabel(heave_card, text="R / F • springs to neutral",
|
||||
text_color="#969896", font=ctk.CTkFont("Helvetica", 9)).pack(pady=(4, 16))
|
||||
|
||||
self.battery_cells = tk.StringVar(value=str(self.battery_config["cells"]))
|
||||
self.battery_capacity = tk.StringVar(value=str(self.battery_config["capacity_mah"]))
|
||||
self.battery_c_rating = tk.StringVar(value=str(self.battery_config["c_rating"]))
|
||||
self.battery_full_cell = tk.StringVar(value=str(self.battery_config["full_v_per_cell"]))
|
||||
self.battery_empty_cell = tk.StringVar(value=str(self.battery_config["empty_v_per_cell"]))
|
||||
self.battery_warning = tk.StringVar(value=str(self.battery_config["warning_percent"]))
|
||||
fields = (
|
||||
("Cells (S)", self.battery_cells, 5),
|
||||
("Capacity mAh", self.battery_capacity, 8),
|
||||
("C rating", self.battery_c_rating, 5),
|
||||
("Full V/cell", self.battery_full_cell, 6),
|
||||
("Empty V/cell", self.battery_empty_cell, 6),
|
||||
("Warn %", self.battery_warning, 5),
|
||||
)
|
||||
self.battery_settings_frame = ctk.CTkFrame(workspace, fg_color="#f0f0ed", corner_radius=14)
|
||||
for column, (label, variable, width) in enumerate(fields):
|
||||
group = ctk.CTkFrame(self.battery_settings_frame, fg_color="transparent")
|
||||
group.grid(row=0, column=column, padx=(0, 8), sticky="w")
|
||||
ctk.CTkLabel(group, text=label, text_color="#66696b",
|
||||
font=ctk.CTkFont("Helvetica", 9)).pack(anchor="w")
|
||||
ctk.CTkEntry(group, textvariable=variable, width=max(62, width * 9), height=30,
|
||||
corner_radius=8, border_color="#d0d0cb").pack(anchor="w")
|
||||
self._console_button(self.battery_settings_frame, "Apply", self._apply_battery_settings,
|
||||
kind="primary", width=82).grid(
|
||||
row=0, column=6, padx=(8, 0), sticky="sew"
|
||||
)
|
||||
self.battery_settings_frame.pack_forget()
|
||||
|
||||
actions = ctk.CTkFrame(workspace, fg_color="transparent")
|
||||
actions.pack(fill="x", padx=28, pady=(0, 14))
|
||||
self._console_button(actions, "MANUAL", self.set_manual, width=94).pack(side="left", padx=3)
|
||||
self._console_button(actions, "ARM", self.arm, kind="primary", width=82).pack(side="left", padx=3)
|
||||
self._console_button(actions, "DISARM", self.disarm, kind="danger", width=92).pack(side="left", padx=3)
|
||||
ctk.CTkLabel(actions, text="Output", text_color="#777a7c",
|
||||
font=ctk.CTkFont("Helvetica", 10)).pack(side="left", padx=(18, 4))
|
||||
self.gain = ctk.CTkSlider(
|
||||
actions, from_=5, to=50, number_of_steps=45, width=170, height=18,
|
||||
command=self._gain_changed, corner_radius=10, button_corner_radius=10,
|
||||
button_length=22, fg_color="#dbe3ee", progress_color="#60a5fa",
|
||||
button_color="#2563eb", button_hover_color="#1d4ed8",
|
||||
bg_color="transparent",
|
||||
)
|
||||
self.gain.set(20)
|
||||
self.gain.pack(side="left")
|
||||
self.gain_text = ctk.CTkLabel(actions, text="20%", text_color="#55585a",
|
||||
font=ctk.CTkFont("Helvetica", 10, "bold"))
|
||||
self.gain_text.pack(side="left")
|
||||
self._console_button(actions, "Motor setup", self._toggle_motor_setup, width=112).pack(
|
||||
side="right", padx=3
|
||||
)
|
||||
self._console_button(actions, "Battery", self._toggle_battery_settings, width=88).pack(
|
||||
side="right", padx=3
|
||||
)
|
||||
|
||||
assignments = ctk.CTkFrame(workspace, fg_color="#f0f0ed", corner_radius=14)
|
||||
self.assignments_frame = assignments
|
||||
self.servo_tree = ttk.Treeview(
|
||||
assignments, columns=("output", "function", "reversed"),
|
||||
show="headings", height=5, selectmode="browse",
|
||||
)
|
||||
self.servo_tree.heading("output", text="Output")
|
||||
self.servo_tree.heading("function", text="Function")
|
||||
self.servo_tree.heading("reversed", text="Motor reversed")
|
||||
self.servo_tree.column("output", width=90, anchor="center", stretch=False)
|
||||
self.servo_tree.column("function", width=220, anchor="w")
|
||||
self.servo_tree.column("reversed", width=90, anchor="center", stretch=False)
|
||||
for number in range(1, 17):
|
||||
self.servo_tree.insert("", "end", iid=str(number),
|
||||
values=(f"SERVO{number}", "Waiting…", "Waiting…"))
|
||||
self.servo_tree.pack(side="left", fill="x", expand=True)
|
||||
scrollbar = ttk.Scrollbar(assignments, orient="vertical", command=self.servo_tree.yview)
|
||||
scrollbar.pack(side="left", fill="y")
|
||||
self.servo_tree.configure(yscrollcommand=scrollbar.set)
|
||||
|
||||
edit = ctk.CTkFrame(assignments, fg_color="transparent")
|
||||
edit.pack(side="right", fill="y")
|
||||
ctk.CTkLabel(edit, text="Selected output function", text_color="#55585a").pack(anchor="w")
|
||||
motor_choices = ["Unassigned (0)"] + [f"Motor {number}" for number in range(1, 13)]
|
||||
self.motor_function = self._console_combo(edit, motor_choices, 165)
|
||||
self.motor_function.set("Motor 1")
|
||||
self.motor_function.pack(fill="x", pady=(2, 5))
|
||||
self._console_button(edit, "Apply function", self.apply_servo_function, width=165).pack(fill="x", pady=2)
|
||||
self._console_button(edit, "Reverse motor", self.toggle_servo_reversed, width=165).pack(fill="x", pady=2)
|
||||
ctk.CTkLabel(edit, text="Changes require DISARMED", text_color="#a16207").pack(pady=(8, 0))
|
||||
|
||||
log_frame = ctk.CTkFrame(workspace, fg_color="transparent")
|
||||
log_frame.pack(fill="x", padx=28, pady=(0, 12))
|
||||
self.log_frame = log_frame
|
||||
self.log_path_text = tk.StringVar(value="Session log starts when connected")
|
||||
ctk.CTkLabel(log_frame, textvariable=self.log_path_text, anchor="w", text_color="#8b8d8f",
|
||||
font=ctk.CTkFont("Helvetica", 9)).pack(side="left", fill="x", expand=True)
|
||||
self._console_button(log_frame, "Open logs", self.open_logs_folder, width=96).pack(side="right")
|
||||
|
||||
self.status_text = tk.StringVar(value="Ready. Controls are neutral; vehicle is not connected.")
|
||||
ctk.CTkLabel(workspace, textvariable=self.status_text, anchor="w", height=34,
|
||||
corner_radius=12, fg_color="#eeeeea", text_color="#65686a",
|
||||
font=ctk.CTkFont("Helvetica", 9)).pack(fill="x", padx=28, pady=(0, 18))
|
||||
|
||||
def refresh_ports(self):
|
||||
ports = [p.device for p in list_ports.comports()]
|
||||
for sim in ("tcp:127.0.0.1:5760", "udpin:127.0.0.1:14550"):
|
||||
if sim not in ports:
|
||||
ports.append(sim)
|
||||
self.port.configure(values=ports)
|
||||
if ports and self.port.get() not in ports:
|
||||
self.port.set(ports[0])
|
||||
|
||||
def _toggle_battery_settings(self):
|
||||
if self.battery_settings_frame.winfo_ismapped():
|
||||
self.battery_settings_frame.pack_forget()
|
||||
else:
|
||||
self.battery_settings_frame.pack(
|
||||
fill="x", padx=28, pady=(0, 12), before=self.log_frame
|
||||
)
|
||||
|
||||
def _toggle_link_settings(self):
|
||||
if self.baud.winfo_ismapped():
|
||||
self.baud.grid_remove()
|
||||
self.rate.grid_remove()
|
||||
else:
|
||||
self.baud.grid(row=1, column=0, sticky="e", padx=4, pady=(6, 0))
|
||||
self.rate.grid(row=1, column=1, sticky="w", padx=4, pady=(6, 0))
|
||||
|
||||
def _toggle_motor_setup(self):
|
||||
if self.assignments_frame.winfo_ismapped():
|
||||
self.assignments_frame.pack_forget()
|
||||
else:
|
||||
self.assignments_frame.pack(
|
||||
fill="x", padx=28, pady=(0, 12), before=self.log_frame
|
||||
)
|
||||
|
||||
def _load_battery_settings(self):
|
||||
try:
|
||||
saved = json.loads(self.battery_config_path.read_text(encoding="utf-8"))
|
||||
for key in self.battery_config:
|
||||
if key in saved:
|
||||
self.battery_config[key] = saved[key]
|
||||
except (OSError, ValueError, TypeError):
|
||||
pass
|
||||
|
||||
def _apply_battery_settings(self):
|
||||
try:
|
||||
config = {
|
||||
"cells": int(self.battery_cells.get()),
|
||||
"capacity_mah": int(self.battery_capacity.get()),
|
||||
"c_rating": float(self.battery_c_rating.get()),
|
||||
"full_v_per_cell": float(self.battery_full_cell.get()),
|
||||
"empty_v_per_cell": float(self.battery_empty_cell.get()),
|
||||
"warning_percent": int(self.battery_warning.get()),
|
||||
}
|
||||
if not 1 <= config["cells"] <= 12:
|
||||
raise ValueError("cell count must be between 1 and 12")
|
||||
if config["capacity_mah"] <= 0 or config["c_rating"] <= 0:
|
||||
raise ValueError("capacity and C rating must be positive")
|
||||
if not config["full_v_per_cell"] > config["empty_v_per_cell"] > 0:
|
||||
raise ValueError("full V/cell must be greater than empty V/cell")
|
||||
if not 0 <= config["warning_percent"] <= 100:
|
||||
raise ValueError("warning percentage must be between 0 and 100")
|
||||
self.battery_config = config
|
||||
self.battery_config_path.write_text(
|
||||
json.dumps(config, indent=2) + "\n", encoding="utf-8"
|
||||
)
|
||||
self._update_battery_display()
|
||||
self.status_text.set("Battery settings saved")
|
||||
except (ValueError, OSError) as exc:
|
||||
messagebox.showerror("Invalid battery settings", str(exc))
|
||||
|
||||
def _battery_percent(self, voltage):
|
||||
cells = self.battery_config["cells"]
|
||||
per_cell = voltage / cells
|
||||
empty = self.battery_config["empty_v_per_cell"]
|
||||
full = self.battery_config["full_v_per_cell"]
|
||||
return max(0.0, min(100.0, (per_cell - empty) * 100.0 / (full - empty)))
|
||||
|
||||
def _update_battery_display(self):
|
||||
voltage = self.battery_voltage_smoothed
|
||||
if voltage is None:
|
||||
self.battery_summary.configure(text="Battery —", text_color="#f4f4f1")
|
||||
self.battery_meta.configure(text="Waiting for voltage")
|
||||
self.battery_bar.set(0)
|
||||
return
|
||||
cells = self.battery_config["cells"]
|
||||
percent = self._battery_percent(voltage)
|
||||
per_cell = voltage / cells
|
||||
warning = percent <= self.battery_config["warning_percent"]
|
||||
self.battery_summary.configure(
|
||||
text=f"Battery {percent:.0f}%",
|
||||
text_color="#ffaaa2" if warning else "#f4f4f1",
|
||||
)
|
||||
self.battery_meta.configure(
|
||||
text=f"{voltage:.2f} V • {per_cell:.2f} V/cell • {cells}S"
|
||||
+ (" • LOW" if warning else "")
|
||||
)
|
||||
self.battery_bar.configure(progress_color="#f08a82" if warning else "#c4e46c")
|
||||
self.battery_bar.set(percent / 100.0)
|
||||
|
||||
def toggle_connect(self):
|
||||
if self.worker.thread and self.worker.thread.is_alive():
|
||||
self.worker.disconnect()
|
||||
self.connect_button.configure(state="disabled")
|
||||
return
|
||||
if not self.port.get():
|
||||
messagebox.showerror("No port", "Select a USB serial COM port.")
|
||||
return
|
||||
self.worker.rate_hz = int(self.rate.get())
|
||||
self.worker.connect(self.port.get(), int(self.baud.get()))
|
||||
self.connect_button.configure(text="Disconnect")
|
||||
self.status_text.set("Opening serial port…")
|
||||
|
||||
def _axes_changed(self):
|
||||
turn, forward = self.joystick.value
|
||||
self.worker.set_axes(Axes(forward, 0.0,
|
||||
float(self.vertical.get()) / 100,
|
||||
turn))
|
||||
|
||||
def _gain_changed(self, value):
|
||||
value = int(float(value))
|
||||
self.worker.gain = value / 100
|
||||
self.gain_text.configure(text=f"{value}%")
|
||||
|
||||
def _key_down(self, event):
|
||||
key = event.keysym.lower()
|
||||
if key in "wasdqerf":
|
||||
self.keys.add(key)
|
||||
self._apply_keys()
|
||||
|
||||
def _key_up(self, event):
|
||||
key = event.keysym.lower()
|
||||
self.keys.discard(key)
|
||||
self._apply_keys()
|
||||
|
||||
def _apply_keys(self):
|
||||
turn = (1 if ("d" in self.keys or "e" in self.keys) else 0) - (
|
||||
1 if ("a" in self.keys or "q" in self.keys) else 0
|
||||
)
|
||||
forward = (1 if "w" in self.keys else 0) - (1 if "s" in self.keys else 0)
|
||||
vertical = (1 if "r" in self.keys else 0) - (1 if "f" in self.keys else 0)
|
||||
planar = (turn, forward)
|
||||
if planar != self.keyboard_planar:
|
||||
if turn or forward:
|
||||
self.joystick.set_immediate(float(turn), float(forward))
|
||||
else:
|
||||
self.joystick._release()
|
||||
self.keyboard_planar = planar
|
||||
if vertical != self.keyboard_vertical:
|
||||
if vertical:
|
||||
self.vertical.set_immediate(vertical * 100)
|
||||
else:
|
||||
self.vertical.spring_to_center()
|
||||
self.keyboard_vertical = vertical
|
||||
self._axes_changed()
|
||||
|
||||
def arm(self):
|
||||
if not messagebox.askyesno("Arm vehicle", "Propellers removed or vehicle securely restrained?\n\nArm now?"):
|
||||
return
|
||||
try:
|
||||
self.worker.log("OPERATOR", "clicked ARM")
|
||||
self.worker.command_arm(True)
|
||||
self.status_text.set("Arm command sent; waiting for ACK/heartbeat…")
|
||||
except Exception as exc:
|
||||
messagebox.showerror("Cannot arm", str(exc))
|
||||
|
||||
def disarm(self):
|
||||
try:
|
||||
self.worker.log("OPERATOR", "clicked DISARM")
|
||||
self.worker.command_arm(False)
|
||||
self.status_text.set("Disarm command sent; neutral sent")
|
||||
except Exception as exc:
|
||||
messagebox.showerror("Cannot disarm", str(exc))
|
||||
|
||||
def set_manual(self):
|
||||
try:
|
||||
self.worker.log("OPERATOR", "clicked SET MANUAL")
|
||||
self.worker.set_manual_mode()
|
||||
self.status_text.set("MANUAL mode request sent")
|
||||
except Exception as exc:
|
||||
messagebox.showerror("Cannot set mode", str(exc))
|
||||
|
||||
def open_logs_folder(self):
|
||||
log_dir = Path(__file__).resolve().parent / "logs"
|
||||
log_dir.mkdir(exist_ok=True)
|
||||
os.startfile(log_dir)
|
||||
|
||||
def _selected_servo(self):
|
||||
selection = self.servo_tree.selection()
|
||||
if not selection:
|
||||
raise RuntimeError("Select a SERVO output in the table first")
|
||||
return int(selection[0])
|
||||
|
||||
def apply_servo_function(self):
|
||||
try:
|
||||
servo = self._selected_servo()
|
||||
choice = self.motor_function.get()
|
||||
if choice.startswith("Motor "):
|
||||
motor = int(choice.split()[1])
|
||||
function = 32 + motor if motor <= 8 else 73 + motor
|
||||
else:
|
||||
function = 0
|
||||
description = MOTOR_FUNCTIONS.get(function, "Unassigned")
|
||||
if not messagebox.askyesno(
|
||||
"Change output function",
|
||||
f"Set SERVO{servo}_FUNCTION to {description} ({function})?\n\n"
|
||||
"This changes the autopilot configuration.",
|
||||
):
|
||||
return
|
||||
self.worker.set_parameter(f"SERVO{servo}_FUNCTION", function)
|
||||
except Exception as exc:
|
||||
messagebox.showerror("Cannot change function", str(exc))
|
||||
|
||||
def toggle_servo_reversed(self):
|
||||
try:
|
||||
servo = self._selected_servo()
|
||||
function = self.servo_functions.get(servo)
|
||||
motor = motor_number_for_function(function)
|
||||
if motor is None:
|
||||
raise RuntimeError(
|
||||
f"SERVO{servo} is not assigned to an ArduSub Motor function"
|
||||
)
|
||||
current = self.motor_directions.get(motor)
|
||||
if current is None:
|
||||
raise RuntimeError(f"MOT_{motor}_DIRECTION has not been read yet")
|
||||
new_value = -1 if current == 1 else 1
|
||||
if not messagebox.askyesno(
|
||||
"Reverse motor output",
|
||||
f"SERVO{servo} is Motor {motor}.\n"
|
||||
f"Set MOT_{motor}_DIRECTION to {new_value}?\n\n"
|
||||
"Test direction with propellers removed after changing this.",
|
||||
):
|
||||
return
|
||||
self.worker.set_parameter(f"MOT_{motor}_DIRECTION", new_value)
|
||||
except Exception as exc:
|
||||
messagebox.showerror("Cannot reverse output", str(exc))
|
||||
|
||||
def _refresh_servo_row(self, number):
|
||||
function = self.servo_functions.get(number)
|
||||
motor = motor_number_for_function(function)
|
||||
direction = self.motor_directions.get(motor) if motor is not None else None
|
||||
if function is None:
|
||||
function_text = "Waiting…"
|
||||
else:
|
||||
function_text = f"{MOTOR_FUNCTIONS.get(function, 'Other / unassigned')} ({function})"
|
||||
if motor is None:
|
||||
reversed_text = "—"
|
||||
elif direction is None:
|
||||
reversed_text = "Waiting…"
|
||||
else:
|
||||
reversed_text = "Yes" if direction == -1 else "No"
|
||||
self.servo_tree.item(str(number), values=(f"SERVO{number}", function_text, reversed_text))
|
||||
|
||||
def _poll(self):
|
||||
try:
|
||||
while True:
|
||||
event = self.events.get_nowait()
|
||||
kind = event[0]
|
||||
if kind == "heartbeat":
|
||||
_, system, autopilot, mode, armed = event[:5]
|
||||
self.vehicle_label.configure(
|
||||
text=f"{mode} • {'ARMED' if armed else 'DISARMED'}"
|
||||
)
|
||||
self.link_label.configure(text="● LINK OK", text_color="#c4e46c")
|
||||
elif kind in ("status", "statustext"):
|
||||
self.status_text.set(event[1])
|
||||
elif kind == "ack":
|
||||
self.status_text.set(f"Command {event[1]} ACK: {event[2]}")
|
||||
elif kind == "servo_param":
|
||||
_, param_id, value = event
|
||||
number = int(param_id[5:param_id.index("_")])
|
||||
self.servo_functions[number] = value
|
||||
self._refresh_servo_row(number)
|
||||
elif kind == "motor_direction":
|
||||
_, motor, value = event
|
||||
self.motor_directions[motor] = value
|
||||
for number in range(1, 17):
|
||||
if motor_number_for_function(self.servo_functions.get(number)) == motor:
|
||||
self._refresh_servo_row(number)
|
||||
elif kind == "battery":
|
||||
self.battery_voltage = event[1]
|
||||
if self.battery_voltage_smoothed is None:
|
||||
self.battery_voltage_smoothed = self.battery_voltage
|
||||
else:
|
||||
self.battery_voltage_smoothed = (
|
||||
0.75 * self.battery_voltage_smoothed + 0.25 * self.battery_voltage
|
||||
)
|
||||
self._update_battery_display()
|
||||
elif kind == "param_saved":
|
||||
self.status_text.set(f"Confirmed: {event[1]}={event[2]}")
|
||||
elif kind == "param_missing":
|
||||
self.status_text.set(f"No response for {event[1]}; continuing scan…")
|
||||
elif kind == "param_scan_complete":
|
||||
count = sum(value in MOTOR_FUNCTIONS for value in self.servo_functions.values())
|
||||
self.status_text.set(f"Servo scan complete: {count} motor output(s) assigned")
|
||||
elif kind == "log_path":
|
||||
self.log_path_text.set(f"Log: {event[1]}")
|
||||
elif kind == "error":
|
||||
self.status_text.set(event[1])
|
||||
messagebox.showerror("MAVLink", event[1])
|
||||
elif kind == "disconnected":
|
||||
self.connect_button.configure(text="Connect", state="normal")
|
||||
self.link_label.configure(text="● DISCONNECTED", text_color="#f08a82")
|
||||
self.vehicle_label.configure(text="No heartbeat")
|
||||
self.battery_voltage = None
|
||||
self.battery_voltage_smoothed = None
|
||||
self._update_battery_display()
|
||||
self.servo_functions.clear()
|
||||
self.motor_directions.clear()
|
||||
for number in range(1, 17):
|
||||
self.servo_tree.item(str(number), values=(f"SERVO{number}", "Waiting…", "Waiting…"))
|
||||
except queue.Empty:
|
||||
pass
|
||||
self.after(50, self._poll)
|
||||
|
||||
def _link_watchdog(self):
|
||||
if self.worker.target_system and time.monotonic() - self.worker.last_heartbeat > 5.0:
|
||||
if time.monotonic() - self.worker.last_rx < 2.0:
|
||||
text = "● DATA OK / HEARTBEAT DELAYED"
|
||||
else:
|
||||
text = "● ALL LINK DATA LOST"
|
||||
self.link_label.configure(text=text, text_color="#f08a82")
|
||||
self.worker._send_control(force_neutral=True)
|
||||
self.after(500, self._link_watchdog)
|
||||
|
||||
def close(self):
|
||||
self.worker.disconnect()
|
||||
self.after(150, self.destroy)
|
||||
@@ -0,0 +1,132 @@
|
||||
"""Validated V2 settings and telemetry, independent of the desktop renderer."""
|
||||
from __future__ import annotations
|
||||
|
||||
import json
|
||||
import math
|
||||
import re
|
||||
import time
|
||||
from pathlib import Path
|
||||
from urllib.parse import urlsplit
|
||||
|
||||
AXES = ("forward", "lateral", "vertical", "turn", "pitch", "roll")
|
||||
FRAMES = {
|
||||
0: ("BlueROV1", 6, AXES),
|
||||
1: ("Vectored", 6, tuple(axis for axis in AXES if axis != "pitch")),
|
||||
2: ("Vectored 6DOF", 8, AXES),
|
||||
3: ("Vectored 90", 8, AXES),
|
||||
4: ("SimpleROV 3", 3, ("forward", "vertical", "turn")),
|
||||
5: ("SimpleROV 4", 4, ("forward", "vertical", "turn", "roll")),
|
||||
6: ("SimpleROV 5", 5, ("forward", "lateral", "vertical", "turn", "roll")),
|
||||
}
|
||||
INPUT = re.compile(r"^(off|button:(?:[0-9]|[12][0-9]|3[01])|axis:(?:[0-9]|1[0-5]):[+-])$")
|
||||
|
||||
|
||||
def number(value, minimum, maximum):
|
||||
result = float(value)
|
||||
if not math.isfinite(result) or not minimum <= result <= maximum:
|
||||
raise ValueError(f"Value must be between {minimum} and {maximum}")
|
||||
return result
|
||||
|
||||
|
||||
def clean_profile(config):
|
||||
if not isinstance(config, dict) or config.get("version") != 2:
|
||||
raise ValueError("Invalid controller profile")
|
||||
if not isinstance(config.get("bindings", {}), dict) or not isinstance(config.get("actions", {}), dict):
|
||||
raise ValueError("Invalid controller bindings")
|
||||
bindings = {}
|
||||
for axis in AXES:
|
||||
item = config.get("bindings", {}).get(axis, {})
|
||||
if not isinstance(item, dict):
|
||||
raise ValueError("Invalid motion binding")
|
||||
negative, positive = item.get("negative", "off"), item.get("positive", "off")
|
||||
if not isinstance(negative, str) or not INPUT.fullmatch(negative):
|
||||
raise ValueError("Invalid negative input")
|
||||
if not isinstance(positive, str) or not INPUT.fullmatch(positive):
|
||||
raise ValueError("Invalid positive input")
|
||||
if negative == positive and positive != "off":
|
||||
raise ValueError("Choose different inputs for each direction")
|
||||
bindings[axis] = {"negative": negative, "positive": positive,
|
||||
"scale": number(item.get("scale", 1), 0, 1)}
|
||||
actions = {}
|
||||
for action in ("lights", "stream", "record"):
|
||||
source = config.get("actions", {}).get(action, "off")
|
||||
if source != "off" and (not isinstance(source, str) or not re.fullmatch(r"button:(?:[0-9]|[12][0-9]|3[01])", source)):
|
||||
raise ValueError("Actions require a button")
|
||||
actions[action] = source
|
||||
return {"version": 2, "preset": str(config.get("preset", "custom"))[:24],
|
||||
"deadZone": number(config.get("deadZone", .08), 0, .3),
|
||||
"expo": number(config.get("expo", .15), 0, 1),
|
||||
"bindings": bindings, "actions": actions}
|
||||
|
||||
|
||||
def clean_station(config):
|
||||
if not isinstance(config, dict):
|
||||
raise ValueError("Invalid station settings")
|
||||
frame_value = number(config.get("frame", 4), 0, 6)
|
||||
if not frame_value.is_integer():
|
||||
raise ValueError("Invalid frame")
|
||||
frame = int(frame_value)
|
||||
if frame not in FRAMES:
|
||||
raise ValueError("Choose an ArduSub frame")
|
||||
mode = config.get("video_mode", "whep")
|
||||
if mode not in ("whep", "video", "mjpeg"):
|
||||
raise ValueError("Unsupported stream type")
|
||||
url = str(config.get("video_url", "")).strip()
|
||||
if url:
|
||||
parsed = urlsplit(url)
|
||||
if parsed.scheme not in ("http", "https") or not parsed.hostname or parsed.username or parsed.password:
|
||||
raise ValueError("Use an HTTP stream URL without embedded credentials")
|
||||
relays = {}
|
||||
for name in ("lights_relay", "camera_relay"):
|
||||
value = number(config.get(name, -1), -1, 15)
|
||||
if not value.is_integer():
|
||||
raise ValueError("Invalid relay")
|
||||
relays[name] = int(value)
|
||||
if relays["lights_relay"] >= 0 and relays["lights_relay"] == relays["camera_relay"]:
|
||||
raise ValueError("Lights and camera need separate relays")
|
||||
return {"frame": frame, "video_mode": mode, "video_url": url[:2048], **relays}
|
||||
|
||||
|
||||
def save_json(path: Path, data):
|
||||
temporary = path.with_suffix(path.suffix + ".tmp")
|
||||
temporary.write_text(json.dumps(data, indent=2, allow_nan=False) + "\n", encoding="utf-8")
|
||||
temporary.replace(path)
|
||||
|
||||
|
||||
class Telemetry:
|
||||
"""Timestamp every group; missing or stale measurements stay unavailable."""
|
||||
def __init__(self, clock=time.monotonic):
|
||||
self.clock = clock
|
||||
self.groups = {}
|
||||
|
||||
def update(self, group, values, received_at=None):
|
||||
clean = {key: value if isinstance(value, (int, float)) and math.isfinite(value) else None
|
||||
for key, value in values.items()}
|
||||
self.groups[group] = {"values": clean, "at": self.clock() if received_at is None else received_at}
|
||||
|
||||
def snapshot(self, connected=True):
|
||||
now = self.clock()
|
||||
return {name: {"values": item["values"], "age_s": max(0, now - item["at"]),
|
||||
"stale": not connected or now - item["at"] > 3}
|
||||
for name, item in self.groups.items()}
|
||||
|
||||
|
||||
def decode_telemetry(msg):
|
||||
kind = msg.get_type()
|
||||
if kind == "ATTITUDE":
|
||||
return "attitude", {"roll": math.degrees(msg.roll), "pitch": math.degrees(msg.pitch),
|
||||
"heading": math.degrees(msg.yaw) % 360,
|
||||
"roll_rate": math.degrees(msg.rollspeed),
|
||||
"pitch_rate": math.degrees(msg.pitchspeed),
|
||||
"yaw_rate": math.degrees(msg.yawspeed)}
|
||||
if kind == "GLOBAL_POSITION_INT":
|
||||
# ArduSub reports height relative to its surface/home origin, positive up.
|
||||
return "depth", {"depth_m": -msg.relative_alt / 1000.0, "vertical_ms": msg.vz / 100.0}
|
||||
if kind in ("SCALED_IMU", "SCALED_IMU2", "SCALED_IMU3"):
|
||||
return "imu", {"ax": msg.xacc * .00980665, "ay": msg.yacc * .00980665,
|
||||
"az": msg.zacc * .00980665, "gx": msg.xgyro / 1000.0,
|
||||
"gy": msg.ygyro / 1000.0, "gz": msg.zgyro / 1000.0,
|
||||
"mx": msg.xmag / 1000.0, "my": msg.ymag / 1000.0, "mz": msg.zmag / 1000.0}
|
||||
if kind == "SCALED_PRESSURE2":
|
||||
return "pressure", {"pressure_hpa": msg.press_abs, "temperature_c": msg.temperature / 100.0}
|
||||
return None
|
||||
+14
-5
@@ -3,13 +3,22 @@ $ErrorActionPreference = "Stop"
|
||||
$projectRoot = Split-Path -Parent $MyInvocation.MyCommand.Path
|
||||
Set-Location -LiteralPath $projectRoot
|
||||
|
||||
if (-not (Get-Command py -ErrorAction SilentlyContinue)) {
|
||||
throw "Python 3.11 or newer is required. Install Python from python.org, then run this script again."
|
||||
}
|
||||
& (Join-Path $projectRoot 'create_shortcut.ps1')
|
||||
|
||||
if (-not (Test-Path -LiteralPath ".venv\Scripts\python.exe")) {
|
||||
if (-not (Get-Command py -ErrorAction SilentlyContinue)) {
|
||||
throw "Python 3.11 or newer is required. Install Python from python.org, then run this script again."
|
||||
}
|
||||
& py -3 -m venv .venv
|
||||
if ($LASTEXITCODE -ne 0) { throw 'Virtual environment setup failed.' }
|
||||
}
|
||||
|
||||
& .venv\Scripts\python.exe -m pip install --disable-pip-version-check -r requirements.txt
|
||||
& .venv\Scripts\python.exe app.py
|
||||
$dependencyHash = (Get-FileHash -LiteralPath 'requirements.txt' -Algorithm SHA256).Hash
|
||||
$dependencyMarker = Join-Path $projectRoot '.venv\requirements.sha256'
|
||||
$installedHash = if (Test-Path -LiteralPath $dependencyMarker) { (Get-Content -LiteralPath $dependencyMarker -Raw).Trim() } else { '' }
|
||||
if ($installedHash -ne $dependencyHash) {
|
||||
& .venv\Scripts\python.exe -m pip install --disable-pip-version-check -r requirements.txt
|
||||
if ($LASTEXITCODE -ne 0) { throw 'Dependency installation failed.' }
|
||||
Set-Content -LiteralPath $dependencyMarker -Value $dependencyHash
|
||||
}
|
||||
& .venv\Scripts\python.exe web_ui.py
|
||||
|
||||
@@ -5,6 +5,99 @@ const fs=require('node:fs'),vm=require('node:vm'),path=require('node:path');
|
||||
const {present}=require('../web/control-state.js');
|
||||
const armed={connected:true,armed_known:true,armed:true,app_state:'armed',servos:{}};
|
||||
|
||||
test('model viewport fills the available space above battery status',()=>{
|
||||
const css=fs.readFileSync(path.join(__dirname,'../web/styles.css'),'utf8');
|
||||
assert.match(css,/\.rov-stage \{ flex:1; height:auto; min-height:0; width:100%/);
|
||||
assert.match(css,/\.telemetry-zone \.model-card \{ flex: 1; min-height: 0;/);
|
||||
});
|
||||
|
||||
test('white wash stays behind controls; right panel is gray and edges reach 50 percent',()=>{
|
||||
const css=fs.readFileSync(path.join(__dirname,'../web/styles.css'),'utf8');
|
||||
assert.match(css,/\.workspace-light \{[^}]*z-index:-1/);
|
||||
assert.match(css,/\.controls-workspace \{[^}]*isolation:isolate/);
|
||||
assert.match(css,/\.controls-workspace \{[^}]*background:#ededed/);
|
||||
assert.match(css,/\.sidebar-deck \{[^}]*background:linear-gradient\(160deg,#333,#242424\)/);
|
||||
assert.match(css,/\.cursor-light::after \{[^}]*rgba\(255,255,255,\.50\)/);
|
||||
});
|
||||
|
||||
test('keyboard easing publishes intermediate demands to the real Python bridge',async()=>{
|
||||
const h=harness();h.state();h.run('bridgeReady=true');
|
||||
keyEvent(h,'keydown','w');keyEvent(h,'keydown','r');
|
||||
for(let i=0;i<10;i++){h.advance(50);await Promise.resolve();await Promise.resolve();await Promise.resolve();}
|
||||
const sent=h.calls.filter(call=>call[0]==='axes');
|
||||
assert.ok(sent.some(call=>call[1]>0&&call[1]<1),'surge ramp is transmitted, not just drawn');
|
||||
assert.ok(sent.some(call=>call[3]>0&&call[3]<1),'vertical ramp is transmitted, not just drawn');
|
||||
assert.ok(sent.every(call=>call[1]>=0&&call[1]<=1&&call[3]>=0&&call[3]<=1));
|
||||
});
|
||||
|
||||
test('cursor lighting stays decorative and arrows use centered geometry',()=>{
|
||||
const css=fs.readFileSync(path.join(__dirname,'../web/styles.css'),'utf8');
|
||||
const js=fs.readFileSync(path.join(__dirname,'../web/cursor-light.js'),'utf8');
|
||||
assert.doesNotMatch(js,/set_axes|setJoyControl|setHeave|requestControl/);
|
||||
assert.match(js,/workspace\.append\(wash\)/);
|
||||
assert.match(js,/pointerleave',clear/);
|
||||
assert.match(css,/\.cursor-light \{[^}]*pointer-events:none/);
|
||||
assert.match(css,/range-pill button \{[^}]*place-items:center/);
|
||||
assert.match(css,/#engage\.danger \.engage-label \{ color:#777/);
|
||||
});
|
||||
|
||||
test('edge lighting uses angle; only visible pills get blue and sidebar is excluded',()=>{
|
||||
const css=fs.readFileSync(path.join(__dirname,'../web/styles.css'),'utf8');
|
||||
const js=fs.readFileSync(path.join(__dirname,'../web/cursor-light.js'),'utf8');
|
||||
assert.match(js,/Math\.atan2/);
|
||||
assert.match(js,/!host\.closest\('\.sidebar-deck,#engage'\)/);
|
||||
assert.match(js,/host\.matches\(pillSelector\)/);
|
||||
assert.match(css,/\.cursor-light\.pill-light::before \{ background:radial-gradient/);
|
||||
assert.match(css,/\.cursor-light::after \{[^}]*linear-gradient\(var\(--light-angle/);
|
||||
assert.doesNotMatch(css,/\.cursor-light::after \{[^}]*radial-gradient/);
|
||||
assert.match(css,/\.rov-stage \{[^}]*border-radius:31px; overflow:hidden/);
|
||||
});
|
||||
|
||||
test('all interface typography uses Helvetica with inherited control fonts',()=>{
|
||||
const css=fs.readFileSync(path.join(__dirname,'../web/styles.css'),'utf8');
|
||||
const families=[...css.matchAll(/font-family\s*:\s*([^;}]+)/g)].map(match=>match[1].trim());
|
||||
assert.ok(families.includes('"Helvetica Neue", Helvetica, Arial, sans-serif'));
|
||||
assert.ok(families.every(family=>family==='inherit'||family==='"Helvetica Neue", Helvetica, Arial, sans-serif'));
|
||||
assert.match(css,/button, select, input \{ font: inherit; \}/);
|
||||
});
|
||||
|
||||
function keyEvent(h,type,key,repeat=false){h.fire(type,{key,repeat,target:{tagName:'BODY'},preventDefault(){}})}
|
||||
test('keyboard ramps joystick and vertical together, then eases back on release',()=>{
|
||||
const h=harness();h.state();
|
||||
keyEvent(h,'keydown','w');keyEvent(h,'keydown','d');keyEvent(h,'keydown','r');
|
||||
assert.equal(h.run('control.forward+control.turn+control.vertical'),0);
|
||||
h.advance(180);
|
||||
for(const axis of ['forward','turn','vertical'])assert.ok(h.run(`control.${axis}`)>0&&h.run(`control.${axis}`)<1);
|
||||
keyEvent(h,'keydown','w',true);h.advance(240);
|
||||
assert.ok(Math.abs(h.run('control.forward')-Math.SQRT1_2)<1e-6);
|
||||
assert.ok(Math.abs(h.run('control.turn')-Math.SQRT1_2)<1e-6);
|
||||
assert.equal(h.run('control.vertical'),1);
|
||||
keyEvent(h,'keyup','w');keyEvent(h,'keyup','d');keyEvent(h,'keyup','r');
|
||||
h.advance(180);assert.ok(h.run('control.forward')>0);assert.ok(h.run('control.vertical')>0);
|
||||
h.advance(250);assert.equal(h.run('control.forward+control.turn+control.vertical'),0);
|
||||
});
|
||||
test('keyboard reversal is continuous and focus loss cancels its ramp',()=>{
|
||||
const h=harness();h.state();keyEvent(h,'keydown','w');keyEvent(h,'keydown','r');h.advance(420);
|
||||
keyEvent(h,'keyup','w');keyEvent(h,'keyup','r');keyEvent(h,'keydown','s');keyEvent(h,'keydown','f');
|
||||
assert.equal(h.run('control.forward'),1);assert.equal(h.run('control.vertical'),1);
|
||||
h.advance(200);assert.ok(Math.abs(h.run('control.forward'))<.3);assert.ok(Math.abs(h.run('control.vertical'))<.3);
|
||||
h.advance(220);assert.equal(h.run('control.forward'),-1);assert.equal(h.run('control.vertical'),-1);
|
||||
keyEvent(h,'keyup','s');keyEvent(h,'keyup','f');h.fire('blur');h.advance(500);
|
||||
assert.equal(h.run('control.forward+control.vertical'),0);
|
||||
});
|
||||
test('touch takes ownership from a keyboard ramp without later keyboard overwrite',()=>{
|
||||
const h=harness();h.state();keyEvent(h,'keydown','w');keyEvent(h,'keydown','r');h.advance(100);
|
||||
h.el('#joystick-canvas').emit('pointerdown',{clientX:300,clientY:160});
|
||||
h.el('#heave').emit('pointerdown',{pointerId:2,clientY:300});
|
||||
keyEvent(h,'keydown','a');h.advance(450);
|
||||
assert.equal(h.run('control.turn'),1);assert.equal(Math.abs(h.run('control.forward')),0);assert.equal(h.run('control.vertical'),-1);
|
||||
});
|
||||
test('hold fill and pending engagement share the same green and glow',()=>{
|
||||
const css=fs.readFileSync(path.join(__dirname,'../web/styles.css'),'utf8');
|
||||
assert.match(css,/\.engage-progress-label \{ color:var\(--engage-green\).*filter:var\(--engage-glow\)/);
|
||||
assert.match(css,/#engage\.pending \.engage-label \{ color:var\(--engage-green\); filter:var\(--engage-glow\)/);
|
||||
});
|
||||
|
||||
test('native pywebview result wrapper can execute alongside app globals',()=>{
|
||||
const h=harness();
|
||||
// Window.evaluate_js declares these variables in the page's global scope.
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
/* Pure conditioning and log parsing tests: no hardware or browser needed. */
|
||||
const assert=require('node:assert/strict');
|
||||
const {deadZone,defaults,read,Motion}=require('../web/controller-input.js');
|
||||
const {parse}=require('../web/console-view.js');
|
||||
const pad={connected:true,axes:[0,0,0,0]};
|
||||
assert.equal(deadZone(.06),0);assert.equal(deadZone(-1),-1);assert.equal(deadZone(1),1);
|
||||
assert.equal(defaults({axes:[0,0]}).vertical,-1);
|
||||
assert.equal(read({...pad,connected:false},defaults(pad)),null);
|
||||
assert.equal(read(pad,{...defaults(pad),vertical:10}),null);
|
||||
const diagonal=read({...pad,axes:[1,-1,0,-1]},defaults(pad));
|
||||
assert(Math.abs(Math.hypot(diagonal.turn,diagonal.forward)-1)<1e-10);
|
||||
assert.equal(diagonal.vertical,1);
|
||||
assert.equal(read({...pad,axes:[-.5,0,0,0]},{...defaults(pad),invertTurn:true}).turn,deadZone(.5));
|
||||
const motion=new Motion(),target={turn:.6,forward:.8,vertical:1};
|
||||
assert.deepEqual(motion.step(target,0),{turn:0,forward:0,vertical:0});
|
||||
const partial=motion.step(target,16);assert(partial.vertical>0&&partial.vertical<.3);
|
||||
let current;for(let time=32;time<=1000;time+=16){current=motion.step(target,time);assert(Math.hypot(current.turn,current.forward)<=1+1e-10)}
|
||||
assert(current.vertical>.99);
|
||||
const neutral={turn:0,forward:0,vertical:0};
|
||||
assert(motion.step(neutral,1024).vertical>.99);
|
||||
assert(motion.step(neutral,1200).vertical>0);
|
||||
assert.deepEqual(motion.step(neutral,1400),neutral);
|
||||
motion.reset();assert.deepEqual(motion.step(target,1500),neutral);
|
||||
assert.equal(parse('2026-10-01T10:11:12.123 [RX] {"mavpackettype":"HEARTBEAT","base_mode":128}').quiet,true);
|
||||
const ack=parse('2026-10-01T10:11:12.123 [RX] {"mavpackettype":"COMMAND_ACK","command":400,"result":0}');
|
||||
assert.equal(ack.time,'10:11:12.123');assert.equal(ack.type,'COMMAND_ACK');assert.equal(ack.tone,'command');
|
||||
assert.equal(parse('2026-10-01T10:11:12 [TX_LINK_PROBE_TIMEOUT] retry').quiet,false);
|
||||
assert.equal(parse('2026-10-01T10:11:12 [RX] {"mavpackettype":"STATUSTEXT","severity":3,"text":"warning"}').tone,'warning');
|
||||
assert.equal(parse('2026-10-01T10:11:12 [RX] null').type,'RX');
|
||||
assert.equal(parse('unstructured text').payload,'unstructured text');
|
||||
console.log('PASS: dead zone, mapping/inversion, diagonal cap, ramp, finite center return, resets, console parsing and warning visibility.');
|
||||
@@ -0,0 +1,29 @@
|
||||
/* Synthetic Xbox input: no device, serial port, or browser is opened. */
|
||||
const assert=require('node:assert/strict');
|
||||
const input=require('../web/controller-input.js');
|
||||
const pad=()=>({connected:true,mapping:'standard',axes:[0,0,0,0],buttons:Array.from({length:17},()=>({value:0,pressed:false}))});
|
||||
const press=(pad,index,value=1)=>{pad.buttons[index]={value,pressed:value>.5};return pad};
|
||||
const three=input.preset(),six=input.preset('sixaxis');
|
||||
assert(input.validProfile(three));assert(input.validProfile(six));
|
||||
assert.deepEqual(input.read(pad(),three),Object.fromEntries(input.names.map(name=>[name,0])));
|
||||
assert.equal(input.read(press(pad(),1),three).vertical,1);
|
||||
assert.equal(input.read(press(pad(),0),three).vertical,-1);
|
||||
assert.equal(input.read(press(press(pad(),0),1),three).vertical,0);
|
||||
assert.equal(input.read(press(pad(),7),three).forward,1);
|
||||
assert.equal(input.read(press(pad(),6),three).forward,-1);
|
||||
assert.equal(input.read(press(press(pad(),6),7),three).forward,0);
|
||||
assert(input.read(press(pad(),7,.5),three).forward>0);
|
||||
assert(input.read(press(pad(),7,.5),three).forward<.5);
|
||||
let p=pad();p.axes[0]=1;p.axes[1]=-1;p.axes[2]=1;press(p,4);
|
||||
assert.deepEqual(input.read(p,six),{forward:0,lateral:1,vertical:0,turn:1,pitch:-1,roll:-1});
|
||||
let custom=structuredClone(six);custom.bindings.vertical={negative:'button:12',positive:'button:13',scale:.25};
|
||||
assert.equal(input.read(press(pad(),13),custom).vertical,.25);
|
||||
custom.bindings.turn.scale=0;assert.equal(input.read(p,custom).turn,0);
|
||||
custom.bindings.pitch.negative='axis:90:-';assert.equal(input.read(p,custom),null);
|
||||
assert.equal(input.read({...pad(),connected:false},three),null);
|
||||
p=pad();p.axes[0]=NaN;assert.equal(input.read(p,three),null);
|
||||
p=pad();p.buttons=[];assert.equal(input.read(p,three),null);
|
||||
assert.equal(input.actions(press(pad(),2),three).lights,true);
|
||||
assert.equal(input.migrate({turn:0,forward:1,vertical:3,invertForward:true,invertVertical:true,deadZone:.1}).bindings.forward.positive,'axis:1:-');
|
||||
const duplicate=structuredClone(three);duplicate.bindings.forward.negative='button:7';assert.equal(input.validProfile(duplicate),false);
|
||||
console.log('PASS: Xbox triggers, B/A, cancellation, six axes, custom buttons, limits, invalid devices, migration and actions.');
|
||||
@@ -0,0 +1,165 @@
|
||||
"""V2 protocol and persistence checks. Never opens a vehicle connection."""
|
||||
import math
|
||||
import queue
|
||||
import tempfile
|
||||
import time
|
||||
import unittest
|
||||
from pathlib import Path
|
||||
from types import SimpleNamespace
|
||||
from unittest.mock import Mock, patch
|
||||
|
||||
from app import Axes, MavlinkWorker, normalize_endpoint
|
||||
from rov_v2 import Telemetry, clean_station, clean_profile, decode_telemetry, save_json
|
||||
from web_ui import ControlApi
|
||||
|
||||
|
||||
class V2Tests(unittest.TestCase):
|
||||
def worker(self, frame=0, version=(4, 5, 3)):
|
||||
worker = MavlinkWorker(queue.Queue())
|
||||
worker.connection = Mock()
|
||||
worker.target_system = 1
|
||||
worker.frame_type = frame
|
||||
worker.firmware_version = version
|
||||
worker.gain = .5
|
||||
worker.last_control_at = time.monotonic() - 1
|
||||
return worker
|
||||
|
||||
def test_six_axis_mapping_and_envelope(self):
|
||||
worker = self.worker()
|
||||
worker.set_axes(Axes(forward=1, lateral=1, vertical=1, yaw=1, pitch=1, roll=1))
|
||||
worker._send_control()
|
||||
args = worker.connection.mav.manual_control_send.call_args.args
|
||||
self.assertEqual(args[6:8], (0, 3))
|
||||
self.assertEqual(args[8:], (33, 33)) # S=pitch, T=roll; ArduSub 4.5 ±400.
|
||||
self.assertEqual(args[1:5], (83, 83, 542, 83))
|
||||
|
||||
def test_modern_normalized_attitude(self):
|
||||
worker = self.worker(version=(4, 8, 0))
|
||||
worker.set_axes(Axes(pitch=.5, roll=-.5))
|
||||
worker._send_control()
|
||||
self.assertEqual(worker.connection.mav.manual_control_send.call_args.args[8:], (250, -250))
|
||||
|
||||
def test_unsupported_frame_and_old_firmware(self):
|
||||
worker = self.worker(frame=1)
|
||||
worker.set_axes(Axes(pitch=1, roll=.2))
|
||||
worker._send_control()
|
||||
self.assertEqual(worker.connection.mav.manual_control_send.call_args.args[8], 0)
|
||||
worker.firmware_version = (4, 1, 0)
|
||||
worker._send_control()
|
||||
self.assertEqual(len(worker.connection.mav.manual_control_send.call_args.args), 6)
|
||||
|
||||
def test_watchdog_neutralizes_extended_axes(self):
|
||||
worker = self.worker()
|
||||
worker.require_input_lease = True
|
||||
worker.armed = True
|
||||
worker.last_heartbeat = time.monotonic()
|
||||
worker.set_axes(Axes(pitch=1, roll=-1), 1)
|
||||
worker.last_input_at -= 2
|
||||
worker._send_control()
|
||||
self.assertEqual(worker.connection.mav.manual_control_send.call_args.args, (1, 0, 0, 500, 0, 0, 0, 3, 0, 0))
|
||||
self.assertEqual(worker.axes, Axes())
|
||||
|
||||
def test_endpoints_preserve_configured_network_host(self):
|
||||
for endpoint in ('udpin:0.0.0.0:14550', 'udpout:192.168.2.2:14550', 'tcp:192.168.2.2:5760'):
|
||||
self.assertEqual(normalize_endpoint(endpoint), endpoint)
|
||||
|
||||
def test_sensor_units_and_staleness(self):
|
||||
msg = SimpleNamespace(get_type=lambda: 'ATTITUDE', roll=math.pi/2, pitch=0, yaw=-math.pi/2, rollspeed=1, pitchspeed=0, yawspeed=0)
|
||||
group, values = decode_telemetry(msg)
|
||||
self.assertEqual(values['roll'], 90)
|
||||
self.assertEqual(values['heading'], 270)
|
||||
clock = [10]
|
||||
store = Telemetry(lambda: clock[0])
|
||||
store.update(group, values)
|
||||
clock[0] = 14
|
||||
self.assertTrue(store.snapshot()[group]['stale'])
|
||||
msg = SimpleNamespace(get_type=lambda: 'GLOBAL_POSITION_INT', relative_alt=-1200, vz=25)
|
||||
self.assertEqual(decode_telemetry(msg)[1], {'depth_m': 1.2, 'vertical_ms': .25})
|
||||
|
||||
def test_config_validation_and_atomic_roundtrip(self):
|
||||
with self.assertRaises(ValueError):
|
||||
clean_station({'video_url': 'javascript:alert(1)'})
|
||||
with self.assertRaises(ValueError):
|
||||
clean_station({'lights_relay': 1, 'camera_relay': 1})
|
||||
with self.assertRaises(ValueError):
|
||||
clean_profile({'version': 2, 'expo': float('nan')})
|
||||
with tempfile.TemporaryDirectory() as folder:
|
||||
target = Path(folder) / 'station.json'
|
||||
save_json(target, clean_station({'frame': 2}))
|
||||
import json
|
||||
self.assertEqual(json.loads(target.read_text())['frame'], 2)
|
||||
self.assertFalse(target.with_suffix('.json.tmp').exists())
|
||||
|
||||
def test_stale_current_is_not_refreshed_by_voltage(self):
|
||||
api = ControlApi()
|
||||
api.state['connected'] = True
|
||||
with patch('web_ui.time.monotonic', return_value=10):
|
||||
api._consume_battery({'current_a': 4, 'voltage': 16})
|
||||
with patch('web_ui.time.monotonic', return_value=16):
|
||||
api._consume_battery({'voltage': 15.9})
|
||||
self.assertIsNone(api._snapshot()['battery']['current_a'])
|
||||
with patch('web_ui.time.monotonic', return_value=17):
|
||||
api._consume_battery({'current_a': None})
|
||||
self.assertIsNone(api.state['battery']['current_a'])
|
||||
|
||||
def test_attitude_stream_is_never_disabled_when_requested(self):
|
||||
worker = self.worker()
|
||||
worker._configure_low_bandwidth_streams()
|
||||
rates = [(name, interval) for name, _, interval in worker.stream_config]
|
||||
self.assertIn(('ATTITUDE', 500000), rates)
|
||||
self.assertNotIn(('ATTITUDE', -1), rates)
|
||||
|
||||
def test_network_control_omits_serial_priming_heartbeat(self):
|
||||
worker = self.worker()
|
||||
worker.network_link = True
|
||||
worker._send_control()
|
||||
worker.connection.mav.heartbeat_send.assert_not_called()
|
||||
|
||||
def test_profile_saves_atomically_and_cannot_change_while_armed(self):
|
||||
api = ControlApi()
|
||||
profile = {'version': 2, 'bindings': {}, 'actions': {}}
|
||||
with tempfile.TemporaryDirectory() as folder:
|
||||
api.profiles_path = Path(folder) / 'profiles.json'
|
||||
api.save_controller_profile('$xbox', profile)
|
||||
self.assertTrue(api.profiles_path.is_file())
|
||||
before = api.profiles_path.read_bytes()
|
||||
api.state.update(connected=True, armed=True)
|
||||
with self.assertRaises(RuntimeError):
|
||||
api.save_controller_profile('$xbox', profile)
|
||||
self.assertEqual(before, api.profiles_path.read_bytes())
|
||||
|
||||
def test_native_recording_chunk_roundtrip_and_expired_token(self):
|
||||
import base64
|
||||
api = ControlApi()
|
||||
with tempfile.TemporaryDirectory() as folder, patch('web_ui.__file__', str(Path(folder) / 'web_ui.py')):
|
||||
token = api.recording_begin()
|
||||
api.recording_chunk(token, base64.b64encode(b'video chunk').decode())
|
||||
path = api.recording_end(token)
|
||||
self.assertEqual(Path(path).read_bytes(), b'video chunk')
|
||||
with self.assertRaises(ValueError):
|
||||
api.recording_chunk(token, 'AA==')
|
||||
|
||||
def test_relay_action_waits_for_ack(self):
|
||||
api = ControlApi()
|
||||
api.station_settings['lights_relay'] = 0
|
||||
worker = api.worker
|
||||
worker.connection = Mock()
|
||||
worker.target_system = worker.target_component = 1
|
||||
worker.last_heartbeat = time.monotonic()
|
||||
api.set_accessory('lights', True)
|
||||
self.assertIsNone(api.state['accessories']['lights']['accepted'])
|
||||
api._consume(('accessory_ack', 'lights', True, 2))
|
||||
self.assertFalse(api.state['accessories']['lights']['accepted'])
|
||||
self.assertEqual(api.state['accessories']['lights']['error'], 'Rejected')
|
||||
|
||||
def test_motor_names_survive_app_restart(self):
|
||||
with tempfile.TemporaryDirectory() as folder, patch('web_ui.__file__', str(Path(folder) / 'web_ui.py')):
|
||||
first = ControlApi()
|
||||
settings = first.motor_settings
|
||||
settings['motors']['1']['name'] = 'Port'
|
||||
first.save_motor_settings(settings)
|
||||
self.assertEqual(ControlApi().motor_settings['motors']['1']['name'], 'Port')
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
unittest.main()
|
||||
@@ -1,6 +1,9 @@
|
||||
"""No serial port is opened by these tests."""
|
||||
import queue
|
||||
import threading
|
||||
import time
|
||||
import unittest
|
||||
from types import SimpleNamespace
|
||||
from unittest.mock import Mock, patch
|
||||
|
||||
from app import Axes, MavlinkWorker, NEUTRAL_Z
|
||||
@@ -100,9 +103,18 @@ class WorkerWatchdogTests(unittest.TestCase):
|
||||
|
||||
def assertNeutral(self):
|
||||
self.worker._send_control()
|
||||
self.assertEqual(self.worker.connection.mav.manual_control_send.call_args.args,
|
||||
self.assertEqual(self.control_values(),
|
||||
(1, 0, 0, NEUTRAL_Z, 0, 0))
|
||||
|
||||
def control_values(self):
|
||||
return self.worker.connection.mav.manual_control_send.call_args.args
|
||||
|
||||
def test_manual_control_uses_native_v2_without_forced_long_payload(self):
|
||||
self.worker._send_mav(self.worker.connection, 'manual_control_send',
|
||||
1, 50, 0, 525, -20, 0)
|
||||
self.assertEqual(self.control_values(), (1, 50, 0, 525, -20, 0))
|
||||
self.assertEqual(self.worker.connection.mav.manual_control_send.call_args.kwargs, {})
|
||||
|
||||
def test_ui_freeze_neutralizes_and_does_not_replay(self):
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker.set_axes(Axes(forward=1), 1)
|
||||
@@ -112,6 +124,15 @@ class WorkerWatchdogTests(unittest.TestCase):
|
||||
self.assertNeutral()
|
||||
self.assertEqual(self.worker.axes, Axes())
|
||||
|
||||
def test_intermediate_demands_reach_mavlink_with_output_limit(self):
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker.last_control_at = 9.9
|
||||
self.worker.set_axes(Axes(forward=.25, vertical=.25), 1)
|
||||
self.worker._send_control()
|
||||
# 25% input at the default 20% limit: 5% command, not 100%.
|
||||
self.assertEqual(self.control_values(),
|
||||
(1, 50, 0, 525, 0, 0))
|
||||
|
||||
def test_heartbeat_freeze_neutralizes_even_with_live_ui(self):
|
||||
with patch("app.time.monotonic", return_value=13.1):
|
||||
self.worker.set_axes(Axes(forward=1), 1)
|
||||
@@ -122,6 +143,162 @@ class WorkerWatchdogTests(unittest.TestCase):
|
||||
self.worker.set_axes(Axes(forward=1), 19)
|
||||
self.assertEqual(self.worker.axes, Axes())
|
||||
|
||||
def test_mavlink_transmissions_are_serialized(self):
|
||||
first_entered = threading.Event()
|
||||
release_first = threading.Event()
|
||||
second_entered = threading.Event()
|
||||
|
||||
class Mav:
|
||||
def first_send(self, **_):
|
||||
first_entered.set()
|
||||
release_first.wait(1)
|
||||
|
||||
def second_send(self, **_):
|
||||
second_entered.set()
|
||||
|
||||
connection = SimpleNamespace(mav=Mav())
|
||||
first = threading.Thread(target=self.worker._send_mav,
|
||||
args=(connection, "first_send"))
|
||||
second = threading.Thread(target=self.worker._send_mav,
|
||||
args=(connection, "second_send"))
|
||||
first.start()
|
||||
self.assertTrue(first_entered.wait(.5))
|
||||
second.start()
|
||||
time.sleep(.05)
|
||||
self.assertFalse(second_entered.is_set())
|
||||
release_first.set()
|
||||
first.join(1)
|
||||
second.join(1)
|
||||
self.assertTrue(second_entered.is_set())
|
||||
|
||||
def test_live_console_is_read_only_bounded_and_keeps_newest_lines(self):
|
||||
for index in range(310):
|
||||
self.worker.log("RX_TEST", f"vehicle {index}")
|
||||
self.worker.log("TX_TEST", f"computer {index}")
|
||||
sides = self.worker.read_console(2)
|
||||
self.assertEqual(set(sides), {"rx", "tx"})
|
||||
self.assertTrue(sides["rx"][0].endswith("[RX_TEST] vehicle 308"))
|
||||
self.assertTrue(sides["rx"][1].endswith("[RX_TEST] vehicle 309"))
|
||||
self.assertTrue(sides["tx"][1].endswith("[TX_TEST] computer 309"))
|
||||
self.assertEqual(len(self.worker.console_rx_lines), 300)
|
||||
self.assertEqual(len(self.worker.console_tx_lines), 300)
|
||||
self.assertEqual(len(self.worker.console_lines), 500)
|
||||
|
||||
def test_arm_request_pauses_parameter_traffic(self):
|
||||
self.worker.armed = False
|
||||
self.worker.param_scan.append("SERVO1_FUNCTION")
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker.command_arm(True)
|
||||
self.worker.config_paused = False # A disarmed heartbeat arrived.
|
||||
self.worker._tick_param_scan(10.1)
|
||||
self.assertEqual(self.worker.command_quiet_until, 16)
|
||||
self.worker.connection.mav.param_request_read_send.assert_not_called()
|
||||
self.worker.connection.mav.command_long_send.assert_called_once()
|
||||
|
||||
def test_arm_request_retries_until_state_confirmation(self):
|
||||
self.worker.armed = False
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker.command_arm(True)
|
||||
self.worker._tick_arm_retry(10.24)
|
||||
self.assertEqual(self.worker.connection.mav.command_long_send.call_count, 1)
|
||||
self.worker._tick_arm_retry(10.25)
|
||||
self.assertEqual(self.worker.connection.mav.command_long_send.call_count, 2)
|
||||
self.worker.pending_arm_state = None
|
||||
self.worker._tick_arm_retry(10.50)
|
||||
self.assertEqual(self.worker.connection.mav.command_long_send.call_count, 2)
|
||||
|
||||
def test_outbound_command_has_valid_heartbeat_lead_in(self):
|
||||
self.worker._send_mav(self.worker.connection, "timesync_send", 0, 123)
|
||||
names = [call[0] for call in self.worker.connection.mav.method_calls]
|
||||
self.assertEqual(names[-2:], ["heartbeat_send", "timesync_send"])
|
||||
|
||||
def test_disarm_sends_neutral_and_pauses_parameter_traffic(self):
|
||||
self.worker.param_scan.append("SERVO1_FUNCTION")
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker.command_arm(False)
|
||||
self.worker.config_paused = False
|
||||
self.worker._tick_param_scan(10.1)
|
||||
self.assertEqual(self.worker.disarm_requested_until, 16)
|
||||
self.assertEqual(self.control_values(),
|
||||
(1, 0, 0, NEUTRAL_Z, 0, 0))
|
||||
self.worker.connection.mav.param_request_read_send.assert_not_called()
|
||||
|
||||
def test_telemetry_config_is_paced_and_includes_low_rate_esc(self):
|
||||
self.worker.armed = False
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker._configure_low_bandwidth_streams()
|
||||
configured = {name: interval for name, _, interval in self.worker.stream_config}
|
||||
self.assertEqual(configured["ESC_TELEMETRY_1_TO_4"], 1_000_000)
|
||||
self.assertEqual(configured["ATTITUDE"], 500_000)
|
||||
self.assertEqual(configured["GLOBAL_POSITION_INT"], 500_000)
|
||||
self.assertNotIn(("ATTITUDE", 30, -1), self.worker.stream_config)
|
||||
self.worker.connection.mav.command_long_send.assert_not_called()
|
||||
self.worker._tick_stream_config(10)
|
||||
self.assertEqual(self.worker.connection.mav.command_long_send.call_count, 1)
|
||||
self.worker._tick_stream_config(10.1)
|
||||
self.assertEqual(self.worker.connection.mav.command_long_send.call_count, 1)
|
||||
self.worker.command_quiet_until = 16
|
||||
self.worker._tick_stream_config(11)
|
||||
self.assertEqual(self.worker.connection.mav.command_long_send.call_count, 1)
|
||||
self.worker._tick_stream_config(16)
|
||||
self.assertEqual(self.worker.connection.mav.command_long_send.call_count, 2)
|
||||
|
||||
def test_link_probe_uses_configured_rate_and_measures_exact_echo(self):
|
||||
self.worker.armed = False
|
||||
self.worker.ping_rate_hz = 5
|
||||
with patch("app.time.monotonic", return_value=10), \
|
||||
patch("app.time.monotonic_ns", return_value=10_000_000_000):
|
||||
self.worker._tick_link_probe(10)
|
||||
self.worker.connection.mav.timesync_send.assert_called_once_with(
|
||||
0, 10_000_000_000)
|
||||
self.assertEqual(self.worker.pending_pings, {10_000_000_000: 10})
|
||||
self.assertEqual(self.worker.next_ping_at, 10.2)
|
||||
message = SimpleNamespace(
|
||||
tc1=1, ts1=10_000_000_000, get_type=lambda: "TIMESYNC",
|
||||
to_dict=lambda: {"tc1": 1, "ts1": 10_000_000_000})
|
||||
with patch("app.time.monotonic", return_value=10.04):
|
||||
self.worker._handle_message(message)
|
||||
quality = self.worker.events.get_nowait()
|
||||
self.assertEqual(quality[0], "link_quality")
|
||||
self.assertEqual(quality[1]["latency_ms"], 40.0)
|
||||
self.assertEqual(quality[1]["loss_percent"], 0.0)
|
||||
|
||||
def test_link_rates_rebuild_requested_telemetry_intervals(self):
|
||||
self.worker.armed = False
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker.set_link_rates(10, {
|
||||
"SYS_STATUS": 5, "SERVO_OUTPUT_RAW": 10,
|
||||
"RC_CHANNELS": 0, "ESC_TELEMETRY_1_TO_4": 2,
|
||||
})
|
||||
self.assertEqual(self.worker.ping_rate_hz, 10)
|
||||
configured = {name: interval for name, _, interval in self.worker.stream_config}
|
||||
self.assertEqual(configured["SYS_STATUS"], 200_000)
|
||||
self.assertEqual(configured["SERVO_OUTPUT_RAW"], 100_000)
|
||||
self.assertEqual(configured["RC_CHANNELS"], -1)
|
||||
self.assertEqual(configured["ESC_TELEMETRY_1_TO_4"], 500_000)
|
||||
|
||||
def test_link_probe_counts_timeout_and_pauses_for_commands(self):
|
||||
self.worker.pending_pings[4] = 5
|
||||
self.worker.rx_delivery_results.extend(((10, True), (10, False)))
|
||||
self.worker.next_ping_at = 0
|
||||
self.worker.command_quiet_until = 20
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker._tick_link_probe(10)
|
||||
self.worker.connection.mav.timesync_send.assert_not_called()
|
||||
self.assertEqual(list(self.worker.ping_results), [(10, None)])
|
||||
quality = self.worker.events.get_nowait()[1]
|
||||
self.assertEqual(quality["loss_percent"], 100.0)
|
||||
self.assertEqual(quality["grade"], "testing")
|
||||
|
||||
def test_clean_downlink_cannot_hide_failed_round_trips(self):
|
||||
self.worker.ping_results.extend([(10, None)] * 20)
|
||||
self.worker.rx_delivery_results.extend([(10, True)] * 200)
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker._publish_link_quality()
|
||||
quality = self.worker.events.get_nowait()[1]
|
||||
self.assertEqual(quality["loss_percent"], 100.0)
|
||||
self.assertEqual(quality["grade"], "poor")
|
||||
|
||||
|
||||
class BridgeTests(unittest.TestCase):
|
||||
def test_delayed_arm_after_focus_reset_or_expiry_is_not_sent(self):
|
||||
|
||||
@@ -0,0 +1,270 @@
|
||||
/* Browser regression check. Run: node tests/ui_windows.cjs [path-to-playwright]
|
||||
Uses a simulated Python bridge; never opens a COM port or sends MAVLink. */
|
||||
const assert=require('node:assert/strict');
|
||||
const fs=require('node:fs');
|
||||
const path=require('node:path');
|
||||
const http=require('node:http');
|
||||
const {chromium}=require(process.argv[2]||'playwright');
|
||||
const root=path.resolve(__dirname,'..'),output=path.join(root,'runtime','ui-check');
|
||||
fs.mkdirSync(output,{recursive:true});
|
||||
const server=http.createServer((req,res)=>{
|
||||
const url=decodeURIComponent(new URL(req.url,'http://localhost').pathname);
|
||||
let file=path.resolve(root,'.'+url);
|
||||
if(url==='/model.stl'||url==='/model')file=path.join(root,'runtime','vehicle_model.stl');
|
||||
if(!file.startsWith(root+path.sep)||!fs.existsSync(file)||!fs.statSync(file).isFile()){
|
||||
res.writeHead(404);res.end();return;
|
||||
}
|
||||
const types={'.html':'text/html','.js':'text/javascript','.css':'text/css','.stl':'model/stl'};
|
||||
res.setHeader('Content-Type',types[path.extname(file)]||'application/octet-stream');
|
||||
fs.createReadStream(file).pipe(res);
|
||||
});
|
||||
async function main(){
|
||||
await new Promise(resolve=>server.listen(0,'127.0.0.1',resolve));
|
||||
const browser=await chromium.launch({headless:true});
|
||||
try{
|
||||
const page=await browser.newPage({viewport:{width:1080,height:720}});
|
||||
const errors=[];page.on('pageerror',error=>errors.push(error.message));
|
||||
const setArmed=value=>page.evaluate(value=>{
|
||||
Object.assign(testBridge.state,{connected:true,armed:value,armed_known:true,app_state:value?'armed':'connected_disarmed'});render(testBridge.state);
|
||||
},value);
|
||||
await page.addInitScript(()=>{
|
||||
const clone=value=>JSON.parse(JSON.stringify(value));
|
||||
const servos={};for(let i=1;i<=16;i++)servos[String(i)]={function:i<=3?32+i:0,motor:i<=3?i:null,direction:i<=3?1:null};
|
||||
const state={connected:false,armed:false,armed_known:false,mode:null,app_state:'disconnected',status:'Ready',servos,link_quality:null};
|
||||
const battery={cells:4,capacity_mah:5500,c_rating:35,full_v_per_cell:4.2,empty_v_per_cell:3.3,warning_percent:20};
|
||||
const link={baud:57600,control_hz:20,ping_hz:1,system_hz:1,servo_hz:2,rc_hz:2,esc_hz:1};
|
||||
const calls={battery:0,link:0,heavy:0,reverse:0,console:0,connect:[],axes:[],axisVisual:[],stops:0};
|
||||
const sleep=ms=>new Promise(resolve=>setTimeout(resolve,ms));
|
||||
window.testBridge={state,battery,link,calls,failBattery:false,failMotor:false};
|
||||
window.testPads=[];Object.defineProperty(navigator,'getGamepads',{value:()=>window.testPads});
|
||||
window.pywebview={api:{
|
||||
initial_state:async()=>({ports:[{device:'COM5',label:'COM5'}],state:clone(state),battery_config:clone(battery),link_config:clone(link)}),
|
||||
refresh_ports:async()=>[{device:'COM5',label:'COM5'}],poll:async()=>clone(state),
|
||||
get_saved_model_info:async()=>null,set_gain:async()=>true,stop_controls:async()=>{calls.stops++;return true},set_axes:async(...axes)=>{calls.axes.push(axes);calls.axisVisual.push({joy:joystick3D.getState(),vertical:verticalControl.getState().value});return true},
|
||||
save_battery:async data=>{calls.battery++;await sleep(200);if(window.testBridge.failBattery)throw Error('Battery save failed');Object.keys(battery).forEach(k=>battery[k]=+data[k]);return clone(battery)},
|
||||
save_link_settings:async data=>{calls.link++;await sleep(250);Object.keys(link).forEach(k=>link[k]=+data[k]);return clone(link)},
|
||||
connect:async(port,baud,rate)=>{calls.connect.push({port,baud,rate});Object.assign(state,{connected:true,armed_known:true,app_state:'connected_disarmed',mode:'MANUAL',link:'LINK OK',link_quality:{grade:'excellent',probe_samples:20,rx_packets_30s:100,rtt_median_ms:24,rtt_p95_ms:40,probe_loss_percent:0,rx_sequence_loss_percent:0,heartbeat_age_s:.2}});return clone(state)},
|
||||
disconnect:async()=>{Object.assign(state,{connected:false,armed_known:false,app_state:'disconnected'});return true},
|
||||
reverse_motor:async servo=>{calls.reverse++;if(window.testBridge.failMotor)throw Error('Motor write failed');setTimeout(()=>state.servos[servo].direction*=-1,650);return true},
|
||||
set_servo_function:async(servo,motor)=>{if(window.testBridge.failMotor)throw Error('Motor write failed');setTimeout(()=>Object.assign(state.servos[servo],{motor:motor||null,function:motor===0?0:motor<=8?32+motor:73+motor,direction:motor?1:null}),650);return true},
|
||||
start_heavy_quality_test:async()=>{calls.heavy++;await sleep(250);state.heavy_quality={running:true,status:'Stage 1 of 3: 1 Hz',sent:4,replies:4,results:[]};return clone(state.heavy_quality)},
|
||||
cancel_heavy_quality_test:async()=>{state.heavy_quality={running:false,status:'Cancelled',results:[]};return clone(state.heavy_quality)},
|
||||
read_console:async()=>{calls.console++;return {rx:['2026-10-01T10:11:12.123 [RX] {"mavpackettype":"COMMAND_ACK","command":400,"result":0,"sample":1}', '2026-10-01T10:11:12.124 [RX_BAD_DATA] corrupt_frame='+calls.console, '2026-10-01T10:11:12.125 [RX] {"mavpackettype":"HEARTBEAT"}'],tx:['2026-10-01T10:11:12.124 [TX_COMMAND] ARM '+calls.console]}},
|
||||
minimize_window:async()=>true,toggle_maximize_window:async()=>false,close_window:async()=>true
|
||||
}};
|
||||
});
|
||||
await page.goto('http://127.0.0.1:'+server.address().port+'/web/index.html');
|
||||
await page.waitForFunction(()=>bridgeReady);
|
||||
const openLink=()=>page.locator('[data-open="link-modal"]').click();
|
||||
const close=async id=>{await page.locator('#'+id+' [data-close]').first().click();await page.waitForFunction(id=>!document.getElementById(id).open,id)};
|
||||
await openLink();
|
||||
await page.locator('#baud').selectOption('115200');
|
||||
await page.locator('#link-modal').getByRole('button',{name:'Cancel',exact:true}).click();
|
||||
await page.waitForFunction(()=>!document.getElementById('link-modal').open);
|
||||
await openLink();assert.equal(await page.locator('#baud').inputValue(),'57600');
|
||||
await page.locator('#custom-port-input').fill('COM42');
|
||||
await page.locator('#custom-port-btn').click();
|
||||
assert(await page.locator('#link-modal').evaluate(d=>d.open));
|
||||
assert.equal(await page.locator('#port').inputValue(),'COM42');
|
||||
await page.locator('#baud').selectOption('115200');
|
||||
assert(await page.locator('#link-form [type="submit"]').evaluate(el=>{el.click();return el.disabled}));
|
||||
await page.waitForFunction(()=>!document.getElementById('link-modal').open);
|
||||
await page.locator('#refresh').click();assert.equal(await page.locator('#port').inputValue(),'COM42');
|
||||
await page.locator('#connect').click();
|
||||
await page.waitForFunction(()=>testBridge.calls.connect.length===1);
|
||||
assert.equal(await page.evaluate(()=>testBridge.calls.connect[0].baud),115200);
|
||||
await page.locator('[data-open="battery-modal"]').click();
|
||||
await page.locator('#battery-form [name="cells"]').fill('5');
|
||||
await page.keyboard.press('Escape');await page.waitForFunction(()=>!document.getElementById('battery-modal').open);
|
||||
await page.locator('[data-open="battery-modal"]').click();
|
||||
assert.equal(await page.locator('#battery-form [name="cells"]').inputValue(),'4');
|
||||
await page.evaluate(()=>testBridge.failBattery=true);
|
||||
await page.locator('#battery-form').getByRole('button',{name:'Save battery'}).click();
|
||||
await page.locator('#battery-form .form-feedback').waitFor({state:'visible'});
|
||||
assert(await page.locator('#battery-modal').evaluate(d=>d.open));
|
||||
assert.equal(await page.locator('#battery-form .form-feedback').textContent(),'Battery save failed');
|
||||
await page.evaluate(()=>testBridge.failBattery=false);
|
||||
await page.locator('#battery-form [name="cells"]').fill('5');
|
||||
await page.locator('#battery-form').getByRole('button',{name:'Save battery'}).click();
|
||||
await page.waitForFunction(()=>!document.getElementById('battery-modal').open);
|
||||
await page.locator('[data-open="battery-modal"]').click();
|
||||
assert.equal(await page.locator('#battery-form [name="cells"]').inputValue(),'5');
|
||||
await page.screenshot({path:path.join(output,'battery.png')});await close('battery-modal');
|
||||
await page.locator('[data-open="motors-modal"]').click();
|
||||
assert.equal(await page.locator('#motor-list > .motor-row').count(),3);
|
||||
await page.locator('#motor-list > .motor-row').first().getByRole('button').click();
|
||||
await page.waitForFunction(()=>document.querySelector('#motor-list > .motor-row > span').textContent==='Confirming…');
|
||||
assert(await page.locator('#motor-list > .motor-row').first().getByRole('button').isDisabled());
|
||||
await page.waitForFunction(()=>document.querySelector('#motor-list > .motor-row > span').textContent==='Reversed');
|
||||
await page.evaluate(()=>testBridge.failMotor=true);
|
||||
await page.locator('#motor-list > .motor-row').first().locator('select').selectOption('2');
|
||||
await page.locator('#motor-feedback').waitFor({state:'visible'});
|
||||
assert.equal(await page.locator('#motor-list > .motor-row').first().locator('select').inputValue(),'1');
|
||||
await page.screenshot({path:path.join(output,'motors.png')});await close('motors-modal');
|
||||
await page.locator('#link-quality').click();
|
||||
assert.equal(await page.locator('#quality-detail-rtt').textContent(),'24 ms');
|
||||
await page.locator('#heavy-quality-run').click();
|
||||
assert(await page.locator('#heavy-quality-run').isDisabled());
|
||||
await page.locator('#heavy-quality-cancel').waitFor({state:'visible'});
|
||||
assert.equal(await page.evaluate(()=>testBridge.calls.heavy),1);
|
||||
await page.locator('#heavy-quality-cancel').click();
|
||||
await page.waitForFunction(()=>!testBridge.state.heavy_quality.running);
|
||||
await page.screenshot({path:path.join(output,'quality.png')});await close('link-quality-modal');
|
||||
await page.locator('#console').click();
|
||||
await page.waitForFunction(()=>document.getElementById('console-rx-output').textContent.includes('COMMAND_ACK'));
|
||||
await page.locator('#console-pause').click();
|
||||
const paused=await page.locator('#console-rx-output').textContent();
|
||||
await page.waitForTimeout(850);assert.equal(await page.locator('#console-rx-output').textContent(),paused);
|
||||
await page.locator('#console-pause').click();
|
||||
await page.waitForFunction(old=>document.getElementById('console-rx-output').textContent!==old,paused);
|
||||
await page.screenshot({path:path.join(output,'console.png')});await page.locator('#console-close').click();
|
||||
for(const viewport of [{width:900,height:560},{width:480,height:720}]){
|
||||
await page.setViewportSize(viewport);
|
||||
for(const id of ['link-modal','battery-modal','link-quality-modal','motors-modal','controller-modal']){
|
||||
await page.evaluate(id=>openModal(id),id);
|
||||
const box=await page.locator('#'+id).boundingBox();
|
||||
assert(box.x>=0&&box.y>=0&&box.width<=viewport.width&&box.height<=viewport.height,id+' must fit viewport');
|
||||
assert.equal(await page.evaluate(()=>canDrive()),false);
|
||||
const closeGeometry=await page.locator('#'+id+' .modal-close').evaluate(button=>{
|
||||
const b=button.getBoundingClientRect(),s=button.querySelector('svg').getBoundingClientRect();
|
||||
return {dx:Math.abs(b.x+b.width/2-s.x-s.width/2),dy:Math.abs(b.y+b.height/2-s.y-s.height/2),bg:getComputedStyle(button).backgroundColor};
|
||||
});
|
||||
assert(closeGeometry.dx<.5&&closeGeometry.dy<.5,id+' close icon must be centered');
|
||||
assert.equal(closeGeometry.bg,'rgba(0, 0, 0, 0)');
|
||||
await close(id);
|
||||
}
|
||||
}
|
||||
await page.setViewportSize({width:1080,height:720});await openLink();
|
||||
await page.screenshot({path:path.join(output,'link.png')});await close('link-modal');
|
||||
|
||||
await page.setViewportSize({width:1080,height:720});
|
||||
await page.evaluate(()=>{Object.assign(testBridge.state,{connected:true,armed:false,armed_known:true,app_state:'connected_disarmed',battery:{voltage:15.8,percent:72,cells:4,low:false}});focusChanged(true);render(testBridge.state)});
|
||||
await page.locator('#engage').focus();
|
||||
assert.equal(await page.locator('#engage').evaluate(el=>getComputedStyle(el).outlineStyle),'none');
|
||||
await page.evaluate(()=>startEngageHold());
|
||||
assert.equal(await page.locator('#input-joystick').isDisabled(),true);
|
||||
await page.evaluate(()=>cancelEngageHold(false));
|
||||
assert.equal(await page.locator('#input-joystick').isDisabled(),false);
|
||||
await page.locator('#input-joystick').click();
|
||||
for(const pending of ['arm','disarm']){
|
||||
await page.evaluate(pending=>{testBridge.state.pending_command=pending;render(testBridge.state)},pending);
|
||||
assert.equal(await page.locator('#input-keyboard').isDisabled(),true);
|
||||
assert.equal(await page.evaluate(()=>{setInputMode('keyboard');return inputMode}),'joystick');
|
||||
}
|
||||
await page.evaluate(()=>{delete testBridge.state.pending_command;testBridge.state.armed_known=false;render(testBridge.state)});
|
||||
assert.equal(await page.locator('#input-keyboard').isDisabled(),true);
|
||||
await setArmed(true);
|
||||
assert.equal(await page.locator('#input-keyboard').isDisabled(),true);
|
||||
await page.waitForFunction(()=>document.getElementById('controller-status').textContent.includes('Waiting'));
|
||||
await page.evaluate(()=>testPads=[{connected:true,id:'Test controller',index:0,axes:[1,-1,0,-1]}]);
|
||||
await page.waitForFunction(()=>document.getElementById('controller-status').textContent==='Center sticks to resume');
|
||||
assert.deepEqual(await page.evaluate(()=>({...control})),{turn:0,forward:0,vertical:0});
|
||||
await page.evaluate(()=>testPads[0].axes=[0,0,0,0]);
|
||||
await page.waitForFunction(()=>!controllerNeedCenter);
|
||||
await page.keyboard.down('w');await page.waitForTimeout(420);await page.keyboard.up('w');
|
||||
assert.equal(await page.evaluate(()=>control.forward),0);
|
||||
await page.evaluate(()=>testPads[0].axes=[1,-1,0,-1]);
|
||||
await page.waitForFunction(()=>control.vertical>0&&control.vertical<.8);
|
||||
await page.waitForFunction(()=>control.vertical>.99);
|
||||
const matching=await page.evaluate(()=>{
|
||||
const joy=joystick3D.getState(),sent=testBridge.calls.axes.at(-1);
|
||||
return {length:Math.hypot(control.turn,control.forward),joy,vertical:control.vertical,sent,visual:testBridge.calls.axisVisual.at(-1),control:{...control}};
|
||||
});
|
||||
assert(matching.length<=1.00001);
|
||||
assert.equal(matching.joy.x,matching.control.turn);assert.equal(matching.joy.y,-matching.control.forward);
|
||||
assert.equal(matching.sent[0],-matching.visual.joy.y);assert.equal(matching.sent[1],matching.visual.joy.x);assert.equal(matching.sent[2],matching.visual.vertical);
|
||||
// Dispatch even though CSS excludes pointers, to exercise the handler gate.
|
||||
await page.locator('#joystick-canvas').dispatchEvent('pointerdown',{pointerId:91,clientX:20,clientY:20,button:0});
|
||||
await page.locator('#heave').dispatchEvent('pointerdown',{pointerId:92,clientX:20,clientY:20,button:0});
|
||||
assert.equal(await page.evaluate(()=>joystick3D.getState().active||verticalControl.getState().active),false);
|
||||
await page.locator('#console').click();
|
||||
await page.waitForFunction(()=>!document.getElementById('console-dock').hidden);
|
||||
await page.waitForFunction(()=>document.querySelector('.rx-dot').classList.contains('lit')&&document.querySelector('.tx-dot').classList.contains('lit'));
|
||||
await page.locator('#console-pause').click();
|
||||
await page.waitForTimeout(500);
|
||||
assert.equal(await page.locator('.rx-dot').evaluate(el=>el.classList.contains('lit')),false);
|
||||
assert.equal(await page.locator('.tx-dot').evaluate(el=>el.classList.contains('lit')),false);
|
||||
await page.locator('#console-pause').click();
|
||||
assert.equal(await page.evaluate(()=>canDrive()),true);
|
||||
assert.equal(await page.locator('#console-rx-output .console-row').count(),2);
|
||||
await page.locator('#console-filter').selectOption('all');
|
||||
assert.equal(await page.locator('#console-rx-output .console-row').count(),3);
|
||||
await page.locator('#console-rx-output details').first().locator('summary').click();
|
||||
await page.waitForTimeout(850);assert.equal(await page.locator('#console-rx-output details').first().evaluate(el=>el.open),true);
|
||||
await page.screenshot({path:path.join(output,'controller-console.png')});await page.locator('#console-close').click();
|
||||
await page.evaluate(()=>testPads[0].axes=[0,0,0,0]);
|
||||
await page.waitForFunction(()=>control.vertical>0&&control.vertical<.95);
|
||||
await page.waitForFunction(()=>control.vertical===0&&control.turn===0&&control.forward===0);
|
||||
await setArmed(false);
|
||||
assert.equal(await page.locator('#input-keyboard').isDisabled(),false);
|
||||
await page.locator('#controller-settings').click();
|
||||
await page.screenshot({path:path.join(output,'controller-setup.png')});
|
||||
await page.locator('#controller-form [name="invertTurn"]').check();
|
||||
await page.locator('#controller-form').getByRole('button',{name:'Cancel',exact:true}).click();
|
||||
await page.waitForFunction(()=>!document.getElementById('controller-modal').open);
|
||||
await page.locator('#controller-settings').click();
|
||||
assert.equal(await page.locator('#controller-form [name="invertTurn"]').isChecked(),false);
|
||||
await page.locator('#controller-form [name="invertTurn"]').check();
|
||||
await page.locator('#controller-form').getByRole('button',{name:'Save mapping',exact:true}).click();
|
||||
await page.waitForFunction(()=>!document.getElementById('controller-modal').open);
|
||||
await setArmed(true);
|
||||
await page.waitForFunction(()=>!controllerNeedCenter);
|
||||
await page.evaluate(()=>testPads[0].axes=[.5,0,0,0]);
|
||||
await page.waitForFunction(()=>control.turn<-.2);
|
||||
await page.evaluate(()=>testPads=[]);
|
||||
await page.waitForFunction(()=>control.turn===0);
|
||||
await page.evaluate(()=>testPads=[{connected:true,id:'Test controller',index:0,axes:[.5,0,0,0]}]);
|
||||
await page.waitForTimeout(300);assert.equal(await page.evaluate(()=>control.turn),0);
|
||||
await page.evaluate(()=>testPads[0].axes=[0,0,0,0]);await page.waitForFunction(()=>!controllerNeedCenter);
|
||||
await page.evaluate(()=>testPads[0].axes=[.5,0,0,0]);await page.waitForFunction(()=>control.turn<-.2);
|
||||
await page.evaluate(()=>focusChanged(false));assert.equal(await page.evaluate(()=>control.turn),0);
|
||||
await page.evaluate(()=>focusChanged(true));await page.waitForTimeout(300);assert.equal(await page.evaluate(()=>control.turn),0);
|
||||
await page.evaluate(()=>testPads[0].axes=[0,0,0,0]);await page.waitForFunction(()=>!controllerNeedCenter);
|
||||
await page.evaluate(()=>testPads[0].axes=[.5,0,0,0]);await page.waitForFunction(()=>control.turn<-.2);
|
||||
await page.evaluate(()=>testPads[0].id='Different controller');
|
||||
await page.waitForFunction(()=>control.turn===0);
|
||||
assert.equal(await page.locator('#input-keyboard').isDisabled(),true);
|
||||
await setArmed(false);
|
||||
await page.locator('#input-keyboard').click();
|
||||
await setArmed(true);
|
||||
await page.keyboard.down('w');await page.waitForFunction(()=>control.forward>.9);await page.keyboard.up('w');
|
||||
await page.waitForFunction(()=>control.forward===0);
|
||||
await page.evaluate(()=>{Object.assign(testBridge.state,{connected:false,armed_known:false});render(testBridge.state)});
|
||||
assert.equal(await page.evaluate(()=>canDrive()),false);
|
||||
|
||||
await setArmed(false);
|
||||
const deckLayout=await page.evaluate(()=>{
|
||||
const battery=document.querySelector('.battery-card'),sidebar=document.querySelector('.sidebar-deck'),actions=document.querySelector('.activity-actions'),heading=document.querySelector('.activity-heading');
|
||||
return {last:battery===document.querySelector('.telemetry-zone').lastElementChild,title:heading.textContent,
|
||||
actionHeight:actions.querySelector('button').getBoundingClientRect().height,
|
||||
batteryHeight:battery.getBoundingClientRect().height,connectHeight:document.querySelector('#connect').getBoundingClientRect().height,
|
||||
bottomGap:sidebar.getBoundingClientRect().bottom-battery.getBoundingClientRect().bottom,
|
||||
overlay:getComputedStyle(document.querySelector('.battery-copy')).zIndex,
|
||||
actionRightGap:actions.getBoundingClientRect().right-actions.lastElementChild.getBoundingClientRect().right,
|
||||
sidebarPadding:getComputedStyle(sidebar).paddingTop,
|
||||
workspacePadding:getComputedStyle(document.querySelector('.controls-workspace')).paddingTop};
|
||||
});
|
||||
assert.equal(deckLayout.last,true);assert.equal(deckLayout.title,'Activity:');
|
||||
assert.equal(deckLayout.actionHeight,32);assert.equal(deckLayout.batteryHeight,62);assert.equal(deckLayout.connectHeight,62);
|
||||
assert(deckLayout.bottomGap>=10&&deckLayout.bottomGap<=24);assert.equal(deckLayout.overlay,'1');
|
||||
assert.equal(deckLayout.actionRightGap,0);assert.equal(deckLayout.sidebarPadding,deckLayout.workspacePadding);
|
||||
const batteryReadout=await page.locator('.battery-card').evaluate(el=>{
|
||||
const percent=el.querySelector('#battery-percent'),voltage=el.querySelector('#battery-title');
|
||||
return {percent:percent.textContent,voltage:voltage.textContent,border:getComputedStyle(el).borderTopWidth,
|
||||
mainSize:parseFloat(getComputedStyle(percent).fontSize),voltageSize:parseFloat(getComputedStyle(voltage).fontSize)};
|
||||
});
|
||||
assert.match(batteryReadout.percent,/^\d+%$/);assert.match(batteryReadout.voltage,/^\d+\.\d{2} V$/);
|
||||
assert.equal(batteryReadout.border,'0px');assert(batteryReadout.mainSize>batteryReadout.voltageSize);
|
||||
await page.screenshot({path:path.join(output,'ui-cleanup.png')});
|
||||
assert.deepEqual(errors,[]);
|
||||
console.log('PASS: settings cancel/save/failure, saved baud, custom port rescan, motor confirmation/failure, heavy test, console pause/resume, keyboard gating, five dialogs at two window sizes; controller conditioning/read-only graphics, actual bridge values, mapping, focus/unplug/identity safety and dock filtering; mode locking during hold/armed/pending/unknown states, centered SVG close icons and bottom battery layout.');
|
||||
}catch(error){
|
||||
const page=browser.contexts()[0]?.pages()[0];
|
||||
if(page){
|
||||
await page.screenshot({path:path.join(output,'failure.png')});
|
||||
console.error(await page.evaluate(()=>[...document.querySelectorAll('input')].filter(el=>!el.checkValidity()).map(el=>({name:el.name,value:el.value,error:el.validationMessage}))));
|
||||
}
|
||||
throw error;
|
||||
}finally{await browser.close();await new Promise(resolve=>server.close(resolve))}
|
||||
}
|
||||
main().catch(error=>{console.error(error);server.close();process.exitCode=1});
|
||||
+471
-49
@@ -6,7 +6,8 @@ const STATUS_LABELS = {
|
||||
link_degraded: 'Signal lost — check tether',
|
||||
};
|
||||
const $=s=>document.querySelector(s), $$=s=>[...document.querySelectorAll(s)];
|
||||
const control={forward:0,turn:0,vertical:0}, pressedKeys=new Set(); let bridgeReady=false, appState='disconnected', batteryConfig={}, servoSignature='', lastAxisSend=0, axisTimer=0, demoActive=false, demoState=null;
|
||||
const control={forward:0,turn:0,vertical:0,lateral:0,pitch:0,roll:0}, pressedKeys=new Set(); let bridgeReady=false, appState='disconnected', batteryConfig={}, linkConfig={baud:57600,control_hz:20,ping_hz:1,system_hz:1,battery_hz:1,servo_hz:2,rc_hz:2,esc_hz:1}, servoSignature='', lastAxisSend=0, axisTimer=0, demoActive=false, demoState=null;
|
||||
let motorSettings={independent:false,customized:false,motors:Object.fromEntries(Array.from({length:12},(_,i)=>[String(i+1),{name:`Motor ${i+1}`,scale:20}]))},motorSettingsQueue=Promise.resolve();
|
||||
const api=(name,...args)=>window.pywebview.api[name](...args);
|
||||
const activity=[];
|
||||
let lastReportedStatus='';
|
||||
@@ -14,27 +15,154 @@ function recordActivity(message){
|
||||
if(!message||activity[0]===message)return;
|
||||
activity.unshift(String(message));activity.length=Math.min(activity.length,3);
|
||||
['#status-text','#activity-previous','#activity-oldest'].forEach((selector,i)=>{
|
||||
const row=$(selector);if(row){row.textContent=activity[i]||'';row.hidden=!activity[i]}
|
||||
const row=$(selector);if(row){const changed=row.textContent!==(activity[i]||'');row.textContent=activity[i]||'';row.hidden=!activity[i];if(changed&&!row.hidden&&!matchMedia('(prefers-reduced-motion:reduce)').matches)row.animate([{opacity:0},{opacity:1}],{duration:180,easing:'ease-out'})}
|
||||
});
|
||||
}
|
||||
function withTimeout(promise,ms=1500){return new Promise((resolve,reject)=>{const timer=setTimeout(()=>reject(new Error('Control bridge timed out')),ms);Promise.resolve(promise).then(value=>{clearTimeout(timer);resolve(value)},error=>{clearTimeout(timer);reject(error)})})}
|
||||
let vehicleSnapshot={connected:false,armed:null}, view=ControlState.present(vehicleSnapshot), inputFocused=true,
|
||||
bridgeStale=false,lastBridgeAt=performance.now(),axisBusy=false,inputSequence=Date.now(),
|
||||
localRequest=null,commandError='',requestSerial=0,demoCommandTimer=0,lastSafetyTick=performance.now();
|
||||
const canDrive=()=>view.drive&&performance.now()-lastSafetyTick<750;
|
||||
const canDrive=()=>view.drive&&!document.querySelector('dialog[open]')&&performance.now()-lastSafetyTick<750;
|
||||
|
||||
window.canDrive=canDrive;
|
||||
function makeDemoState(){const servos={};for(let i=1;i<=16;i++)servos[String(i)]={function:i<=3?32+i:0,label:i<=3?`Motor ${i}`:'Unassigned',motor:i<=3?i:null,direction:i<=3?1:null};return {connected:true,link:'LINK OK',vehicle:'DEMO • DISARMED',armed:false,armed_known:true,mode:'MANUAL',app_state:'connected_disarmed',status:'Demo mode ready — no hardware or spoofer.',battery:{voltage:15.8,per_cell:3.95,percent:72,cells:4,low:false},servos}}
|
||||
let inputMode='keyboard',controllerKey=null,controllerConfig=null,controllerDraft=null,controllerNeedCenter=true,controllerWasDriving=false;
|
||||
let controllerProfiles={};try{controllerProfiles=JSON.parse(localStorage.getItem('sub-v2-profiles'))||{}}catch(_){}
|
||||
const controllerMotion=new ControllerInput.Motion();
|
||||
let controllerActionState={},controllerActionsReady=false;
|
||||
const controllerId=pad=>pad.index+':'+pad.id;
|
||||
function getControllers(){try{return [...(navigator.getGamepads?.()||[])].filter(pad=>pad?.connected)}catch(_){return []}}
|
||||
function loadControllerConfig(pad){
|
||||
let saved=controllerProfiles[pad?.id||'$xbox']||controllerProfiles.$xbox;
|
||||
if(!saved&&pad)try{saved=JSON.parse(localStorage.getItem('sub-controller:'+pad.id))}catch(_){}
|
||||
const config=ControllerInput.migrate(saved,pad);
|
||||
return ControllerInput.validProfile(config)?config:ControllerInput.preset();
|
||||
}
|
||||
function selectController(pad){
|
||||
resetInputs();controllerKey=pad?controllerId(pad):null;controllerConfig=loadControllerConfig(pad);
|
||||
}
|
||||
function setInputMode(mode){
|
||||
if(mode===inputMode||inputConfigurationLocked())return false;
|
||||
resetInputs();inputMode=mode;document.body.dataset.inputMode=mode;
|
||||
$('#input-keyboard').setAttribute('aria-pressed',String(mode==='keyboard'));
|
||||
$('#input-joystick').setAttribute('aria-pressed',String(mode==='joystick'));
|
||||
$('#joystick-canvas').setAttribute('aria-label',mode==='joystick'?'Controller output':'Steering and throttle joystick; W A S D keys');
|
||||
$('#heave').setAttribute('aria-label',mode==='joystick'?'Controller vertical output':'Vertical thrust control');
|
||||
return true;
|
||||
}
|
||||
function inputConfigurationLocked(){return !!(engageStart||localRequest||view.pending||vehicleSnapshot.armed===true||(vehicleSnapshot.connected&&!view.known))}
|
||||
function syncInputModeControls(){
|
||||
const locked=inputConfigurationLocked();
|
||||
$('.input-mode-switch').dataset.locked=String(locked);
|
||||
for(const button of [$('#input-keyboard'),$('#input-joystick'),$('#controller-settings')])button.disabled=locked;
|
||||
if($('#controller-modal').open)for(const field of $('#controller-form').querySelectorAll('input,select,button[type=submit],button[data-swap]'))field.disabled=locked;
|
||||
}
|
||||
window.canTouchControl=()=>inputMode==='keyboard'&&canDrive();
|
||||
$('#input-keyboard').onclick=()=>setInputMode('keyboard');
|
||||
$('#input-joystick').onclick=()=>setInputMode('joystick');
|
||||
const axisLabels={forward:'Forward',lateral:'Strafe',vertical:'Vertical',turn:'Turn',pitch:'Pitch',roll:'Roll'};
|
||||
function fillControllerForm(keepDraft=false){
|
||||
const pads=getControllers(),device=$('#controller-device'),form=$('#controller-form');
|
||||
device.replaceChildren(new Option('Xbox · offline',''),...pads.map(pad=>new Option(pad.id,controllerId(pad))));
|
||||
device.value=controllerKey||'';
|
||||
const pad=pads.find(pad=>controllerId(pad)===controllerKey);
|
||||
if(!keepDraft)controllerDraft=structuredClone(controllerConfig||loadControllerConfig(pad));
|
||||
const config=controllerDraft;
|
||||
$('#controller-preset').value=['triggers3','sixaxis','classic'].includes(config.preset)?config.preset:'custom';
|
||||
const rows=$('#controller-bindings');rows.replaceChildren();
|
||||
for(const name of ControllerInput.names){
|
||||
const row=document.createElement('div');row.className='binding-row';row.dataset.axis=name;
|
||||
const label=document.createElement('span');label.textContent=axisLabels[name];
|
||||
const meter=document.createElement('meter');meter.min=-1;meter.max=1;meter.value=0;meter.setAttribute('aria-label',axisLabels[name]+' demand');label.append(meter);row.append(label);
|
||||
for(const direction of ['negative','positive']){
|
||||
const select=document.createElement('select');select.name=name+'_'+direction;select.setAttribute('aria-label',axisLabels[name]+' '+direction);
|
||||
for(const [value,text] of ControllerInput.sources(pad))select.add(new Option(text,value));
|
||||
select.value=config.bindings[name][direction];
|
||||
select.onchange=()=>{config.bindings[name][direction]=select.value;config.preset='custom';$('#controller-preset').value='custom'};
|
||||
row.append(select);
|
||||
}
|
||||
const swap=document.createElement('button');swap.type='button';swap.dataset.swap=name;swap.className='binding-swap';swap.textContent='⇄';swap.title='Reverse '+axisLabels[name];swap.setAttribute('aria-label','Reverse '+axisLabels[name]);
|
||||
swap.onclick=()=>{const item=config.bindings[name];[item.negative,item.positive]=[item.positive,item.negative];config.preset='custom';fillControllerForm(true)};row.append(swap);
|
||||
const scale=document.createElement('input');scale.type='number';scale.min=0;scale.max=100;scale.step=1;scale.value=Math.round(config.bindings[name].scale*100);scale.setAttribute('aria-label',axisLabels[name]+' limit');
|
||||
scale.oninput=()=>{config.bindings[name].scale=Number(scale.value)/100;config.preset='custom';$('#controller-preset').value='custom'};row.append(scale);rows.append(row);
|
||||
}
|
||||
for(const action of ['lights','stream','record']){
|
||||
const select=form.elements[action];select.replaceChildren(...ControllerInput.sources(pad).filter(([value])=>!value.startsWith('axis:')).map(([value,text])=>new Option(text,value)));
|
||||
select.value=config.actions[action];select.onchange=()=>config.actions[action]=select.value;
|
||||
}
|
||||
form.elements.deadZone.value=Math.round(config.deadZone*100);form.elements.expo.value=Math.round(config.expo*100);
|
||||
form.elements.deadZone.oninput=()=>config.deadZone=Number(form.elements.deadZone.value)/100;
|
||||
form.elements.expo.oninput=()=>config.expo=Number(form.elements.expo.value)/100;
|
||||
syncInputModeControls();
|
||||
}
|
||||
$('#controller-device').onchange=e=>{
|
||||
if(inputConfigurationLocked())return;
|
||||
selectController(getControllers().find(pad=>controllerId(pad)===e.target.value));fillControllerForm();
|
||||
};
|
||||
$('#controller-preset').onchange=e=>{if(e.target.value==='custom')return;controllerDraft=ControllerInput.preset(e.target.value);fillControllerForm(true)};
|
||||
$('#controller-form').onsubmit=async e=>{
|
||||
e.preventDefault();const form=e.currentTarget,feedback=form.querySelector('.form-feedback');
|
||||
if(inputConfigurationLocked()){setFeedback(feedback,'Disengage first');return}
|
||||
if(!ControllerInput.validProfile(controllerDraft)){setFeedback(feedback,'Check inputs');return}
|
||||
const pad=getControllers().find(pad=>controllerId(pad)===controllerKey),device=pad?.id||'$xbox';
|
||||
try{
|
||||
const clean=bridgeReady?await api('save_controller_profile',device,controllerDraft):structuredClone(controllerDraft);
|
||||
controllerProfiles[device]=clean;localStorage.setItem('sub-v2-profiles',JSON.stringify(controllerProfiles));controllerConfig=clean;
|
||||
resetInputs();closeModal($('#controller-modal'));toast('Mapping saved');
|
||||
}catch(error){setFeedback(feedback,error.message||String(error))}
|
||||
};
|
||||
function pollController(now){
|
||||
try{
|
||||
if(inputMode==='joystick'||$('#controller-modal').open){
|
||||
const pads=getControllers();
|
||||
if(controllerKey===null&&pads.length&&!$('#controller-modal').open)selectController(pads[0]);
|
||||
const pad=pads.find(pad=>controllerId(pad)===controllerKey),raw=pad&&ControllerInput.read(pad,controllerConfig||loadControllerConfig(pad));
|
||||
const target=raw&&(window.V2?.filterDemand(raw)||raw);
|
||||
let status=!pad?'No controller':!raw?'Check mapping':controllerNeedCenter&&canDrive()?'Center controls':'Controller ready';
|
||||
if(inputMode==='joystick'){
|
||||
if(!target||!canDrive()){
|
||||
if(controllerWasDriving)resetInputs();controllerNeedCenter=true;controllerWasDriving=false;
|
||||
}else{
|
||||
if(controllerNeedCenter&&!Object.values(raw).some(value=>value!==0)){controllerNeedCenter=false;status='Controller ready'}
|
||||
if(!controllerNeedCenter){
|
||||
controllerWasDriving=true;
|
||||
Object.assign(control,target);window.joystick3D?.setVisual(target.turn,-target.forward);
|
||||
setHeave(target.vertical,false);updateReadouts();sendAxes();
|
||||
}
|
||||
}
|
||||
const active=ControllerInput.actions(pad,controllerConfig);
|
||||
if(!Object.values(active).some(Boolean))controllerActionsReady=true;
|
||||
if(controllerActionsReady&&inputFocused&&!document.hidden&&!document.querySelector('dialog[open]'))for(const [action,pressed] of Object.entries(active))
|
||||
if(pressed&&!controllerActionState[action])window.V2?.action(action);
|
||||
controllerActionState=active;
|
||||
}
|
||||
if($('#controller-modal').open){
|
||||
const demand=pad&&ControllerInput.read(pad,controllerDraft);
|
||||
for(const meter of $('#controller-bindings').querySelectorAll('meter'))meter.value=demand?.[meter.closest('[data-axis]').dataset.axis]||0;
|
||||
$('#controller-axes').textContent=pad?.mapping==='standard'?'Xbox layout':pad?'Raw inputs':'Xbox · offline';
|
||||
}
|
||||
if($('#controller-status').textContent!==status)$('#controller-status').textContent=status;
|
||||
$('#controller-status').dataset.quiet=String(!!pad&&!!raw);
|
||||
}else{$('#controller-status').dataset.quiet='true';$('#controller-status').textContent='Keyboard + touch'}
|
||||
}catch(error){if(controllerWasDriving)resetInputs();$('#controller-status').dataset.quiet='false';$('#controller-status').textContent='Controller unavailable'}
|
||||
requestAnimationFrame(pollController);
|
||||
}
|
||||
document.body.dataset.inputMode=inputMode;
|
||||
requestAnimationFrame(pollController);
|
||||
|
||||
|
||||
function makeDemoState(){const frame=window.V2?.station().frame??4,count=({0:6,1:6,2:8,3:8,4:3,5:4,6:5})[frame],servos={};for(let i=1;i<=16;i++)servos[String(i)]={function:i<=count?32+i:0,label:i<=count?`Motor ${i}`:'Unassigned',motor:i<=count?i:null,direction:i<=count?1:null};return {connected:true,link:'LINK OK',vehicle:'DEMO • DISARMED',armed:false,armed_known:true,mode:'MANUAL',app_state:'connected_disarmed',status:'Demo mode ready — no hardware or spoofer.',battery:{voltage:15.8,per_cell:3.95,percent:72,cells:4,low:false,current_a:3.2,consumed_mah:320,remaining_mah:5180,consumed_source:'Demo'},capabilities:{frame,firmware:[4,5,3]},accessories:{},link_quality:null,servos}}
|
||||
function updateDemo(patch){Object.assign(demoState,patch);render(demoState)}
|
||||
document.addEventListener('click',e=>{const btn=e.target.closest('.num-step');if(!btn)return;const pill=btn.closest('.number-pill');if(!pill)return;const input=pill.querySelector('input');if(!input)return;const step=+input.step||1,min=input.min!==''?+input.min:-Infinity,max=input.max!==''?+input.max:Infinity;let val=+input.value||0;if(btn.classList.contains('down'))val=Math.max(min,+(val-step).toFixed(4));else val=Math.min(max,+(val+step).toFixed(4));input.value=val;input.dispatchEvent(new Event('input',{bubbles:true}));input.dispatchEvent(new Event('change',{bubbles:true}))});
|
||||
function toast(message,error=false){const el=$('#toast');el.textContent=message;el.className=`toast show${error?' error':''}`;clearTimeout(toast.t);toast.t=setTimeout(()=>el.className='toast',2600)}
|
||||
window.showToast=toast;
|
||||
const manualPorts=new Map();
|
||||
function populatePorts(ports){
|
||||
const p=$('#port');
|
||||
if(!p)return;
|
||||
const old=p.value||'';
|
||||
p.innerHTML='';
|
||||
|
||||
const allList=[];
|
||||
const allList=[{device:'udpin:0.0.0.0:14550',label:'Network · UDP 14550',type:'network'}];
|
||||
const seen=new Set();
|
||||
|
||||
const addPort=item=>{
|
||||
@@ -50,6 +178,7 @@ function populatePorts(ports){
|
||||
};
|
||||
|
||||
if(Array.isArray(ports)) ports.forEach(addPort);
|
||||
manualPorts.forEach(addPort);
|
||||
addPort({device:'demo', label:'Demo Mode (no hardware)'});
|
||||
|
||||
let matched=false;
|
||||
@@ -71,7 +200,7 @@ function sendAxes(){
|
||||
axisTimer=0;
|
||||
if(!canDrive()||demoActive||axisBusy)return;
|
||||
lastAxisSend=performance.now();axisBusy=true;
|
||||
withTimeout(api('set_axes',control.forward,control.turn,control.vertical,++inputSequence))
|
||||
withTimeout(api('set_axes',control.forward,control.turn,control.vertical,++inputSequence,control.lateral,control.pitch,control.roll))
|
||||
.catch(()=>markBridgeStale()).finally(()=>axisBusy=false);
|
||||
};
|
||||
const wait=50-(performance.now()-lastAxisSend);
|
||||
@@ -80,29 +209,30 @@ function sendAxes(){
|
||||
// This is a local bridge lease, not extra MAVLink traffic. The worker retains
|
||||
// the configured wire rate and neutralizes if the UI stops renewing its input.
|
||||
setInterval(()=>{if(canDrive())sendAxes()},250);
|
||||
function updateReadouts(){ if(!canDrive()){$('#surge-readout').textContent='—';$('#yaw-readout').textContent='—';$('#heave-readout').textContent='—';return;}$('#surge-readout').textContent=Math.round(control.forward*100);$('#yaw-readout').textContent=Math.round(control.turn*100);$('#heave-readout').textContent=Math.round(control.vertical*100);}
|
||||
function updateReadouts(){ window.V2?.updateDemand(control);if(!canDrive()){$('#surge-readout').textContent='—';$('#yaw-readout').textContent='—';$('#heave-readout').textContent='—';return;}$('#surge-readout').textContent=Math.round(control.forward*100);$('#yaw-readout').textContent=Math.round(control.turn*100);$('#heave-readout').textContent=Math.round(control.vertical*100);}
|
||||
|
||||
window.setJoyControl=(x,y)=>{if(!canDrive())return;control.turn=x;control.forward=-y;updateReadouts();sendAxes();};
|
||||
window.setJoyControl=(x,y)=>{if(!window.canTouchControl())return;control.turn=x;control.forward=-y;updateReadouts();sendAxes();};
|
||||
function releaseHandle(el){el.classList.remove('pressed');el.classList.add('released');setTimeout(()=>el.classList.remove('released'),520)}
|
||||
|
||||
const heave=$('#heave'),hknob=$('#heave-knob'),hfill=$('#heave-fill');let heavePointer=null,heaveAnim=0;
|
||||
function setHeave(v,send=true){if(!canDrive()&&v!==0)return;v=Math.max(-1,Math.min(1,v));control.vertical=v;heave.dataset.commanded=String(Math.abs(v)>.03);hknob.style.top=`${50-v*43}%`;hfill.style.top=v>=0?`${50-v*43}%`:'50%';hfill.style.height=`${Math.abs(v)*43}%`;updateReadouts();if(send&&canDrive())sendAxes();}
|
||||
function heaveEvent(e){const b=heave.getBoundingClientRect();setHeave((b.top+b.height/2-e.clientY)/(b.height*.43))}
|
||||
function releaseHeave(e){if(heavePointer===null||(e?.pointerId!=null&&e.pointerId!==heavePointer))return;const pointer=heavePointer;heavePointer=null;try{heave.releasePointerCapture(pointer)}catch(_){}releaseHandle(hknob);easeHeave()}
|
||||
heave.addEventListener('pointerdown',e=>{if(!canDrive()||heavePointer!==null||e.button>0)return;heavePointer=e.pointerId;hknob.classList.remove('released');hknob.classList.add('pressed');cancelAnimationFrame(heaveAnim);heave.setPointerCapture(e.pointerId);heaveEvent(e);e.preventDefault()});heave.addEventListener('pointermove',e=>{if(e.pointerId===heavePointer)heaveEvent(e)});heave.addEventListener('pointerup',releaseHeave);heave.addEventListener('pointercancel',releaseHeave);heave.addEventListener('lostpointercapture',e=>{if(e.pointerId===heavePointer)releaseHeave(e)});
|
||||
function easeHeave(){const sv=control.vertical,start=performance.now();function frame(now){const p=Math.min(1,(now-start)/400),smooth=p*p*(3-2*p);setHeave(sv*(1-smooth));if(p<1)heaveAnim=requestAnimationFrame(frame)}heaveAnim=requestAnimationFrame(frame)}
|
||||
heave.addEventListener('pointerdown',e=>{if(!window.canTouchControl()||heavePointer!==null||e.button>0)return;heavePointer=e.pointerId;hknob.classList.remove('released');hknob.classList.add('pressed');cancelAnimationFrame(heaveAnim);heave.setPointerCapture(e.pointerId);heaveEvent(e);e.preventDefault()});heave.addEventListener('pointermove',e=>{if(e.pointerId===heavePointer)heaveEvent(e)});heave.addEventListener('pointerup',releaseHeave);heave.addEventListener('pointercancel',releaseHeave);heave.addEventListener('lostpointercapture',e=>{if(e.pointerId===heavePointer)releaseHeave(e)});
|
||||
function easeHeave(target=0){cancelAnimationFrame(heaveAnim);const sv=control.vertical,start=performance.now();function frame(now){const p=Math.min(1,(now-start)/400),smooth=p*p*(3-2*p);setHeave(sv+(target-sv)*smooth);if(p<1)heaveAnim=requestAnimationFrame(frame)}heaveAnim=requestAnimationFrame(frame)}
|
||||
window.verticalControl={setPos:value=>{cancelAnimationFrame(heaveAnim);setHeave(value)},easeBack:()=>{if(heavePointer===null)easeHeave()},getState:()=>({value:control.vertical,active:heavePointer!==null})};
|
||||
|
||||
function applyKeys(){if(!canDrive()){pressedKeys.clear();return;}const turn=(pressedKeys.has('d')||pressedKeys.has('e')?1:0)-(pressedKeys.has('a')||pressedKeys.has('q')?1:0),forward=(pressedKeys.has('w')?1:0)-(pressedKeys.has('s')?1:0),vertical=(pressedKeys.has('r')?1:0)-(pressedKeys.has('f')?1:0);if(!window.joystick3D?.getState().active){if(turn||forward)window.joystick3D?.setPos(turn,-forward);else window.joystick3D?.easeBack()}if(heavePointer===null){if(vertical){cancelAnimationFrame(heaveAnim);setHeave(vertical)}else easeHeave()}}
|
||||
addEventListener('keydown',e=>{if(e.key==='F3'){e.preventDefault();if(!e.repeat&&view.action==='disarm')requestControl('disarm');return;}if(/^(INPUT|SELECT|TEXTAREA)$/.test(e.target.tagName))return;if(e.key==='F2'){e.preventDefault();if(!e.repeat)startEngageHold();return;}const k=e.key.toLowerCase();if('wasdqerf'.includes(k)&&k.length===1){if(!canDrive())return;e.preventDefault();if(!pressedKeys.has(k)){pressedKeys.add(k);applyKeys();}}});addEventListener('keyup',e=>{if(e.key==='F2'){e.preventDefault();cancelEngageHold(true);return;}const k=e.key.toLowerCase();if(pressedKeys.delete(k))applyKeys();});
|
||||
function applyKeys(){if(inputMode!=='keyboard'||!canDrive()){pressedKeys.clear();return;}const extra=window.V2?.filterDemand({lateral:(pressedKeys.has('l')?1:0)-(pressedKeys.has('j')?1:0),pitch:(pressedKeys.has('k')?1:0)-(pressedKeys.has('i')?1:0),roll:(pressedKeys.has('o')?1:0)-(pressedKeys.has('u')?1:0)});Object.assign(control,extra);updateReadouts();sendAxes();const turn=(pressedKeys.has('d')||pressedKeys.has('e')?1:0)-(pressedKeys.has('a')||pressedKeys.has('q')?1:0),forward=(pressedKeys.has('w')?1:0)-(pressedKeys.has('s')?1:0),vertical=(pressedKeys.has('r')?1:0)-(pressedKeys.has('f')?1:0);if(!window.joystick3D?.getState().active)window.joystick3D?.easeTo(turn,-forward);if(heavePointer===null)easeHeave(vertical)}
|
||||
addEventListener('keydown',e=>{if(e.key==='F3'){e.preventDefault();if(!e.repeat&&view.action==='disarm')requestControl('disarm');return;}if(document.querySelector('dialog[open]')||/^(INPUT|SELECT|TEXTAREA)$/.test(e.target.tagName))return;if(e.key==='F2'){e.preventDefault();if(!e.repeat)startEngageHold();return;}const k=e.key.toLowerCase();if('wasdqerfjlikuo'.includes(k)&&k.length===1){if(inputMode!=='keyboard'||!canDrive())return;e.preventDefault();if(e.repeat)return;if(!pressedKeys.has(k)){pressedKeys.add(k);applyKeys();}}});addEventListener('keyup',e=>{if(e.key==='F2'){e.preventDefault();cancelEngageHold(true);return;}const k=e.key.toLowerCase();if(pressedKeys.delete(k))applyKeys();});
|
||||
function resetInputs(){
|
||||
controllerMotion.reset();controllerNeedCenter=true;controllerWasDriving=false;
|
||||
if(gainPointer!==null)releaseGain({pointerId:gainPointer});
|
||||
clearTimeout(axisTimer);axisTimer=0;pressedKeys.clear();cancelEngageHold(false);
|
||||
window.joystick3D?.reset();
|
||||
const pointer=heavePointer;heavePointer=null;cancelAnimationFrame(heaveAnim);
|
||||
if(pointer!==null)try{heave.releasePointerCapture(pointer)}catch(_){}
|
||||
hknob.classList.remove('pressed','released');
|
||||
control.forward=control.turn=control.vertical=0;setHeave(0,false);
|
||||
for(const axis of Object.keys(control))control[axis]=0;setHeave(0,false);window.V2?.updateDemand(control);controllerActionState={};controllerActionsReady=false;
|
||||
if(bridgeReady&&!demoActive)api('stop_controls',++inputSequence).catch(()=>{});
|
||||
}
|
||||
function focusChanged(focused){inputFocused=focused;if(!focused)resetInputs();render(vehicleSnapshot)}
|
||||
@@ -111,28 +241,64 @@ addEventListener('focus',()=>focusChanged(!document.hidden));
|
||||
document.addEventListener('visibilitychange',()=>focusChanged(!document.hidden&&document.hasFocus()));
|
||||
addEventListener('pagehide',()=>focusChanged(false));
|
||||
|
||||
function setFeedback(el,message=''){
|
||||
if(!el)return;
|
||||
el.textContent=message;el.hidden=!message;
|
||||
}
|
||||
function openModal(id){
|
||||
const el=typeof id==='string'?document.getElementById(id):id;
|
||||
if(!el)return;
|
||||
if(!el||el.open)return;
|
||||
if(el.id==='controller-modal'&&inputConfigurationLocked()){toast('Disengage before changing joystick settings.');return}
|
||||
resetInputs();
|
||||
el._returnFocus=document.activeElement;
|
||||
if(el.id==='battery-modal')fillBatteryForm();
|
||||
if(el.id==='controller-modal')fillControllerForm();
|
||||
if(el.id==='link-modal'){
|
||||
fillLinkForm();
|
||||
$('#custom-port-status').textContent='';
|
||||
$('#custom-port-input').value='';
|
||||
}
|
||||
el.querySelectorAll('.form-feedback').forEach(feedback=>setFeedback(feedback));
|
||||
el.classList.remove('closing');
|
||||
if(!el.open)el.showModal();
|
||||
el.showModal();
|
||||
}
|
||||
function closeModal(dialog){
|
||||
if(!dialog||!dialog.open||dialog.classList.contains('closing'))return;
|
||||
if(!dialog||!dialog.open||dialog.classList.contains('closing')||dialog.querySelector('[data-busy="true"]'))return;
|
||||
dialog.classList.add('closing');
|
||||
let done=false;
|
||||
const finish=()=>{
|
||||
if(done)return;
|
||||
done=true;
|
||||
dialog.removeEventListener('animationend',finish);
|
||||
dialog.removeEventListener('animationend',onEnd);
|
||||
dialog.classList.remove('closing');
|
||||
dialog.close();
|
||||
if(dialog._returnFocus?.isConnected)dialog._returnFocus.focus({preventScroll:true});
|
||||
};
|
||||
dialog.addEventListener('animationend',finish,{once:true});
|
||||
setTimeout(finish,300);
|
||||
const onEnd=e=>{if(e.target===dialog)finish()};
|
||||
dialog.addEventListener('animationend',onEnd);
|
||||
setTimeout(finish,180);
|
||||
}
|
||||
$$('[data-open]').forEach(b=>b.onclick=()=>openModal(b.dataset.open));
|
||||
$$('[data-close]').forEach(b=>b.onclick=()=>closeModal(b.closest('dialog')));
|
||||
$('#link-quality').onclick=()=>openModal('link-quality-modal');
|
||||
let heavyActionBusy=false;
|
||||
async function requestHeavyTest(action){
|
||||
if(heavyActionBusy)return;
|
||||
heavyActionBusy=true;
|
||||
setFeedback($('#heavy-quality-error'));
|
||||
renderHeavyQuality(vehicleSnapshot.heavy_quality,vehicleSnapshot.connected,vehicleSnapshot.armed);
|
||||
try{
|
||||
const test=await api(action);
|
||||
vehicleSnapshot.heavy_quality=test;
|
||||
renderHeavyQuality(test,vehicleSnapshot.connected,vehicleSnapshot.armed);
|
||||
}catch(e){setFeedback($('#heavy-quality-error'),e.message||'Link test unavailable. Try again.')}
|
||||
finally{
|
||||
heavyActionBusy=false;
|
||||
renderHeavyQuality(vehicleSnapshot.heavy_quality,vehicleSnapshot.connected,vehicleSnapshot.armed);
|
||||
}
|
||||
}
|
||||
$('#heavy-quality-run').onclick=()=>requestHeavyTest('start_heavy_quality_test');
|
||||
$('#heavy-quality-cancel').onclick=()=>requestHeavyTest('cancel_heavy_quality_test');
|
||||
$$('dialog').forEach(d=>{
|
||||
d.addEventListener('cancel',e=>{e.preventDefault();closeModal(d)});
|
||||
d.addEventListener('click',e=>{
|
||||
@@ -255,7 +421,7 @@ $('#connect').onclick=async()=>{
|
||||
recordActivity(`Connecting to ${port}…`);
|
||||
toast(`Connecting to ${port}…`);
|
||||
try{
|
||||
const confirmedState=await api('connect',port,+$('#baud').value,+$('#rate').value);
|
||||
const confirmedState=await api('connect',port,+linkConfig.baud||57600,+linkConfig.control_hz||20);
|
||||
if(confirmedState)render(confirmedState);
|
||||
toast(confirmedState?.armed_known?'MAVLink connected':'Waiting for vehicle telemetry',!confirmedState?.armed_known);
|
||||
}catch(e){
|
||||
@@ -270,7 +436,9 @@ const customPortBtn=$('#custom-port-btn'), customPortInput=$('#custom-port-input
|
||||
if(customPortBtn&&customPortInput){
|
||||
const applyCustomPort=()=>{
|
||||
const val=customPortInput.value.trim();
|
||||
if(!val)return;
|
||||
if(!val){$('#custom-port-status').textContent='Enter a port first.';customPortInput.focus();return;}
|
||||
if(vehicleSnapshot.connected)return;
|
||||
manualPorts.set(val,{device:val,label:`Custom (${val})`});
|
||||
const p=$('#port');
|
||||
let exists=false;
|
||||
for(const opt of p.options){
|
||||
@@ -280,39 +448,57 @@ if(customPortBtn&&customPortInput){
|
||||
p.add(new Option(`Custom (${val})`, val), 0);
|
||||
p.value=val;
|
||||
}
|
||||
closeModal($('#link-modal'));
|
||||
toast(`Selected port: ${val}`);
|
||||
$('#custom-port-status').textContent=`Selected ${val}. Apply settings, then connect.`;
|
||||
};
|
||||
customPortBtn.onclick=applyCustomPort;
|
||||
customPortInput.onkeydown=e=>{if(e.key==='Enter'){e.preventDefault();applyCustomPort();}};
|
||||
}
|
||||
const engageButton=$('#engage');
|
||||
const engageProgressLabel=engageButton?.querySelector('.engage-progress-label');
|
||||
let engageHoldTimer=null,engageStart=0,engagePointer=null,completedEngagePointer=null,suppressEngageClick=false,engageVisualState='',engageTransitionTimer=null;
|
||||
const ENGAGE_HOLD_MS=1400;
|
||||
let engageLabelValue=$('#engage-label')?.textContent||'engage';
|
||||
let engageHoldTimer=null,engageStart=0,engagePointer=null,completedEngagePointer=null,suppressEngageClick=false,engageVisualState='',engageTransitionTimer=null,engageAppendFrame=null;
|
||||
const ENGAGE_HOLD_MS=600;
|
||||
|
||||
function applyEngageVisual(next){
|
||||
if(!engageButton)return;
|
||||
const label=({'ENGAGE':'engage','DISARM':'disengage','ENGAGING…':'engaging…','DISARMING…':'disengaging…','DISARM · ?':'disengage · ?','STATE UNKNOWN':'state unknown'})[next.label]||next.label.toLowerCase();
|
||||
// Interaction updates immediately; the short fade never gates emergency access.
|
||||
const label=({'ENGAGE':'engage','DISARM':'disengage','ENGAGING…':'engaging','DISARMING…':'disengaging','DISARM · ?':'disengage · ?','STATE UNKNOWN':'state unknown'})[next.label]||next.label.toLowerCase();
|
||||
// Update the state label without delaying the requested control action.
|
||||
engageButton.disabled=!next.action;
|
||||
engageButton.setAttribute('aria-busy',String(next.pending));
|
||||
engageButton.setAttribute('aria-label',label);
|
||||
engageButton.title=next.action==='disarm'?'Request disarm immediately (F3)':next.action==='arm'?'Hold 1.4 seconds to engage (F2)':next.message;
|
||||
engageButton.title=next.action==='disarm'?'Request disarm immediately (F3)':next.action==='arm'?'Hold 0.6 seconds to engage (F2)':next.message;
|
||||
const key=`${next.label}/${next.tone}`;
|
||||
if(engageVisualState===key)return;
|
||||
const previous=engageVisualState;engageVisualState=key;
|
||||
if(engageAppendFrame)cancelAnimationFrame(engageAppendFrame);
|
||||
clearTimeout(engageTransitionTimer);
|
||||
engageButton.classList.remove('arm','danger','subtle','charged','pending');
|
||||
engageButton.classList.add(next.tone==='danger'?'danger':next.tone==='pending'?'pending':'arm');
|
||||
engageButton.style.setProperty('--engage-progress',next.pending?'100%':'0%');
|
||||
$('#engage-label').textContent=label;
|
||||
const mainLabel=$('#engage-label'),previousLabel=engageLabelValue;
|
||||
const appended=previousLabel==='engage'&&label==='engaging'||previousLabel==='disengage'&&label==='disengaging';
|
||||
let suffix=null;
|
||||
if(appended){
|
||||
const previousWidth=mainLabel.getBoundingClientRect().width;
|
||||
const stem=previousLabel.slice(0,-1);
|
||||
mainLabel.replaceChildren(document.createTextNode(stem));
|
||||
suffix=document.createElement('span');suffix.className='engage-suffix';suffix.textContent=label.slice(stem.length);mainLabel.append(suffix);
|
||||
const appendedWidth=mainLabel.getBoundingClientRect().width;
|
||||
mainLabel.style.setProperty('--engage-append-shift',`${(appendedWidth-previousWidth)/2}px`);
|
||||
mainLabel.classList.add('is-appending');
|
||||
}else{
|
||||
mainLabel.classList.remove('is-appending');
|
||||
mainLabel.style.removeProperty('--engage-append-shift');
|
||||
mainLabel.textContent=label;
|
||||
}
|
||||
engageLabelValue=label;
|
||||
if(engageProgressLabel)engageProgressLabel.textContent=label;
|
||||
const sheen=engageButton.querySelector('.engage-sheen-label');if(sheen)sheen.textContent=label;
|
||||
if(previous){
|
||||
engageButton.classList.remove('state-transition');void engageButton.offsetWidth;
|
||||
engageButton.classList.add('state-transition');
|
||||
engageTransitionTimer=setTimeout(()=>engageButton.classList.remove('state-transition'),240);
|
||||
if(suffix)engageAppendFrame=requestAnimationFrame(()=>suffix.isConnected&&suffix.classList.add('is-visible'));
|
||||
engageTransitionTimer=setTimeout(()=>engageButton.classList.remove('state-transition'),200);
|
||||
}
|
||||
}
|
||||
function completeEngage(){
|
||||
@@ -356,12 +542,14 @@ function startEngageHold(e){
|
||||
if(view.action!=='arm'||!inputFocused||engageStart)return;
|
||||
if(e&&e.button!==undefined&&e.button!==0)return;
|
||||
engagePointer=e?.pointerId??'keyboard';engageStart=performance.now();engageButton.classList.add('charging');engageButton.style.setProperty('--engage-progress','0%');
|
||||
syncInputModeControls();
|
||||
if(e?.pointerId!=null)engageButton.setPointerCapture(e.pointerId);
|
||||
engageHoldTimer=requestAnimationFrame(updateEngageProgress);
|
||||
}
|
||||
function cancelEngageHold(showHint=true){
|
||||
if(!engageStart)return;
|
||||
const elapsed=performance.now()-engageStart,pointer=engagePointer;cancelAnimationFrame(engageHoldTimer);engageHoldTimer=null;engageStart=0;engagePointer=null;engageButton.classList.remove('charging');engageButton.classList.add('canceling');engageButton.style.setProperty('--engage-progress','0%');setTimeout(()=>engageButton.classList.remove('canceling'),280);if(typeof pointer==='number')try{engageButton.releasePointerCapture(pointer)}catch(_){}if(showHint&&elapsed>80)toast('Engagement canceled');
|
||||
syncInputModeControls();
|
||||
}
|
||||
|
||||
if(engageButton){
|
||||
@@ -380,7 +568,72 @@ if(engageButton){
|
||||
}
|
||||
|
||||
$('#logs').onclick=()=>api('open_logs');
|
||||
function setGain(value){const gain=$('#gain');gain.value=Math.max(+gain.min,Math.min(+gain.max,value));$('#gain-value').textContent=`${gain.value}%`;if(bridgeReady)api('set_gain',+gain.value)}
|
||||
const consoleDock=$('#console-dock'),consoleRx=$('#console-rx-output'),consoleTx=$('#console-tx-output');
|
||||
let consoleRefreshBusy=false,consolePaused=false,consoleCache={rx:[],tx:[]},consoleSignature='',consoleOpen=false,consoleCloseTimer=0;
|
||||
const consolePulseTimers={};
|
||||
function pulseConsole(side){
|
||||
const dot=$('.'+side+'-dot');
|
||||
clearTimeout(consolePulseTimers[side]);dot.classList.add('lit');
|
||||
consolePulseTimers[side]=setTimeout(()=>dot.classList.remove('lit'),260);
|
||||
}
|
||||
function renderConsole(){
|
||||
const filter=$('#console-filter').value,signature=filter+JSON.stringify(consoleCache);
|
||||
if(signature===consoleSignature)return;
|
||||
consoleSignature=signature;ConsoleView.render(consoleRx,consoleCache.rx||[],filter);ConsoleView.render(consoleTx,consoleCache.tx||[],filter);
|
||||
}
|
||||
function setConsoleOpen(open){
|
||||
consoleOpen=open;clearTimeout(consoleCloseTimer);consoleDock.classList.toggle('closing',!open);
|
||||
if(open){consoleDock.hidden=false;$('.app-shell').classList.add('console-open')}
|
||||
else consoleCloseTimer=setTimeout(()=>{consoleDock.hidden=true;$('.app-shell').classList.remove('console-open')},180);
|
||||
$('#console').setAttribute('aria-expanded',String(open));
|
||||
if(open)refreshConsole();else $('#console').focus({preventScroll:true});
|
||||
}
|
||||
$('#console').setAttribute('aria-controls','console-dock');
|
||||
$('#console').setAttribute('aria-expanded','false');
|
||||
$('#console').onclick=()=>setConsoleOpen(!consoleOpen);
|
||||
$('#console-close').onclick=()=>setConsoleOpen(false);
|
||||
$('#console-filter').onchange=renderConsole;
|
||||
$('#console-pause').onclick=()=>{
|
||||
consolePaused=!consolePaused;
|
||||
$('#console-pause').textContent=consolePaused?'Resume':'Pause';
|
||||
$('#console-pause').setAttribute('aria-pressed',String(consolePaused));
|
||||
$('#console-state').textContent=consolePaused?'Paused':'';
|
||||
$('#console-state').hidden=!consolePaused;
|
||||
if(!consolePaused)refreshConsole();
|
||||
};
|
||||
async function refreshConsole(){
|
||||
if(!consoleOpen||!bridgeReady||consoleRefreshBusy||consolePaused)return;
|
||||
consoleRefreshBusy=true;
|
||||
try{
|
||||
const sides=await withTimeout(api('read_console',150),1500);
|
||||
if(consolePaused||!consoleOpen)return;
|
||||
const filter=$('#console-filter').value;
|
||||
for(const side of ['rx','tx']){
|
||||
const previous=new Set(consoleCache[side]||[]);
|
||||
if((sides[side]||[]).some(line=>!previous.has(line)&&(filter==='all'||!ConsoleView.parse(line).quiet)))pulseConsole(side);
|
||||
}
|
||||
consoleCache=sides;renderConsole();
|
||||
$('#console-state').textContent='';$('#console-state').hidden=true;
|
||||
}catch(error){if(consoleOpen){$('#console-state').hidden=false;$('#console-state').textContent='Unavailable: '+error.message}}
|
||||
finally{consoleRefreshBusy=false}
|
||||
}
|
||||
setInterval(refreshConsole,750);
|
||||
function syncMotorScalingUI(){
|
||||
const independent=!!motorSettings.independent;
|
||||
document.body.dataset.motorScaling=independent?'independent':'shared';
|
||||
const toggle=$('#motor-scale-independent');if(toggle)toggle.checked=independent;
|
||||
const gain=$('#gain'),down=$('#gain-down'),up=$('#gain-up');
|
||||
if(gain){gain.disabled=independent;gain.title=independent?'Set motor scales in Motor setup':'Shared limit for every motor';}
|
||||
if(down)down.disabled=independent;if(up)up.disabled=independent;
|
||||
}
|
||||
function pushMotorSettings(persist=true){
|
||||
if(!bridgeReady)return Promise.resolve(motorSettings);
|
||||
const payload=JSON.parse(JSON.stringify(motorSettings));
|
||||
motorSettingsQueue=motorSettingsQueue.catch(()=>{}).then(()=>api('save_motor_settings',payload,persist)).then(saved=>{motorSettings=saved;syncMotorScalingUI();if(persist){servoSignature='';renderMotors(vehicleSnapshot.servos||{});toast('Motor settings saved')}return saved}).catch(error=>{setFeedback($('#motor-feedback'),error.message||'Could not save motor settings.');throw error});
|
||||
return motorSettingsQueue;
|
||||
}
|
||||
function motorScale(motor){return motorSettings.independent?(motorSettings.motors[String(motor)]?.scale??100):+$('#gain').value}
|
||||
function setGain(value){if(motorSettings.independent)return;const gain=$('#gain');gain.value=Math.max(+gain.min,Math.min(+gain.max,value));$('#gain-value').textContent=`${gain.value}%`;servoSignature='';renderMotors(vehicleSnapshot.servos||{});if(bridgeReady)api('set_gain',+gain.value)}
|
||||
$('#gain').oninput=e=>setGain(+e.target.value);$('#gain-down').onclick=()=>setGain(+$('#gain').value-5);$('#gain-up').onclick=()=>setGain(+$('#gain').value+5);
|
||||
// Explicit pointer ownership makes the full range rail a reliable touch target
|
||||
// in the embedded window, without depending on native range drag defaults.
|
||||
@@ -391,21 +644,129 @@ gainSlider.addEventListener('pointerdown',e=>{if(gainPointer!==null||e.button>0)
|
||||
gainSlider.addEventListener('pointermove',e=>{if(e.pointerId===gainPointer)gainFromPointer(e)});
|
||||
['pointerup','pointercancel','lostpointercapture'].forEach(type=>gainSlider.addEventListener(type,releaseGain));
|
||||
gainSlider.addEventListener('keydown',e=>{const delta={ArrowRight:1,ArrowUp:1,ArrowLeft:-1,ArrowDown:-1}[e.key];if(delta){e.preventDefault();setGain(+gainSlider.value+delta)}else if(e.key==='Home'||e.key==='End'){e.preventDefault();setGain(+(e.key==='Home'?gainSlider.min:gainSlider.max))}});
|
||||
$('#battery-form').onsubmit=async e=>{e.preventDefault();const data=Object.fromEntries(new FormData(e.target));try{batteryConfig=await api('save_battery',data);closeModal($('#battery-modal'));toast('Battery settings saved')}catch(err){toast(err.message,true)}};
|
||||
async function saveSettings(form,method,commit,message){
|
||||
if(form.dataset.busy==='true'||!form.reportValidity())return;
|
||||
const data=Object.fromEntries(new FormData(form));
|
||||
const button=form.querySelector('[type="submit"]'),label=button.textContent;
|
||||
const disabled=new Map([...form.querySelectorAll('input,select,button')].map(el=>[el,el.disabled]));
|
||||
form.dataset.busy='true';disabled.forEach((_,el)=>el.disabled=true);button.textContent='Saving…';
|
||||
setFeedback(form.querySelector('.form-feedback'));
|
||||
let saved=false;
|
||||
try{commit(await api(method,data));saved=true;toast(message)}
|
||||
catch(error){setFeedback(form.querySelector('.form-feedback'),error.message||'Could not save settings. Try again.')}
|
||||
finally{
|
||||
delete form.dataset.busy;disabled.forEach((value,el)=>el.disabled=value);button.textContent=label;
|
||||
if(saved)closeModal(form.closest('dialog'));
|
||||
}
|
||||
}
|
||||
$('#battery-form').onsubmit=e=>{e.preventDefault();saveSettings(e.target,'save_battery',value=>batteryConfig=value,'Battery settings saved')};
|
||||
function fillBatteryForm(){for(const [k,v] of Object.entries(batteryConfig)){const el=$(`#battery-form [name=${k}]`);if(el)el.value=v}}
|
||||
function renderMotors(servos){const signature=JSON.stringify(servos);if(signature===servoSignature)return;servoSignature=signature;const list=$('#motor-list');list.innerHTML='';for(let i=1;i<=16;i++){const s=servos[String(i)]||{},row=document.createElement('div');row.className='motor-row';const opts=['<option value="0">Unassigned</option>',...Array.from({length:12},(_,n)=>`<option value="${n+1}" ${s.motor===n+1?'selected':''}>Motor ${n+1}</option>`)].join('');row.innerHTML=`<strong>SERVO${i}</strong><select aria-label="SERVO${i} function">${opts}</select><span>${s.direction==null?'—':s.direction===-1?'Reversed':'Normal'}</span><button class="button subtle">Reverse</button>`;row.querySelector('select').onchange=e=>{if(demoActive){const motor=+e.target.value;demoState.servos[String(i)]={function:motor?32+motor:0,label:motor?`Motor ${motor}`:'Unassigned',motor:motor||null,direction:motor?1:null};servoSignature='';renderMotors(demoState.servos);toast(`Demo SERVO${i} updated`)}else api('set_servo_function',i,+e.target.value).catch(x=>toast(x.message,true))};row.querySelector('button').onclick=()=>{if(demoActive){if(s.motor){s.direction=s.direction===-1?1:-1;servoSignature='';renderMotors(demoState.servos);toast(`Demo Motor ${s.motor} reversed`)}else toast(`SERVO${i} is unassigned`,true)}else api('reverse_motor',i).catch(x=>toast(x.message,true))};list.append(row)}}
|
||||
$('#link-form').onsubmit=e=>{e.preventDefault();saveSettings(e.target,'save_link_settings',value=>linkConfig=value,'Link settings applied')};
|
||||
function fillLinkForm(){for(const [k,v] of Object.entries(linkConfig)){const el=$(`#link-form [name=${k}]`);if(el)el.value=v}}
|
||||
const motorEdits=new Map();
|
||||
$('#motor-scale-independent').onchange=e=>{
|
||||
if(e.target.checked&&!motorSettings.customized){for(let motor=1;motor<=12;motor++)motorSettings.motors[String(motor)].scale=+$('#gain').value;motorSettings.customized=true}
|
||||
motorSettings={...motorSettings,independent:e.target.checked};syncMotorScalingUI();servoSignature='';renderMotors(vehicleSnapshot.servos||{});pushMotorSettings(true).catch(()=>{});
|
||||
};
|
||||
async function requestMotorEdit(servo,kind,value){
|
||||
if(motorEdits.has(servo))return;
|
||||
const s=vehicleSnapshot.servos?.[String(servo)]||{};
|
||||
const expected=kind==='function'?(value===0?0:value<=8?32+value:73+value):-s.direction;
|
||||
setFeedback($('#motor-feedback'));
|
||||
if(demoActive){
|
||||
if(kind==='function')Object.assign(s,{function:expected,motor:value||null,direction:value?1:null});
|
||||
else s.direction=expected;
|
||||
servoSignature='';renderMotors(demoState.servos);toast('Demo motor updated');return;
|
||||
}
|
||||
motorEdits.set(servo,{kind,expected,started:performance.now()});
|
||||
servoSignature='';renderMotors(vehicleSnapshot.servos||{});
|
||||
try{
|
||||
await api(kind==='function'?'set_servo_function':'reverse_motor',servo,...(kind==='function'?[value]:[]));
|
||||
}catch(error){
|
||||
motorEdits.delete(servo);
|
||||
setFeedback($('#motor-feedback'),error.message||'Motor change failed. Try again.');
|
||||
servoSignature='';renderMotors(vehicleSnapshot.servos||{});
|
||||
}
|
||||
}
|
||||
function renderMotors(servos){
|
||||
for(const [servo,edit] of motorEdits){
|
||||
const state=servos[String(servo)]||{};
|
||||
if((edit.kind==='function'?state.function:state.direction)===edit.expected){motorEdits.delete(servo);toast(`SERVO${servo} change confirmed`)}
|
||||
else if(!vehicleSnapshot.connected||performance.now()-edit.started>8000){motorEdits.delete(servo);setFeedback($('#motor-feedback'),`SERVO${servo}: confirmation not received.`)}
|
||||
}
|
||||
const editable=!!vehicleSnapshot.connected&&!vehicleSnapshot.armed&&(demoActive||view.known);
|
||||
const assignments=Object.entries(servos).filter(([,state])=>state.motor).sort((a,b)=>a[1].motor-b[1].motor);
|
||||
const servoByMotor=new Map(assignments.map(([servo,state])=>[String(state.motor),{servo,...state}]));
|
||||
$('#motor-status').textContent=!vehicleSnapshot.connected?'Offline':vehicleSnapshot.armed?'Armed':`${assignments.length} outputs`;
|
||||
const shownMotors=[...new Set(assignments.map(([,state])=>state.motor))].sort((a,b)=>a-b);
|
||||
const structure=JSON.stringify([assignments.map(([port,state])=>[port,state.function,state.motor,state.direction]),editable,[...motorEdits],motorSettings.independent,shownMotors,Object.values(motorSettings.motors).map(m=>m.name)]);
|
||||
if(structure!==servoSignature){
|
||||
servoSignature=structure;const list=$('#motor-list');list.replaceChildren();
|
||||
for(const motor of shownMotors){
|
||||
const row=document.createElement('article');row.className='motor-row';row.dataset.motor=String(motor);
|
||||
row.innerHTML='<input class="motor-name" type="text" maxlength="24" autocomplete="off" aria-label="Motor name"><input class="motor-scale" type="range" min="0" max="100" step="1" aria-label="Motor output scale"><output class="motor-scale-value"></output><button type="button" class="button subtle motor-reverse">Reverse</button><span class="motor-channel"></span>';
|
||||
const name=row.querySelector('.motor-name');name.onchange=()=>{motorSettings.motors[String(motor)].name=name.value.trim().slice(0,24)||`Motor ${motor}`;name.value=motorSettings.motors[String(motor)].name;pushMotorSettings(true).catch(()=>{})};
|
||||
const scale=row.querySelector('.motor-scale');scale.oninput=()=>{motorSettings.customized=true;motorSettings.motors[String(motor)].scale=+scale.value;row.querySelector('output').textContent=`${scale.value}%`;pushMotorSettings(false).catch(()=>{})};scale.onchange=()=>pushMotorSettings(true).catch(()=>{});
|
||||
row.querySelector('.motor-reverse').onclick=()=>{const state=servoByMotor.get(String(motor));if(state?.servo)requestMotorEdit(state.servo,'direction')};list.append(row);
|
||||
}
|
||||
const details=document.createElement('details');details.className='motor-mapping';const summary=document.createElement('summary');summary.textContent='Assignments';details.append(summary);
|
||||
for(let i=1;i<=16;i++){
|
||||
const state=servos[String(i)]||{},pending=motorEdits.get(i),row=document.createElement('div');row.className='motor-map-row';row.innerHTML='<span class="motor-map-port"></span><select aria-label="Servo output motor assignment"></select><span class="motor-map-direction"></span>';
|
||||
row.querySelector('.motor-map-port').textContent=`SERVO${i}`;const select=row.querySelector('select');select.add(new Option(state.function==null?'Reading…':'Unassigned','0'));for(let motor=1;motor<=12;motor++)select.add(new Option(motorSettings.motors[String(motor)]?.name||`Motor ${motor}`,String(motor)));select.value=String(state.motor||0);select.disabled=!editable||!!pending||state.function==null;select.onchange=e=>requestMotorEdit(i,'function',+e.target.value);
|
||||
row.querySelector('.motor-map-direction').textContent=pending?'Saving…':state.direction==null?'—':state.direction===-1?'Reversed':'Normal';details.append(row);
|
||||
}
|
||||
list.append(details);
|
||||
}
|
||||
for(const motor of shownMotors){
|
||||
const row=$(`#motor-list .motor-row[data-motor="${motor}"]`),state=servoByMotor.get(String(motor))||{},settings=motorSettings.motors[String(motor)]||{name:`Motor ${motor}`,scale:20};if(!row)continue;
|
||||
const servo=state.servo||null,name=row.querySelector('.motor-name');if(document.activeElement!==name)name.value=settings.name;
|
||||
const scale=row.querySelector('.motor-scale');scale.disabled=!motorSettings.independent;if(document.activeElement!==scale)scale.value=motorScale(motor);
|
||||
row.querySelector('.motor-scale-value').textContent=`${motorScale(motor)}%`;row.querySelector('.motor-channel').textContent=servo?`SERVO${servo} · ${state.output_us||'—'} µs`:'Unassigned';
|
||||
const reverse=row.querySelector('.motor-reverse');reverse.disabled=!editable||!servo||state.direction==null||motorEdits.has(servo);reverse.textContent=state.direction===-1?'Restore':'Reverse';reverse.setAttribute('aria-label',`${reverse.textContent} ${settings.name}`);
|
||||
}
|
||||
}
|
||||
function renderHeavyQuality(test,connected,armed){
|
||||
const status=$('#heavy-quality-status'),results=$('#heavy-quality-results'),run=$('#heavy-quality-run'),stop=$('#heavy-quality-cancel');
|
||||
if(!status||!results||!run||!stop)return;
|
||||
const quality=demoActive?null:vehicleSnapshot.link_quality;
|
||||
$('#quality-detail-rtt').textContent=quality?.rtt_median_ms==null?'—':`${Math.round(quality.rtt_median_ms)} ms`;
|
||||
$('#quality-detail-loss').textContent=quality?.probe_loss_percent==null?'—':`${quality.probe_loss_percent.toFixed(1)}%`;
|
||||
$('#quality-detail-downlink').textContent=quality?.rx_sequence_loss_percent==null?'—':`${quality.rx_sequence_loss_percent.toFixed(1)}%`;
|
||||
const running=!!test?.running;
|
||||
status.textContent=running?`${test.status} · ${test.replies||0}/${test.sent||0} replies`:(test?.status==='Complete'?'Test complete. Results below.':test?.status==='Cancelled'?'Test stopped. Partial results below.':demoActive?'Demo has no hardware link to measure.':!connected?'Connect to run a test.':armed?'Disarm to run a test.':'Ready to test.');
|
||||
run.disabled=heavyActionBusy||running||!connected||armed||demoActive;
|
||||
run.textContent=!connected?'Connect to run test':armed?'Disarm to run test':demoActive?'Unavailable in demo':test?.status==='Complete'?'Run again':'Run heavy test';
|
||||
stop.hidden=!running;
|
||||
stop.disabled=heavyActionBusy;
|
||||
results.replaceChildren();
|
||||
for(const row of test?.results||[]){
|
||||
const line=document.createElement('div');line.className='heavy-result-row';
|
||||
const rate=document.createElement('strong');rate.textContent=`${row.rate_hz} Hz`;
|
||||
const stats=document.createElement('span');
|
||||
const loss=row.loss_percent==null?'—':`${row.loss_percent.toFixed(1)}% loss`;
|
||||
const rtt=row.median_rtt_ms==null?'—':`${row.median_rtt_ms.toFixed(0)} ms median / ${row.p95_rtt_ms.toFixed(0)} ms p95`;
|
||||
stats.textContent=`${row.replies}/${row.sent} replies · ${loss} · ${rtt}`;
|
||||
line.append(rate,stats);results.append(line);
|
||||
}
|
||||
}
|
||||
function render(s,confirmed=false){
|
||||
vehicleSnapshot=s;
|
||||
if(confirmed&&localRequest?.sent && (s.pending_command===localRequest.name || s.command_error ||
|
||||
(s.armed_known&&s.armed===(localRequest.name==='arm')))) localRequest=null;
|
||||
const previous=view;
|
||||
view=ControlState.present(s,{stale:bridgeStale,focused:inputFocused,pending:localRequest?.name,error:commandError});
|
||||
syncInputModeControls();
|
||||
window.V2?.render(s);
|
||||
if((previous.drive&&!view.drive)||(previous.action==='arm'&&view.action!=='arm'))resetInputs();
|
||||
appState=bridgeStale&&s.connected?'link_degraded':s.app_state||'disconnected';
|
||||
renderHeavyQuality(s.heavy_quality,s.connected,s.armed);
|
||||
document.body.dataset.appState=appState;
|
||||
document.body.dataset.controlsEnabled=String(view.drive);
|
||||
const driveEnabled=view.drive;
|
||||
document.body.dataset.controlsEnabled=String(driveEnabled);
|
||||
document.body.dataset.telemetryStale=String(!view.known||!!s.battery_stale);
|
||||
$('#port').disabled=!!s.connected;
|
||||
$('#custom-port-input').disabled=!!s.connected||$('#link-form').dataset.busy==='true';
|
||||
$('#custom-port-btn').disabled=!!s.connected||$('#link-form').dataset.busy==='true';
|
||||
const isOnline=(appState==='connected_disarmed'||appState==='armed');
|
||||
const connectBtn=$('#connect');
|
||||
const connectLabel=connectBtn?connectBtn.querySelector('.btn-label'):null;
|
||||
@@ -436,7 +797,7 @@ function render(s,confirmed=false){
|
||||
controlStatus.classList.toggle('is-error',view.error);
|
||||
controlStatus.hidden=!(view.pending||view.error||(view.known&&s.armed&&!inputFocused));
|
||||
const motorBtn=$('[data-open="motors-modal"]');
|
||||
if(motorBtn)motorBtn.disabled=(!isOnline);
|
||||
if(motorBtn)motorBtn.disabled=false;
|
||||
|
||||
const confirmedCommand=previous.pending&&!view.pending&&view.known&&!view.error;
|
||||
const reported=commandError||s.command_error||((!view.known&&s.connected&&appState!=='connecting')?'Telemetry stale — vehicle state unknown':s.status);
|
||||
@@ -447,14 +808,60 @@ function render(s,confirmed=false){
|
||||
updateReadouts();
|
||||
const b=s.battery;
|
||||
if(b){
|
||||
$('#battery-title').textContent=`${b.voltage.toFixed(2)} V`;
|
||||
$('#battery-percent').textContent=`${Math.round(b.percent)}% • ${b.cells}s${!view.known||s.battery_stale?' · stale':''}`;
|
||||
$('#battery-fill').style.width=`${b.percent}%`;
|
||||
$('#battery-fill').style.background=b.low?'var(--red)':'var(--acid)';
|
||||
$('#battery-title').textContent=Number.isFinite(b.voltage)?`${b.voltage.toFixed(2)} V`:'Voltage unavailable';
|
||||
$('#battery-percent').textContent=Number.isFinite(b.percent)?`${Math.round(b.percent)}%`:'—';
|
||||
$('#battery-live-voltage').textContent=Number.isFinite(b.voltage)?`${b.voltage.toFixed(2)} V`:'—';
|
||||
$('#battery-live-current').textContent=Number.isFinite(b.current_a)?`${b.current_a.toFixed(1)} A`:'Unavailable';
|
||||
$('#battery-live-consumed').textContent=Number.isFinite(b.consumed_mah)?`${Math.round(b.consumed_mah).toLocaleString()} mAh`:'Unavailable';
|
||||
$('#battery-live-consumed-source').textContent=b.consumed_source||'';
|
||||
$('#battery-live-remaining').textContent=Number.isFinite(b.remaining_mah)?`${Math.round(b.remaining_mah).toLocaleString()} mAh`:Number.isFinite(b.remaining_percent)?`${Math.round(b.remaining_percent)}%`:'Unavailable';
|
||||
$('#battery-live-note').textContent=s.battery_stale?'Battery telemetry is stale. Check the telemetry rate and battery monitor.':b.charge_source==='Voltage estimate'?'Charge percentage is estimated from voltage. Add a calibrated current sensor for consumption readings.':'Live values come from the flight controller; accuracy depends on its battery monitor setup.';
|
||||
$('.battery-card').dataset.stale=String(!view.known||!!s.battery_stale);
|
||||
$('.battery-card').title=`${b.charge_source||'Battery status'} · ${b.cells}S${!view.known||s.battery_stale?' · stale reading':''} · Battery settings`;
|
||||
$('#battery-fill').style.width=`${Number.isFinite(b.percent)?b.percent:0}%`;
|
||||
$('#battery-fill').style.background=b.low?'var(--battery-low)':'var(--battery-charge)';
|
||||
$('.battery-card').dataset.low=String(!!b.low);
|
||||
}else{
|
||||
$('#battery-title').textContent='—';
|
||||
$('#battery-percent').textContent='waiting';
|
||||
$('#battery-title').textContent='No voltage';
|
||||
$('#battery-percent').textContent='—';
|
||||
$('#battery-live-voltage').textContent='—';$('#battery-live-current').textContent='—';
|
||||
$('#battery-live-consumed').textContent='—';$('#battery-live-consumed-source').textContent='';
|
||||
$('#battery-live-remaining').textContent='—';$('#battery-live-note').textContent='Waiting for battery telemetry.';
|
||||
$('.battery-card').dataset.stale='false';
|
||||
$('.battery-card').title='Waiting for battery voltage · Battery settings';
|
||||
$('#battery-fill').style.width='0';
|
||||
$('.battery-card').dataset.low='false';
|
||||
}
|
||||
const quality=s.link_quality,qualityCard=$('#link-quality');
|
||||
if(qualityCard){
|
||||
if(demoActive){
|
||||
qualityCard.dataset.grade='offline';
|
||||
$('#link-quality-grade').textContent='Demo';
|
||||
$('#link-quality-roundtrip').textContent='no hardware link test';
|
||||
$('#link-quality-downlink').textContent='';
|
||||
renderMotors(s.servos||{});
|
||||
return;
|
||||
}
|
||||
const grade=quality?.grade||(s.connected?'testing':'offline');
|
||||
qualityCard.dataset.grade=grade;
|
||||
$('#link-quality-grade').textContent=grade.charAt(0).toUpperCase()+grade.slice(1);
|
||||
if(quality&&quality.probe_samples){
|
||||
const percent=value=>value==null?'—':`${value.toFixed(1)}%`;
|
||||
const median=quality.rtt_median_ms==null?'—':`${Math.round(quality.rtt_median_ms)} ms`;
|
||||
const p95=quality.rtt_p95_ms==null?'—':`${Math.round(quality.rtt_p95_ms)} ms`;
|
||||
$('#link-quality-roundtrip').textContent=`round trip ${median} / ${p95} p95 • loss ${percent(quality.probe_loss_percent)}`;
|
||||
const downLoss=percent(quality.rx_sequence_loss_percent);
|
||||
const badFrames=quality.rx_corrupt_frames_20s??0;
|
||||
const badBytes=quality.rx_corrupt_bytes_20s??0;
|
||||
const age=quality.heartbeat_age_s==null?'—':`${quality.heartbeat_age_s.toFixed(1)} s`;
|
||||
$('#link-quality-downlink').textContent=`FC → PC loss ${downLoss} • ${badFrames} bad frames (${badBytes} B) • heartbeat ${age}`;
|
||||
if(quality.probe_samples<10||quality.rx_packets_30s<10){
|
||||
$('#link-quality-grade').textContent=`Testing ${Math.min(quality.probe_samples,quality.rx_packets_30s)}/10`;
|
||||
}
|
||||
}else{
|
||||
$('#link-quality-roundtrip').textContent=s.connected?'testing round trip…':'waiting for connection';
|
||||
$('#link-quality-downlink').textContent='';
|
||||
}
|
||||
}
|
||||
renderMotors(s.servos||{});
|
||||
}
|
||||
@@ -560,18 +967,25 @@ async function boot(){
|
||||
if(booted||booting||!hasDesktopApi())return;
|
||||
booting=true;clearTimeout(bootRetry);
|
||||
try{
|
||||
// OS port discovery must not depend on model/config initialization succeeding.
|
||||
populatePorts(await withTimeout(api('refresh_ports'),4000));
|
||||
const init=await withTimeout(api('initial_state'),4000);
|
||||
batteryConfig=init.battery_config||{};
|
||||
populatePorts(init.ports);
|
||||
linkConfig=init.link_config||{};
|
||||
motorSettings=init.motor_settings||motorSettings;
|
||||
controllerProfiles=init.controller_profiles||controllerProfiles;
|
||||
controllerConfig=null;
|
||||
window.V2?.setStation(init.station_settings||{});
|
||||
syncMotorScalingUI();
|
||||
fillBatteryForm();
|
||||
fillLinkForm();
|
||||
bridgeReady=true;booted=true;lastBridgeAt=performance.now();
|
||||
if(!demoActive)render(init.state);
|
||||
poll();
|
||||
// Populate the serial selector before starting the optional model load.
|
||||
// A large cached mesh must never delay an operator seeing USB COM ports.
|
||||
loadDefaultModel();
|
||||
// COM discovery can block on Windows drivers; finish the first paint first.
|
||||
setTimeout(()=>withTimeout(api('refresh_ports'),4000).then(populatePorts).catch(()=>{}),0);
|
||||
// Let the controls paint before fetching and parsing the large STL mesh.
|
||||
const startModelLoad=()=>{void loadDefaultModel()};
|
||||
if('requestIdleCallback' in window)requestIdleCallback(startModelLoad,{timeout:2500});
|
||||
else setTimeout(startModelLoad,1500);
|
||||
if(!portRefreshTimer)portRefreshTimer=setInterval(async()=>{
|
||||
if(appState==='disconnected'||demoActive){
|
||||
try{populatePorts(await withTimeout(api('refresh_ports'),1500))}
|
||||
@@ -592,11 +1006,19 @@ function waitForBridge(){
|
||||
if(hasDesktopApi())boot();
|
||||
setTimeout(waitForBridge,250);
|
||||
}
|
||||
window.V2.init({
|
||||
api,bridge:()=>bridgeReady,demo:()=>demoActive,toast,open:openModal,close:closeModal,
|
||||
locked:inputConfigurationLocked,reset:resetInputs,touch:()=>window.canTouchControl(),demand:()=>control,
|
||||
axis:(name,value)=>{control[name]=value;updateReadouts();sendAxes()},
|
||||
scaling:allowed=>{const toggle=$('#motor-scale-independent');toggle.disabled=!allowed||inputConfigurationLocked();toggle.title=allowed?'Independent scales':'SimpleROV 3 only';if(!allowed&&motorSettings.independent){motorSettings.independent=false;syncMotorScalingUI();servoSignature=''}},
|
||||
demoAccessory:(name,enabled)=>{if(demoState){demoState.accessories??={};demoState.accessories[name]={requested:enabled,accepted:true,demo:true};render(demoState)}},
|
||||
previewFrame:(frame,count)=>{if(demoState){demoState.capabilities={frame,firmware:[4,5,3]};for(let i=1;i<=16;i++)demoState.servos[String(i)]={function:i<=count?32+i:0,label:i<=count?`Motor ${i}`:'Unassigned',motor:i<=count?i:null,direction:i<=count?1:null};servoSignature='';render(demoState)}}
|
||||
});
|
||||
|
||||
addEventListener('pywebviewready',boot);
|
||||
render(vehicleSnapshot);
|
||||
if(document.readyState==='loading'){
|
||||
addEventListener('DOMContentLoaded',()=>{loadDefaultModel();waitForBridge()});
|
||||
addEventListener('DOMContentLoaded',waitForBridge);
|
||||
}else{
|
||||
loadDefaultModel();
|
||||
waitForBridge();
|
||||
}
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
/* Read-only presentation of the existing local RX/TX logs. */
|
||||
((root)=>{
|
||||
const quiet=/^(HEARTBEAT|TIMESYNC|LINK_PROBE|HEAVY_PROBE|GCS)/;
|
||||
function parse(line){
|
||||
const match=String(line).match(/^(\S+) \[([^\]]+)\] ([\s\S]*)$/);
|
||||
if(!match)return {time:'',type:'Message',payload:String(line),raw:String(line),tone:'normal',quiet:false};
|
||||
const [,timestamp,category,message]=match;
|
||||
let payload=message,type=category.replace(/^(RX|TX)_?/,'')||category;
|
||||
try{payload=JSON.parse(message);type=payload.mavpackettype||type}catch(_){}
|
||||
const tone=/BAD_DATA|ERROR|TIMEOUT|FAIL/.test(category)||type==='STATUSTEXT'&&Number(payload.severity)<=4?'warning':/COMMAND|ACK|PARAM_SET|OPERATOR/.test(category+' '+type)?'command':'normal';
|
||||
const time=timestamp.match(/T(\d{2}:\d{2}:\d{2}(?:\.\d+)?)/)?.[1]||timestamp;
|
||||
const pairs=typeof payload==='string'?[...payload.matchAll(/(?:^|\s)([a-zA-Z_]\w*)=([^\s]+)/g)]:[];
|
||||
const fields=pairs.length?Object.fromEntries(pairs.map(([,key,value])=>[key,value])):payload;
|
||||
return {time,type,payload,fields,raw:String(line),tone,quiet:tone!=='warning'&&(quiet.test(type)||/LINK_PROBE|HEAVY_PROBE|HEARTBEAT/.test(category))};
|
||||
}
|
||||
function valueText(value){
|
||||
if(typeof value==='number')return Number.isInteger(value)?String(value):Number(value.toFixed(3)).toString();
|
||||
if(Array.isArray(value))return value.slice(0,6).map(valueText).join(', ')+(value.length>6?'…':'');
|
||||
return typeof value==='object'?JSON.stringify(value):String(value);
|
||||
}
|
||||
function makeRow(row,previous){
|
||||
if(previous&&previous.dataset.key===row.raw&&previous.dataset.tone===row.tone)return previous;
|
||||
const details=previous||document.createElement('details');
|
||||
details.className='console-row';details.dataset.key=row.raw;details.dataset.tone=row.tone;
|
||||
let summary=details.querySelector('summary'),time,body,type,fields,raw;
|
||||
if(!summary){
|
||||
details.replaceChildren();summary=document.createElement('summary');time=document.createElement('time');
|
||||
body=document.createElement('span');body.className='console-message';type=document.createElement('strong');
|
||||
fields=document.createElement('span');fields.className='console-fields';body.append(type,fields);summary.append(time,body);
|
||||
raw=document.createElement('pre');details.append(summary,raw);
|
||||
}else{
|
||||
time=summary.querySelector('time');body=summary.querySelector('.console-message');
|
||||
type=body.querySelector('strong');fields=body.querySelector('.console-fields');raw=details.querySelector('pre');
|
||||
}
|
||||
time.textContent=row.time;type.textContent=row.type;fields.replaceChildren();
|
||||
const values=row.fields??row.payload;
|
||||
if(typeof values==='object'&&values!==null){
|
||||
for(const [key,value] of Object.entries(values).filter(([key])=>key!=='mavpackettype').slice(0,6)){
|
||||
const item=document.createElement('span'),label=document.createElement('i'),text=document.createElement('b');
|
||||
label.textContent=key+' ';text.textContent=valueText(value);item.append(label,text);fields.append(item);
|
||||
}
|
||||
}else fields.textContent=row.payload;
|
||||
raw.textContent=typeof row.payload==='object'?JSON.stringify(row.payload,null,2):row.raw;
|
||||
return details;
|
||||
}
|
||||
function render(host,lines,filter){
|
||||
const atBottom=host.scrollHeight-host.scrollTop-host.clientHeight<36,scroll=host.scrollTop;
|
||||
const rows=lines.map(parse).filter(row=>filter==='all'||!row.quiet);
|
||||
const existing=new Map();
|
||||
for(const node of host.querySelectorAll('details.console-row')){
|
||||
const key=node.dataset.key,list=existing.get(key)||[];list.push(node);existing.set(key,list);
|
||||
}
|
||||
if(!rows.length){
|
||||
if(!host.querySelector('.console-empty')){
|
||||
const empty=document.createElement('p');empty.className='console-empty';
|
||||
empty.textContent='No messages';
|
||||
empty.title=filter==='all'?'Waiting for session messages.':'Routine heartbeat and probe traffic is hidden. Choose All traffic to see it.';
|
||||
host.replaceChildren(empty);
|
||||
}
|
||||
return;
|
||||
}
|
||||
const wanted=rows.map(row=>makeRow(row,existing.get(row.raw)?.shift()||null));
|
||||
let cursor=host.firstElementChild;
|
||||
for(const node of wanted){if(node!==cursor)host.insertBefore(node,cursor);cursor=node.nextElementSibling}
|
||||
while(cursor){const next=cursor.nextElementSibling;cursor.remove();cursor=next}
|
||||
if(atBottom&&!host.querySelector('details[open]'))host.scrollTop=host.scrollHeight;else host.scrollTop=scroll;
|
||||
}
|
||||
root.ConsoleView={parse,render};
|
||||
if(typeof module!=='undefined')module.exports=root.ConsoleView;
|
||||
})(typeof window!=='undefined'?window:globalThis);
|
||||
@@ -18,7 +18,7 @@
|
||||
label=online?'DISARM · ?':'STATE UNKNOWN'; tone='danger'; action=online?'disarm':null;
|
||||
message='Vehicle state unknown. Inputs cleared; disarm is not confirmed.';
|
||||
} else if (known && online) {
|
||||
action=focused?'arm':null; message='Disarmed · hold 1.4 seconds to engage.';
|
||||
action=focused?'arm':null; message='Disarmed · hold 0.6 seconds to engage.';
|
||||
}
|
||||
if (stale) message='Telemetry unavailable. Inputs cleared; vehicle state unknown.';
|
||||
const failure=error || state.command_error;
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
/* Controller conditioning is independent of drawing and MAVLink transport. */
|
||||
((root)=>{
|
||||
const clamp=value=>Math.max(-1,Math.min(1,Number.isFinite(value)?value:0));
|
||||
function deadZone(value,zone=.08){
|
||||
value=clamp(value);zone=Math.max(0,Math.min(.4,zone));
|
||||
return Math.abs(value)<=zone?0:Math.sign(value)*(Math.abs(value)-zone)/(1-zone);
|
||||
}
|
||||
function defaults(pad){
|
||||
return {turn:0,forward:1,vertical:pad?.axes?.length>=4?3:pad?.axes?.length>=3?2:-1,
|
||||
invertTurn:false,invertForward:true,invertVertical:true,deadZone:.08};
|
||||
}
|
||||
function read(pad,config){
|
||||
if(config?.version===2)return readProfile(pad,config);
|
||||
if(!pad?.connected||!pad.axes)return null;
|
||||
const axis=(index,invert)=>{
|
||||
if(index===-1)return 0;
|
||||
if(!Number.isInteger(index)||index<0||index>=pad.axes.length||!Number.isFinite(pad.axes[index]))return null;
|
||||
return deadZone(pad.axes[index],config.deadZone)*(invert?-1:1);
|
||||
};
|
||||
let turn=axis(config.turn,config.invertTurn),forward=axis(config.forward,config.invertForward),vertical=axis(config.vertical,config.invertVertical);
|
||||
if(turn===null||forward===null||vertical===null)return null;
|
||||
const length=Math.hypot(turn,forward);if(length>1){turn/=length;forward/=length}
|
||||
return {turn,forward,vertical};
|
||||
}
|
||||
class Smoother{
|
||||
constructor(){this.reset()}
|
||||
reset(){this.value=0;this.last=null;this.release=null}
|
||||
step(target,now){
|
||||
target=clamp(target);
|
||||
const dt=this.last===null?0:Math.max(0,Math.min(.05,(now-this.last)/1000));this.last=now;
|
||||
if(target===0){
|
||||
if(!this.release)this.release={at:now,start:this.value};
|
||||
const t=Math.min(1,Math.max(0,(now-this.release.at)/360)),ease=t*t*(3-2*t);
|
||||
this.value=this.release.start*(1-ease);
|
||||
}else{
|
||||
this.release=null;
|
||||
this.value+=(target-this.value)*(1-Math.exp(-dt/.1));
|
||||
if(Math.abs(target-this.value)<.001)this.value=target;
|
||||
}
|
||||
return this.value;
|
||||
}
|
||||
}
|
||||
class Motion{
|
||||
constructor(){this.axes={turn:new Smoother(),forward:new Smoother(),vertical:new Smoother()}}
|
||||
reset(){Object.values(this.axes).forEach(axis=>axis.reset())}
|
||||
step(target,now){
|
||||
const demand=Object.fromEntries(Object.entries(this.axes).map(([key,axis])=>[key,axis.step(target[key],now)]));
|
||||
const length=Math.hypot(demand.turn,demand.forward);if(length>1){demand.turn/=length;demand.forward/=length}
|
||||
return demand;
|
||||
}
|
||||
}
|
||||
const names=['forward','lateral','vertical','turn','pitch','roll'];
|
||||
const pair=(negative='off',positive='off')=>({negative,positive,scale:1});
|
||||
function preset(name='triggers3'){
|
||||
const bindings=Object.fromEntries(names.map(axis=>[axis,pair()]));
|
||||
bindings.forward=pair('button:6','button:7');
|
||||
bindings.vertical=pair('button:0','button:1');
|
||||
bindings.turn=pair('axis:0:-','axis:0:+');
|
||||
if(name==='sixaxis'){
|
||||
bindings.lateral=pair('axis:2:-','axis:2:+');
|
||||
bindings.pitch=pair('axis:1:-','axis:1:+');
|
||||
bindings.roll=pair('button:4','button:5');
|
||||
}else if(name==='classic'){
|
||||
bindings.forward=pair('axis:1:+','axis:1:-');
|
||||
bindings.vertical=pair('axis:3:+','axis:3:-');
|
||||
}
|
||||
return {version:2,preset:name,deadZone:.08,expo:.15,bindings,
|
||||
actions:{lights:'button:2',stream:'button:3',record:'button:8'}};
|
||||
}
|
||||
function migrate(config,pad){
|
||||
if(config?.version===2)return structuredClone(config);
|
||||
if(!config)return preset(pad&&pad.mapping!=='standard'?'classic':'triggers3');
|
||||
const result=preset('classic');
|
||||
for(const axis of ['forward','vertical','turn']){
|
||||
const index=config[axis],invert=config['invert'+axis[0].toUpperCase()+axis.slice(1)];
|
||||
result.bindings[axis]=Number.isInteger(index)&&index>=0?
|
||||
pair(`axis:${index}:${invert?'+':'-'}`,`axis:${index}:${invert?'-':'+'}`):pair();
|
||||
}
|
||||
result.deadZone=config.deadZone??.08;
|
||||
result.actions={lights:'off',stream:'off',record:'off'};
|
||||
return result;
|
||||
}
|
||||
function validProfile(config){
|
||||
const source=value=>typeof value==='string'&&/^(off|button:(?:[0-9]|[12][0-9]|3[01])|axis:(?:[0-9]|1[0-5]):[+-])$/.test(value);
|
||||
return config?.version===2&&Number.isFinite(config.deadZone)&&config.deadZone>=0&&config.deadZone<=.3&&
|
||||
Number.isFinite(config.expo)&&config.expo>=0&&config.expo<=1&&names.every(axis=>{
|
||||
const item=config.bindings?.[axis];return item&&source(item.negative)&&source(item.positive)&&
|
||||
(item.negative==='off'||item.negative!==item.positive)&&Number.isFinite(item.scale)&&item.scale>=0&&item.scale<=1;
|
||||
})&&['lights','stream','record'].every(action=>source(config.actions?.[action])&&!config.actions[action].startsWith('axis:'));
|
||||
}
|
||||
function inputValue(pad,source,zone){
|
||||
if(source==='off')return 0;
|
||||
const parts=source.split(':'),index=Number(parts[1]);
|
||||
if(parts[0]==='button'){
|
||||
const button=pad.buttons?.[index];if(!button||!Number.isFinite(button.value))return null;
|
||||
return index===6||index===7?Math.max(0,deadZone(button.value,zone)):(button.pressed?1:0);
|
||||
}
|
||||
const value=pad.axes?.[index];
|
||||
return Number.isFinite(value)?Math.max(0,deadZone(value,zone)*(parts[2]==='-'?-1:1)):null;
|
||||
}
|
||||
function readProfile(pad,config){
|
||||
if(!pad?.connected||!validProfile(config))return null;
|
||||
const result={};
|
||||
for(const name of names){
|
||||
const item=config.bindings[name],negative=inputValue(pad,item.negative,config.deadZone),positive=inputValue(pad,item.positive,config.deadZone);
|
||||
if(negative===null||positive===null)return null;
|
||||
const value=clamp(positive-negative);
|
||||
result[name]=((1-config.expo)*value+config.expo*value**3)*item.scale;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
function actions(pad,config){
|
||||
return Object.fromEntries(Object.entries(config?.actions||{}).map(([name,source])=>[name,!!pad&&inputValue(pad,source,0)>.5]));
|
||||
}
|
||||
function sources(pad){
|
||||
const choices=[['off','Off']],axes=['Left X','Left Y','Right X','Right Y'];
|
||||
for(let index=0;index<Math.max(4,pad?.axes?.length||0);index++)for(const sign of ['-','+'])
|
||||
choices.push([`axis:${index}:${sign}`,`${axes[index]||'Axis '+index} ${sign==='-'?'−':'+'}`]);
|
||||
const buttons=['A','B','X','Y','LB','RB','LT','RT','View','Menu','Left click','Right click','D-pad up','D-pad down','D-pad left','D-pad right','Guide'];
|
||||
for(let index=0;index<Math.max(17,pad?.buttons?.length||0);index++)choices.push([`button:${index}`,buttons[index]||'Button '+index]);
|
||||
return choices;
|
||||
}
|
||||
root.ControllerInput={deadZone,defaults,read,Motion,names,preset,migrate,validProfile,actions,sources};
|
||||
if(typeof module!=='undefined')module.exports=root.ControllerInput;
|
||||
})(typeof window!=='undefined'?window:globalThis);
|
||||
@@ -0,0 +1,42 @@
|
||||
/* Decorative only: no control demands or vehicle state are accessed here. */
|
||||
(() => {
|
||||
const workspace=document.querySelector('.controls-workspace');
|
||||
if(!workspace)return;
|
||||
const wash=document.createElement('span');
|
||||
wash.className='workspace-light';wash.setAttribute('aria-hidden','true');workspace.append(wash);
|
||||
// Explicit visual surfaces, not every semantic button. The entire sidebar
|
||||
// and text-only Engage control are excluded from local lighting.
|
||||
const pillSelector='.config-btn,.modal .button,.range-pill,.number-pill';
|
||||
const shapeSelector=`${pillSelector},.heave-track,.heave-knob,.joystick,.modal`;
|
||||
const layers=[...document.querySelectorAll(shapeSelector)].filter(host=>!host.closest('.sidebar-deck,#engage')).map(host=>{
|
||||
host.classList.add('light-surface');
|
||||
const layer=document.createElement('span');layer.className='cursor-light';
|
||||
layer.setAttribute('aria-hidden','true');
|
||||
layer.classList.toggle('pill-light',host.matches(pillSelector));
|
||||
host.append(layer);return {host,layer};
|
||||
});
|
||||
let frame=0,point=null;
|
||||
const clear=()=>{point=null;cancelAnimationFrame(frame);frame=0;wash.classList.remove('lit');layers.forEach(({layer})=>layer.classList.remove('lit','near'))};
|
||||
function paint(){
|
||||
frame=0;if(!point)return;
|
||||
const {x,y}=point,r=workspace.getBoundingClientRect();
|
||||
wash.style.setProperty('--light-x',`${x-r.left}px`);wash.style.setProperty('--light-y',`${y-r.top}px`);
|
||||
wash.classList.toggle('lit',x>=r.left&&x<=r.right&&y>=r.top&&y<=r.bottom);
|
||||
for(const {host,layer} of layers){
|
||||
const b=host.getBoundingClientRect();
|
||||
layer.style.setProperty('--light-x',`${x-b.left}px`);layer.style.setProperty('--light-y',`${y-b.top}px`);
|
||||
const inside=x>=b.left&&x<=b.right&&y>=b.top&&y<=b.bottom;
|
||||
// CSS gradient angles start at up; atan2 is measured from the x axis.
|
||||
const angle=Math.atan2(y-(b.top+b.height/2),x-(b.left+b.width/2))*180/Math.PI+90;
|
||||
layer.style.setProperty('--light-angle',`${angle}deg`);
|
||||
layer.classList.toggle('lit',inside);layer.classList.add('near');
|
||||
}
|
||||
}
|
||||
document.addEventListener('pointermove',event=>{
|
||||
if(event.pointerType==='touch'){clear();return}
|
||||
point={x:event.clientX,y:event.clientY};if(!frame)frame=requestAnimationFrame(paint);
|
||||
},{passive:true});
|
||||
document.documentElement.addEventListener('pointerleave',clear);
|
||||
document.addEventListener('pointercancel',clear);window.addEventListener('blur',clear);
|
||||
document.addEventListener('visibilitychange',()=>{if(document.hidden)clear()});
|
||||
})();
|
||||
@@ -0,0 +1,229 @@
|
||||
/* Video stays in the browser's media pipeline; no frames cross the control bridge. */
|
||||
(()=>{
|
||||
const $=id=>document.getElementById(id);
|
||||
const frames={0:['BlueROV1',6,['forward','lateral','vertical','turn','pitch','roll']],1:['Vectored',6,['forward','lateral','vertical','turn','roll']],2:['Full 6DOF',8,['forward','lateral','vertical','turn','pitch','roll']],3:['6DOF 90°',8,['forward','lateral','vertical','turn','pitch','roll']],4:['SimpleROV 3',3,['forward','vertical','turn']],5:['SimpleROV 4',4,['forward','vertical','turn','roll']],6:['SimpleROV 5',5,['forward','lateral','vertical','turn','roll']]};
|
||||
let station={frame:4,video_mode:'whep',video_url:'',lights_relay:-1,camera_relay:-1};
|
||||
try{station={...station,...JSON.parse(localStorage.getItem('sub-v2-station'))}}catch(_){}
|
||||
let host,snapshot={},workspace='drive',streaming=false,connecting=false,generation=0,peer=null,sessionUrl=null,abort=null;
|
||||
let recorder=null,recordToken=null,recordQueue=Promise.resolve(),recordChunks=[],recordBytes=0,ownedStream=null,recordError=null,saving=false;
|
||||
let demoFrame=0,lastPaint=0,streamStarted=0,auxBusy=false,streamTimer=0,capabilitySignature='',demoLastClock=-1;
|
||||
const notify=(message,error=false)=>host?.toast(message,error);
|
||||
const call=(name,...args)=>host.api(name,...args);
|
||||
const demo=()=>!!host?.demo();
|
||||
const frame=()=>frames[(demo()||!snapshot.connected)?station.frame:snapshot.capabilities?.frame]||frames[4];
|
||||
function supported(){
|
||||
let axes=frame()[2];
|
||||
const firmware=snapshot.capabilities?.firmware;
|
||||
if(snapshot.connected&&!demo()&&!(firmware&&(firmware[0]>4||firmware[0]===4&&(firmware[1]===5||firmware[1]>=8))))axes=axes.filter(axis=>axis!=='pitch'&&axis!=='roll');
|
||||
return axes;
|
||||
}
|
||||
function filterDemand(demand){return Object.fromEntries(Object.entries(demand).map(([name,value])=>[name,supported().includes(name)?value:0]))}
|
||||
function view(name){
|
||||
if(name===workspace)return;
|
||||
host.reset();workspace=name;document.body.dataset.view=name;
|
||||
$('dashboard').hidden=name!=='dashboard';document.querySelector('.primary-control-zone').hidden=name!=='drive';
|
||||
$('view-drive').setAttribute('aria-pressed',String(name==='drive'));$('view-dashboard').setAttribute('aria-pressed',String(name==='dashboard'));
|
||||
}
|
||||
function fillStation(){
|
||||
const form=$('station-form');
|
||||
for(const [name,value] of Object.entries(station))if(form.elements[name])form.elements[name].value=value;
|
||||
for(const field of form.querySelectorAll('input,select,button[type=submit]'))field.disabled=host.locked();
|
||||
}
|
||||
function state(text){$('camera-state').textContent=text;$('camera-empty').hidden=false}
|
||||
function showStream(){
|
||||
clearTimeout(streamTimer);connecting=false;
|
||||
$('camera-empty').hidden=true;$('camera-record').disabled=station.video_mode==='mjpeg'&&!demo();
|
||||
$('camera-badge').textContent=demo()?'Demo':'Stream';streamStarted=performance.now();demoLastClock=-1;$('stream-clock').textContent='00:00';
|
||||
}
|
||||
async function startStream(){
|
||||
if(streaming||connecting)return;
|
||||
if(!demo()&&!station.video_url){host.open('station-modal');return}
|
||||
const current=++generation;connecting=true;state('Connecting');$('camera-toggle').textContent='Stop';
|
||||
clearTimeout(streamTimer);streamTimer=setTimeout(()=>{if(current===generation)void failStream('Stream timeout')},10000);
|
||||
try{
|
||||
if(demo()){
|
||||
$('camera-demo').hidden=false;streaming=true;showStream();demoFrame=requestAnimationFrame(drawDemo);
|
||||
}else if(station.video_mode==='mjpeg'){
|
||||
const img=$('camera-image');img.onload=()=>{if(current!==generation)return;streaming=true;img.hidden=false;showStream()};
|
||||
img.onerror=()=>{if(current===generation)void failStream('Stream unavailable')};img.src=station.video_url;
|
||||
}else if(station.video_mode==='video'){
|
||||
const video=$('camera-video');video.onerror=()=>{if(current===generation)void failStream('Stream unavailable')};video.onended=()=>{if(current===generation)void stopStream()};video.src=station.video_url;video.hidden=false;await video.play();
|
||||
if(current!==generation)return;streaming=true;showStream();
|
||||
}else{
|
||||
abort=new AbortController();const timeout=setTimeout(()=>abort?.abort(),10000);
|
||||
try{
|
||||
peer=new RTCPeerConnection({iceServers:[]});const connection=peer;
|
||||
connection.addTransceiver('video',{direction:'recvonly'});
|
||||
connection.ontrack=event=>{if(current!==generation)return;$('camera-video').srcObject=event.streams[0]||new MediaStream([event.track]);$('camera-video').hidden=false;void $('camera-video').play().catch(()=>{});streaming=true;showStream()};
|
||||
connection.onconnectionstatechange=()=>{if(current===generation&&connection.connectionState==='failed')void failStream('Camera disconnected')};
|
||||
await connection.setLocalDescription(await connection.createOffer());
|
||||
if(connection.iceGatheringState!=='complete')await new Promise(resolve=>{
|
||||
const timer=setTimeout(resolve,2000);connection.addEventListener('icegatheringstatechange',()=>{if(connection.iceGatheringState==='complete'){clearTimeout(timer);resolve()}},{once:true});
|
||||
});
|
||||
if(current!==generation)return;
|
||||
const response=await fetch(station.video_url,{method:'POST',headers:{'Content-Type':'application/sdp'},body:connection.localDescription.sdp,signal:abort.signal});
|
||||
if(!response.ok)throw new Error('WHEP '+response.status);
|
||||
const location=response.headers.get('Location');let resource=location?new URL(location,station.video_url).href:null;
|
||||
if(resource&&new URL(resource).origin!==new URL(station.video_url).origin)resource=null;
|
||||
if(current!==generation){if(resource)void fetch(resource,{method:'DELETE'}).catch(()=>{});return}
|
||||
sessionUrl=resource;
|
||||
const sdp=await response.text();if(current!==generation)return;
|
||||
await connection.setRemoteDescription({type:'answer',sdp});
|
||||
}finally{clearTimeout(timeout)}
|
||||
}
|
||||
}catch(error){if(current===generation){await stopStream();state('Unavailable');notify(error.message||'Stream unavailable',true)}}
|
||||
finally{if(current===generation&&streaming)connecting=false}
|
||||
}
|
||||
async function failStream(message){await stopStream();state(message);notify(message,true)}
|
||||
async function stopStream(){
|
||||
++generation;connecting=false;streaming=false;abort?.abort();abort=null;
|
||||
clearTimeout(streamTimer);
|
||||
if(recorder&&recorder.state!=='inactive')recorder.stop();
|
||||
peer?.close();peer=null;
|
||||
if(sessionUrl){void fetch(sessionUrl,{method:'DELETE'}).catch(()=>{});sessionUrl=null}
|
||||
cancelAnimationFrame(demoFrame);demoFrame=0;
|
||||
const video=$('camera-video');video.onerror=video.onended=null;video.pause();video.srcObject=null;video.removeAttribute('src');video.load();video.hidden=true;
|
||||
const img=$('camera-image');img.onload=img.onerror=null;img.removeAttribute('src');img.hidden=true;
|
||||
$('camera-demo').hidden=true;$('camera-record').disabled=true;$('camera-toggle').textContent='Start';$('stream-clock').textContent='';state('Camera off');
|
||||
}
|
||||
function drawDemo(now){
|
||||
if(!streaming||!demo())return;
|
||||
demoFrame=requestAnimationFrame(drawDemo);
|
||||
if(workspace!=='dashboard'||document.hidden||now-lastPaint<40)return;lastPaint=now;
|
||||
const seconds=Math.floor((now-streamStarted)/1000);
|
||||
if(seconds!==demoLastClock){demoLastClock=seconds;$('stream-clock').textContent=String(Math.floor(seconds/60)).padStart(2,'0')+':'+String(seconds%60).padStart(2,'0')}
|
||||
const canvas=$('camera-demo'),rect=canvas.getBoundingClientRect();
|
||||
const width=Math.max(320,Math.round(rect.width)),height=Math.max(180,Math.round(rect.height));
|
||||
if(canvas.width!==width||canvas.height!==height){canvas.width=width;canvas.height=height}
|
||||
const c=canvas.getContext('2d'),gradient=c.createLinearGradient(0,0,0,height);gradient.addColorStop(0,'#28444a');gradient.addColorStop(1,'#101e25');c.fillStyle=gradient;c.fillRect(0,0,width,height);
|
||||
const light=c.createRadialGradient(width*.52,height*.62,4,width*.52,height*.62,width*.6);light.addColorStop(0,'#90aaa324');light.addColorStop(1,'#00000000');c.fillStyle=light;c.fillRect(0,0,width,height);
|
||||
c.strokeStyle='#9eb2a92a';c.lineWidth=1;
|
||||
for(let i=-4;i<8;i++){c.beginPath();c.moveTo(width*.5+i*16,height*.45);c.lineTo(width*.5+i*110,height);c.stroke()}
|
||||
for(let i=0;i<8;i++){const y=height*.45+(i/8)**2*height*.55;c.beginPath();c.moveTo(0,y);c.lineTo(width,y);c.stroke()}
|
||||
const pipe=c.createLinearGradient(0,height*.58,0,height*.76);pipe.addColorStop(0,'#a1afa0');pipe.addColorStop(.4,'#6e8980');pipe.addColorStop(1,'#263e3d');c.fillStyle=pipe;c.fillRect(width*.16,height*.58,width*.72,height*.18);
|
||||
c.strokeStyle='#b3c2b166';c.strokeRect(width*.16,height*.58,width*.72,height*.18);
|
||||
c.fillStyle='#c3d7c977';for(let i=0;i<32;i++){const x=(i*89.7+Math.sin(now/5000+i)*9)%width,y=(i*37.9+now*.004)%height;c.fillRect(x,y,1,1)}
|
||||
c.strokeStyle='#e1f0e477';c.beginPath();c.moveTo(width/2-10,height/2);c.lineTo(width/2+10,height/2);c.moveTo(width/2,height/2-10);c.lineTo(width/2,height/2+10);c.stroke();
|
||||
}
|
||||
async function toggleRecord(){
|
||||
if(saving)return;
|
||||
if(recorder&&recorder.state!=='inactive'){recorder.stop();return}
|
||||
if(!streaming)return;
|
||||
try{
|
||||
const stream=demo()?$('camera-demo').captureStream(24):$('camera-video').srcObject||$('camera-video').captureStream?.();
|
||||
if(!stream?.getVideoTracks().length)throw new Error('Recording unavailable');
|
||||
ownedStream=demo()?stream:null;recordToken=host.bridge()?await call('recording_begin'):null;recordQueue=Promise.resolve();recordChunks=[];recordBytes=0;recordError=null;
|
||||
const mime=['video/webm;codecs=vp8','video/webm'].find(type=>MediaRecorder.isTypeSupported(type));
|
||||
recorder=new MediaRecorder(stream,mime?{mimeType:mime,videoBitsPerSecond:4000000}:undefined);
|
||||
recorder.ondataavailable=event=>{
|
||||
if(!event.data.size)return;
|
||||
if(recordToken){const token=recordToken;recordQueue=recordQueue.then(async()=>{
|
||||
if(recordError)return;
|
||||
const data=await new Promise((resolve,reject)=>{const reader=new FileReader();reader.onload=()=>resolve(String(reader.result).split(',')[1]);reader.onerror=reject;reader.readAsDataURL(event.data)});
|
||||
await call('recording_chunk',token,data);
|
||||
}).catch(error=>{recordError=error;if(recorder?.state==='recording')recorder.stop()})}
|
||||
else{recordChunks.push(event.data);recordBytes+=event.data.size;if(recordBytes>256*1024*1024&&recorder.state==='recording')recorder.stop()}
|
||||
};
|
||||
recorder.onstop=async()=>{
|
||||
saving=true;$('camera-record').textContent='Saving';$('recording-badge').hidden=true;
|
||||
try{
|
||||
await recordQueue;
|
||||
if(recordToken){const path=await call('recording_end',recordToken);notify(recordError?'Recording interrupted':'Video saved',!!recordError);if(path)$('camera-record').title=path}
|
||||
else{const blob=new Blob(recordChunks,{type:recorder.mimeType}),url=URL.createObjectURL(blob),link=document.createElement('a');link.href=url;link.download='argo-'+Date.now()+'.webm';link.click();setTimeout(()=>URL.revokeObjectURL(url),60000);notify('Video saved')}
|
||||
}catch(error){notify(error.message||'Save failed',true)}
|
||||
finally{ownedStream?.getTracks().forEach(track=>track.stop());ownedStream=null;recordToken=null;recordChunks=[];saving=false;$('camera-record').textContent='Record';$('camera-record').setAttribute('aria-pressed','false');recorder=null}
|
||||
};
|
||||
recorder.start(1000);$('camera-record').textContent='Stop record';$('camera-record').setAttribute('aria-pressed','true');$('recording-badge').hidden=false;
|
||||
}catch(error){if(recordToken)await call('recording_end',recordToken).catch(()=>{});recordToken=null;notify(error.message||'Recording unavailable',true)}
|
||||
}
|
||||
async function accessory(name){
|
||||
if(auxBusy||!snapshot.connected)return;
|
||||
const relay=station[name+'_relay'];if(relay<0){host.open('station-modal');return}
|
||||
auxBusy=true;
|
||||
try{
|
||||
const previous=snapshot.accessories?.[name],enabled=!(previous?.accepted&&previous.requested);
|
||||
if(demo())host.demoAccessory(name,enabled);else await call('set_accessory',name,enabled);
|
||||
if(name==='camera'&&!enabled)await stopStream();
|
||||
}catch(error){notify(error.message||'Accessory unavailable',true)}finally{auxBusy=false}
|
||||
}
|
||||
function updateDemand(demand){
|
||||
if(!host)return;
|
||||
const axes=supported();$('extra-controls').hidden=!axes.some(axis=>['lateral','pitch','roll'].includes(axis));
|
||||
for(const label of $('extra-controls').querySelectorAll('[data-motion]')){
|
||||
const axis=label.dataset.motion;label.hidden=!axes.includes(axis);label.querySelector('input').value=Math.round((demand[axis]||0)*100);
|
||||
label.querySelector('input').disabled=!host.touch();label.querySelector('output').value=Math.round((demand[axis]||0)*100);
|
||||
}
|
||||
}
|
||||
function render(s){
|
||||
snapshot=s;
|
||||
if(!host)return;
|
||||
const signature=String(!!s.connected)+':'+supported().join(',');
|
||||
if(capabilitySignature&&signature!==capabilitySignature)host.reset();
|
||||
capabilitySignature=signature;
|
||||
host.scaling((demo()||!s.connected)?station.frame===4:s.capabilities?.frame===4);
|
||||
if($('station-modal').open)for(const field of $('station-form').querySelectorAll('input,select,button[type=submit]'))field.disabled=host.locked();
|
||||
const telemetry=demo()&&s.connected?{
|
||||
attitude:{values:{heading:124,pitch:4.2,roll:-2.1},stale:false},depth:{values:{depth_m:1.8},stale:false},
|
||||
imu:{values:{ax:.12,ay:-.08,az:9.78,gx:.01,gy:.02,gz:0,mx:.21,my:.04,mz:.43},stale:false},pressure:{values:{pressure_hpa:1190,temperature_c:18.6},stale:false}
|
||||
}:s.telemetry||{};
|
||||
const value=(group,key)=>s.connected&&!telemetry[group]?.stale?telemetry[group]?.values?.[key]:null;
|
||||
const format=(value,unit,digits=1)=>Number.isFinite(value)?value.toFixed(digits)+unit:'—';
|
||||
const show=(id,number,unit,digits)=>{$(id).textContent=format(number,unit,digits);$(id).parentElement.dataset.stale=String(!Number.isFinite(number))};
|
||||
show('live-depth',value('depth','depth_m'),' m',2);show('live-heading',value('attitude','heading'),'°',0);show('live-pitch',value('attitude','pitch'),'°',1);show('live-roll',value('attitude','roll'),'°',1);
|
||||
const battery=s.battery||{},fresh=s.connected&&!s.battery_stale;
|
||||
const current=fresh&&!battery.current_stale?battery.current_a:null;
|
||||
show('live-current',current,' A',1);show('live-power',fresh&&Number.isFinite(current)&&Number.isFinite(battery.voltage)?current*battery.voltage:null,' W',1);
|
||||
show('live-charge',fresh?battery.consumed_mah:null,' mAh',0);
|
||||
for(const [id,keys,unit] of [['live-accel',['ax','ay','az'],'m/s²'],['live-gyro',['gx','gy','gz'],'rad/s'],['live-mag',['mx','my','mz'],'G']]){
|
||||
const values=keys.map(key=>value('imu',key));$(id).textContent=values.every(Number.isFinite)?values.map(value=>value.toFixed(2)).join(' / ')+' '+unit:'—';
|
||||
}
|
||||
show('live-temperature',value('pressure','temperature_c'),' °C',1);show('live-pressure',value('pressure','pressure_hpa'),' hPa',1);
|
||||
$('sensor-state').textContent=demo()&&s.connected?'Demo':!s.connected?'Offline':Object.values(telemetry).some(group=>!group.stale)?'Receiving':'No data';
|
||||
$('detected-frame').textContent=s.connected&&!demo()?(frames[s.capabilities?.frame]?.[0]||'Detecting'):demo()?'Demo':'Offline';
|
||||
for(const [name,id] of [['lights','lights-toggle'],['camera','camera-power']]){
|
||||
const item=s.accessories?.[name],pending=item&&item.accepted===null&&!item.error;
|
||||
$(id).disabled=!s.connected||station[name+'_relay']<0||!!pending;$(id).setAttribute('aria-pressed',String(!!(item?.accepted&&item.requested)));
|
||||
$(id).title=item?.error||(pending?'Awaiting ACK':station[name+'_relay']<0?'Configure relay':'Relay '+station[name+'_relay']);
|
||||
}
|
||||
if(streaming)$('stream-clock').textContent=new Date(performance.now()-streamStarted).toISOString().slice(14,19);
|
||||
$('sensor-record').setAttribute('aria-pressed',String(!!s.sensor_recording));$('sensor-record').textContent=s.sensor_recording?'Stop log':'Log data';
|
||||
$('sensor-record').disabled=!s.connected||demo();
|
||||
updateDemand(host.demand());
|
||||
}
|
||||
function action(name){if(name==='stream')void(streaming||connecting?stopStream():startStream());else if(name==='record')void toggleRecord();else if(name==='lights')void accessory('lights')}
|
||||
function init(callbacks){
|
||||
host=callbacks;
|
||||
$('view-drive').onclick=()=>view('drive');$('view-dashboard').onclick=()=>view('dashboard');
|
||||
$('camera-toggle').onclick=()=>action('stream');$('camera-record').onclick=()=>action('record');$('lights-toggle').onclick=()=>accessory('lights');$('camera-power').onclick=()=>accessory('camera');
|
||||
$('sensor-record').onclick=async()=>{try{if(demo())throw new Error('Live telemetry required');if(!host.bridge())throw new Error('Connect desktop');const path=await call('sensor_record',!snapshot.sensor_recording);if(path)$('sensor-record').title=path}catch(error){notify(error.message,true)}};
|
||||
for(const name of ['lights_relay','camera_relay']){
|
||||
const select=$('station-form').elements[name];select.add(new Option('Off','-1'));for(let index=0;index<16;index++)select.add(new Option('Relay '+index,String(index)));
|
||||
}
|
||||
const stationObserver=new MutationObserver(()=>{if($('station-modal').open)fillStation()});stationObserver.observe($('station-modal'),{attributes:true,attributeFilter:['open']});
|
||||
document.querySelector('[data-open=station-modal]').addEventListener('click',fillStation);
|
||||
$('station-form').onsubmit=async event=>{
|
||||
event.preventDefault();const form=event.currentTarget,feedback=form.querySelector('.form-feedback');
|
||||
if(host.locked()){feedback.textContent='Disengage first';feedback.hidden=false;return}
|
||||
const config=Object.fromEntries(new FormData(form));for(const name of ['frame','lights_relay','camera_relay'])config[name]=Number(config[name]);
|
||||
try{
|
||||
if(config.video_url){const url=new URL(config.video_url);if(!['http:','https:'].includes(url.protocol)||url.username||url.password)throw new Error('Use an HTTP stream URL')}
|
||||
if(config.lights_relay>=0&&config.lights_relay===config.camera_relay)throw new Error('Use separate relays');
|
||||
if(streaming||connecting)await stopStream();
|
||||
station=host.bridge()?await call('save_station_settings',config):config;localStorage.setItem('sub-v2-station',JSON.stringify(station));
|
||||
host.previewFrame(station.frame,frames[station.frame][1]);host.reset();host.close($('station-modal'));notify('Vehicle saved');render(snapshot);
|
||||
}catch(error){feedback.textContent=error.message||String(error);feedback.hidden=false}
|
||||
};
|
||||
for(const label of $('extra-controls').querySelectorAll('[data-motion]')){
|
||||
const input=label.querySelector('input'),axis=label.dataset.motion;
|
||||
input.oninput=()=>{if(host.touch())host.axis(axis,Number(input.value)/100)};
|
||||
const release=()=>{if(host.touch())host.axis(axis,0);input.value=0};
|
||||
input.onpointerup=release;input.onpointercancel=release;input.onblur=release;input.onkeyup=release;
|
||||
}
|
||||
for(const [name,text,value] of [['attitude_hz','Attitude · Hz',2],['depth_hz','Depth · Hz',2],['imu_hz','IMU · Hz',1],['pressure_hz','Pressure · Hz',1]]){
|
||||
const label=document.createElement('label'),span=document.createElement('span'),select=document.createElement('select');span.textContent=text;select.name=name;
|
||||
for(const rate of [0,1,2,5,10])select.add(new Option(rate===0?'Off':String(rate),String(rate)));select.value=String(value);label.append(span,select);$('link-form').querySelectorAll('.form-grid')[1].append(label);
|
||||
}
|
||||
addEventListener('pagehide',()=>void stopStream());document.body.dataset.view='drive';render(snapshot);
|
||||
}
|
||||
window.V2={init,render,filterDemand,action,updateDemand,station:()=>station,setStation:config=>{station={...station,...config};render(snapshot)}};
|
||||
})();
|
||||
+129
-22
@@ -3,8 +3,9 @@
|
||||
<head>
|
||||
<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=20260827-bridge-v5">
|
||||
<title>Argo V2</title>
|
||||
<link rel="stylesheet" href="styles.css?v=20261022-v2">
|
||||
<link rel="stylesheet" href="v2.css?v=20261022-v2">
|
||||
</head>
|
||||
<body>
|
||||
<main class="app-shell">
|
||||
@@ -34,7 +35,7 @@
|
||||
<!-- Telemetry / Status Zone -->
|
||||
<section class="telemetry-zone" aria-label="Vehicle Telemetry and Status">
|
||||
<div class="deck-card model-card">
|
||||
<div class="rov-stage" aria-label="Top view of three-thruster ROV">
|
||||
<div class="rov-stage" aria-label="Vehicle model">
|
||||
<canvas id="model-canvas" aria-label="Interactive STL vehicle model"></canvas>
|
||||
<div id="model-status" class="model-status">Initializing…</div>
|
||||
<div class="model-tools">
|
||||
@@ -44,20 +45,25 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Battery Status -->
|
||||
<button class="battery-card ghost" data-open="battery-modal">
|
||||
<span><small>Battery</small><strong id="battery-title">—</strong></span><i id="battery-percent">waiting</i>
|
||||
<b><em id="battery-fill"></em></b>
|
||||
<button id="link-quality" type="button" class="link-quality" data-grade="offline" title="Open link-quality details" aria-haspopup="dialog" aria-controls="link-quality-modal">
|
||||
<span class="link-quality-dot" aria-hidden="true"></span>
|
||||
<span><small>Data link</small><strong id="link-quality-grade">Offline</strong></span>
|
||||
<i><span id="link-quality-roundtrip">waiting for connection</span><span id="link-quality-downlink"></span></i>
|
||||
</button>
|
||||
|
||||
<div class="deck-status-bar">
|
||||
<header class="activity-heading">Activity:</header>
|
||||
<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 class="activity-actions"><button type="button" id="console" class="logs-link" title="Read live console" aria-label="Read live console">Console</button><button type="button" id="logs" class="logs-link" title="Open session logs" aria-label="Open session logs">Logs</button></div>
|
||||
</div>
|
||||
<button class="battery-card ghost" data-open="battery-modal" aria-label="Battery status and settings">
|
||||
<span class="battery-meter" aria-hidden="true"><em id="battery-fill"></em></span>
|
||||
<span class="battery-copy"><span class="battery-summary"><strong id="battery-percent">—</strong><small id="battery-title">No voltage</small></span></span>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
</aside>
|
||||
@@ -66,6 +72,7 @@
|
||||
<section class="controls-workspace" aria-label="Primary Vehicle Controls">
|
||||
<!-- Frameless Drag & Window Controls Header -->
|
||||
<div class="workspace-topbar">
|
||||
<div class="input-mode-controls"><div class="input-mode-switch" role="group" aria-label="Control input"><button type="button" id="input-keyboard" aria-pressed="true">Keyboard</button><button type="button" id="input-joystick" aria-pressed="false">Joystick</button></div><button type="button" id="controller-settings" class="controller-settings" data-open="controller-modal">Mapping</button></div>
|
||||
<div class="workspace-drag-area pywebview-drag-region"></div>
|
||||
<div class="window-actions">
|
||||
<button id="window-min" aria-label="Minimize" title="Minimize"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/></svg></button>
|
||||
@@ -74,6 +81,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="workspace-nav"><div class="view-switch" role="group" aria-label="Workspace"><button id="view-drive" type="button" aria-pressed="true">Drive</button><button id="view-dashboard" type="button" aria-pressed="false">Dashboard</button></div><span class="version-mark">V2</span><button class="quiet-button" data-open="station-modal" type="button">Vehicle</button></div>
|
||||
<p id="controller-status" class="controller-status" role="status">Keyboard + touch</p>
|
||||
<section id="dashboard" class="dashboard" aria-label="Vehicle dashboard" hidden>
|
||||
<div class="camera-stage">
|
||||
<video id="camera-video" muted autoplay playsinline hidden></video><img id="camera-image" alt="Camera stream" hidden><canvas id="camera-demo" aria-label="Simulated inspection camera" hidden></canvas>
|
||||
<div id="camera-empty" class="camera-empty"><svg viewBox="0 0 48 48" aria-hidden="true"><rect x="5" y="12" width="27" height="24" rx="6"/><path d="m32 20 11-6v20l-11-6"/></svg><span id="camera-state">Camera off</span></div>
|
||||
<div class="camera-overlay"><span id="camera-badge">Preview</span><span id="recording-badge" hidden>● REC</span><span id="stream-clock"></span></div>
|
||||
</div>
|
||||
<div class="dashboard-actions"><button id="camera-toggle" type="button">Start</button><button id="camera-record" type="button" aria-pressed="false" disabled>Record</button><button id="lights-toggle" type="button" aria-pressed="false" disabled>Lights</button><button id="camera-power" type="button" aria-pressed="false" disabled>Camera power</button><button id="sensor-record" type="button" aria-pressed="false">Log data</button></div>
|
||||
<div class="telemetry-strip" aria-label="Live telemetry"><div><span>Depth</span><strong id="live-depth">—</strong></div><div><span>Heading</span><strong id="live-heading">—</strong></div><div><span>Current</span><strong id="live-current">—</strong></div><div><span>Pitch</span><strong id="live-pitch">—</strong></div><div><span>Roll</span><strong id="live-roll">—</strong></div><div><span>Power</span><strong id="live-power">—</strong></div></div>
|
||||
<details class="sensor-details"><summary>Sensors <span id="sensor-state">Offline</span></summary><div class="sensor-values"><div><span>Acceleration</span><strong id="live-accel">—</strong></div><div><span>Gyroscope</span><strong id="live-gyro">—</strong></div><div><span>Magnetometer</span><strong id="live-mag">—</strong></div><div><span>Temperature</span><strong id="live-temperature">—</strong></div><div><span>Pressure</span><strong id="live-pressure">—</strong></div><div><span>Charge used</span><strong id="live-charge">—</strong></div></div></details>
|
||||
</section>
|
||||
<section class="primary-control-zone" aria-label="Primary Control Zone">
|
||||
<!-- Reserved Engage / Disarm row -->
|
||||
<div class="engage-header-zone">
|
||||
@@ -92,12 +111,12 @@
|
||||
<!-- Steering / Throttle Joystick -->
|
||||
<article class="control-card steer-card">
|
||||
<header>
|
||||
<div><small>steer + throttle</small></div>
|
||||
<span class="key-hint">w a s d</span>
|
||||
<div title="Steer and throttle · W A S D"></div>
|
||||
|
||||
</header>
|
||||
<div class="joystick-pad">
|
||||
<div id="joystick" class="joystick" touch-action="none">
|
||||
<canvas id="joystick-canvas" aria-label="Steering and throttle joystick; W A S D keys"></canvas>
|
||||
<canvas id="joystick-canvas" title="Steer and throttle · W A S D" aria-label="Steering and throttle joystick; W A S D keys"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
@@ -109,13 +128,13 @@
|
||||
<!-- Vertical Thruster Slider -->
|
||||
<article class="control-card vertical-card">
|
||||
<header>
|
||||
<div><small>vertical</small></div>
|
||||
<span class="key-hint">r / f</span>
|
||||
<div title="Vertical thrust · R / F"></div>
|
||||
|
||||
</header>
|
||||
<div class="heave-pad">
|
||||
<div class="vertical-control">
|
||||
<span>rise</span>
|
||||
<div id="heave" class="heave-track" touch-action="none">
|
||||
<div id="heave" title="Vertical thrust · R / F" class="heave-track" touch-action="none">
|
||||
<div class="heave-center"></div>
|
||||
<div id="heave-fill" class="heave-fill"></div>
|
||||
<div id="heave-knob" class="heave-knob"></div>
|
||||
@@ -132,27 +151,115 @@
|
||||
<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>
|
||||
<button id="gain-down" type="button" aria-label="Decrease output limit"><svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="m14 6-6 6 6 6"/></svg></button>
|
||||
<input id="gain" aria-label="Shared motor output limit" type="range" min="0" max="100" step="1" value="20">
|
||||
<button id="gain-up" type="button" aria-label="Increase output limit"><svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="m10 6 6 6-6 6"/></svg></button>
|
||||
</div>
|
||||
</label>
|
||||
<button class="button subtle config-btn" data-open="motors-modal">Motor setup</button>
|
||||
</div>
|
||||
<div id="extra-controls" class="extra-controls" hidden><label data-motion="lateral"><span>Strafe</span><input type="range" min="-100" max="100" value="0" aria-label="Strafe demand"><output>0</output></label><label data-motion="pitch"><span>Pitch</span><input type="range" min="-100" max="100" value="0" aria-label="Pitch demand"><output>0</output></label><label data-motion="roll"><span>Roll</span><input type="range" min="-100" max="100" value="0" aria-label="Roll demand"><output>0</output></label></div>
|
||||
</section>
|
||||
</section>
|
||||
<aside id="console-dock" class="console-dock" aria-labelledby="console-title" hidden>
|
||||
<header class="console-dock-header"><div><h2 id="console-title" title="Local session messages. Select a message to expand its details.">Console</h2></div><button id="console-close" type="button" class="console-close" aria-label="Hide console" title="Hide console"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button></header>
|
||||
<div class="console-toolbar"><label><span class="visually-hidden">Console filter</span><select id="console-filter"><option value="useful">Useful traffic</option><option value="all">All traffic</option></select></label><button id="console-pause" type="button" aria-pressed="false">Pause</button></div>
|
||||
<p id="console-state" class="console-state" role="status" title="Pausing the viewer does not stop session logging." hidden></p>
|
||||
<div class="console-streams"><section class="console-side"><header><i class="rx-dot" aria-hidden="true" title="Vehicle to PC · new displayed message"></i><span>RX</span></header><div id="console-rx-output" class="console-output" tabindex="0" aria-label="Received messages"></div></section><section class="console-side"><header><i class="tx-dot" aria-hidden="true" title="PC to vehicle · new displayed message"></i><span>TX</span></header><div id="console-tx-output" class="console-output" tabindex="0" aria-label="Sent messages"></div></section></div>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<div id="toast" class="toast"></div>
|
||||
|
||||
<!-- Modals -->
|
||||
<dialog id="link-modal" class="modal"><button class="modal-close" data-close>×</button><small>connection</small><h2>Link Settings</h2><div class="form-grid two"><label><span>Baud rate</span><select id="baud"><option>9600</option><option>19200</option><option>38400</option><option selected>57600</option><option>115200</option></select></label><label><span>Control rate</span><select id="rate"><option>10</option><option selected>20</option></select></label></div><div style="margin-top:14px;"><label style="display:flex;flex-direction:column;gap:6px;"><span style="font-size:11px;font-weight:500;color:var(--muted)">Custom Port / Endpoint</span><div style="display:flex;gap:8px;"><input id="custom-port-input" placeholder="e.g. COM3 or tcp:127.0.0.1:5760" style="flex:1;height:32px;padding:0 12px;font-size:11px;"><button type="button" id="custom-port-btn" class="button subtle" style="white-space:nowrap;">Use Port</button></div></label></div><p class="note" style="margin-top:14px;">20 Hz is recommended for smooth intermediate commands on this link.</p></dialog>
|
||||
<dialog id="battery-modal" class="modal"><button class="modal-close" data-close>×</button><small>Power</small><h2>Battery Settings</h2><form id="battery-form" class="form-grid three"><label><span>Cells (S)</span><div class="number-pill"><button type="button" class="num-step down" tabindex="-1">‹</button><input name="cells" type="number" min="1" step="1"><button type="button" class="num-step up" tabindex="-1">›</button></div></label><label><span>Capacity (mAh)</span><div class="number-pill"><button type="button" class="num-step down" tabindex="-1">‹</button><input name="capacity_mah" type="number" min="1" step="50"><button type="button" class="num-step up" tabindex="-1">›</button></div></label><label><span>C rating</span><div class="number-pill"><button type="button" class="num-step down" tabindex="-1">‹</button><input name="c_rating" type="number" min="1" step=".1"><button type="button" class="num-step up" tabindex="-1">›</button></div></label><label><span>Full V / cell</span><div class="number-pill"><button type="button" class="num-step down" tabindex="-1">‹</button><input name="full_v_per_cell" type="number" step=".01"><button type="button" class="num-step up" tabindex="-1">›</button></div></label><label><span>Empty V / cell</span><div class="number-pill"><button type="button" class="num-step down" tabindex="-1">‹</button><input name="empty_v_per_cell" type="number" step=".01"><button type="button" class="num-step up" tabindex="-1">›</button></div></label><label><span>Warning %</span><div class="number-pill"><button type="button" class="num-step down" tabindex="-1">‹</button><input name="warning_percent" type="number" min="0" max="100" step="1"><button type="button" class="num-step up" tabindex="-1">›</button></div></label><div class="modal-actions wide"><button type="button" class="button subtle" data-close>Cancel</button><button class="button connect-button">Save Settings</button></div></form></dialog>
|
||||
<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>
|
||||
<dialog id="link-modal" class="modal" aria-labelledby="link-title">
|
||||
<button class="modal-close" type="button" data-close aria-label="Close window"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button><h2 id="link-title">Link settings</h2>
|
||||
<form id="link-form" title="Baud changes apply on the next connection.">
|
||||
<section class="settings-section"><h3>Serial connection</h3>
|
||||
<div class="form-grid two"><label><span>Baud rate</span><select id="baud" name="baud"><option value="9600">9600</option><option value="19200">19200</option><option value="38400">38400</option><option value="57600" selected>57600</option><option value="115200">115200</option></select></label><label><span>Control rate · Hz</span><select id="rate" name="control_hz"><option value="10">10</option><option value="20" selected>20</option></select></label></div>
|
||||
|
||||
<label class="custom-port-label"><span>Custom port or endpoint</span><div class="custom-port-row"><input id="custom-port-input" placeholder="COM3 or tcp:127.0.0.1:5760" autocomplete="off"><button type="button" id="custom-port-btn" class="button subtle">Use port</button></div></label>
|
||||
<p id="custom-port-status" class="note" role="status"></p>
|
||||
</section>
|
||||
<section class="settings-section"><h3 title="Lower rates leave more bandwidth for controls. Rates reset after a reboot.">Telemetry rates</h3>
|
||||
<div class="form-grid two">
|
||||
<label><span>Quality check · Hz</span><select name="ping_hz"><option value="1" selected>1</option><option value="2">2</option><option value="5">5</option><option value="10">10</option></select></label>
|
||||
<label><span>Battery / system · Hz</span><select name="system_hz"><option value="0">Off</option><option value="1" selected>1</option><option value="2">2</option><option value="5">5</option><option value="10">10</option></select></label>
|
||||
<label><span>Battery detail · Hz</span><select name="battery_hz"><option value="0">Off</option><option value="1" selected>1</option><option value="2">2</option><option value="5">5</option><option value="10">10</option></select></label>
|
||||
<label><span>Motor outputs · Hz</span><select name="servo_hz"><option value="0">Off</option><option value="1">1</option><option value="2" selected>2</option><option value="5">5</option><option value="10">10</option></select></label>
|
||||
<label><span>RC channels · Hz</span><select name="rc_hz"><option value="0">Off</option><option value="1">1</option><option value="2" selected>2</option><option value="5">5</option><option value="10">10</option></select></label>
|
||||
<label><span>ESC telemetry · Hz</span><select name="esc_hz"><option value="0">Off</option><option value="1" selected>1</option><option value="2">2</option><option value="5">5</option><option value="10">10</option></select></label>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<p class="form-feedback" role="alert" hidden></p>
|
||||
<div class="modal-actions"><button type="button" class="button subtle" data-close>Cancel</button><button type="submit" class="button modal-primary">Apply settings</button></div>
|
||||
</form>
|
||||
</dialog>
|
||||
<dialog id="link-quality-modal" class="modal quality-modal" aria-labelledby="quality-title">
|
||||
<button class="modal-close" type="button" data-close aria-label="Close window"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button><h2 id="quality-title">Link quality</h2>
|
||||
|
||||
<div class="quality-summary" title="Round-trip replies, incoming packet loss, and heartbeat freshness."><div><span>Round trip</span><strong id="quality-detail-rtt">—</strong></div><div><span>Probe loss</span><strong id="quality-detail-loss">—</strong></div><div><span>FC → PC loss</span><strong id="quality-detail-downlink">—</strong></div></div>
|
||||
<section class="heavy-test-panel"><h3 title="Tests 1, 5 and 10 Hz for about 35 seconds while disarmed. The live check resumes afterward.">Extended test</h3>
|
||||
<div id="heavy-quality-status" class="heavy-quality-status" role="status">Connect to run an extended test.</div>
|
||||
<div id="heavy-quality-results" class="heavy-quality-results"></div>
|
||||
<p id="heavy-quality-error" class="form-feedback" role="alert" hidden></p>
|
||||
<div class="modal-actions"><button id="heavy-quality-run" type="button" class="button modal-primary">Run extended test</button><button id="heavy-quality-cancel" type="button" class="button subtle" hidden>Stop test</button></div>
|
||||
</section>
|
||||
</dialog>
|
||||
<dialog id="battery-modal" class="modal" aria-labelledby="battery-title-modal">
|
||||
<button class="modal-close" type="button" data-close aria-label="Close window"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button><h2 id="battery-title-modal">Battery</h2>
|
||||
<section class="battery-live" aria-label="Live battery readings">
|
||||
<div class="battery-live-grid">
|
||||
<div><span>Pack voltage</span><strong id="battery-live-voltage">—</strong></div>
|
||||
<div><span>Current draw</span><strong id="battery-live-current">—</strong></div>
|
||||
<div><span>Charge used</span><strong id="battery-live-consumed">—</strong><small id="battery-live-consumed-source"></small></div>
|
||||
<div><span>Capacity left</span><strong id="battery-live-remaining">—</strong></div>
|
||||
</div>
|
||||
<p id="battery-live-note" class="note">Waiting for battery telemetry.</p>
|
||||
</section>
|
||||
<form id="battery-form" title="Charge is estimated from voltage; capacity and C rating describe the battery.">
|
||||
<div class="form-grid two"><label><span>Cells · S</span><div class="number-pill"><button type="button" class="num-step down" aria-label="Decrease Cells · S">‹</button><input name="cells" type="number" min="1" step="1" max="16" required><button type="button" class="num-step up" aria-label="Increase Cells · S">›</button></div></label><label><span>Capacity · mAh</span><div class="number-pill"><button type="button" class="num-step down" aria-label="Decrease Capacity · mAh">‹</button><input name="capacity_mah" type="number" min="50" step="50" required><button type="button" class="num-step up" aria-label="Increase Capacity · mAh">›</button></div></label><label><span>C rating</span><div class="number-pill"><button type="button" class="num-step down" aria-label="Decrease C rating">‹</button><input name="c_rating" type="number" min="1" step="0.1" required><button type="button" class="num-step up" aria-label="Increase C rating">›</button></div></label><label><span>Low charge warning · %</span><div class="number-pill"><button type="button" class="num-step down" aria-label="Decrease Low charge warning · %">‹</button><input name="warning_percent" type="number" min="0" step="1" max="100" required><button type="button" class="num-step up" aria-label="Increase Low charge warning · %">›</button></div></label></div>
|
||||
<section class="settings-section"><h3>Voltage per cell</h3><div class="form-grid two"><label><span>Full · V</span><div class="number-pill"><button type="button" class="num-step down" aria-label="Decrease Full · V">‹</button><input name="full_v_per_cell" type="number" min="0.01" step="0.01" required><button type="button" class="num-step up" aria-label="Increase Full · V">›</button></div></label><label><span>Empty · V</span><div class="number-pill"><button type="button" class="num-step down" aria-label="Decrease Empty · V">‹</button><input name="empty_v_per_cell" type="number" min="0.01" step="0.01" required><button type="button" class="num-step up" aria-label="Increase Empty · V">›</button></div></label></div></section>
|
||||
<p class="form-feedback" role="alert" hidden></p>
|
||||
<div class="modal-actions"><button type="button" class="button subtle" data-close>Cancel</button><button type="submit" class="button modal-primary">Save battery</button></div>
|
||||
</form>
|
||||
</dialog>
|
||||
<dialog id="motors-modal" class="modal motor-modal" aria-labelledby="motors-title">
|
||||
<button class="modal-close" type="button" data-close aria-label="Close window"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button><h2 id="motors-title">Motor outputs</h2><p id="motor-status" class="note" role="status">Offline</p>
|
||||
<p id="motor-feedback" class="form-feedback" role="alert" hidden></p>
|
||||
<div class="motor-scale-heading"><span>Output</span><label class="switch-control"><input id="motor-scale-independent" type="checkbox"><span class="switch-track" aria-hidden="true"></span><span>Independent</span></label></div>
|
||||
<div id="motor-list" class="motor-list"></div>
|
||||
</dialog>
|
||||
<dialog id="controller-modal" class="modal controller-modal" aria-labelledby="controller-title">
|
||||
<button class="modal-close" type="button" data-close aria-label="Close window"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button><h2 id="controller-title">Joystick setup</h2>
|
||||
<form id="controller-form">
|
||||
<div class="form-grid two"><label><span>Controller</span><select id="controller-device"></select></label><label><span>Preset</span><select id="controller-preset"><option value="triggers3">Triggers · 3</option><option value="sixaxis">Six axes</option><option value="classic">Classic sticks</option><option value="custom">Custom</option></select></label></div>
|
||||
<p id="controller-axes" class="note" hidden>Xbox · offline</p>
|
||||
<div class="binding-head"><span>Motion</span><span>Negative</span><span>Positive</span><span></span><span>Limit %</span></div>
|
||||
<div id="controller-bindings"></div>
|
||||
<div class="form-grid two mapping-tuning"><label><span>Dead zone %</span><input name="deadZone" type="number" min="0" max="30" step="1" required></label><label><span>Expo %</span><input name="expo" type="number" min="0" max="100" step="1" required></label></div>
|
||||
<details class="mapping-actions"><summary>Buttons</summary><div class="form-grid three"><label><span>Lights</span><select name="lights"></select></label><label><span>Stream</span><select name="stream"></select></label><label><span>Record</span><select name="record"></select></label></div></details>
|
||||
|
||||
<p class="form-feedback" role="alert" hidden></p>
|
||||
<div class="modal-actions"><button type="button" class="button subtle" data-close>Cancel</button><button type="submit" class="button modal-primary">Save mapping</button></div>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<dialog id="station-modal" class="modal station-modal" aria-labelledby="station-title"><button class="modal-close" type="button" data-close aria-label="Close window"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button><h2 id="station-title">Vehicle</h2><form id="station-form">
|
||||
<div class="form-grid two"><label><span>Preview frame</span><select name="frame"><option value="4">SimpleROV · 3</option><option value="0">BlueROV1 · 6</option><option value="1">Vectored · 6</option><option value="2">Full 6DOF · 8</option><option value="3">6DOF 90° · 8</option><option value="5">SimpleROV · 4</option><option value="6">SimpleROV · 5</option></select></label><div class="detected-frame"><span>FC frame</span><strong id="detected-frame">Offline</strong></div></div>
|
||||
<section class="settings-section"><h3>Camera</h3><label><span>Stream type</span><select name="video_mode"><option value="whep">WebRTC · WHEP</option><option value="video">HTTP video</option><option value="mjpeg">MJPEG</option></select></label><label><span>Stream URL</span><input name="video_url" type="url" placeholder="http://192.168.2.2:8889/cam/whep" autocomplete="off"></label></section>
|
||||
<section class="settings-section"><h3>Accessories</h3><div class="form-grid two"><label><span>Lights relay</span><select name="lights_relay"></select></label><label><span>Camera relay</span><select name="camera_relay"></select></label></div></section>
|
||||
<p class="form-feedback" role="alert" hidden></p><div class="modal-actions"><button type="button" class="button subtle" data-close>Cancel</button><button type="submit" class="button modal-primary">Save</button></div>
|
||||
</form></dialog>
|
||||
|
||||
<script src="model-viewer.js?v=20260826-controls-v2"></script>
|
||||
<script src="joystick-3d.js?v=20260827-polish-v3"></script>
|
||||
<script src="joystick-3d.js?v=20261002-spacing-motion-v2"></script>
|
||||
<script src="control-state.js?v=20260827-state-v1"></script>
|
||||
<script src="app.js?v=20260827-bridge-v6"></script>
|
||||
<script src="controller-input.js?v=20261022-v2"></script>
|
||||
<script src="dashboard.js?v=20261022-v2"></script>
|
||||
<script src="console-view.js?v=20261002-console-v2"></script>
|
||||
<script src="app.js?v=20261022-v2"></script>
|
||||
<script src="cursor-light.js?v=20260827-directional-v10"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -23,20 +23,29 @@
|
||||
if(amount>.025){ctx.beginPath();ctx.moveTo(cx,cy);ctx.lineTo(kx,ky);ctx.strokeStyle='rgba(78,91,85,.24)';ctx.lineWidth=3;ctx.lineCap='round';ctx.stroke()}
|
||||
|
||||
ctx.save();ctx.shadowColor='rgba(17,25,21,.22)';ctx.shadowBlur=activePointer===null?8:12;ctx.shadowOffsetY=3;
|
||||
ctx.beginPath();ctx.arc(kx,ky,knob,0,Math.PI*2);ctx.fillStyle=activePointer===null?'#555':'#353535';ctx.fill();ctx.restore();
|
||||
const handle=ctx.createLinearGradient(kx-knob*.574,ky-knob*.819,kx+knob*.574,ky+knob*.819);
|
||||
handle.addColorStop(0,activePointer===null?'#737373':'#606060');handle.addColorStop(1,activePointer===null?'#454545':'#393939');
|
||||
ctx.beginPath();ctx.arc(kx,ky,knob,0,Math.PI*2);ctx.fillStyle=handle;ctx.fill();ctx.restore();
|
||||
ctx.beginPath();ctx.arc(kx,ky,knob,0,Math.PI*2);ctx.strokeStyle='rgba(255,255,255,.42)';ctx.lineWidth=1;ctx.stroke();
|
||||
ctx.beginPath();ctx.arc(kx,ky,4,0,Math.PI*2);ctx.fillStyle='#dfe5e1';ctx.fill();
|
||||
}
|
||||
function publish(){window.setJoyControl?.(x,y)}
|
||||
function setPosition(nextX,nextY,notify=true){const length=Math.hypot(nextX,nextY);if(length>1){nextX/=length;nextY/=length}x=nextX;y=nextY;draw();if(notify)publish()}
|
||||
function positionFromEvent(event){const rect=canvas.getBoundingClientRect(),g=geometry();setPosition((event.clientX-rect.left-g.cx)/g.travel,(event.clientY-rect.top-g.cy)/g.travel)}
|
||||
function returnToCenter(){cancelAnimationFrame(returnFrame);const startX=x,startY=y,start=performance.now();const tick=now=>{const p=Math.min(1,(now-start)/360),smooth=p*p*(3-2*p);setPosition(startX*(1-smooth),startY*(1-smooth));if(p<1)returnFrame=requestAnimationFrame(tick)};returnFrame=requestAnimationFrame(tick)}
|
||||
function easeTo(nextX,nextY){
|
||||
cancelAnimationFrame(returnFrame);
|
||||
const length=Math.hypot(nextX,nextY);if(length>1){nextX/=length;nextY/=length}
|
||||
const startX=x,startY=y,start=performance.now();
|
||||
const tick=now=>{const p=Math.min(1,(now-start)/360),smooth=p*p*(3-2*p);setPosition(startX+(nextX-startX)*smooth,startY+(nextY-startY)*smooth);if(p<1)returnFrame=requestAnimationFrame(tick)};
|
||||
returnFrame=requestAnimationFrame(tick);
|
||||
}
|
||||
function returnToCenter(){easeTo(0,0)}
|
||||
function release(event){if(activePointer===null||(event?.pointerId!=null&&event.pointerId!==activePointer))return;const pointer=activePointer;activePointer=null;try{canvas.releasePointerCapture(pointer)}catch(_){}canvas.classList.remove('is-active');draw();returnToCenter()}
|
||||
|
||||
canvas.addEventListener('pointerdown',event=>{if(activePointer!==null||!window.canDrive?.()||event.button>0)return;activePointer=event.pointerId;cancelAnimationFrame(returnFrame);canvas.setPointerCapture(event.pointerId);canvas.classList.add('is-active');positionFromEvent(event);event.preventDefault()});
|
||||
canvas.addEventListener('pointerdown',event=>{if(activePointer!==null||!window.canTouchControl?.()||event.button>0)return;activePointer=event.pointerId;cancelAnimationFrame(returnFrame);canvas.setPointerCapture(event.pointerId);canvas.classList.add('is-active');positionFromEvent(event);event.preventDefault()});
|
||||
canvas.addEventListener('pointermove',event=>{if(event.pointerId===activePointer)positionFromEvent(event)});
|
||||
canvas.addEventListener('pointerup',release);canvas.addEventListener('pointercancel',release);canvas.addEventListener('lostpointercapture',event=>{if(event.pointerId===activePointer)release(event)});
|
||||
canvas.addEventListener('pointerleave',event=>{if(event.pointerType==='mouse'&&event.pointerId===activePointer)release(event)});
|
||||
addEventListener('resize',resize);resize();
|
||||
window.joystick3D={setPos(nextX,nextY){cancelAnimationFrame(returnFrame);setPosition(nextX,nextY)},easeBack(){if(activePointer===null)returnToCenter()},reset(){const pointer=activePointer;activePointer=null;cancelAnimationFrame(returnFrame);if(pointer!==null)try{canvas.releasePointerCapture(pointer)}catch(_){}canvas.classList.remove('is-active');setPosition(0,0,false)},getState(){return {x,y,active:activePointer!==null}}};
|
||||
addEventListener('resize',resize);new ResizeObserver(resize).observe(host);resize();
|
||||
window.joystick3D={setVisual(nextX,nextY){setPosition(nextX,nextY,false)},setPos(nextX,nextY){cancelAnimationFrame(returnFrame);setPosition(nextX,nextY)},easeTo(nextX,nextY){if(activePointer===null)easeTo(nextX,nextY)},easeBack(){if(activePointer===null)returnToCenter()},reset(){const pointer=activePointer;activePointer=null;cancelAnimationFrame(returnFrame);if(pointer!==null)try{canvas.releasePointerCapture(pointer)}catch(_){}canvas.classList.remove('is-active');setPosition(0,0,false)},getState(){return {x,y,active:activePointer!==null}}};
|
||||
})();
|
||||
|
||||
+433
-29
@@ -1,5 +1,19 @@
|
||||
/* SUB Control UI – Desktop Layout */
|
||||
|
||||
/* Isolated pointer lighting: no layout or input interception. */
|
||||
.controls-workspace { position:relative; isolation:isolate; }
|
||||
.workspace-light { position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; opacity:0; background:radial-gradient(600px circle at var(--light-x) var(--light-y),rgba(255,255,255,.35),transparent 75%); transition:opacity .35s ease-out; }
|
||||
.workspace-light.lit { opacity:1; }
|
||||
.light-surface { position:relative; }
|
||||
.cursor-light { position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit; }
|
||||
.cursor-light::before,.cursor-light::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s ease-out; }
|
||||
.cursor-light.pill-light::before { background:radial-gradient(240px circle at var(--light-x) var(--light-y),rgba(110,190,235,.08),transparent 80%); }
|
||||
.cursor-light::after { padding:1px; background:linear-gradient(var(--light-angle,315deg),transparent 30%,rgba(255,255,255,.13) 65%,rgba(255,255,255,.50) 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
|
||||
.cursor-light.lit::before,.cursor-light.near::after { opacity:1; }
|
||||
.joystick > .cursor-light { inset:7%; border-radius:50%; }
|
||||
#engage > .cursor-light::after { display:none; }
|
||||
@media (prefers-reduced-motion:reduce) { .workspace-light,.cursor-light::before,.cursor-light::after { transition:none; } }
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #0c1012;
|
||||
@@ -14,7 +28,7 @@
|
||||
--amber: #f2c675;
|
||||
--red: #f0958b;
|
||||
--shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||||
font-family: Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@@ -525,6 +539,7 @@ body[data-app-state="link_degraded"] .status-line .status-dot {
|
||||
margin-left: auto;
|
||||
}
|
||||
.logs-link:hover { color: #f1f4f2; }
|
||||
.activity-actions { display:flex; align-items:center; gap:12px; }
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
PRIMARY CONTROL ZONE (Workspace)
|
||||
@@ -540,6 +555,59 @@ body[data-app-state="link_degraded"] .status-line .status-dot {
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ── Active MAVLink link test ── */
|
||||
.link-quality {
|
||||
display: grid;
|
||||
grid-template-columns: 8px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
min-height: 48px;
|
||||
padding: 3px 0;
|
||||
color: #eef2f0;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border-radius: 9px;
|
||||
transition: background-color .18s ease;
|
||||
}
|
||||
.link-quality:hover,.link-quality:focus-visible { background:rgba(255,255,255,.055); outline:none; }
|
||||
.link-quality-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #667074;
|
||||
}
|
||||
.link-quality span:not(.link-quality-dot) { display:flex; flex-direction:column; gap:1px; min-width:0; }
|
||||
.link-quality small { color:#8d979a; font-size:10px; font-weight:400; }
|
||||
.link-quality strong { font-size:14px; font-weight:500; line-height:1.15; }
|
||||
.link-quality i {
|
||||
grid-column: 2;
|
||||
min-width: 0;
|
||||
color: #aab2b4;
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
font-style: normal;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.link-quality i span { display:block; }
|
||||
.link-quality[data-grade="excellent"] .link-quality-dot { background:#bce96c; box-shadow:0 0 8px rgba(188,233,108,.35); }
|
||||
.link-quality[data-grade="good"] .link-quality-dot { background:#85c7e8; }
|
||||
.link-quality[data-grade="fair"] .link-quality-dot { background:#e7bf69; }
|
||||
.link-quality[data-grade="poor"] .link-quality-dot { background:#f07f78; box-shadow:0 0 8px rgba(240,127,120,.3); }
|
||||
.link-quality[data-grade="testing"] .link-quality-dot { background:#aab3b6; }
|
||||
.quality-modal { width:min(520px,calc(100vw - 32px)); }
|
||||
.heavy-test-panel { margin-top:18px; padding-top:14px; border-top:1px solid rgba(128,145,145,.2); }
|
||||
.heavy-quality-status { font-size:14px; font-weight:500; }
|
||||
.heavy-quality-results { display:grid; gap:6px; margin-top:12px; }
|
||||
.heavy-result-row { display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:7px 10px; border-radius:10px; background:rgba(120,140,140,.08); font-size:12px; }
|
||||
.heavy-result-row strong { flex:none; }
|
||||
.heavy-result-row span { text-align:right; color:var(--muted); }
|
||||
.primary-control-zone {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
@@ -645,23 +713,27 @@ body[data-app-state="link_degraded"] .status-line .status-dot {
|
||||
pointer-events: none;
|
||||
}
|
||||
.engage-button.charging { transition: background-color .24s ease, border-color .24s ease, color .2s ease; }
|
||||
.engage-face { position: relative; display: grid; place-items: center; min-width: 74px; }
|
||||
.engage-face > span { grid-area: 1/1; font-size: 11px; font-weight: 650; letter-spacing: .12em; }
|
||||
.engage-face { position:relative; display:grid; place-items:center; width:7.5em; height:1em; min-width:0; text-align:center; font-size:clamp(52px,11cqw,90px); }
|
||||
.engage-face > span { grid-area:1/1; justify-self:center; align-self:start; font-size:11px; font-weight:650; letter-spacing:.12em; white-space:nowrap; }
|
||||
.engage-label {
|
||||
position:relative;
|
||||
color: transparent;
|
||||
background: linear-gradient(105deg,#f4f6f3 20%,#ffffff 43%,#9da6a2 50%,#ffffff 57%,#f4f6f3 80%);
|
||||
background-size: 250% 100%;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
text-align:center;
|
||||
transition:transform 180ms cubic-bezier(.77,0,.175,1);
|
||||
}
|
||||
#engage .engage-label.is-appending { transform:translateX(var(--engage-append-shift,0px)); }
|
||||
.arm:not(:disabled):not(.charging):not(.canceling):not(.state-transition) .engage-label { animation: engage-shimmer 4.8s linear infinite; }
|
||||
.engage-suffix { display:inline-block; opacity:0; clip-path:inset(0 100% 0 0); transform:translateX(-.08em); transition:clip-path 180ms cubic-bezier(.77,0,.175,1),opacity 120ms ease-out,transform 180ms cubic-bezier(.77,0,.175,1); }
|
||||
.state-transition .engage-suffix,.engage-suffix.is-visible { opacity:1; clip-path:inset(0); transform:translateX(0); }
|
||||
.engage-progress-label {
|
||||
color: #a9ed72;
|
||||
clip-path: inset(0 calc(100% - var(--engage-progress)) 0 0);
|
||||
transition: opacity .18s ease;
|
||||
}
|
||||
.state-transition .engage-face { animation: state-label .24s ease-out; }
|
||||
@keyframes state-label { from {opacity:.35} to {opacity:1} }
|
||||
@keyframes engage-shimmer { 0%,35%{background-position:160% 0} 80%,100%{background-position:-90% 0} }
|
||||
.engage-button:hover { transform:none; }
|
||||
.engage-button.pending { background:#405346; border-color:#516e56; }
|
||||
@@ -947,21 +1019,14 @@ body[data-telemetry-stale="true"] #battery-fill { opacity:.35; }
|
||||
color: #7a8280;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.motor-modal { width: min(600px, calc(100vw - 40px)); }
|
||||
.motor-head, .motor-row {
|
||||
display: grid;
|
||||
grid-template-columns: 70px 1fr 80px 75px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid #e0e4df;
|
||||
font-size: 10.5px;
|
||||
}
|
||||
.motor-head {
|
||||
font-weight: 500;
|
||||
color: #727a7c;
|
||||
border-bottom: 1.5px solid #c8cec6;
|
||||
}
|
||||
.motor-modal { width: min(860px, calc(100vw - 40px)); }
|
||||
.battery-live { margin:14px 0 20px; padding:14px; border-radius:16px; background:#f0f3ef; }
|
||||
.battery-live-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
|
||||
.battery-live-grid > div { min-width:0; padding:10px 11px; border-radius:12px; background:#fff; }
|
||||
.battery-live-grid span,.battery-live-grid small { display:block; color:#727b77; font-size:11px; }
|
||||
.battery-live-grid strong { display:block; margin-top:7px; color:#303936; font-size:18px; font-weight:500; font-variant-numeric:tabular-nums; }
|
||||
.battery-live-grid small { margin-top:4px; }
|
||||
.battery-live .note { margin:10px 0 0; line-height:1.5; font-size:12px; }
|
||||
|
||||
/* ── Toast ── */
|
||||
.toast {
|
||||
@@ -1011,6 +1076,37 @@ body[data-app-state="link_degraded"] button[data-open="motors-modal"] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.console-modal {
|
||||
width: min(1040px, calc(100vw - 64px));
|
||||
max-width: 1040px;
|
||||
}
|
||||
.console-split { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; min-width:0; }
|
||||
.console-split section { min-width:0; }
|
||||
.console-split header { display:flex; align-items:center; gap:7px; margin:0 2px 7px; }
|
||||
.console-split header i { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
|
||||
.console-split header .rx-dot { background:#79c8eb; }
|
||||
.console-split header .tx-dot { background:#bce96c; }
|
||||
.console-split header span { color:#303836; font-size:12px; font-weight:600; }
|
||||
.console-split header small { margin-left:auto; color:#7d8683; font-size:10px; }
|
||||
.console-split pre {
|
||||
height: min(55vh, 480px);
|
||||
margin: 0;
|
||||
padding: 14px;
|
||||
overflow: auto;
|
||||
border: 1px solid #d9ddda;
|
||||
border-radius: 12px;
|
||||
background: #171b1d;
|
||||
color: #dce4e1;
|
||||
font: 11px/1.45 Consolas, "SFMono-Regular", monospace;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
user-select: text;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.console-split { grid-template-columns:1fr; }
|
||||
.console-split pre { height:220px; }
|
||||
}
|
||||
|
||||
/* A pending or unknown armed state must stay legible, even without a link. */
|
||||
#engage.danger:disabled, #engage.pending:disabled { opacity:1 !important; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@@ -1039,7 +1135,7 @@ body #connect, body #connect:hover, body #connect.is-connected, body #connect.is
|
||||
}
|
||||
body #connect .btn-label { animation:none; }
|
||||
.telemetry-zone { gap:20px; }
|
||||
.rov-stage { height:clamp(180px,32vh,250px); min-height:180px; touch-action:none; }
|
||||
.rov-stage { flex:1; height:auto; min-height:0; width:100%; touch-action:none; border-radius:31px; overflow:hidden; background:transparent; }
|
||||
.model-card { justify-content:flex-start; }
|
||||
.rov-stage::before { display:none; }
|
||||
.model-tools button { font-size:12px; padding:7px 11px; }
|
||||
@@ -1052,27 +1148,31 @@ body #connect .btn-label { animation:none; }
|
||||
.activity-history li { font-size:12px; font-weight:300; line-height:1.25; color:#999; overflow-wrap:anywhere; }
|
||||
.activity-history #status-text { color:#fff; font-size:12px; font-weight:300; }
|
||||
.activity-history li[hidden] { display:none; }
|
||||
.controls-workspace { padding:8px 20px 16px; background:#f6f6f6; }
|
||||
.controls-workspace { padding:8px 20px 16px; background:#ededed; }
|
||||
.primary-control-zone { grid-template-rows:120px minmax(0,1fr) 52px; }
|
||||
.engage-header-zone { display:block; position:relative; height:120px; min-height:0; margin:0; padding:0; }
|
||||
body #engage { width:calc(100% + 40px); margin-left:-20px; height:104px; padding:0 20px; border:0; border-radius:0; background:transparent; box-shadow:none; }
|
||||
body #engage:hover, body #engage.pending, body #engage.danger { background:transparent; border:0; }
|
||||
#engage::before, #engage::after { display:none; }
|
||||
body #engage { align-items:flex-end; padding-bottom:12px; }
|
||||
.engage-face > span { font-family:"Segoe UI Variable Display","Segoe UI",Arial,sans-serif; font-size:clamp(64px,7.3vw,90px); font-weight:200; letter-spacing:.015em; line-height:1; padding-bottom:.22em; margin-bottom:-.22em; }
|
||||
.engage-face > span { font-family:inherit; font-size:clamp(52px,11cqw,90px); font-weight:200; letter-spacing:.015em; line-height:1; padding-bottom:.22em; margin-bottom:-.22em; }
|
||||
#engage { --engage-green:#4cce73; --engage-glow:drop-shadow(0 0 2px rgba(76,206,115,.3)); }
|
||||
#engage .engage-label { color:#777; background:none; animation:none; }
|
||||
.engage-sheen-label { color:#fff; pointer-events:none; opacity:0; mask-image:linear-gradient(105deg,transparent 40%,#000 49%,#000 51%,transparent 60%); mask-size:300% 100%; mask-repeat:no-repeat; -webkit-mask-image:linear-gradient(105deg,transparent 40%,#000 49%,#000 51%,transparent 60%); -webkit-mask-size:300% 100%; -webkit-mask-repeat:no-repeat; }
|
||||
#engage:is(.arm,.danger):not(:disabled):not(.charging):not(.canceling):not(.state-transition) .engage-sheen-label { opacity:1; animation:engage-sweep 2.2s linear infinite; }
|
||||
@keyframes engage-sweep { from {mask-position:100% 0;-webkit-mask-position:100% 0} to {mask-position:0% 0;-webkit-mask-position:0% 0} }
|
||||
.engage-progress-label { color:#4cce73; clip-path:none; filter:drop-shadow(0 0 2px rgba(76,206,115,.3)); mask-image:linear-gradient(to right,#000 calc(var(--engage-progress) - 8%),transparent var(--engage-progress)); -webkit-mask-image:linear-gradient(to right,#000 calc(var(--engage-progress) - 8%),transparent var(--engage-progress)); }
|
||||
.engage-progress-label { color:var(--engage-green); clip-path:none; filter:var(--engage-glow); mask-image:linear-gradient(to right,#000 calc(var(--engage-progress) - 8%),transparent var(--engage-progress)); -webkit-mask-image:linear-gradient(to right,#000 calc(var(--engage-progress) - 8%),transparent var(--engage-progress)); }
|
||||
#engage.charged .engage-progress-label { mask-image:none; -webkit-mask-image:none; }
|
||||
#engage.pending .engage-label { color:#5a8753; background:none; }
|
||||
#engage.danger .engage-label { color:#171717; }
|
||||
#engage.pending .engage-label { color:var(--engage-green); filter:var(--engage-glow); background:none; }
|
||||
#engage.danger .engage-label { color:#777; }
|
||||
#engage:focus-visible { outline:2px solid #8d9991; outline-offset:-6px; }
|
||||
.control-status { position:absolute; z-index:2; top:100%; left:0; right:0; margin:0; min-height:0; text-align:center; font-size:12px; max-height:48px; overflow:auto; background:#f6f6f6; }
|
||||
.control-status { position:absolute; z-index:2; top:100%; left:0; right:0; margin:0; min-height:0; text-align:center; font-size:12px; max-height:48px; overflow:auto; background:transparent; }
|
||||
.control-status[hidden] { display:none; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.engage-sheen-label { display:none; }
|
||||
#engage .engage-label.is-appending { transition:none; transform:none; }
|
||||
.engage-suffix { transition:opacity var(--ui-duration,180ms) ease-out; }
|
||||
.state-transition .engage-suffix { clip-path:inset(0); transform:none; }
|
||||
}
|
||||
.controls-grid {
|
||||
--joy-size:min(54vh,calc(100vw - 480px),460px);
|
||||
@@ -1094,10 +1194,11 @@ body #engage { align-items:flex-end; padding-bottom:12px; }
|
||||
.heave-fill { left:22px; right:22px; background:#999; }
|
||||
.control-toolbar { display:flex; justify-content:center; align-items:center; gap:16px; padding-top:12px; }
|
||||
.control-toolbar .output-limit { width:auto; flex-direction:row; align-items:center; font-size:13px; gap:12px; color:#777; }
|
||||
.control-toolbar .output-limit span { flex:0 0 128px; width:128px; gap:8px; align-items:baseline; justify-content:space-between; }
|
||||
.control-toolbar .output-limit > span { flex:0 0 128px; width:128px; gap:8px; align-items:baseline; justify-content:space-between; }
|
||||
.control-toolbar .output-limit b { display:inline-block; flex:0 0 4ch; width:4ch; text-align:right; color:#333; font-variant-numeric:tabular-nums; }
|
||||
.control-toolbar .range-pill { width:175px; grid-template-columns:28px 1fr 28px; height:40px; background:#e7e7e7; border:0; }
|
||||
.control-toolbar .range-pill button { width:28px; height:40px; color:#666; font-size:22px; }
|
||||
.control-toolbar .range-pill button { width:28px; height:40px; padding:0; display:grid; place-items:center; color:#666; line-height:1; }
|
||||
.control-toolbar .range-pill button svg { width:24px; height:24px; display:block; }
|
||||
.control-toolbar .range-pill input[type="range"] { background:#c4c4c4; height:20px; background-clip:content-box; padding:8px 0; }
|
||||
.control-toolbar .range-pill input[type="range"]::-webkit-slider-thumb { width:18px; height:18px; background:#858585; }
|
||||
.control-toolbar .config-btn { width:auto; height:40px; padding:0 18px; font-size:13px; background:#e7e7e7; color:#444; border:0; border-radius:999px; }
|
||||
@@ -1115,3 +1216,306 @@ body:not([data-controls-enabled="true"]) .controls-grid { opacity:.65; }
|
||||
.telemetry-zone { gap:12px; }
|
||||
.activity-history { gap:4px; }
|
||||
}
|
||||
|
||||
/* Settings windows: readable fields, predictable spacing, one action hierarchy. */
|
||||
.modal {
|
||||
color-scheme: light;
|
||||
width: min(560px, calc(100vw - 32px));
|
||||
max-height: calc(100dvh - 32px);
|
||||
padding: 28px;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
border: 1px solid #dedfdf;
|
||||
border-radius: 20px;
|
||||
background: #f6f6f6;
|
||||
box-shadow: 0 24px 80px rgba(0,0,0,.24);
|
||||
backdrop-filter: none;
|
||||
}
|
||||
.modal[open] { animation: dialog-in .16s ease-out; }
|
||||
.modal.closing { animation: dialog-out .12s ease-in forwards; }
|
||||
.modal::backdrop { background: rgba(15,19,22,.4); backdrop-filter: blur(3px); }
|
||||
.modal > small { display:block; color:#73787b; font-size:12px; font-weight:400; margin:0 42px 6px 0; }
|
||||
.modal h2 { margin:0 40px 18px 0; font-size:28px; letter-spacing:-.025em; font-weight:400; }
|
||||
.modal h3 { margin:0 0 10px; font-size:14px; font-weight:500; color:#454b4e; }
|
||||
.modal .note { font-size:13px; line-height:1.5; margin:8px 0 0; color:#676e71; }
|
||||
.modal-close { top:16px; right:16px; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#e9ebec; color:#555c60; font-size:25px; line-height:1; }
|
||||
.modal-close:hover { background:#dfe3e5; }
|
||||
.settings-section { margin-top:22px; }
|
||||
.settings-section + .settings-section { border-top:1px solid #e0e3e4; padding-top:20px; }
|
||||
.modal .form-grid { gap:16px; margin-top:10px; }
|
||||
.modal .form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
|
||||
.modal label { min-width:0; font-size:13px; line-height:1.35; font-weight:400; color:#50585c; }
|
||||
.modal label > span { display:block; margin-bottom:7px; }
|
||||
.modal input,.modal select { width:100%; min-width:0; height:42px; padding:0 13px; border:1px solid #d7dcde; border-radius:999px; background:#fff; color:#272c2f; font-size:14px; font-weight:400; }
|
||||
.modal select { padding-right:28px; }
|
||||
.modal :is(button,input,select,summary,pre):focus-visible { outline:2px solid #6598b5; outline-offset:3px; }
|
||||
.modal .number-pill { height:42px; grid-template-columns:36px minmax(0,1fr) 36px; background:#fff; border:1px solid #d7dcde; }
|
||||
.modal .number-pill button { width:36px; height:40px; font-size:24px; color:#5b666b; }
|
||||
.modal .number-pill input { border:0; padding:0; height:40px; appearance:textfield; -moz-appearance:textfield; }
|
||||
.modal .number-pill input::-webkit-inner-spin-button { appearance:none; }
|
||||
.modal .number-pill:focus-within { border-color:#6598b5; }
|
||||
.custom-port-label { display:block; margin-top:16px; }
|
||||
.custom-port-row { display:flex; gap:8px; }
|
||||
.custom-port-row input { flex:1; }
|
||||
.modal .button { min-height:42px; height:auto; padding:10px 18px; font-size:14px; font-weight:400; border-radius:999px; white-space:normal; }
|
||||
.modal .button.subtle { background:#e9ebec; border:0; color:#424b50; }
|
||||
.modal .modal-primary { background:#333e44; color:#fff; border:0; }
|
||||
.modal .modal-primary:hover { background:#455660; }
|
||||
.modal .modal-actions { margin-top:24px; gap:10px; align-items:center; }
|
||||
.modal .form-feedback { margin:16px 0 0; padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.5; color:#9b392e; background:#f5e6e3; }
|
||||
.modal [hidden] { display:none !important; }
|
||||
.modal [data-busy="true"] { cursor:progress; }
|
||||
.motor-modal { width:min(860px,calc(100vw - 32px)); }
|
||||
@media (max-width:650px) { .battery-live-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
|
||||
.motor-other { margin-top:16px; }
|
||||
.motor-other summary { cursor:pointer; padding:12px 0; color:#697278; font-size:13px; }
|
||||
.quality-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:18px; }
|
||||
.quality-summary div { border-radius:14px; background:#e9ebec; padding:14px 12px; min-width:0; }
|
||||
.quality-summary span { display:block; font-size:12px; color:#697278; margin-bottom:8px; }
|
||||
.quality-summary strong { font-size:20px; font-weight:400; font-variant-numeric:tabular-nums; }
|
||||
.modal .heavy-quality-status { padding:12px; background:#e9ebec; border-radius:12px; font-size:14px; margin-top:14px; }
|
||||
.modal .heavy-result-row { font-size:13px; padding:10px 12px; font-variant-numeric:tabular-nums; }
|
||||
.console-modal { width:min(1020px,calc(100vw - 32px)); }
|
||||
.console-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; }
|
||||
.console-toolbar .note { margin:0; }
|
||||
.modal .console-split header small { font-size:12px; }
|
||||
.modal .console-split pre { height:clamp(180px,48vh,430px); padding:14px; font-size:12px; line-height:1.55; border-radius:12px; }
|
||||
@keyframes dialog-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
|
||||
@keyframes dialog-out { to { opacity:0; transform:translateY(5px); } }
|
||||
@media (max-width:520px) {
|
||||
.modal { padding:22px 18px; }
|
||||
.modal .form-grid.two { grid-template-columns:1fr; }
|
||||
.quality-summary { gap:6px; }
|
||||
.quality-summary div { padding:12px 8px; }
|
||||
.quality-summary strong { font-size:17px; }
|
||||
}
|
||||
@media (prefers-reduced-motion:reduce) {
|
||||
.modal[open],.modal.closing { animation:none; }
|
||||
}
|
||||
|
||||
/* Input selection stays separate from vehicle arming and command ownership. */
|
||||
#engage:focus,#engage:focus-visible { outline:none!important; box-shadow:none!important; }
|
||||
.controls-workspace { container-type:inline-size; }
|
||||
.input-mode-controls { display:flex; align-items:center; gap:6px; flex-shrink:0; -webkit-app-region:no-drag; }
|
||||
.input-mode-switch { display:flex; padding:3px; gap:2px; background:#dedede; border-radius:999px; }
|
||||
.input-mode-switch button,.controller-settings { border:0; border-radius:999px; background:transparent; color:#686868; padding:7px 11px; font-size:12px; cursor:pointer; }
|
||||
.input-mode-switch button[aria-pressed="true"] { background:#fafafa; color:#252525; box-shadow:0 1px 3px #0000000c; }
|
||||
.controller-settings { background:#dedede; }
|
||||
.controller-status { margin:0; height:24px; flex-shrink:0; font-size:12px; line-height:20px; color:#6d7478; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
body[data-input-mode="joystick"] .key-hint { visibility:hidden; }
|
||||
body[data-input-mode="joystick"] :is(#joystick-canvas,#heave) { pointer-events:none; cursor:default; }
|
||||
.controls-grid { --joy-size:min(52vh,calc(100cqw - 136px),460px); }
|
||||
.control-toolbar { flex-wrap:wrap; gap:8px 14px; }
|
||||
.primary-control-zone { grid-template-rows:120px minmax(0,1fr) auto; }
|
||||
.control-toolbar { min-height:52px; }
|
||||
.engage-face > span { font-size:clamp(52px,11cqw,90px); }
|
||||
.controller-mapping-head,.controller-mapping-row { display:grid; grid-template-columns:1fr 1.25fr 50px; gap:14px; align-items:center; }
|
||||
.controller-mapping-head { color:#777; font-size:12px; margin-bottom:8px; }
|
||||
.controller-mapping-row { margin:8px 0; }
|
||||
.modal .controller-mapping-row input[type="checkbox"] { width:22px; height:22px; min-height:0; margin:auto; padding:0; accent-color:#527f9b; }
|
||||
.controller-mapping-row label { display:flex; align-items:center; }
|
||||
#controller-axes { min-height:22px; margin:12px 0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; color:#65737d; font-size:12px; }
|
||||
#controller-form > label { margin-top:18px; }
|
||||
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
|
||||
|
||||
/* Read-only local console, not a modal: driving stays available while it is open. */
|
||||
.app-shell.console-open { grid-template-columns:260px minmax(0,1fr) 340px; }
|
||||
.console-dock[hidden] { display:none!important; }
|
||||
.console-dock { display:flex; flex-direction:column; min-width:0; min-height:0; padding:18px 16px; background:#f5f5f5; border-left:1px solid #d8dcde; color:#29343b; color-scheme:light; }
|
||||
.console-dock-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
|
||||
.console-dock-header small { font-size:11px; color:#81888d; }
|
||||
.console-dock-header h2 { font-size:22px; font-weight:400; margin:4px 0 0; letter-spacing:-.02em; }
|
||||
.console-close { width:38px; height:38px; flex-shrink:0; border:0; border-radius:999px; background:#e7e8e9; color:#48525a; font-size:25px; cursor:pointer; }
|
||||
.console-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; }
|
||||
.console-toolbar label { flex:1; min-width:0; }
|
||||
.console-toolbar select,.console-toolbar button { height:34px; border:0; border-radius:999px; background:#e7e9ea; color:#42525e; font-size:12px; padding:0 12px; }
|
||||
.console-toolbar select { width:100%; }
|
||||
.console-toolbar button { cursor:pointer; }
|
||||
.console-state { min-height:28px; margin:10px 0 8px; font-size:11px; color:#7e868b; line-height:1.4; }
|
||||
.console-streams { display:grid; grid-template-rows:1fr 1fr; gap:14px; min-height:0; flex:1; }
|
||||
.console-side { display:flex; flex-direction:column; min-height:0; }
|
||||
.console-side > header { display:flex; align-items:center; gap:6px; padding:0 4px 8px; font-size:12px; font-weight:500; color:#435966; }
|
||||
.console-side > header small { margin-left:auto; font-size:11px; font-weight:300; color:#899198; }
|
||||
.console-side > header i { width:6px; height:6px; border-radius:50%; background:#5888a3; }
|
||||
.console-side > header .tx-dot { background:#659287; }
|
||||
.console-output { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; padding:0 8px; border:1px solid #e0e3e5; border-radius:12px; background:#fafbfc; color:#343d43; font:12px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif; }
|
||||
.console-row { border-bottom:1px solid #e9edef; }
|
||||
.console-row:last-child { border-bottom:0; }
|
||||
.console-row summary { display:flex; gap:8px; cursor:pointer; padding:10px 0; list-style:none; }
|
||||
.console-row summary::-webkit-details-marker { display:none; }
|
||||
.console-row time { flex-shrink:0; color:#929ba1; font:10px/1.8 ui-monospace,Consolas,monospace; font-variant-numeric:tabular-nums; }
|
||||
.console-message { min-width:0; display:block; overflow-wrap:anywhere; }
|
||||
.console-message strong { display:block; font-size:11px; font-weight:500; color:#517c97; letter-spacing:.025em; }
|
||||
.console-row[data-tone="command"] strong { color:#467a69; }
|
||||
.console-row[data-tone="warning"] strong { color:#aa664b; }
|
||||
.console-fields { display:flex; flex-wrap:wrap; gap:2px 8px; font-size:11px; }
|
||||
.console-fields i { color:#929a9f; font-style:normal; }
|
||||
.console-fields b { font-weight:400; color:#45535d; }
|
||||
.console-row pre { margin:0 0 10px; padding:10px; border-radius:8px; background:#eef1f3; color:#52616c; font:11px/1.5 ui-monospace,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
|
||||
.console-empty { color:#959da3; font-size:12px; line-height:1.6; margin:14px 0; }
|
||||
@media (max-height:610px) { .primary-control-zone { grid-template-rows:100px minmax(0,1fr) auto; } .controls-grid { --joy-size:min(46vh,calc(100cqw - 136px),420px); } }
|
||||
@media (max-width:1000px) {
|
||||
.app-shell.console-open { grid-template-columns:260px minmax(0,1fr); }
|
||||
.console-dock { position:absolute; top:0; right:0; bottom:0; width:min(340px,calc(100vw - 32px)); z-index:12; box-shadow:-8px 0 24px #00000012; border-radius:12px 0 0 12px; }
|
||||
}
|
||||
|
||||
/* Three shared sizes: compact 32px, standard 40px, primary 62px. */
|
||||
:root {
|
||||
--pill-sm:32px; --pill-md:40px; --pill-lg:62px; --pill-radius:999px;
|
||||
--battery-charge:#63cb85; --battery-low:#e98a7b;
|
||||
}
|
||||
.port-row select,.icon-button { height:var(--pill-sm); }
|
||||
.icon-button { width:var(--pill-sm); }
|
||||
body #connect { height:var(--pill-lg); border-radius:var(--pill-radius); }
|
||||
.input-mode-switch { height:var(--pill-md); padding:4px; }
|
||||
.input-mode-switch button { height:var(--pill-sm); padding:0 12px; }
|
||||
.controller-settings { height:var(--pill-md); padding:0 14px; }
|
||||
.input-mode-switch button:disabled { opacity:.65!important; }
|
||||
.input-mode-switch button[aria-pressed="true"]:disabled { opacity:1!important; }
|
||||
.control-toolbar .range-pill,.control-toolbar .config-btn { height:var(--pill-md); border-radius:var(--pill-radius); }
|
||||
.control-toolbar .range-pill button { height:var(--pill-md); }
|
||||
.window-actions button { width:var(--pill-md); height:var(--pill-md); }
|
||||
.console-toolbar select,.console-toolbar button { height:var(--pill-sm); border-radius:var(--pill-radius); }
|
||||
.modal input,.modal select,.modal .number-pill { height:var(--pill-md); border-radius:var(--pill-radius); }
|
||||
.modal .number-pill input,.modal .number-pill button { height:calc(var(--pill-md) - 2px); }
|
||||
.modal .button { min-height:var(--pill-md); padding:8px 18px; border-radius:var(--pill-radius); }
|
||||
.modal .controller-mapping-row input[type="checkbox"] { height:22px; border-radius:4px; }
|
||||
|
||||
/* Fixed SVG geometry avoids font baselines shifting the close icon. */
|
||||
.modal-close,.modal-close:hover,.console-close,.console-close:hover,.window-actions .window-close,.window-actions .window-close:hover {
|
||||
display:grid; place-items:center; width:var(--pill-md); height:var(--pill-md);
|
||||
padding:0; border:0; border-radius:0; background:transparent; box-shadow:none;
|
||||
}
|
||||
.modal-close svg,.console-close svg { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
|
||||
.modal-close:hover,.console-close:hover { color:#222; }
|
||||
.heave-knob { height:var(--pill-md); background:linear-gradient(145deg,#737373,#454545); }
|
||||
|
||||
/* Activity has a heading, compact event history, then explicit actions. */
|
||||
.telemetry-zone { gap:16px; }
|
||||
.deck-status-bar { flex-shrink:0; margin-top:0; padding-top:12px; }
|
||||
.activity-heading { display:block; margin:0 0 8px; color:#eee; font-size:14px; font-weight:650; }
|
||||
.activity-history { gap:4px; margin:0 0 10px; }
|
||||
.activity-actions { display:flex; gap:8px; }
|
||||
.activity-actions .logs-link {
|
||||
display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
|
||||
height:var(--pill-sm); min-width:76px; padding:0 14px; margin:0;
|
||||
border:0; border-radius:var(--pill-radius); background:#414141; color:#eee;
|
||||
font-size:12px; font-weight:400; letter-spacing:0; line-height:1; cursor:pointer;
|
||||
}
|
||||
.activity-actions .logs-link:hover { background:#4b4b4b; }
|
||||
.activity-actions .logs-link:focus-visible { outline:2px solid #a5c0d0; outline-offset:2px; }
|
||||
.activity-actions .logs-link[aria-expanded="true"] { background:#555; }
|
||||
|
||||
/* Battery is the final deck item: text floats above the charge fill. */
|
||||
.battery-card {
|
||||
position:relative; display:block; flex-shrink:0; width:100%; height:var(--pill-lg);
|
||||
min-height:var(--pill-lg); margin:0; padding:0; overflow:hidden;
|
||||
border:0; border-radius:var(--pill-radius); background:#314b3a;
|
||||
color:#f2f5f2; isolation:isolate;
|
||||
}
|
||||
.battery-meter { position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
|
||||
.battery-meter #battery-fill { display:block; height:100%; width:0; border-radius:inherit; background:var(--battery-charge); opacity:.55; transition:width .35s ease,background .2s ease,opacity .18s ease-out; }
|
||||
.battery-card .battery-copy { position:absolute; inset:0; z-index:1; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:8px; padding:0 18px; pointer-events:none; }
|
||||
.battery-summary { display:flex; flex-direction:column; gap:3px; flex-shrink:0; }
|
||||
.battery-card small { color:#d7e8dc; font-size:12px; line-height:1; font-variant-numeric:tabular-nums; }
|
||||
.battery-card strong { font-size:26px; font-weight:400; line-height:1.15; font-variant-numeric:tabular-nums; }
|
||||
.battery-card i { align-self:auto; color:#d9e0da; text-align:right; font-size:12px; line-height:1.35; font-style:normal; }
|
||||
.battery-card[data-low="true"] { background:#4a3734; }
|
||||
.battery-card[data-stale="true"] #battery-fill { opacity:.25; }
|
||||
.battery-card:focus-visible { outline:2px solid #a5c0d0; outline-offset:2px; }
|
||||
|
||||
/* The same slender, rounded scrollbar is used by every scrollable panel. */
|
||||
*::-webkit-scrollbar { width:8px; height:8px; }
|
||||
*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner { background:transparent; }
|
||||
*::-webkit-scrollbar-thumb { min-height:28px; border:2px solid transparent; border-radius:var(--pill-radius); background:#aeb6ba; background-clip:padding-box; }
|
||||
*::-webkit-scrollbar-thumb:hover { background:#87959e; background-clip:padding-box; }
|
||||
*::-webkit-scrollbar-button { display:none; width:0; height:0; }
|
||||
.sidebar-deck::-webkit-scrollbar-thumb { background:#666; background-clip:padding-box; }
|
||||
.modal { scrollbar-gutter:stable; }
|
||||
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width:thin; scrollbar-color:#aeb6ba transparent; } }
|
||||
@media (max-height:610px) { .telemetry-zone { gap:12px; } }
|
||||
|
||||
/* Shared panel geometry and quiet, presentational motion. Never ease command data. */
|
||||
:root { --panel-inset:20px; --ui-gap:12px; --ui-duration:180ms; --ui-ease:cubic-bezier(.2,0,.2,1); }
|
||||
.sidebar-deck,.controls-workspace,.console-dock { padding:var(--panel-inset); }
|
||||
.sidebar-deck,.telemetry-zone,.deck-connection,.port-row,.activity-actions,.input-mode-controls,.console-toolbar,.console-streams { gap:var(--ui-gap); }
|
||||
.deck-connection { padding-bottom:var(--ui-gap); }
|
||||
.workspace-topbar,.console-dock-header { min-height:var(--pill-md); height:var(--pill-md); margin-bottom:var(--ui-gap); }
|
||||
.port-row select,.port-row .icon-button { height:var(--pill-md); }
|
||||
.port-row .icon-button { width:var(--pill-md); }
|
||||
.activity-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
|
||||
.activity-actions .logs-link { min-width:0; width:100%; }
|
||||
.console-dock-header h2 { margin:0; }
|
||||
.console-toolbar { margin-bottom:var(--ui-gap); }
|
||||
.console-state { min-height:0; margin:0 0 var(--ui-gap); font-size:12px; }
|
||||
.console-side > header { padding-left:0; padding-right:0; }
|
||||
.console-side > header i { background:#b4bdc2; transition:background-color var(--ui-duration) ease-out,box-shadow var(--ui-duration) ease-out; }
|
||||
.console-side > header .rx-dot.lit { background:#4fa4cf; box-shadow:0 0 5px #4fa4cf66; }
|
||||
.console-side > header .tx-dot.lit { background:#56ae8a; box-shadow:0 0 5px #56ae8a66; }
|
||||
:is(button,select,input,.input-mode-switch,.console-row summary,.heave-knob,.heave-fill,.control-status,.battery-card)::before,
|
||||
:is(button,select,input,.input-mode-switch,.console-row summary,.heave-knob,.heave-fill,.control-status,.battery-card)::after,
|
||||
:is(button,select,input,.input-mode-switch,.console-row summary,.heave-knob,.heave-fill,.control-status,.battery-card) {
|
||||
transition-property:background-color,border-color,color,opacity,box-shadow,filter;
|
||||
transition-duration:var(--ui-duration); transition-timing-function:var(--ui-ease);
|
||||
}
|
||||
/* Keep pointer positions immediate; the existing conditioning owns motor easing. */
|
||||
.modal[open],.console-dock:not([hidden]),.form-feedback:not([hidden]),.console-state:not([hidden]),.console-row pre { animation:ui-fade-in var(--ui-duration) var(--ui-ease); }
|
||||
.modal.closing,.console-dock.closing { animation:ui-fade-out var(--ui-duration) ease-out forwards; pointer-events:none; }
|
||||
@keyframes ui-fade-in { from { opacity:0; } to { opacity:1; } }
|
||||
@keyframes ui-fade-out { from { opacity:1; } to { opacity:0; } }
|
||||
.controller-status { transition:opacity var(--ui-duration) ease-out; }
|
||||
.controller-status[data-quiet="true"] { opacity:0; pointer-events:none; }
|
||||
|
||||
/* Motor scaling and control-plane fit: keep interaction areas inside their rows. */
|
||||
.primary-control-zone { grid-template-rows:clamp(76px,14vh,108px) minmax(0,1fr) auto; }
|
||||
.engage-header-zone { height:auto; min-height:0; align-self:stretch; }
|
||||
body #engage { height:100%; min-height:0; }
|
||||
.controls-grid { --joy-size:min(40vh,calc(100cqw - 168px),380px); min-height:0; align-content:center; }
|
||||
.joystick { min-width:0; min-height:0; max-width:100%; max-height:100%; }
|
||||
.joystick-pad,.heave-pad { min-width:0; min-height:0; flex:1 1 auto; overflow:hidden; }
|
||||
.control-card { min-width:0; min-height:0; overflow:hidden; }
|
||||
.control-toolbar { flex-wrap:nowrap; min-height:48px; padding:5px 0 0; gap:clamp(8px,1.5vw,18px); }
|
||||
.control-toolbar .output-limit { min-width:0; }
|
||||
.control-toolbar .output-limit > span { flex:0 1 120px; width:120px; }
|
||||
.control-toolbar .range-pill { width:clamp(112px,20cqw,190px); flex:0 1 190px; }
|
||||
body[data-motor-scaling="independent"] .control-toolbar .output-limit { opacity:.42; }
|
||||
body[data-motor-scaling="independent"] .control-toolbar .range-pill { background:#dedfdf; }
|
||||
.control-toolbar .range-pill :disabled { cursor:not-allowed; }
|
||||
@media (max-height:610px) {
|
||||
.primary-control-zone { grid-template-rows:clamp(64px,12vh,82px) minmax(0,1fr) auto; }
|
||||
.controls-grid { --joy-size:min(34vh,calc(100cqw - 168px),300px); }
|
||||
}
|
||||
.motor-modal { width:min(720px,calc(100vw - 36px)); max-height:calc(100dvh - 28px); padding:clamp(18px,3vw,28px); overflow:auto; }
|
||||
.motor-modal > h2 { margin:0 0 2px; }
|
||||
.motor-scale-heading { display:flex; align-items:center; justify-content:space-between; padding:12px 0 7px; border-bottom:1px solid #e7eae7; color:#56635b; font-size:12px; }
|
||||
.switch-control { display:flex; align-items:center; gap:9px; cursor:pointer; color:#34423a; font-size:12px; }
|
||||
.switch-control input { position:absolute; opacity:0; width:1px; height:1px; }
|
||||
.switch-track { position:relative; display:block; width:34px; height:20px; border-radius:999px; background:#d8ddda; transition:background-color 160ms ease-out; }
|
||||
.switch-track::after { content:""; position:absolute; width:14px; height:14px; left:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 1px 2px #0002; transition:transform 160ms ease-out; }
|
||||
.switch-control input:checked + .switch-track { background:#4d8767; }
|
||||
.switch-control input:checked + .switch-track::after { transform:translateX(14px); }
|
||||
.switch-control input:focus-visible + .switch-track { outline:2px solid #6598b5; outline-offset:3px; }
|
||||
.motor-list { display:grid; }
|
||||
.motor-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(100px,1.5fr) 42px 76px; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #e7eae7; }
|
||||
.motor-name { min-width:0; height:34px; padding:0 8px; border:1px solid transparent; border-radius:6px; background:transparent; font-size:13px; }
|
||||
.motor-name:hover,.motor-name:focus { border-color:#d8dfda; background:#fff; }
|
||||
.motor-row .motor-scale { width:100%; min-width:0; height:22px; padding:0; border:0; background:transparent; accent-color:#4d8767; }
|
||||
.motor-scale-value { color:#344b3c; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
|
||||
.motor-reverse { min-height:30px; padding:5px 9px; font-size:11px; }
|
||||
.motor-reverse:disabled { opacity:.42; cursor:not-allowed; }
|
||||
.motor-channel { grid-column:1/-1; margin-top:-8px; color:#87918a; font-size:10px; }
|
||||
.motor-mapping { margin-top:8px; }
|
||||
.motor-mapping summary { padding:9px 0; color:#657168; font-size:12px; cursor:pointer; }
|
||||
.motor-map-row { display:grid; grid-template-columns:65px minmax(0,1fr) 72px; align-items:center; gap:9px; padding:6px 0; border-bottom:1px solid #edf0ed; }
|
||||
.motor-map-port { color:#4b5a50; font:11px ui-monospace,Consolas,monospace; }
|
||||
.motor-map-row select { height:32px; font-size:12px; }
|
||||
.motor-map-direction { color:#77827b; font-size:11px; text-align:right; }
|
||||
body[data-motor-scaling="independent"] .control-toolbar .output-limit { opacity:.42; }
|
||||
body[data-motor-scaling="independent"] .control-toolbar .range-pill { background:#dedfdf; }
|
||||
.control-toolbar .range-pill :disabled { cursor:not-allowed; }
|
||||
.controls-grid { align-content:start; }
|
||||
.joystick-pad,.heave-pad { padding-top:0; }
|
||||
.joystick { transform:translateY(-7px); }
|
||||
@media (max-width:640px) { .motor-row { grid-template-columns:minmax(0,1fr) minmax(75px,1.3fr) 38px 70px; gap:7px; } .motor-map-row { grid-template-columns:54px minmax(0,1fr) 64px; gap:6px; } }
|
||||
@media (max-width:520px) { .motor-modal { padding:18px 14px; } .motor-row { grid-template-columns:minmax(0,1fr) minmax(64px,1fr) 36px 66px; gap:5px; } .motor-name { font-size:12px; } .motor-reverse { padding:5px 6px; } }
|
||||
@media (prefers-reduced-motion:reduce) { .switch-track,.switch-track::after { transition:none; } }
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
/* V2 uses the existing deck, type scale, and flat settings rows. */
|
||||
:root { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
|
||||
[hidden] { display:none !important; }
|
||||
.workspace-nav { display:flex; align-items:center; gap:12px; margin:0 0 10px; min-height:32px; }
|
||||
.view-switch { display:flex; gap:2px; padding:3px; background:#e1e1e1; border-radius:20px; }
|
||||
.view-switch button,.quiet-button { border:0; background:transparent; color:#737575; border-radius:18px; padding:6px 14px; cursor:pointer; font-size:12px; }
|
||||
.view-switch [aria-pressed=true] { background:#fafafa; color:#242929; box-shadow:0 1px 3px #0000000c; }
|
||||
.workspace-nav .quiet-button { margin-left:auto; }
|
||||
.version-mark { color:#9a9e9d; font-size:10px; letter-spacing:.08em; }
|
||||
#controller-settings { display:block; }
|
||||
.controller-modal { width:min(730px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); overflow:auto; }
|
||||
.binding-head,.binding-row { display:grid; grid-template-columns:80px minmax(100px,1fr) minmax(100px,1fr) 28px 54px; gap:8px; align-items:center; }
|
||||
.binding-head { font-size:10px; color:#858b89; padding:8px 0; }
|
||||
.binding-row { padding:9px 0; border-top:1px solid #dedfdd; }
|
||||
.binding-row > span { font-size:12px; font-weight:500; }
|
||||
.binding-row meter { display:block; width:50px; height:3px; margin-top:7px; accent-color:#6d9c8b; }
|
||||
.binding-row select,.binding-row input { height:34px; min-height:34px; padding:0 8px; border-radius:8px; font-size:12px; min-width:0; }
|
||||
.binding-row input { text-align:center; padding:0 2px; font-variant-numeric:tabular-nums; }
|
||||
.binding-swap { background:transparent; border:0; height:32px; color:#6a7470; font-size:19px; cursor:pointer; border-radius:7px; }
|
||||
.binding-swap:hover { background:#e0e5e1; }
|
||||
.mapping-tuning { margin-top:14px; }
|
||||
.mapping-actions { margin-top:16px; font-size:12px; }
|
||||
.mapping-actions summary { padding:8px 0; cursor:pointer; color:#727b76; }
|
||||
.form-grid.three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
|
||||
.dashboard { display:flex; flex:1; flex-direction:column; min-height:0; gap:0; overflow:auto; }
|
||||
.camera-stage { flex:1 1 220px; min-height:150px; position:relative; border-radius:14px; overflow:hidden; background:#18282d; color:#f2f6f5; isolation:isolate; }
|
||||
.camera-stage video,.camera-stage img,.camera-stage canvas { display:block; width:100%; height:100%; position:absolute; inset:0; object-fit:contain; }
|
||||
.camera-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#8fa5aa; font-size:12px; }
|
||||
.camera-empty svg { width:40px; fill:none; stroke:currentColor; stroke-width:1.4; opacity:.65; }
|
||||
.camera-overlay { pointer-events:none; position:absolute; top:14px; left:16px; right:16px; display:flex; align-items:center; gap:10px; font-size:10px; text-shadow:0 1px 3px #000; color:#d7e5e4; }
|
||||
#camera-badge { border:1px solid #a8c1c245; border-radius:10px; padding:3px 8px; background:#16282c55; }
|
||||
#recording-badge { color:#ff9e93; font-weight:600; }
|
||||
#stream-clock { margin-left:auto; font-variant-numeric:tabular-nums; }
|
||||
.dashboard-actions { display:flex; align-items:center; gap:5px; padding:10px 0; flex-wrap:wrap; }
|
||||
.dashboard-actions button { min-height:32px; padding:6px 12px; border-radius:18px; border:0; background:#e0e2df; color:#46524b; font-size:11px; cursor:pointer; white-space:nowrap; }
|
||||
.dashboard-actions button[aria-pressed=true] { background:#d0ddd5; color:#345844; }
|
||||
.dashboard-actions button:disabled { opacity:.4; cursor:default; }
|
||||
.telemetry-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:12px; border-top:1px solid #d9deda; padding:14px 0; }
|
||||
.telemetry-strip > div { min-width:0; display:flex; flex-direction:column; gap:3px; }
|
||||
.telemetry-strip span { font-size:10px; color:#7b8480; }
|
||||
.telemetry-strip strong { font-weight:400; font-size:clamp(18px,2.2vw,26px); color:#36463d; font-variant-numeric:tabular-nums; letter-spacing:-.035em; white-space:nowrap; }
|
||||
.telemetry-strip [data-stale=true] strong { color:#a4aaa5; }
|
||||
.sensor-details { border-top:1px solid #d9deda; padding:10px 0 0; font-size:11px; }
|
||||
.sensor-details summary { cursor:pointer; color:#58665d; }
|
||||
.sensor-details summary span { float:right; color:#939c96; font-size:10px; }
|
||||
.sensor-values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px 0; }
|
||||
.sensor-values div { min-width:0; display:flex; flex-direction:column; gap:4px; }
|
||||
.sensor-values span { color:#87908a; font-size:10px; }
|
||||
.sensor-values strong { font-size:11px; font-weight:500; color:#4b5c50; font-variant-numeric:tabular-nums; }
|
||||
.detected-frame { display:flex; flex-direction:column; gap:9px; color:#859086; font-size:12px; padding-top:4px; }
|
||||
.detected-frame strong { color:#4b5c50; font-weight:500; }
|
||||
.extra-controls { display:flex; gap:16px; margin-top:8px; padding:10px 0 0; border-top:1px solid #d9deda; }
|
||||
.extra-controls label { display:grid; flex:1; min-width:0; grid-template-columns:1fr 24px; gap:4px; color:#7e8981; font-size:10px; }
|
||||
.extra-controls label input { width:100%; min-width:0; grid-row:2; grid-column:1/-1; accent-color:#668c78; height:18px; }
|
||||
.extra-controls output { text-align:right; font-variant-numeric:tabular-nums; }
|
||||
.primary-control-zone { grid-template-rows:clamp(64px,11vh,90px) minmax(0,1fr) auto auto; }
|
||||
.controls-grid { --joy-size:min(34vh,calc(100cqw - 146px),370px); }
|
||||
.workspace-topbar { margin-bottom:8px; }
|
||||
:is(.view-switch button,.quiet-button,.binding-swap,.dashboard-actions button):active { transform:scale(.97); }
|
||||
:is(.view-switch button,.quiet-button,.binding-swap,.dashboard-actions button):focus-visible { outline:2px solid #6b9a84; outline-offset:2px; }
|
||||
.station-modal { width:min(560px,calc(100vw - 28px)); }
|
||||
body[data-view=dashboard] #controller-status { position:absolute; clip:rect(0,0,0,0); }
|
||||
@media (max-width:760px) {
|
||||
.binding-head,.binding-row { grid-template-columns:66px minmax(0,1fr) minmax(0,1fr) 24px 46px; gap:6px; }
|
||||
.binding-row select { padding:0 4px; font-size:11px; }
|
||||
.controller-modal { padding:22px 18px; }
|
||||
.controls-workspace { padding:16px; }
|
||||
.dashboard-actions { gap:4px; }.dashboard-actions button { padding:6px 9px; }
|
||||
}
|
||||
@media (max-width:600px) {
|
||||
.app-shell { grid-template-columns:170px minmax(0,1fr); }
|
||||
.sidebar-deck { padding:14px; }
|
||||
.input-mode-switch button { padding:6px 8px; }
|
||||
.controls-grid { --joy-size:min(30vh,calc(100cqw - 95px),300px); grid-template-columns:minmax(0,1fr) 70px; gap:6px; }
|
||||
.control-toolbar { flex-wrap:wrap; gap:8px; }.control-toolbar .range-pill { width:100px; }
|
||||
.control-toolbar .output-limit > span { width:auto; flex-basis:auto; }
|
||||
.window-actions { gap:0; }.window-actions button { width:24px; }
|
||||
.extra-controls { gap:8px; }.workspace-nav { gap:6px; }
|
||||
.view-switch button { padding:6px 9px; }.workspace-nav .quiet-button { padding:6px; }
|
||||
.version-mark { display:none; }
|
||||
}
|
||||
@media (prefers-reduced-motion:reduce) { :is(.view-switch button,.quiet-button,.binding-swap,.dashboard-actions button) { transition:none; transform:none !important; } }
|
||||
+422
-29
@@ -8,8 +8,10 @@ import time
|
||||
import base64
|
||||
import shutil
|
||||
import http.server
|
||||
import socketserver
|
||||
import urllib.parse
|
||||
import csv
|
||||
import uuid
|
||||
import math
|
||||
from pathlib import Path
|
||||
|
||||
import webview
|
||||
@@ -17,6 +19,7 @@ from serial.tools import list_ports
|
||||
|
||||
from app import Axes, MOTOR_FUNCTIONS, MavlinkWorker, motor_number_for_function
|
||||
from vehicle_state import VehicleState
|
||||
from rov_v2 import Telemetry, clean_profile, clean_station, save_json, number
|
||||
|
||||
|
||||
class ControlApi:
|
||||
@@ -28,9 +31,31 @@ class ControlApi:
|
||||
self.worker.require_input_lease = True
|
||||
self.vehicle_state = VehicleState()
|
||||
self.battery_received_at = None
|
||||
self.battery_last_current = None
|
||||
self.battery_last_current_at = None
|
||||
self.battery_session_consumed_mah = 0.0
|
||||
self.battery_fields_at = {}
|
||||
self.demo_mode = False
|
||||
self.lock = threading.Lock()
|
||||
self._poll_lock = threading.Lock()
|
||||
self.telemetry = Telemetry()
|
||||
self.station_path = Path(__file__).resolve().parent / "station_settings.json"
|
||||
self.profiles_path = self.station_path.with_name("controller_profiles.json")
|
||||
self.station_settings = clean_station({})
|
||||
self.controller_profiles = {}
|
||||
try:
|
||||
self.station_settings = clean_station(json.loads(self.station_path.read_text(encoding="utf-8")))
|
||||
except (OSError, ValueError, TypeError):
|
||||
pass
|
||||
try:
|
||||
self.controller_profiles = {str(key)[:256]: clean_profile(value) for key, value in
|
||||
json.loads(self.profiles_path.read_text(encoding="utf-8")).items()}
|
||||
except (OSError, ValueError, TypeError, AttributeError):
|
||||
pass
|
||||
self._recording_lock = threading.Lock()
|
||||
self._recording = None
|
||||
self._sensor_file = None
|
||||
self._sensor_writer = None
|
||||
self.state = {
|
||||
"connected": False,
|
||||
"link": "DISCONNECTED",
|
||||
@@ -40,12 +65,36 @@ class ControlApi:
|
||||
"app_state": "disconnected",
|
||||
"status": "Ready. Select a USB port to begin.",
|
||||
"battery": None,
|
||||
"link_quality": None,
|
||||
"heavy_quality": None,
|
||||
"log_path": None,
|
||||
"servos": {str(i): {"function": None, "direction": None} for i in range(1, 17)},
|
||||
"motor_test_active": False,
|
||||
"capabilities": {"frame": None, "firmware": None},
|
||||
"accessories": {},
|
||||
"sensor_recording": False,
|
||||
"servos": {str(i): {"function": None, "direction": None, "output_us": None} for i in range(1, 17)},
|
||||
}
|
||||
self.servo_functions: dict[int, int] = {}
|
||||
self.motor_directions: dict[int, int] = {}
|
||||
self.motor_settings_path = Path(__file__).resolve().parent / "motor_settings.json"
|
||||
self.motor_settings = {
|
||||
"independent": False,
|
||||
"customized": False,
|
||||
"motors": {str(i): {"name": f"Motor {i}", "scale": 20} for i in range(1, 13)},
|
||||
}
|
||||
try:
|
||||
saved_motor_settings = json.loads(self.motor_settings_path.read_text(encoding="utf-8"))
|
||||
self.motor_settings = self._clean_motor_settings(saved_motor_settings)
|
||||
except (OSError, ValueError, TypeError):
|
||||
pass
|
||||
if self.station_settings["frame"] != 4:
|
||||
self.motor_settings["independent"] = False
|
||||
self.worker.set_motor_scaling(
|
||||
self.motor_settings["independent"],
|
||||
{int(i): entry["scale"] for i, entry in self.motor_settings["motors"].items()},
|
||||
)
|
||||
self.battery_path = Path(__file__).resolve().parent / "battery_settings.json"
|
||||
self.link_path = Path(__file__).resolve().parent / "link_settings.json"
|
||||
self.model_path = Path(__file__).resolve().parent / "model_settings.json"
|
||||
self.model_cache = Path(__file__).resolve().parent / "runtime" / "vehicle_model.stl"
|
||||
self.model_cache_name = Path(__file__).resolve().parent / "runtime" / "vehicle_model_name.txt"
|
||||
@@ -62,13 +111,26 @@ class ControlApi:
|
||||
self.battery_config.update(json.loads(self.battery_path.read_text(encoding="utf-8")))
|
||||
except (OSError, ValueError, TypeError):
|
||||
pass
|
||||
self.link_config = {
|
||||
"baud": 57600, "control_hz": 20,
|
||||
"ping_hz": 1, "system_hz": 1, "battery_hz": 1, "servo_hz": 2,
|
||||
"rc_hz": 2, "esc_hz": 1,
|
||||
"attitude_hz": 2, "depth_hz": 2, "imu_hz": 1, "pressure_hz": 1,
|
||||
}
|
||||
try:
|
||||
self.link_config.update(json.loads(self.link_path.read_text(encoding="utf-8")))
|
||||
except (OSError, ValueError, TypeError):
|
||||
pass
|
||||
self._apply_link_config()
|
||||
|
||||
def initial_state(self):
|
||||
return {
|
||||
"ports": self.refresh_ports(),
|
||||
"battery_config": self.battery_config,
|
||||
"link_config": self.link_config,
|
||||
"motor_settings": self.motor_settings,
|
||||
"station_settings": self.station_settings,
|
||||
"controller_profiles": self.controller_profiles,
|
||||
"state": self._snapshot(),
|
||||
"model_info": self.get_saved_model_info(),
|
||||
}
|
||||
|
||||
def refresh_ports(self):
|
||||
@@ -225,7 +287,12 @@ class ControlApi:
|
||||
print(f"[web_ui] connect() called: port={port!r}, baud={baud!r}, rate={rate!r}")
|
||||
if not port:
|
||||
raise ValueError("Select a USB serial port")
|
||||
if str(port).lower() in ("demo", "tcp:127.0.0.1:5760", "udpin:127.0.0.1:14550"):
|
||||
self.telemetry = Telemetry()
|
||||
self.state["capabilities"] = {"frame": None, "firmware": None}
|
||||
self.state["accessories"] = {}
|
||||
self.state["battery"] = None
|
||||
self.battery_fields_at = {}
|
||||
if str(port).lower() == "demo":
|
||||
self.demo_mode = True
|
||||
self.servo_functions = {1: 33, 2: 34, 3: 35}
|
||||
self.motor_directions = {1: 1, 2: 1, 3: 1}
|
||||
@@ -233,6 +300,9 @@ class ControlApi:
|
||||
self.state.update(
|
||||
connected=True, link="LINK OK", vehicle="DEMO • DISARMED",
|
||||
armed=False, mode="MANUAL", status="Demo mode ready — no hardware connected.",
|
||||
link_quality={"grade": "excellent", "latency_ms": 12.0,
|
||||
"loss_percent": 0.0, "samples": 20,
|
||||
"corrupt_frames_20s": 0, "heartbeat_age_s": 0.1},
|
||||
battery={"voltage": 15.8, "per_cell": 3.95, "percent": 72,
|
||||
"cells": 4, "low": False},
|
||||
)
|
||||
@@ -242,8 +312,12 @@ class ControlApi:
|
||||
self.state["servos"][str(servo)] = {
|
||||
"function": function, "label": MOTOR_FUNCTIONS.get(function, "Unassigned"),
|
||||
"motor": motor, "direction": self.motor_directions.get(motor) if motor else None,
|
||||
"output_us": None,
|
||||
}
|
||||
return self._snapshot()
|
||||
self.battery_last_current = None
|
||||
self.battery_last_current_at = None
|
||||
self.battery_session_consumed_mah = 0.0
|
||||
self.worker.rate_hz = int(rate)
|
||||
with self.lock:
|
||||
self.vehicle_state.disconnect()
|
||||
@@ -268,16 +342,60 @@ class ControlApi:
|
||||
raise TimeoutError(f"No MAVLink heartbeat received from {port} within 8 seconds")
|
||||
|
||||
def disconnect(self):
|
||||
self.sensor_record(False)
|
||||
self.worker.stop_motor_test()
|
||||
with self.lock:
|
||||
self.state["motor_test_active"] = False
|
||||
if self.worker.heavy_quality_test is not None:
|
||||
self.worker.cancel_heavy_quality_test()
|
||||
if self.demo_mode:
|
||||
self.demo_mode = False
|
||||
with self.lock:
|
||||
self.state.update(connected=False, link="DISCONNECTED", vehicle="No heartbeat",
|
||||
armed=False, mode=None, battery=None, status="Demo mode disconnected")
|
||||
armed=False, mode=None, battery=None, link_quality=None,
|
||||
status="Demo mode disconnected")
|
||||
return True
|
||||
self.worker.disconnect()
|
||||
return True
|
||||
|
||||
def set_axes(self, forward, turn, vertical, sequence=None):
|
||||
def start_heavy_quality_test(self):
|
||||
if self.demo_mode:
|
||||
raise RuntimeError("The heavy link test requires a real flight-controller connection")
|
||||
return self.worker.start_heavy_quality_test()
|
||||
|
||||
def cancel_heavy_quality_test(self):
|
||||
return self.worker.cancel_heavy_quality_test()
|
||||
|
||||
def start_motor_test(self, motor, throttle_percent):
|
||||
motor, throttle_percent = int(motor), int(throttle_percent)
|
||||
if self.demo_mode:
|
||||
raise RuntimeError("Motor tests require a real flight-controller connection")
|
||||
with self.lock:
|
||||
if not self.state.get("connected") or not self.state.get("armed"):
|
||||
raise RuntimeError("Connect and arm the vehicle before motor testing")
|
||||
assignment = next((item for item in self.state["servos"].values() if item.get("motor") == motor), None)
|
||||
if assignment is None:
|
||||
raise ValueError(f"Motor {motor} is not assigned to a servo output")
|
||||
if self.state.get("motor_test_active"):
|
||||
raise RuntimeError("A motor test is already active")
|
||||
effective_percent = round(throttle_percent * self.worker.motor_output_scale(motor))
|
||||
self.state["motor_test_active"] = True
|
||||
self.state["status"] = f"Motor {motor} test active at {effective_percent}% output"
|
||||
try:
|
||||
return self.worker.start_motor_test(motor, effective_percent)
|
||||
except Exception:
|
||||
with self.lock:
|
||||
self.state["motor_test_active"] = False
|
||||
raise
|
||||
|
||||
def stop_motor_test(self):
|
||||
self.worker.stop_motor_test()
|
||||
with self.lock:
|
||||
self.state["status"] = "Motor test released; waiting for flight-controller stop"
|
||||
return True
|
||||
|
||||
def set_axes(self, forward, turn, vertical, sequence=None, lateral=0, pitch=0, roll=0):
|
||||
values = [number(value, -1, 1) for value in (forward, lateral, vertical, turn, pitch, roll)]
|
||||
if self.demo_mode:
|
||||
with self.lock:
|
||||
self.state["status"] = (
|
||||
@@ -287,13 +405,95 @@ class ControlApi:
|
||||
return True
|
||||
with self.lock:
|
||||
allowed = self.vehicle_state.snapshot()["controls_allowed"]
|
||||
self.worker.set_axes(Axes(
|
||||
max(-1.0, min(1.0, float(forward))), 0.0,
|
||||
max(-1.0, min(1.0, float(vertical))),
|
||||
max(-1.0, min(1.0, float(turn))),
|
||||
) if allowed else Axes(), sequence)
|
||||
self.worker.set_axes(Axes(*values) if allowed else Axes(), sequence)
|
||||
return True
|
||||
|
||||
def _require_settings(self):
|
||||
if self.state.get("connected") and (self.state.get("armed") or
|
||||
(not self.demo_mode and not self.vehicle_state.snapshot()["armed_known"])):
|
||||
raise RuntimeError("Disengage first")
|
||||
|
||||
def save_controller_profile(self, device, profile):
|
||||
with self.lock:
|
||||
self._require_settings()
|
||||
clean = clean_profile(profile)
|
||||
updated = {**self.controller_profiles, str(device)[:256]: clean}
|
||||
save_json(self.profiles_path, updated)
|
||||
self.controller_profiles = updated
|
||||
self.worker.set_axes(Axes())
|
||||
return clean
|
||||
|
||||
def save_station_settings(self, config):
|
||||
with self.lock:
|
||||
self._require_settings()
|
||||
clean = clean_station(config)
|
||||
save_json(self.station_path, clean)
|
||||
self.station_settings = clean
|
||||
if clean["frame"] != 4 and (self.demo_mode or not self.state.get("connected")):
|
||||
self.motor_settings["independent"] = False
|
||||
self.worker.set_motor_scaling(False, {int(key): item["scale"] for key, item in self.motor_settings["motors"].items()})
|
||||
# Frame selection describes the preview; actual FRAME_TYPE is read
|
||||
# from the connected autopilot and never silently overwritten.
|
||||
return clean
|
||||
|
||||
def set_accessory(self, name, enabled):
|
||||
if name not in ("lights", "camera") or not isinstance(enabled, bool):
|
||||
raise ValueError("Invalid accessory")
|
||||
relay = self.station_settings[name + "_relay"]
|
||||
if relay < 0:
|
||||
raise RuntimeError("Set relay first")
|
||||
if self.demo_mode:
|
||||
self.state["accessories"][name] = {"requested": enabled, "accepted": True, "demo": True}
|
||||
return True
|
||||
self.worker.accessory(name, relay, enabled)
|
||||
with self.lock:
|
||||
self.state["accessories"][name] = {"requested": enabled, "accepted": None, "at": time.monotonic()}
|
||||
return True
|
||||
|
||||
def sensor_record(self, enabled):
|
||||
with self.lock:
|
||||
if enabled and self._sensor_file is None:
|
||||
folder = Path(__file__).resolve().parent / "logs"
|
||||
folder.mkdir(exist_ok=True)
|
||||
self._sensor_file = (folder / f"sensors_{time.time_ns()}.csv").open("w", newline="", encoding="utf-8")
|
||||
self._sensor_writer = csv.writer(self._sensor_file)
|
||||
self._sensor_writer.writerow(("monotonic_s", "group", "field", "value"))
|
||||
elif not enabled and self._sensor_file is not None:
|
||||
self._sensor_file.close()
|
||||
self._sensor_file = self._sensor_writer = None
|
||||
self.state["sensor_recording"] = bool(enabled)
|
||||
return self._sensor_file.name if self._sensor_file else None
|
||||
|
||||
def recording_begin(self):
|
||||
with self._recording_lock:
|
||||
if self._recording:
|
||||
raise RuntimeError("Already recording")
|
||||
folder = Path(__file__).resolve().parent / "runtime" / "recordings"
|
||||
folder.mkdir(parents=True, exist_ok=True)
|
||||
path = folder / f"rov_{time.time_ns()}.webm"
|
||||
token = uuid.uuid4().hex
|
||||
self._recording = (token, path.open("wb"), path)
|
||||
return token
|
||||
|
||||
def recording_chunk(self, token, data):
|
||||
if not isinstance(data, str) or len(data) > 12 * 1024 * 1024:
|
||||
raise ValueError("Invalid video chunk")
|
||||
chunk = base64.b64decode(data, validate=True)
|
||||
with self._recording_lock:
|
||||
if not self._recording or token != self._recording[0]:
|
||||
raise ValueError("Recording expired")
|
||||
self._recording[1].write(chunk)
|
||||
return True
|
||||
|
||||
def recording_end(self, token):
|
||||
with self._recording_lock:
|
||||
if not self._recording or token != self._recording[0]:
|
||||
return None
|
||||
_, handle, path = self._recording
|
||||
handle.close()
|
||||
self._recording = None
|
||||
return str(path)
|
||||
|
||||
def stop_controls(self, sequence=None):
|
||||
"""Invalidate queued input without claiming that the vehicle disarmed."""
|
||||
with self.lock:
|
||||
@@ -302,10 +502,48 @@ class ControlApi:
|
||||
return True
|
||||
|
||||
def set_gain(self, value):
|
||||
value = max(5, min(50, int(value)))
|
||||
value = max(0, min(100, int(value)))
|
||||
if self.motor_settings["independent"]:
|
||||
raise RuntimeError("Use per-motor scales while independent scaling is enabled")
|
||||
with self.worker.lock:
|
||||
self.worker.gain = value / 100.0
|
||||
return value
|
||||
|
||||
@staticmethod
|
||||
def _clean_motor_settings(settings):
|
||||
if not isinstance(settings, dict):
|
||||
raise ValueError("Motor settings must be an object")
|
||||
requested = settings.get("motors", {})
|
||||
if not isinstance(requested, dict):
|
||||
raise ValueError("Motor settings are invalid")
|
||||
motors = {}
|
||||
for motor in range(1, 13):
|
||||
entry = requested.get(str(motor), {})
|
||||
if not isinstance(entry, dict):
|
||||
entry = {}
|
||||
name = str(entry.get("name", f"Motor {motor}")).strip()[:24] or f"Motor {motor}"
|
||||
try:
|
||||
scale = max(0, min(100, int(entry.get("scale", 20))))
|
||||
except (TypeError, ValueError):
|
||||
scale = 20
|
||||
motors[str(motor)] = {"name": name, "scale": scale}
|
||||
return {"independent": bool(settings.get("independent", False)), "customized": bool(settings.get("customized", False)), "motors": motors}
|
||||
|
||||
def save_motor_settings(self, settings, persist=True):
|
||||
clean = self._clean_motor_settings(settings)
|
||||
if clean["independent"] != self.motor_settings["independent"]:
|
||||
self._require_settings()
|
||||
if clean["independent"] and self.worker.frame_type not in (None, 4):
|
||||
raise ValueError("Independent scales require SimpleROV 3")
|
||||
if persist:
|
||||
self.motor_settings_path.write_text(json.dumps(clean, indent=2) + "\n", encoding="utf-8")
|
||||
self.motor_settings = clean
|
||||
self.worker.set_motor_scaling(
|
||||
clean["independent"],
|
||||
{int(i): entry["scale"] for i, entry in clean["motors"].items()},
|
||||
)
|
||||
return clean
|
||||
|
||||
def command(self, name, sequence=None, expires_at=None):
|
||||
if self.demo_mode:
|
||||
if name not in ("manual", "arm", "disarm"):
|
||||
@@ -389,8 +627,38 @@ class ControlApi:
|
||||
raise ValueError("Full voltage per cell must be greater than empty voltage")
|
||||
if not 0 <= clean["warning_percent"] <= 100:
|
||||
raise ValueError("Warning percentage must be between 0 and 100")
|
||||
self.battery_config = clean
|
||||
self.battery_path.write_text(json.dumps(clean, indent=2) + "\n", encoding="utf-8")
|
||||
self.battery_config = clean
|
||||
return clean
|
||||
|
||||
def _apply_link_config(self):
|
||||
self.worker.rate_hz = self.link_config["control_hz"]
|
||||
self.worker.set_link_rates(self.link_config["ping_hz"], {
|
||||
"SYS_STATUS": self.link_config["system_hz"],
|
||||
"BATTERY_STATUS": self.link_config["battery_hz"],
|
||||
"SERVO_OUTPUT_RAW": self.link_config["servo_hz"],
|
||||
"RC_CHANNELS": self.link_config["rc_hz"],
|
||||
"ESC_TELEMETRY_1_TO_4": self.link_config["esc_hz"],
|
||||
"ATTITUDE": self.link_config["attitude_hz"],
|
||||
"GLOBAL_POSITION_INT": self.link_config["depth_hz"],
|
||||
"SCALED_IMU": self.link_config["imu_hz"],
|
||||
"SCALED_PRESSURE2": self.link_config["pressure_hz"],
|
||||
})
|
||||
|
||||
def save_link_settings(self, config):
|
||||
allowed = {0, 1, 2, 5, 10}
|
||||
clean = {key: int(config.get(key, value)) for key, value in self.link_config.items()}
|
||||
if clean["baud"] not in {9600, 19200, 38400, 57600, 115200}:
|
||||
raise ValueError("Choose a supported baud rate")
|
||||
if clean["control_hz"] not in {10, 20}:
|
||||
raise ValueError("Control rate must be 10 or 20 Hz")
|
||||
if clean["ping_hz"] not in {1, 2, 5, 10}:
|
||||
raise ValueError("Link test rate must be 1, 2, 5 or 10 Hz")
|
||||
if any(clean[key] not in allowed for key in ("system_hz", "battery_hz", "servo_hz", "rc_hz", "esc_hz", "attitude_hz", "depth_hz", "imu_hz", "pressure_hz")):
|
||||
raise ValueError("Telemetry rates must be Off, 1, 2, 5 or 10 Hz")
|
||||
self.link_path.write_text(json.dumps(clean, indent=2) + "\n", encoding="utf-8")
|
||||
self.link_config = clean
|
||||
self._apply_link_config()
|
||||
return clean
|
||||
|
||||
def open_logs(self):
|
||||
@@ -399,6 +667,10 @@ class ControlApi:
|
||||
os.startfile(path)
|
||||
return True
|
||||
|
||||
def read_console(self, limit=150):
|
||||
"""Return a bounded, read-only view of the local session console."""
|
||||
return self.worker.read_console(limit)
|
||||
|
||||
def poll(self):
|
||||
# Bound a poll even if telemetry arrives continuously.
|
||||
with self._poll_lock:
|
||||
@@ -431,6 +703,32 @@ class ControlApi:
|
||||
def _snapshot(self):
|
||||
with self.lock:
|
||||
snap = json.loads(json.dumps(self.state))
|
||||
snap["motor_settings"] = self.motor_settings
|
||||
snap["telemetry"] = self.telemetry.snapshot(bool(snap.get("connected")))
|
||||
if snap.get("battery") and not self.demo_mode:
|
||||
now = time.monotonic()
|
||||
snap["battery"]["current_stale"] = now - self.battery_fields_at.get("current_a", 0) > 5
|
||||
if snap["battery"]["current_stale"]:
|
||||
snap["battery"]["current_a"] = None
|
||||
for field in ("voltage", "per_cell", "consumed_mah", "remaining_percent"):
|
||||
key = "voltage" if field == "per_cell" else field
|
||||
if now - self.battery_fields_at.get(key, 0) > 5:
|
||||
snap["battery"][field] = None
|
||||
battery = snap["battery"]
|
||||
if battery.get("remaining_percent") is not None:
|
||||
battery["percent"] = battery["remaining_percent"]
|
||||
elif battery.get("per_cell") is not None:
|
||||
low, high = self.battery_config["empty_v_per_cell"], self.battery_config["full_v_per_cell"]
|
||||
battery["percent"] = max(0, min(100, (battery["per_cell"] - low) * 100 / (high - low)))
|
||||
battery["charge_source"] = "Voltage estimate"
|
||||
else:
|
||||
battery["percent"] = None
|
||||
capacity = self.battery_config["capacity_mah"]
|
||||
battery["remaining_mah"] = (max(0, capacity - battery["consumed_mah"]) if battery.get("consumed_mah") is not None else
|
||||
round(capacity * battery["remaining_percent"] / 100) if battery.get("remaining_percent") is not None else None)
|
||||
for accessory in snap["accessories"].values():
|
||||
if accessory.get("accepted") is None and time.monotonic() - accessory.get("at", 0) > 3:
|
||||
accessory["error"] = "No ACK"
|
||||
snap["app_state"] = self._derive_app_state()
|
||||
if not self.demo_mode:
|
||||
snap.update(self.vehicle_state.snapshot())
|
||||
@@ -446,6 +744,9 @@ class ControlApi:
|
||||
if kind == "heartbeat":
|
||||
_, system, autopilot, mode, armed = event[:5]
|
||||
self.vehicle_state.heartbeat(armed, event[5] if len(event) > 5 else None)
|
||||
if not armed and self.state.get("motor_test_active"):
|
||||
self.state["motor_test_active"] = False
|
||||
self.state["status"] = "Flight controller reports disarmed after motor test"
|
||||
self.state.update(
|
||||
connected=True, link="LINK OK", vehicle=f"{mode} • {'ARMED' if armed else 'DISARMED'}",
|
||||
armed=bool(armed),
|
||||
@@ -458,16 +759,36 @@ class ControlApi:
|
||||
self.vehicle_state.ack(event[2], event[3] if len(event) > 3 else None)
|
||||
self.state["status"] = f"Command {event[1]} ACK: {event[2]}"
|
||||
elif kind == "battery":
|
||||
self.battery_received_at = time.monotonic()
|
||||
voltage = float(event[1])
|
||||
cells = self.battery_config["cells"]
|
||||
per_cell = voltage / cells
|
||||
low, high = self.battery_config["empty_v_per_cell"], self.battery_config["full_v_per_cell"]
|
||||
percent = max(0, min(100, (per_cell - low) * 100 / (high - low)))
|
||||
self.state["battery"] = {
|
||||
"voltage": voltage, "per_cell": per_cell, "percent": percent,
|
||||
"cells": cells, "low": percent <= self.battery_config["warning_percent"],
|
||||
}
|
||||
self._consume_battery(event[1])
|
||||
elif kind == "capabilities":
|
||||
self.state["capabilities"].update(event[1])
|
||||
if event[1].get("frame", 4) != 4:
|
||||
self.motor_settings["independent"] = False
|
||||
self.worker.set_motor_scaling(False, {int(key): item["scale"] for key, item in self.motor_settings["motors"].items()})
|
||||
elif kind == "telemetry":
|
||||
self.telemetry.update(event[1], event[2], event[3])
|
||||
if self._sensor_writer:
|
||||
self._sensor_writer.writerows((event[3], event[1], key, value) for key, value in event[2].items())
|
||||
self._sensor_file.flush()
|
||||
elif kind == "accessory_ack":
|
||||
self.state["accessories"][event[1]] = {"requested": event[2], "accepted": event[3] == 0,
|
||||
"error": None if event[3] == 0 else "Rejected"}
|
||||
elif kind == "servo_output":
|
||||
for servo, output_us in event[1].items():
|
||||
if servo in self.state["servos"]:
|
||||
self.state["servos"][servo]["output_us"] = output_us
|
||||
elif kind == "motor_test_ack":
|
||||
self.state["status"] = "Motor test accepted by flight controller"
|
||||
elif kind == "motor_test_rejected":
|
||||
self.state["motor_test_active"] = False
|
||||
self.state["status"] = f"Motor test rejected: {event[1]}"
|
||||
elif kind == "motor_test_stopped":
|
||||
self.state["motor_test_active"] = False
|
||||
self.state["status"] = f"Motor test ended: {event[1]}"
|
||||
elif kind == "link_quality":
|
||||
self.state["link_quality"] = event[1]
|
||||
elif kind == "heavy_quality":
|
||||
self.state["heavy_quality"] = event[1]
|
||||
elif kind == "servo_param":
|
||||
_, param_id, value = event
|
||||
servo = int(param_id[5:param_id.index("_")])
|
||||
@@ -490,9 +811,71 @@ class ControlApi:
|
||||
last_err = self.state.get("last_error")
|
||||
status_msg = last_err if last_err else "Disconnected"
|
||||
self.state.update(connected=False, link="DISCONNECTED", vehicle="No heartbeat",
|
||||
mode=None, status=status_msg)
|
||||
mode=None, link_quality=None, status=status_msg, motor_test_active=False)
|
||||
self.state["last_error"] = None
|
||||
|
||||
def _consume_battery(self, data):
|
||||
self.battery_received_at = time.monotonic()
|
||||
now = self.battery_received_at
|
||||
previous = self.state.get("battery") or {}
|
||||
battery = dict(previous)
|
||||
battery["cells"] = self.battery_config["cells"]
|
||||
for field in ("voltage", "current_a", "consumed_mah", "remaining_percent"):
|
||||
if field in data:
|
||||
value = data[field]
|
||||
if isinstance(value, (float, int)) and math.isfinite(value) and value >= 0:
|
||||
self.battery_fields_at[field] = now
|
||||
else:
|
||||
battery[field] = None
|
||||
self.battery_fields_at.pop(field, None)
|
||||
voltage = data.get("voltage")
|
||||
if voltage is not None and float(voltage) > 0:
|
||||
battery["voltage"] = float(voltage)
|
||||
battery["per_cell"] = float(voltage) / self.battery_config["cells"]
|
||||
current = data.get("current_a")
|
||||
if current is not None and float(current) >= 0:
|
||||
current = float(current)
|
||||
if self.battery_last_current is not None and self.battery_last_current_at is not None:
|
||||
elapsed = now - self.battery_last_current_at
|
||||
if 0 < elapsed <= 10:
|
||||
average = (current + self.battery_last_current) / 2
|
||||
self.battery_session_consumed_mah += average * 1000 * elapsed / 3600
|
||||
self.battery_last_current = current
|
||||
self.battery_last_current_at = now
|
||||
battery["current_a"] = current
|
||||
elif "current_a" in data:
|
||||
self.battery_last_current = None
|
||||
self.battery_last_current_at = None
|
||||
consumed = data.get("consumed_mah")
|
||||
if consumed is not None and int(consumed) >= 0:
|
||||
battery["consumed_mah"] = int(consumed)
|
||||
battery["consumed_source"] = "Flight controller"
|
||||
elif self.battery_last_current is not None:
|
||||
battery["consumed_mah"] = round(self.battery_session_consumed_mah)
|
||||
battery["consumed_source"] = "Session estimate"
|
||||
self.battery_fields_at["consumed_mah"] = now
|
||||
remaining = data.get("remaining_percent")
|
||||
if remaining is not None and 0 <= int(remaining) <= 100:
|
||||
battery["remaining_percent"] = int(remaining)
|
||||
battery["charge_source"] = "Flight controller"
|
||||
capacity = self.battery_config["capacity_mah"]
|
||||
if battery.get("consumed_mah") is not None:
|
||||
battery["remaining_mah"] = max(0, capacity - battery["consumed_mah"])
|
||||
elif battery.get("remaining_percent") is not None:
|
||||
battery["remaining_mah"] = round(capacity * battery["remaining_percent"] / 100)
|
||||
if battery.get("remaining_percent") is not None:
|
||||
percent = battery["remaining_percent"]
|
||||
elif battery.get("per_cell") is not None:
|
||||
low = self.battery_config["empty_v_per_cell"]
|
||||
high = self.battery_config["full_v_per_cell"]
|
||||
percent = max(0, min(100, (battery["per_cell"] - low) * 100 / (high - low)))
|
||||
battery["charge_source"] = "Voltage estimate"
|
||||
else:
|
||||
percent = None
|
||||
battery["percent"] = percent
|
||||
battery["low"] = percent is not None and percent <= self.battery_config["warning_percent"]
|
||||
self.state["battery"] = battery
|
||||
|
||||
def _update_servo(self, servo):
|
||||
function = self.servo_functions.get(servo)
|
||||
motor = motor_number_for_function(function)
|
||||
@@ -501,9 +884,13 @@ class ControlApi:
|
||||
"label": MOTOR_FUNCTIONS.get(function, "Unassigned") if function is not None else "Waiting…",
|
||||
"motor": motor,
|
||||
"direction": self.motor_directions.get(motor) if motor else None,
|
||||
"output_us": (self.state["servos"].get(str(servo)) or {}).get("output_us"),
|
||||
}
|
||||
|
||||
def close(self):
|
||||
self.sensor_record(False)
|
||||
if self._recording:
|
||||
self.recording_end(self._recording[0])
|
||||
self.worker.disconnect()
|
||||
|
||||
|
||||
@@ -578,21 +965,26 @@ class AppHTTPHandler(http.server.SimpleHTTPRequestHandler):
|
||||
|
||||
def start_local_server(directory: Path) -> int:
|
||||
handler = lambda *args, **kwargs: AppHTTPHandler(*args, directory=str(directory), **kwargs)
|
||||
server = socketserver.TCPServer(("127.0.0.1", 0), handler)
|
||||
server = http.server.ThreadingHTTPServer(("127.0.0.1", 0), handler)
|
||||
port = server.server_address[1]
|
||||
threading.Thread(target=server.serve_forever, daemon=True).start()
|
||||
return port
|
||||
|
||||
|
||||
def main():
|
||||
if os.name == "nt":
|
||||
# Keep the running window separate from generic Python taskbar groups.
|
||||
import ctypes
|
||||
ctypes.windll.shell32.SetCurrentProcessExplicitAppUserModelID("SUBControl.Desktop")
|
||||
from desktop_shortcut import ensure_desktop_shortcut
|
||||
ensure_desktop_shortcut()
|
||||
api = ControlApi()
|
||||
api._migrate_legacy_model()
|
||||
project_root = Path(__file__).resolve().parent
|
||||
port = start_local_server(project_root)
|
||||
app_url = f"http://127.0.0.1:{port}/web/index.html?v={int(time.time())}"
|
||||
win_w, win_h, min_dims = _get_window_size()
|
||||
window = webview.create_window(
|
||||
"SUB Control", url=app_url, js_api=api,
|
||||
"Argo V2", url=app_url, js_api=api,
|
||||
width=win_w, height=win_h, min_size=min_dims,
|
||||
background_color="#111719", frameless=True, easy_drag=False,
|
||||
shadow=True,
|
||||
@@ -602,7 +994,8 @@ def main():
|
||||
window.events.maximized += lambda: setattr(api, "maximized", True)
|
||||
window.events.restored += lambda: setattr(api, "maximized", False)
|
||||
try:
|
||||
webview.start(debug=True)
|
||||
icon_path = project_root / "assets" / "sub-control.ico"
|
||||
webview.start(debug=os.environ.get("SUB_CONTROL_DEBUG") == "1", icon=str(icon_path) if icon_path.is_file() else None)
|
||||
finally:
|
||||
api.close()
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
@@ -0,0 +1,14 @@
|
||||
"""Package the original PNG in a Windows ICO without altering its pixels."""
|
||||
from pathlib import Path
|
||||
import struct
|
||||
|
||||
root = Path(__file__).resolve().parent
|
||||
png = (root / "assets" / "sub-control-icon.png").read_bytes()
|
||||
if png[:8] != b"\x89PNG\r\n\x1a\n":
|
||||
raise ValueError("Icon source must be PNG")
|
||||
width, height = struct.unpack(">II", png[16:24])
|
||||
if not (1 <= width <= 256 and 1 <= height <= 256):
|
||||
raise ValueError("Windows icon source must be at most 256 x 256")
|
||||
header = struct.pack("<HHH", 0, 1, 1)
|
||||
entry = struct.pack("<BBBBHHII", width % 256, height % 256, 0, 0, 1, 32, len(png), 22)
|
||||
(root / "assets" / "sub-control.ico").write_bytes(header + entry + png)
|
||||
@@ -0,0 +1,43 @@
|
||||
param([switch]$UpdateIcon)
|
||||
$ErrorActionPreference = 'Stop'
|
||||
|
||||
$shortcutProject = $PSScriptRoot
|
||||
$shortcutMarker = Join-Path $shortcutProject 'runtime\desktop-shortcut-created.txt'
|
||||
if ((Test-Path -LiteralPath $shortcutMarker) -and -not $UpdateIcon) { return }
|
||||
|
||||
try {
|
||||
# Resolves the real Desktop, including a redirected/OneDrive Desktop.
|
||||
$shortcutDesktop = [Environment]::GetFolderPath('DesktopDirectory')
|
||||
if (-not $shortcutDesktop) { throw 'Windows Desktop folder is unavailable.' }
|
||||
$shortcutPath = Join-Path $shortcutDesktop 'SUB Control.lnk'
|
||||
|
||||
# Never replace a shortcut the user already has.
|
||||
if (-not (Test-Path -LiteralPath $shortcutPath)) {
|
||||
$shortcutShell = New-Object -ComObject WScript.Shell
|
||||
$shortcutLink = $shortcutShell.CreateShortcut($shortcutPath)
|
||||
$shortcutLink.TargetPath = Join-Path $env:SystemRoot 'System32\WindowsPowerShell\v1.0\powershell.exe'
|
||||
$shortcutLink.Arguments = '-NoProfile -WindowStyle Hidden -File "' + (Join-Path $shortcutProject 'run.ps1') + '"'
|
||||
$shortcutLink.WorkingDirectory = $shortcutProject
|
||||
$shortcutLink.Description = 'Launch SUB Control'
|
||||
$shortcutLink.WindowStyle = 7
|
||||
$shortcutIcon = Join-Path $shortcutProject 'assets\sub-control.ico'
|
||||
if (Test-Path -LiteralPath $shortcutIcon) { $shortcutLink.IconLocation = "$shortcutIcon,0" }
|
||||
$shortcutLink.Save()
|
||||
} elseif ($UpdateIcon) {
|
||||
$shortcutShell = New-Object -ComObject WScript.Shell
|
||||
$shortcutLink = $shortcutShell.CreateShortcut($shortcutPath)
|
||||
$expectedScript = '"' + (Join-Path $shortcutProject 'run.ps1') + '"'
|
||||
if ($shortcutLink.Arguments.Contains($expectedScript)) {
|
||||
$shortcutLink.IconLocation = (Join-Path $shortcutProject 'assets\sub-control.ico') + ',0'
|
||||
$shortcutLink.Save()
|
||||
} else {
|
||||
throw 'Existing shortcut belongs to another installation; left unchanged.'
|
||||
}
|
||||
}
|
||||
|
||||
New-Item -ItemType Directory -Path (Split-Path -Parent $shortcutMarker) -Force | Out-Null
|
||||
Set-Content -LiteralPath $shortcutMarker -Value $shortcutPath
|
||||
} catch {
|
||||
# Desktop permissions must not prevent the controller from starting.
|
||||
Write-Warning "Could not create the SUB Control desktop shortcut: $_"
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
"""Best-effort Windows first-run shortcut, including direct Python launches."""
|
||||
import os
|
||||
from pathlib import Path
|
||||
import subprocess
|
||||
|
||||
|
||||
def ensure_desktop_shortcut():
|
||||
if os.name != "nt":
|
||||
return
|
||||
root = Path(__file__).resolve().parent
|
||||
if (root / "runtime" / "desktop-shortcut-created.txt").exists():
|
||||
return
|
||||
powershell = Path(os.environ["SystemRoot"]) / "System32/WindowsPowerShell/v1.0/powershell.exe"
|
||||
try:
|
||||
subprocess.run(
|
||||
[str(powershell), "-NoProfile", "-NonInteractive", "-File", str(root / "create_shortcut.ps1")],
|
||||
cwd=root, timeout=10, check=True, capture_output=True,
|
||||
creationflags=subprocess.CREATE_NO_WINDOW,
|
||||
)
|
||||
except (OSError, subprocess.SubprocessError) as error:
|
||||
print(f"Desktop shortcut setup skipped: {error}")
|
||||
@@ -0,0 +1,44 @@
|
||||
# V2 verification — 22 October 2026
|
||||
|
||||
## Passing checks
|
||||
|
||||
- 41 Python tests: vehicle-state confirmation, control leases/watchdogs, six-axis packet values, unsupported firmware/frame gating, endpoint handling, telemetry conversion/staleness, persisted names/profiles, recording chunks, and relay acknowledgement.
|
||||
- `node tests/controller_v2.cjs`: synthetic Xbox triggers, B/A direction, opposing input cancellation, six axes, custom buttons, limits, invalid/missing inputs, migration, and actions.
|
||||
- `node tests/controller_input.cjs`: existing stick conditioning and console parser checks.
|
||||
- Python compilation, JavaScript syntax checks, and `git diff --check`.
|
||||
|
||||
No tests opened a real COM port or armed a physical vehicle.
|
||||
|
||||
## Rendered browser checks
|
||||
|
||||
Used the supported local in-app browser with the real app assets in Demo Mode:
|
||||
|
||||
- Mapping dialog: three-axis and six-axis presets, saving, reopening after a full page reload, and retained LB/RB roll bindings.
|
||||
- Vehicle settings: saved BlueROV1 six-thruster preview, independent accessory relay selectors, and consistent FC/demo status.
|
||||
- Drive: all six command controls at 1024×768, 960×580 (the native window minimum), and 700×572; no overlap with the output toolbar.
|
||||
- Active-output list: six rows for the six-thruster preview, with scrolling and reversal buttons. General frames disable the SimpleROV-3-specific independent-scale mode.
|
||||
- Engagement: held F2 in Demo Mode, inspected rendered **engaging**, then **disengaging** and their settled states. Both words are spelled correctly, centered, and have no trailing dots.
|
||||
- Dashboard: camera-off state, active simulated inspection view, missing/offline readings, explicit Demo labeling, sensor values and video controls at desktop and compact sizes.
|
||||
- Recording: started/stopped a canvas preview recording; the browser produced a 1,386,065-byte WebM file.
|
||||
- Accessories: demo lights toggle, camera power toggle, and viewing stops after demo power-off.
|
||||
|
||||
Reduced-motion CSS is included. The connected browser offers viewport testing but no media-preference emulation, so a rendered reduced-motion override was not verified.
|
||||
|
||||
## Existing harness limitation
|
||||
|
||||
The older `tests/control_ui.test.cjs` fake-DOM harness is not passing. It reports 23 failures on the saved pre-V2 checkpoint and 21 on V2. Most fail before app initialization because the harness lacks `ResizeObserver`; it also has obsolete markup/animation assertions and omits browser dependencies. It is not counted as a passing check. Actual browser checks above establish the rendered behavior of this implementation.
|
||||
|
||||
## Startup measurement
|
||||
|
||||
Three fresh-process worker-module imports on this laptop:
|
||||
|
||||
| Build | Samples | Median |
|
||||
| --- | --- | --- |
|
||||
| Pre-V2 checkpoint | 781.8 / 616.3 / 655.3 ms | 655.3 ms |
|
||||
| V2 | 402.8 / 362.4 / 399.1 ms | 399.1 ms |
|
||||
|
||||
This measures the module import, not total app startup. The launcher also avoids pip on subsequent launches when requirements have not changed, and starts the web interface directly.
|
||||
|
||||
## Physical verification still required
|
||||
|
||||
Real Xbox hardware, live six-axis FC motor allocation, live sensor calibration, WHEP video from a Raspberry Pi, native WebView full-video recording, physical relay outputs, and tether/underwater behavior were not verified. The browser recording and native chunk-writing path were checked separately. BlueOS native camera discovery/signaling is not integrated; this release uses an explicit WHEP, HTTP video, or MJPEG URL.
|
||||
+127
@@ -0,0 +1,127 @@
|
||||
# Argo V2
|
||||
|
||||
V2 separates controller mapping, vehicle motion, ArduSub motor allocation, and camera transport. The pre-V2 app is preserved in commit `5e91c28` on `main`; development is on `v2`. A portable Git bundle was also saved locally. The checkpoint is also uploaded as `checkpoint/pre-v2-20261022`.
|
||||
|
||||
## Try it
|
||||
|
||||
1. Run `run.ps1`, select **Demo Mode**, and connect.
|
||||
2. Open **Vehicle**, select a **Preview frame**, and save. This changes the demo, never the connected FC's `FRAME_TYPE`.
|
||||
3. Open **Mapping**, choose **Triggers · 3** or **Six axes**, and save.
|
||||
4. Open **Dashboard** and press **Start** to see the simulated inspection camera. **Record** produces a WebM clip. The camera badge and sensor status identify demo data.
|
||||
|
||||
No physical port is opened in Demo Mode. Real TCP and UDP endpoints now connect to MAVLink instead of silently entering the demo.
|
||||
|
||||
## Xbox controls
|
||||
|
||||
| Motion | Triggers · 3 | Six axes |
|
||||
| --- | --- | --- |
|
||||
| Forward / back | RT / LT | RT / LT |
|
||||
| Rise / dive | B / A | B / A |
|
||||
| Turn | Left stick X | Left stick X |
|
||||
| Sideways | Unassigned | Right stick X |
|
||||
| Pitch | Unassigned | Left stick Y |
|
||||
| Roll | Unassigned | RB / LB |
|
||||
| Lights | X | X |
|
||||
| View stream | Y | Y |
|
||||
| Record | View | View |
|
||||
|
||||
Each motion has separate negative and positive bindings. Either direction can use a stick half, an analog trigger, a D-pad direction, or a button. Opposite commands cancel. Each motion has a limit; the profile also has dead zone and exponential response. The reverse arrow swaps its bindings. The **Buttons** disclosure configures optional accessory and media actions. Buttons do not arm the ROV.
|
||||
|
||||
Profiles are stored by controller ID in `controller_profiles.json`; **Xbox · offline** supplies a default before connecting a controller. Browser preview uses local storage. Existing stick mappings are migrated. Configuration is locked while armed or while the FC state is uncertain. Controls must return to neutral after input mode changes, reconnects, focus changes, or interruption. Accessory buttons also have to be released before they can trigger again.
|
||||
|
||||
Keyboard movement remains W/S, A/D (or Q/E), R/F. Additional axes use J/L for strafe, I/K for pitch, U/O for roll. The extra on-screen sliders return to center when released. F2 retains the 0.6-second engage hold; F3 requests disarm.
|
||||
|
||||
## Six thrusters and six axes
|
||||
|
||||
Your proposed arrangement can provide full control when the paired thrusters have useful moment arms:
|
||||
|
||||
| Pair | Shared thrust | Differential thrust |
|
||||
| --- | --- | --- |
|
||||
| Port / starboard, pointing forward | Surge | Yaw |
|
||||
| Front / rear, pointing vertically | Heave | Pitch |
|
||||
| Top / bottom, pointing sideways | Sway | Roll |
|
||||
|
||||
Translation uses the pair in the same direction; rotation uses opposite directions. Thruster directions, lever arms, balance and saturation still determine the result. The allocation matrix, whose columns are force direction and its moment `r × f`, must have rank six. Motor count alone does not establish this.
|
||||
|
||||
V2 sends body-motion demands to the FC. The autopilot owns its mixer and stabilization. Select/configure a firmware frame that matches the physical vehicle before using it. The app reads `FRAME_TYPE`; it does not infer a mixer from connected outputs or write a new frame automatically. Your orthogonal-pair design may require a custom firmware mixer if no stock frame matches its geometry.
|
||||
|
||||
| ArduSub frame | Motors | Available motion |
|
||||
| --- | --- | --- |
|
||||
| SimpleROV-3 (4) | 3 | Forward, vertical, yaw |
|
||||
| SimpleROV-4 (5) | 4 | Forward, vertical, yaw, roll |
|
||||
| SimpleROV-5 (6) | 5 | Forward, lateral, vertical, yaw, roll |
|
||||
| BlueROV1 (0) | 6 | All six axes |
|
||||
| Vectored (1) | 6 | All except pitch |
|
||||
| Vectored 6DOF (2, 3) | 8 | All six axes |
|
||||
|
||||
The verified six-axis wire mapping is ArduSub's `MANUAL_CONTROL`: X forward, Y lateral, Z vertical (500 neutral), R yaw, S pitch, T roll. Some generic joystick documentation describes S/T differently; this implementation follows ArduSub source. Firmware version is requested at connection; pitch/roll remain unavailable until compatible firmware is identified. ArduSub 4.5 uses S/T as ±400 PWM offsets; the current 4.8 development implementation scales normalized S/T. These encodings have automated checks; physical behavior is unverified.
|
||||
|
||||
The shared output limit applies to all motion axes. Full-frame demands use a conservative shared envelope before the FC mixer. This is an input-demand limit, not a calibrated thrust or electrical-current limit. The earlier independent motor-scale reconstruction is specific to SimpleROV-3 and is unavailable on other frames; applying it to a general mixer would be incorrect. Motor names, assignments, and direction controls remain available for active outputs.
|
||||
|
||||
References: [ArduSub frame configurations](https://ardupilot.org/sub/docs/sub-frames.html), [ArduSub 4.5 joystick source](https://github.com/ArduPilot/ardupilot/blob/Sub-4.5/ArduSub/joystick.cpp), [current joystick source](https://github.com/ArduPilot/ardupilot/blob/master/ArduSub/joystick.cpp), [Cockpit mapping and vehicle-version support](https://blueos.cloud/cockpit/docs/latest/usage/advanced/).
|
||||
|
||||
## Companion computer and tether
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
PC[Argo V2 on Windows] <-- Ethernet --> TOP[Topside media converter]
|
||||
TOP <-- Fibre tether --> ROV[Onboard media converter]
|
||||
ROV <-- Ethernet --> PI[Raspberry Pi / BlueOS]
|
||||
PI <-- USB or UART / MAVLink --> FC[ArduSub FC]
|
||||
CAM[USB or CSI camera] --> PI
|
||||
SENSOR[Pressure and power sensors] --> FC
|
||||
FC --> ESC[ESCs / thrusters]
|
||||
```
|
||||
|
||||
This is a proposed architecture, not installed hardware. Use a compatible Ethernet-to-fibre interface at each end, with optics, cable, terminations and housings selected for the tether length and environment. Fibre carries the data link; onboard power or a separate power path is still required. Ethernet lets telemetry and compressed video share a network while remaining separate application streams.
|
||||
|
||||
BlueOS is the researched companion option. It routes the FC's MAVLink traffic and manages cameras on supported Raspberry Pi hardware. In BlueOS, configure a MAVLink UDP output to the topside computer's tether-interface IP on port 14550. In Argo, choose **Network · UDP 14550**, or enter an explicit endpoint in Link settings. The listener uses `udpin:0.0.0.0:14550`; choose an interface-specific address with a custom endpoint if needed. The PC and Pi must be reachable on the same tether network.
|
||||
|
||||
Video uses an independent browser media connection. This release accepts **WebRTC · WHEP**, a browser-playable **HTTP video** URL, or **MJPEG**. It does not directly decode RTSP or raw UDP H.264. BlueOS's camera service has its own signaling interface, so entering its normal web-dashboard address as a WHEP URL will not work. Use a compatible WHEP endpoint, such as MediaMTX connected to the Pi camera or an RTSP source. Integrating BlueOS's native camera discovery/signaling is a separate follow-up.
|
||||
|
||||
Example MediaMTX path for a supported Pi camera:
|
||||
|
||||
```yaml
|
||||
paths:
|
||||
cam:
|
||||
source: rpiCamera
|
||||
```
|
||||
|
||||
With the server configured on the tether network, a typical WHEP endpoint is `http://<pi-address>:8889/cam/whep`. Verify it against your MediaMTX configuration. The browser needs CORS permission for the local Argo origin, and the negotiated WebRTC media ports must be reachable. Use a browser-compatible codec. No firewall, authentication, or origin policy is changed automatically by Argo.
|
||||
|
||||
**Start/Stop** controls viewing. **Camera power** is a separate optional relay action. **Record** records the incoming browser video; desktop clips are written incrementally to `runtime/recordings/`, and browser-preview clips download as WebM. MJPEG playback has no video recording control. For recordings that must survive tether loss, configure recording on the Pi as well.
|
||||
|
||||
References: [BlueOS companion hardware](https://blueos.cloud/docs/latest/integrations/hardware/required/onboard-computer/), [tether overview](https://blueos.cloud/docs/latest/integrations/hardware/required/tether/), [BlueOS endpoints and video services](https://blueos.cloud/docs/latest/usage/advanced/), [MediaMTX Pi cameras](https://mediamtx.org/docs/static-sources/raspberry-pi-cameras), [browser playback](https://mediamtx.org/docs/read/web-browsers).
|
||||
|
||||
## Sensors and electricity
|
||||
|
||||
The dashboard displays FC telemetry only when its group is fresh. Missing or stale values show a dash. Demo values are explicitly marked.
|
||||
|
||||
| Reading | Source | Units |
|
||||
| --- | --- | --- |
|
||||
| Pitch, roll, heading and angular rates | ATTITUDE | degrees, degrees/s |
|
||||
| Depth estimate relative to surface/home | GLOBAL_POSITION_INT.relative_alt | m, positive down |
|
||||
| Acceleration, gyroscope, magnetic field | SCALED_IMU | m/s², rad/s, gauss |
|
||||
| External pressure / temperature | SCALED_PRESSURE2 | hPa, °C |
|
||||
| Battery voltage, current and charge | SYS_STATUS / battery 0 BATTERY_STATUS | V, A, mAh |
|
||||
|
||||
Depth needs a correctly configured and calibrated external pressure sensor. Raw accelerometer values include gravity; they are not speed or a gravity-compensated acceleration estimate. Heading is FC-estimated yaw, not a separately read compass bearing.
|
||||
|
||||
Current is measured in **amps (A)** at the present moment. Power is **watts (W) = V × A**. Consumption is charge integrated over time, displayed as **mAh**; it is not amps per second. Use a correctly sized, calibrated voltage/current power monitor connected to the FC. Voltage alone cannot measure current. The app prefers reported consumption and otherwise integrates fresh current as a session estimate; source information is in Battery settings. A voltage update does not make an old current reading fresh.
|
||||
|
||||
**Log data** writes received normalized sensor values to `logs/sensors_<timestamp>.csv`. Existing raw MAVLink session logs remain in `logs/`. Rates for attitude, depth, IMU and pressure are independently configurable. Begin with low rates on RS-485; use a higher-bandwidth tether for video and increased telemetry.
|
||||
|
||||
Lights and camera power require configured, separate FC relay outputs. Configure relay assignments on the FC, then select their zero-based relay numbers in **Vehicle**. Buttons wait for command acknowledgement and expose timeout/rejection status. An accepted command confirms FC acceptance, not measured physical illumination or camera power.
|
||||
|
||||
Reference: [ArduSub battery monitor calibration](https://ardupilot.org/sub/docs/common-power-module-configuration-in-mission-planner.html), [MAVLink message definitions](https://mavlink.io/en/messages/common.html).
|
||||
|
||||
## Performance and verification
|
||||
|
||||
- The launcher only installs dependencies when the requirements fingerprint changes.
|
||||
- The production path launches `web_ui.py` directly. The old Tk frontend is loaded lazily from `legacy_ui.py`.
|
||||
- The asset server is threaded. Video frames stay in the browser's media pipeline.
|
||||
- Network MAVLink skips the redundant packet-leading heartbeat needed by the existing serial modules.
|
||||
- V2 controller input has one command ramp in the worker, avoiding the previous additional browser smoothing delay.
|
||||
- V2 controller-profile and station files are validated and replaced atomically. Existing input sequence, stale-bridge and heartbeat watchdogs cover all six motion axes.
|
||||
|
||||
Automated checks use synthetic gamepads, mock MAVLink transports, temporary configuration files and telemetry fixtures. Browser checks use Demo Mode and the actual rendered app. No live vehicle has been armed or commanded during development. Real controller hardware, Pi streaming, FC accessories, sensor calibration and water performance still need physical verification.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
+814
@@ -0,0 +1,814 @@
|
||||
"""Optional Tk frontend. Imported only when explicitly requested."""
|
||||
import queue
|
||||
import json
|
||||
import os
|
||||
import threading
|
||||
import time
|
||||
import tkinter as tk
|
||||
import customtkinter as ctk
|
||||
from pathlib import Path
|
||||
from tkinter import messagebox, ttk
|
||||
from serial.tools import list_ports
|
||||
from app import Axes, MavlinkWorker, MOTOR_FUNCTIONS, NEUTRAL_Z, normalize_endpoint
|
||||
|
||||
class Joystick(tk.Canvas):
|
||||
def __init__(self, master, callback, **kwargs):
|
||||
self.size = 276
|
||||
self.center_point = self.size / 2
|
||||
self.radius = 108
|
||||
self.knob_radius = 24
|
||||
super().__init__(master, width=self.size, height=self.size, bg="#f5f5f2",
|
||||
highlightthickness=0, bd=0, **kwargs)
|
||||
self.callback = callback
|
||||
self.value = (0.0, 0.0)
|
||||
self.return_job = None
|
||||
c, r, k = self.center_point, self.radius, self.knob_radius
|
||||
self.create_oval(c-r, c-r, c+r, c+r, fill="#e9e9e5", outline="#d8d8d2", width=2)
|
||||
self.create_oval(c-70, c-70, c+70, c+70, outline="#deded8", width=1)
|
||||
self.create_line(c, c-r+12, c, c+r-12, fill="#d2d2cc", dash=(3, 6))
|
||||
self.create_line(c-r+12, c, c+r-12, c, fill="#d2d2cc", dash=(3, 6))
|
||||
self.create_text(c, 13, text="FORWARD", fill="#8a8a84", font=("Helvetica", 8, "bold"))
|
||||
self.create_text(c, self.size-13, text="REVERSE", fill="#8a8a84", font=("Helvetica", 8, "bold"))
|
||||
self.create_text(25, c, text="TURN\nLEFT", fill="#8a8a84", font=("Helvetica", 8, "bold"))
|
||||
self.create_text(self.size-25, c, text="TURN\nRIGHT", fill="#8a8a84", font=("Helvetica", 8, "bold"))
|
||||
self.knob = self.create_oval(c-k, c-k, c+k, c+k,
|
||||
fill="#575c61", outline="#42474b", width=2)
|
||||
self.bind("<Button-1>", self._move)
|
||||
self.bind("<B1-Motion>", self._move)
|
||||
self.bind("<ButtonRelease-1>", self._release)
|
||||
|
||||
def _move(self, event):
|
||||
if self.return_job is not None:
|
||||
self.after_cancel(self.return_job)
|
||||
self.return_job = None
|
||||
dx, dy = event.x - self.center_point, event.y - self.center_point
|
||||
length = max(1.0, (dx * dx + dy * dy) ** 0.5)
|
||||
if length > self.radius:
|
||||
dx, dy = dx * self.radius / length, dy * self.radius / length
|
||||
self.set_immediate(dx / self.radius, -dy / self.radius)
|
||||
|
||||
def set_immediate(self, x: float, y: float):
|
||||
if self.return_job is not None:
|
||||
self.after_cancel(self.return_job)
|
||||
self.return_job = None
|
||||
self.value = (x, y)
|
||||
c, k = self.center_point, self.knob_radius
|
||||
dx, dy = x * self.radius, -y * self.radius
|
||||
self.coords(self.knob, c-k+dx, c-k+dy, c+k+dx, c+k+dy)
|
||||
self.callback()
|
||||
|
||||
def _release(self, _event=None):
|
||||
start_x, start_y = self.value
|
||||
started = time.monotonic()
|
||||
duration = 0.40
|
||||
|
||||
def ease_back():
|
||||
elapsed = time.monotonic() - started
|
||||
progress = min(1.0, elapsed / duration)
|
||||
# Smoothstep has zero slope at both ends, avoiding a motor kick.
|
||||
eased = progress * progress * (3.0 - 2.0 * progress)
|
||||
remaining = 1.0 - eased
|
||||
x, y = start_x * remaining, start_y * remaining
|
||||
self.value = (x, y)
|
||||
c, k = self.center_point, self.knob_radius
|
||||
dx, dy = x * self.radius, -y * self.radius
|
||||
self.coords(self.knob, c-k+dx, c-k+dy, c+k+dx, c+k+dy)
|
||||
self.callback()
|
||||
if progress < 1.0:
|
||||
self.return_job = self.after(20, ease_back)
|
||||
else:
|
||||
self.return_job = None
|
||||
|
||||
if self.return_job is not None:
|
||||
self.after_cancel(self.return_job)
|
||||
ease_back()
|
||||
|
||||
def center(self):
|
||||
if self.return_job is not None:
|
||||
self.after_cancel(self.return_job)
|
||||
self.return_job = None
|
||||
self.value = (0.0, 0.0)
|
||||
c, k = self.center_point, self.knob_radius
|
||||
self.coords(self.knob, c-k, c-k, c+k, c+k)
|
||||
self.callback()
|
||||
|
||||
|
||||
class SpringScale(ctk.CTkSlider):
|
||||
"""A Scale that smoothly returns to zero when the pointer is released."""
|
||||
|
||||
def __init__(self, master, **kwargs):
|
||||
self.callback = kwargs.pop("command", None)
|
||||
kwargs.pop("showvalue", None)
|
||||
kwargs.pop("bg", None)
|
||||
kwargs.pop("troughcolor", None)
|
||||
kwargs.pop("activebackground", None)
|
||||
kwargs.pop("highlightthickness", None)
|
||||
kwargs.pop("bd", None)
|
||||
kwargs.pop("sliderrelief", None)
|
||||
if "orient" in kwargs:
|
||||
kwargs["orientation"] = kwargs.pop("orient")
|
||||
length = kwargs.pop("length", 200)
|
||||
if kwargs.get("orientation", "horizontal") == "vertical":
|
||||
kwargs.setdefault("height", length)
|
||||
kwargs.setdefault("width", 18)
|
||||
else:
|
||||
kwargs.setdefault("width", length)
|
||||
kwargs.setdefault("height", 18)
|
||||
super().__init__(master, command=self._changed, corner_radius=10,
|
||||
button_corner_radius=10, button_length=22,
|
||||
fg_color="#dbe3ee", progress_color="#60a5fa",
|
||||
button_color="#2563eb", button_hover_color="#1d4ed8",
|
||||
**kwargs)
|
||||
self.return_job = None
|
||||
self.bind("<ButtonPress-1>", self._cancel_return, add="+")
|
||||
self.bind("<ButtonRelease-1>", self._released, add="+")
|
||||
|
||||
def _changed(self, value):
|
||||
if self.callback:
|
||||
self.callback(value)
|
||||
|
||||
def _set_and_notify(self, value):
|
||||
self.set(value)
|
||||
if self.callback:
|
||||
self.callback(value)
|
||||
|
||||
def _cancel_return(self, _event=None):
|
||||
if self.return_job is not None:
|
||||
self.after_cancel(self.return_job)
|
||||
self.return_job = None
|
||||
|
||||
def _released(self, _event=None):
|
||||
# Wait until Tk's native Scale binding has applied its final value.
|
||||
self.after_idle(self.spring_to_center)
|
||||
|
||||
def set_immediate(self, value):
|
||||
self._cancel_return()
|
||||
self._set_and_notify(value)
|
||||
|
||||
def spring_to_center(self):
|
||||
self._cancel_return()
|
||||
start = float(self.get())
|
||||
if abs(start) < 0.5:
|
||||
self._set_and_notify(0)
|
||||
return
|
||||
started = time.monotonic()
|
||||
duration = 0.40
|
||||
|
||||
def ease_back():
|
||||
progress = min(1.0, (time.monotonic() - started) / duration)
|
||||
eased = progress * progress * (3.0 - 2.0 * progress)
|
||||
self._set_and_notify(start * (1.0 - eased))
|
||||
if progress < 1.0:
|
||||
self.return_job = self.after(20, ease_back)
|
||||
else:
|
||||
self._set_and_notify(0)
|
||||
self.return_job = None
|
||||
|
||||
ease_back()
|
||||
|
||||
|
||||
class App(tk.Tk):
|
||||
def __init__(self):
|
||||
super().__init__()
|
||||
self.title("SUB Control")
|
||||
self.geometry("1040x800")
|
||||
self.minsize(920, 720)
|
||||
self.events = queue.Queue()
|
||||
self.worker = MavlinkWorker(self.events)
|
||||
self.keys = set()
|
||||
self.keyboard_yaw = 0
|
||||
self.keyboard_vertical = 0
|
||||
self.keyboard_planar = (0, 0)
|
||||
self.servo_functions = {}
|
||||
self.motor_directions = {}
|
||||
self.battery_config_path = Path(__file__).resolve().parent / "battery_settings.json"
|
||||
self.battery_config = {
|
||||
"cells": 4,
|
||||
"capacity_mah": 5500,
|
||||
"c_rating": 35,
|
||||
"full_v_per_cell": 4.20,
|
||||
"empty_v_per_cell": 3.30,
|
||||
"warning_percent": 20,
|
||||
}
|
||||
self.battery_voltage = None
|
||||
self.battery_voltage_smoothed = None
|
||||
self._load_battery_settings()
|
||||
self._configure_styles()
|
||||
self.protocol("WM_DELETE_WINDOW", self.close)
|
||||
self._build()
|
||||
self.refresh_ports()
|
||||
self.bind_all("<KeyPress>", self._key_down)
|
||||
self.bind_all("<KeyRelease>", self._key_up)
|
||||
self.after(50, self._poll)
|
||||
self.after(500, self._link_watchdog)
|
||||
|
||||
def _configure_styles(self):
|
||||
self.configure(bg="#e8e9e7")
|
||||
style = ttk.Style(self)
|
||||
try:
|
||||
style.theme_use("clam")
|
||||
except tk.TclError:
|
||||
pass
|
||||
style.configure("TFrame", background="#fbfbf9")
|
||||
style.configure("TLabel", background="#fbfbf9", foreground="#202224",
|
||||
font=("Helvetica", 9))
|
||||
style.configure("TLabelframe", background="#f4f6f8", bordercolor="#d8dee8",
|
||||
borderwidth=1, relief="solid")
|
||||
style.configure("TLabelframe.Label", background="#f4f6f8", foreground="#475569",
|
||||
font=("Segoe UI", 9, "bold"))
|
||||
style.configure("TButton", font=("Segoe UI", 9), padding=(10, 7),
|
||||
background="#ffffff", foreground="#1e293b", bordercolor="#cbd5e1")
|
||||
style.map("TButton", background=[("active", "#e8eef7")])
|
||||
style.configure("Primary.TButton", background="#2563eb", foreground="#ffffff",
|
||||
bordercolor="#2563eb", font=("Segoe UI", 9, "bold"))
|
||||
style.map("Primary.TButton", background=[("active", "#1d4ed8")])
|
||||
style.configure("Danger.TButton", background="#dc2626", foreground="#ffffff",
|
||||
bordercolor="#dc2626", font=("Segoe UI", 9, "bold"))
|
||||
style.map("Danger.TButton", background=[("active", "#b91c1c")])
|
||||
style.configure("Title.TLabel", font=("Segoe UI", 18, "bold"), foreground="#0f172a")
|
||||
style.configure("Subtitle.TLabel", font=("Segoe UI", 9), foreground="#64748b")
|
||||
style.configure("Status.TLabel", font=("Segoe UI", 9, "bold"))
|
||||
style.configure("Footer.TLabel", background="#e9eef5", foreground="#475569",
|
||||
font=("Segoe UI", 9))
|
||||
style.configure("Treeview", rowheight=28, background="#ffffff", fieldbackground="#ffffff",
|
||||
foreground="#26282a", bordercolor="#e1e1dc", font=("Helvetica", 9))
|
||||
style.configure("Treeview.Heading", font=("Helvetica", 9, "bold"), padding=(6, 6),
|
||||
background="#f0f0ed", foreground="#4c4f52")
|
||||
style.map("Treeview", background=[("selected", "#dbeafe")],
|
||||
foreground=[("selected", "#1e3a8a")])
|
||||
style.configure("Horizontal.TProgressbar", troughcolor="#e2e8f0", background="#22c55e",
|
||||
bordercolor="#e2e8f0", lightcolor="#22c55e", darkcolor="#22c55e")
|
||||
|
||||
def _console_button(self, master, text, command, kind="neutral", width=112):
|
||||
colors = {
|
||||
"neutral": ("#f4f4f1", "#e9e9e4", "#343739", "#deded8"),
|
||||
"primary": ("#dcebd5", "#cde2c4", "#27401f", "#c4dcb9"),
|
||||
"danger": ("#f7dfdc", "#f1cfcb", "#7b3029", "#edcec9"),
|
||||
}
|
||||
color, hover, text_color, border = colors[kind]
|
||||
return ctk.CTkButton(
|
||||
master, text=text, command=command, width=width, height=34,
|
||||
corner_radius=11, fg_color=color, hover_color=hover,
|
||||
text_color=text_color, border_color=border, border_width=1,
|
||||
font=ctk.CTkFont("Helvetica", 12, "bold" if kind != "neutral" else "normal"),
|
||||
bg_color="transparent",
|
||||
)
|
||||
|
||||
def _console_combo(self, master, values, width):
|
||||
return ctk.CTkComboBox(
|
||||
master, values=[str(value) for value in values], width=width, height=34,
|
||||
corner_radius=10, border_width=1, border_color="#cbd5e1",
|
||||
fg_color="#ffffff", button_color="#e8eef7",
|
||||
button_hover_color="#dbeafe", dropdown_fg_color="#ffffff",
|
||||
dropdown_hover_color="#dbeafe", text_color="#1e293b",
|
||||
bg_color="transparent", state="readonly",
|
||||
)
|
||||
|
||||
def _build(self):
|
||||
shell = ctk.CTkFrame(self, fg_color="#f8f8f6", corner_radius=24,
|
||||
border_width=1, border_color="#d5d6d3")
|
||||
shell.pack(fill="both", expand=True, padx=18, pady=18)
|
||||
shell.grid_rowconfigure(0, weight=1)
|
||||
shell.grid_columnconfigure(1, weight=1)
|
||||
|
||||
rail = ctk.CTkFrame(shell, width=248, fg_color="#282d30", corner_radius=22)
|
||||
rail.grid(row=0, column=0, sticky="nsew")
|
||||
rail.grid_propagate(False)
|
||||
workspace = ctk.CTkFrame(shell, fg_color="#fbfbf9", corner_radius=22)
|
||||
workspace.grid(row=0, column=1, sticky="nsew")
|
||||
|
||||
ctk.CTkLabel(rail, text="SUB CONTROL / 03", text_color="#f4f4f1",
|
||||
font=ctk.CTkFont("Helvetica", 13, "bold")).pack(
|
||||
anchor="w", padx=24, pady=(24, 0))
|
||||
ctk.CTkLabel(rail, text="ArduSub vehicle", text_color="#8f9699",
|
||||
font=ctk.CTkFont("Helvetica", 10)).pack(anchor="w", padx=24, pady=(2, 14))
|
||||
|
||||
vehicle_art = tk.Canvas(rail, width=204, height=250, bg="#282d30",
|
||||
highlightthickness=0, bd=0)
|
||||
vehicle_art.pack(padx=20, pady=(5, 4))
|
||||
vehicle_art.create_oval(47, 27, 157, 223, fill="#353b3e", outline="#555c60", width=2)
|
||||
vehicle_art.create_oval(68, 49, 136, 201, fill="#303538", outline="#444a4e")
|
||||
vehicle_art.create_oval(80, 102, 124, 146, fill="#5e666a", outline="#788084", width=2)
|
||||
vehicle_art.create_oval(21, 57, 62, 100, fill="#202426", outline="#62696d", width=2)
|
||||
vehicle_art.create_oval(142, 57, 183, 100, fill="#202426", outline="#62696d", width=2)
|
||||
vehicle_art.create_line(42, 79, 72, 93, fill="#757d81", width=3)
|
||||
vehicle_art.create_line(162, 79, 132, 93, fill="#757d81", width=3)
|
||||
vehicle_art.create_text(102, 236, text="TOP VIEW • 3 THRUSTERS",
|
||||
fill="#7e8689", font=("Helvetica", 8, "bold"))
|
||||
|
||||
ctk.CTkLabel(rail, text="Vehicle", text_color="#959c9f",
|
||||
font=ctk.CTkFont("Helvetica", 10)).pack(anchor="w", padx=24, pady=(5, 0))
|
||||
self.vehicle_label = ctk.CTkLabel(rail, text="No heartbeat", text_color="#f4f4f1",
|
||||
font=ctk.CTkFont("Helvetica", 14, "bold"))
|
||||
self.vehicle_label.pack(anchor="w", padx=24)
|
||||
|
||||
rail_bottom = ctk.CTkFrame(rail, fg_color="transparent")
|
||||
rail_bottom.pack(side="bottom", fill="x", padx=24, pady=22)
|
||||
self.battery_summary = ctk.CTkLabel(
|
||||
rail_bottom, text="Battery —", text_color="#f4f4f1",
|
||||
font=ctk.CTkFont("Helvetica", 13, "bold"), anchor="w"
|
||||
)
|
||||
self.battery_summary.pack(fill="x")
|
||||
self.battery_meta = ctk.CTkLabel(
|
||||
rail_bottom, text="Waiting for voltage", text_color="#92999c",
|
||||
font=ctk.CTkFont("Helvetica", 9), anchor="w"
|
||||
)
|
||||
self.battery_meta.pack(fill="x", pady=(0, 5))
|
||||
self.battery_bar = ctk.CTkProgressBar(
|
||||
rail_bottom, height=7, corner_radius=4, fg_color="#454b4e",
|
||||
progress_color="#c4e46c"
|
||||
)
|
||||
self.battery_bar.set(0)
|
||||
self.battery_bar.pack(fill="x", pady=(0, 18))
|
||||
self.link_label = ctk.CTkLabel(
|
||||
rail_bottom, text="● DISCONNECTED", text_color="#f08a82",
|
||||
font=ctk.CTkFont("Helvetica", 10, "bold"), anchor="w"
|
||||
)
|
||||
self.link_label.pack(fill="x")
|
||||
|
||||
header = ctk.CTkFrame(workspace, fg_color="transparent")
|
||||
header.pack(fill="x", padx=28, pady=(24, 14))
|
||||
title = ctk.CTkFrame(header, fg_color="transparent")
|
||||
title.pack(side="left")
|
||||
ctk.CTkLabel(title, text="Drive", text_color="#17191a",
|
||||
font=ctk.CTkFont("Helvetica", 24, "bold")).pack(anchor="w")
|
||||
ctk.CTkLabel(title, text="Differential steering • MANUAL control",
|
||||
text_color="#8a8c8e", font=ctk.CTkFont("Helvetica", 10)).pack(anchor="w")
|
||||
|
||||
top = ctk.CTkFrame(header, fg_color="transparent")
|
||||
top.pack(side="right")
|
||||
self.port = self._console_combo(top, [], 190)
|
||||
self.port.grid(row=0, column=0, padx=4)
|
||||
self._console_button(top, "↻", self.refresh_ports, width=38).grid(row=0, column=1, padx=4)
|
||||
self.baud = self._console_combo(top, (9600, 19200, 38400, 57600, 115200), 105)
|
||||
self.baud.set("57600")
|
||||
self.rate = self._console_combo(top, (10, 20), 72)
|
||||
self.rate.set("20")
|
||||
self.link_settings_button = self._console_button(
|
||||
top, "•••", self._toggle_link_settings, width=38
|
||||
)
|
||||
self.link_settings_button.grid(row=0, column=2, padx=4)
|
||||
self.connect_button = self._console_button(
|
||||
top, "Connect", self.toggle_connect, kind="primary", width=110
|
||||
)
|
||||
self.connect_button.grid(row=0, column=3, padx=(4, 0))
|
||||
|
||||
separator = ctk.CTkFrame(workspace, height=1, fg_color="#e7e7e3")
|
||||
separator.pack(fill="x", padx=28)
|
||||
|
||||
controls = ctk.CTkFrame(workspace, fg_color="transparent")
|
||||
controls.pack(fill="both", expand=True, padx=28, pady=18)
|
||||
controls.grid_rowconfigure(0, weight=1)
|
||||
controls.grid_columnconfigure(0, weight=1)
|
||||
controls.grid_columnconfigure(1, minsize=214)
|
||||
|
||||
drive_card = ctk.CTkFrame(controls, fg_color="#f5f5f2", corner_radius=18)
|
||||
drive_card.grid(row=0, column=0, sticky="nsew", padx=(0, 12))
|
||||
ctk.CTkLabel(drive_card, text="STEER + THROTTLE", text_color="#66696b",
|
||||
font=ctk.CTkFont("Helvetica", 10, "bold")).pack(pady=(18, 0))
|
||||
self.joystick = Joystick(drive_card, self._axes_changed)
|
||||
self.joystick.pack(expand=True, pady=(4, 0))
|
||||
ctk.CTkLabel(drive_card, text="W / S drive • A / D steer",
|
||||
text_color="#969896", font=ctk.CTkFont("Helvetica", 9)).pack(pady=(0, 16))
|
||||
|
||||
heave_card = ctk.CTkFrame(controls, fg_color="#f5f5f2", corner_radius=18)
|
||||
heave_card.grid(row=0, column=1, sticky="nsew")
|
||||
ctk.CTkLabel(heave_card, text="VERTICAL", text_color="#66696b",
|
||||
font=ctk.CTkFont("Helvetica", 10, "bold")).pack(pady=(18, 2))
|
||||
ctk.CTkLabel(heave_card, text="RISE", text_color="#969896",
|
||||
font=ctk.CTkFont("Helvetica", 8, "bold")).pack()
|
||||
self.vertical = SpringScale(
|
||||
heave_card, from_=100, to=-100, orient="vertical", length=230,
|
||||
command=lambda _: self._axes_changed()
|
||||
)
|
||||
self.vertical.set(0)
|
||||
self.vertical.pack(expand=True, pady=8)
|
||||
ctk.CTkLabel(heave_card, text="DIVE", text_color="#969896",
|
||||
font=ctk.CTkFont("Helvetica", 8, "bold")).pack()
|
||||
ctk.CTkLabel(heave_card, text="R / F • springs to neutral",
|
||||
text_color="#969896", font=ctk.CTkFont("Helvetica", 9)).pack(pady=(4, 16))
|
||||
|
||||
self.battery_cells = tk.StringVar(value=str(self.battery_config["cells"]))
|
||||
self.battery_capacity = tk.StringVar(value=str(self.battery_config["capacity_mah"]))
|
||||
self.battery_c_rating = tk.StringVar(value=str(self.battery_config["c_rating"]))
|
||||
self.battery_full_cell = tk.StringVar(value=str(self.battery_config["full_v_per_cell"]))
|
||||
self.battery_empty_cell = tk.StringVar(value=str(self.battery_config["empty_v_per_cell"]))
|
||||
self.battery_warning = tk.StringVar(value=str(self.battery_config["warning_percent"]))
|
||||
fields = (
|
||||
("Cells (S)", self.battery_cells, 5),
|
||||
("Capacity mAh", self.battery_capacity, 8),
|
||||
("C rating", self.battery_c_rating, 5),
|
||||
("Full V/cell", self.battery_full_cell, 6),
|
||||
("Empty V/cell", self.battery_empty_cell, 6),
|
||||
("Warn %", self.battery_warning, 5),
|
||||
)
|
||||
self.battery_settings_frame = ctk.CTkFrame(workspace, fg_color="#f0f0ed", corner_radius=14)
|
||||
for column, (label, variable, width) in enumerate(fields):
|
||||
group = ctk.CTkFrame(self.battery_settings_frame, fg_color="transparent")
|
||||
group.grid(row=0, column=column, padx=(0, 8), sticky="w")
|
||||
ctk.CTkLabel(group, text=label, text_color="#66696b",
|
||||
font=ctk.CTkFont("Helvetica", 9)).pack(anchor="w")
|
||||
ctk.CTkEntry(group, textvariable=variable, width=max(62, width * 9), height=30,
|
||||
corner_radius=8, border_color="#d0d0cb").pack(anchor="w")
|
||||
self._console_button(self.battery_settings_frame, "Apply", self._apply_battery_settings,
|
||||
kind="primary", width=82).grid(
|
||||
row=0, column=6, padx=(8, 0), sticky="sew"
|
||||
)
|
||||
self.battery_settings_frame.pack_forget()
|
||||
|
||||
actions = ctk.CTkFrame(workspace, fg_color="transparent")
|
||||
actions.pack(fill="x", padx=28, pady=(0, 14))
|
||||
self._console_button(actions, "MANUAL", self.set_manual, width=94).pack(side="left", padx=3)
|
||||
self._console_button(actions, "ARM", self.arm, kind="primary", width=82).pack(side="left", padx=3)
|
||||
self._console_button(actions, "DISARM", self.disarm, kind="danger", width=92).pack(side="left", padx=3)
|
||||
ctk.CTkLabel(actions, text="Output", text_color="#777a7c",
|
||||
font=ctk.CTkFont("Helvetica", 10)).pack(side="left", padx=(18, 4))
|
||||
self.gain = ctk.CTkSlider(
|
||||
actions, from_=5, to=50, number_of_steps=45, width=170, height=18,
|
||||
command=self._gain_changed, corner_radius=10, button_corner_radius=10,
|
||||
button_length=22, fg_color="#dbe3ee", progress_color="#60a5fa",
|
||||
button_color="#2563eb", button_hover_color="#1d4ed8",
|
||||
bg_color="transparent",
|
||||
)
|
||||
self.gain.set(20)
|
||||
self.gain.pack(side="left")
|
||||
self.gain_text = ctk.CTkLabel(actions, text="20%", text_color="#55585a",
|
||||
font=ctk.CTkFont("Helvetica", 10, "bold"))
|
||||
self.gain_text.pack(side="left")
|
||||
self._console_button(actions, "Motor setup", self._toggle_motor_setup, width=112).pack(
|
||||
side="right", padx=3
|
||||
)
|
||||
self._console_button(actions, "Battery", self._toggle_battery_settings, width=88).pack(
|
||||
side="right", padx=3
|
||||
)
|
||||
|
||||
assignments = ctk.CTkFrame(workspace, fg_color="#f0f0ed", corner_radius=14)
|
||||
self.assignments_frame = assignments
|
||||
self.servo_tree = ttk.Treeview(
|
||||
assignments, columns=("output", "function", "reversed"),
|
||||
show="headings", height=5, selectmode="browse",
|
||||
)
|
||||
self.servo_tree.heading("output", text="Output")
|
||||
self.servo_tree.heading("function", text="Function")
|
||||
self.servo_tree.heading("reversed", text="Motor reversed")
|
||||
self.servo_tree.column("output", width=90, anchor="center", stretch=False)
|
||||
self.servo_tree.column("function", width=220, anchor="w")
|
||||
self.servo_tree.column("reversed", width=90, anchor="center", stretch=False)
|
||||
for number in range(1, 17):
|
||||
self.servo_tree.insert("", "end", iid=str(number),
|
||||
values=(f"SERVO{number}", "Waiting…", "Waiting…"))
|
||||
self.servo_tree.pack(side="left", fill="x", expand=True)
|
||||
scrollbar = ttk.Scrollbar(assignments, orient="vertical", command=self.servo_tree.yview)
|
||||
scrollbar.pack(side="left", fill="y")
|
||||
self.servo_tree.configure(yscrollcommand=scrollbar.set)
|
||||
|
||||
edit = ctk.CTkFrame(assignments, fg_color="transparent")
|
||||
edit.pack(side="right", fill="y")
|
||||
ctk.CTkLabel(edit, text="Selected output function", text_color="#55585a").pack(anchor="w")
|
||||
motor_choices = ["Unassigned (0)"] + [f"Motor {number}" for number in range(1, 13)]
|
||||
self.motor_function = self._console_combo(edit, motor_choices, 165)
|
||||
self.motor_function.set("Motor 1")
|
||||
self.motor_function.pack(fill="x", pady=(2, 5))
|
||||
self._console_button(edit, "Apply function", self.apply_servo_function, width=165).pack(fill="x", pady=2)
|
||||
self._console_button(edit, "Reverse motor", self.toggle_servo_reversed, width=165).pack(fill="x", pady=2)
|
||||
ctk.CTkLabel(edit, text="Changes require DISARMED", text_color="#a16207").pack(pady=(8, 0))
|
||||
|
||||
log_frame = ctk.CTkFrame(workspace, fg_color="transparent")
|
||||
log_frame.pack(fill="x", padx=28, pady=(0, 12))
|
||||
self.log_frame = log_frame
|
||||
self.log_path_text = tk.StringVar(value="Session log starts when connected")
|
||||
ctk.CTkLabel(log_frame, textvariable=self.log_path_text, anchor="w", text_color="#8b8d8f",
|
||||
font=ctk.CTkFont("Helvetica", 9)).pack(side="left", fill="x", expand=True)
|
||||
self._console_button(log_frame, "Open logs", self.open_logs_folder, width=96).pack(side="right")
|
||||
|
||||
self.status_text = tk.StringVar(value="Ready. Controls are neutral; vehicle is not connected.")
|
||||
ctk.CTkLabel(workspace, textvariable=self.status_text, anchor="w", height=34,
|
||||
corner_radius=12, fg_color="#eeeeea", text_color="#65686a",
|
||||
font=ctk.CTkFont("Helvetica", 9)).pack(fill="x", padx=28, pady=(0, 18))
|
||||
|
||||
def refresh_ports(self):
|
||||
ports = [p.device for p in list_ports.comports()]
|
||||
for sim in ("tcp:127.0.0.1:5760", "udpin:127.0.0.1:14550"):
|
||||
if sim not in ports:
|
||||
ports.append(sim)
|
||||
self.port.configure(values=ports)
|
||||
if ports and self.port.get() not in ports:
|
||||
self.port.set(ports[0])
|
||||
|
||||
def _toggle_battery_settings(self):
|
||||
if self.battery_settings_frame.winfo_ismapped():
|
||||
self.battery_settings_frame.pack_forget()
|
||||
else:
|
||||
self.battery_settings_frame.pack(
|
||||
fill="x", padx=28, pady=(0, 12), before=self.log_frame
|
||||
)
|
||||
|
||||
def _toggle_link_settings(self):
|
||||
if self.baud.winfo_ismapped():
|
||||
self.baud.grid_remove()
|
||||
self.rate.grid_remove()
|
||||
else:
|
||||
self.baud.grid(row=1, column=0, sticky="e", padx=4, pady=(6, 0))
|
||||
self.rate.grid(row=1, column=1, sticky="w", padx=4, pady=(6, 0))
|
||||
|
||||
def _toggle_motor_setup(self):
|
||||
if self.assignments_frame.winfo_ismapped():
|
||||
self.assignments_frame.pack_forget()
|
||||
else:
|
||||
self.assignments_frame.pack(
|
||||
fill="x", padx=28, pady=(0, 12), before=self.log_frame
|
||||
)
|
||||
|
||||
def _load_battery_settings(self):
|
||||
try:
|
||||
saved = json.loads(self.battery_config_path.read_text(encoding="utf-8"))
|
||||
for key in self.battery_config:
|
||||
if key in saved:
|
||||
self.battery_config[key] = saved[key]
|
||||
except (OSError, ValueError, TypeError):
|
||||
pass
|
||||
|
||||
def _apply_battery_settings(self):
|
||||
try:
|
||||
config = {
|
||||
"cells": int(self.battery_cells.get()),
|
||||
"capacity_mah": int(self.battery_capacity.get()),
|
||||
"c_rating": float(self.battery_c_rating.get()),
|
||||
"full_v_per_cell": float(self.battery_full_cell.get()),
|
||||
"empty_v_per_cell": float(self.battery_empty_cell.get()),
|
||||
"warning_percent": int(self.battery_warning.get()),
|
||||
}
|
||||
if not 1 <= config["cells"] <= 12:
|
||||
raise ValueError("cell count must be between 1 and 12")
|
||||
if config["capacity_mah"] <= 0 or config["c_rating"] <= 0:
|
||||
raise ValueError("capacity and C rating must be positive")
|
||||
if not config["full_v_per_cell"] > config["empty_v_per_cell"] > 0:
|
||||
raise ValueError("full V/cell must be greater than empty V/cell")
|
||||
if not 0 <= config["warning_percent"] <= 100:
|
||||
raise ValueError("warning percentage must be between 0 and 100")
|
||||
self.battery_config = config
|
||||
self.battery_config_path.write_text(
|
||||
json.dumps(config, indent=2) + "\n", encoding="utf-8"
|
||||
)
|
||||
self._update_battery_display()
|
||||
self.status_text.set("Battery settings saved")
|
||||
except (ValueError, OSError) as exc:
|
||||
messagebox.showerror("Invalid battery settings", str(exc))
|
||||
|
||||
def _battery_percent(self, voltage):
|
||||
cells = self.battery_config["cells"]
|
||||
per_cell = voltage / cells
|
||||
empty = self.battery_config["empty_v_per_cell"]
|
||||
full = self.battery_config["full_v_per_cell"]
|
||||
return max(0.0, min(100.0, (per_cell - empty) * 100.0 / (full - empty)))
|
||||
|
||||
def _update_battery_display(self):
|
||||
voltage = self.battery_voltage_smoothed
|
||||
if voltage is None:
|
||||
self.battery_summary.configure(text="Battery —", text_color="#f4f4f1")
|
||||
self.battery_meta.configure(text="Waiting for voltage")
|
||||
self.battery_bar.set(0)
|
||||
return
|
||||
cells = self.battery_config["cells"]
|
||||
percent = self._battery_percent(voltage)
|
||||
per_cell = voltage / cells
|
||||
warning = percent <= self.battery_config["warning_percent"]
|
||||
self.battery_summary.configure(
|
||||
text=f"Battery {percent:.0f}%",
|
||||
text_color="#ffaaa2" if warning else "#f4f4f1",
|
||||
)
|
||||
self.battery_meta.configure(
|
||||
text=f"{voltage:.2f} V • {per_cell:.2f} V/cell • {cells}S"
|
||||
+ (" • LOW" if warning else "")
|
||||
)
|
||||
self.battery_bar.configure(progress_color="#f08a82" if warning else "#c4e46c")
|
||||
self.battery_bar.set(percent / 100.0)
|
||||
|
||||
def toggle_connect(self):
|
||||
if self.worker.thread and self.worker.thread.is_alive():
|
||||
self.worker.disconnect()
|
||||
self.connect_button.configure(state="disabled")
|
||||
return
|
||||
if not self.port.get():
|
||||
messagebox.showerror("No port", "Select a USB serial COM port.")
|
||||
return
|
||||
self.worker.rate_hz = int(self.rate.get())
|
||||
self.worker.connect(self.port.get(), int(self.baud.get()))
|
||||
self.connect_button.configure(text="Disconnect")
|
||||
self.status_text.set("Opening serial port…")
|
||||
|
||||
def _axes_changed(self):
|
||||
turn, forward = self.joystick.value
|
||||
self.worker.set_axes(Axes(forward, 0.0,
|
||||
float(self.vertical.get()) / 100,
|
||||
turn))
|
||||
|
||||
def _gain_changed(self, value):
|
||||
value = int(float(value))
|
||||
self.worker.gain = value / 100
|
||||
self.gain_text.configure(text=f"{value}%")
|
||||
|
||||
def _key_down(self, event):
|
||||
key = event.keysym.lower()
|
||||
if key in "wasdqerf":
|
||||
self.keys.add(key)
|
||||
self._apply_keys()
|
||||
|
||||
def _key_up(self, event):
|
||||
key = event.keysym.lower()
|
||||
self.keys.discard(key)
|
||||
self._apply_keys()
|
||||
|
||||
def _apply_keys(self):
|
||||
turn = (1 if ("d" in self.keys or "e" in self.keys) else 0) - (
|
||||
1 if ("a" in self.keys or "q" in self.keys) else 0
|
||||
)
|
||||
forward = (1 if "w" in self.keys else 0) - (1 if "s" in self.keys else 0)
|
||||
vertical = (1 if "r" in self.keys else 0) - (1 if "f" in self.keys else 0)
|
||||
planar = (turn, forward)
|
||||
if planar != self.keyboard_planar:
|
||||
if turn or forward:
|
||||
self.joystick.set_immediate(float(turn), float(forward))
|
||||
else:
|
||||
self.joystick._release()
|
||||
self.keyboard_planar = planar
|
||||
if vertical != self.keyboard_vertical:
|
||||
if vertical:
|
||||
self.vertical.set_immediate(vertical * 100)
|
||||
else:
|
||||
self.vertical.spring_to_center()
|
||||
self.keyboard_vertical = vertical
|
||||
self._axes_changed()
|
||||
|
||||
def arm(self):
|
||||
if not messagebox.askyesno("Arm vehicle", "Propellers removed or vehicle securely restrained?\n\nArm now?"):
|
||||
return
|
||||
try:
|
||||
self.worker.log("OPERATOR", "clicked ARM")
|
||||
self.worker.command_arm(True)
|
||||
self.status_text.set("Arm command sent; waiting for ACK/heartbeat…")
|
||||
except Exception as exc:
|
||||
messagebox.showerror("Cannot arm", str(exc))
|
||||
|
||||
def disarm(self):
|
||||
try:
|
||||
self.worker.log("OPERATOR", "clicked DISARM")
|
||||
self.worker.command_arm(False)
|
||||
self.status_text.set("Disarm command sent; neutral sent")
|
||||
except Exception as exc:
|
||||
messagebox.showerror("Cannot disarm", str(exc))
|
||||
|
||||
def set_manual(self):
|
||||
try:
|
||||
self.worker.log("OPERATOR", "clicked SET MANUAL")
|
||||
self.worker.set_manual_mode()
|
||||
self.status_text.set("MANUAL mode request sent")
|
||||
except Exception as exc:
|
||||
messagebox.showerror("Cannot set mode", str(exc))
|
||||
|
||||
def open_logs_folder(self):
|
||||
log_dir = Path(__file__).resolve().parent / "logs"
|
||||
log_dir.mkdir(exist_ok=True)
|
||||
os.startfile(log_dir)
|
||||
|
||||
def _selected_servo(self):
|
||||
selection = self.servo_tree.selection()
|
||||
if not selection:
|
||||
raise RuntimeError("Select a SERVO output in the table first")
|
||||
return int(selection[0])
|
||||
|
||||
def apply_servo_function(self):
|
||||
try:
|
||||
servo = self._selected_servo()
|
||||
choice = self.motor_function.get()
|
||||
if choice.startswith("Motor "):
|
||||
motor = int(choice.split()[1])
|
||||
function = 32 + motor if motor <= 8 else 73 + motor
|
||||
else:
|
||||
function = 0
|
||||
description = MOTOR_FUNCTIONS.get(function, "Unassigned")
|
||||
if not messagebox.askyesno(
|
||||
"Change output function",
|
||||
f"Set SERVO{servo}_FUNCTION to {description} ({function})?\n\n"
|
||||
"This changes the autopilot configuration.",
|
||||
):
|
||||
return
|
||||
self.worker.set_parameter(f"SERVO{servo}_FUNCTION", function)
|
||||
except Exception as exc:
|
||||
messagebox.showerror("Cannot change function", str(exc))
|
||||
|
||||
def toggle_servo_reversed(self):
|
||||
try:
|
||||
servo = self._selected_servo()
|
||||
function = self.servo_functions.get(servo)
|
||||
motor = motor_number_for_function(function)
|
||||
if motor is None:
|
||||
raise RuntimeError(
|
||||
f"SERVO{servo} is not assigned to an ArduSub Motor function"
|
||||
)
|
||||
current = self.motor_directions.get(motor)
|
||||
if current is None:
|
||||
raise RuntimeError(f"MOT_{motor}_DIRECTION has not been read yet")
|
||||
new_value = -1 if current == 1 else 1
|
||||
if not messagebox.askyesno(
|
||||
"Reverse motor output",
|
||||
f"SERVO{servo} is Motor {motor}.\n"
|
||||
f"Set MOT_{motor}_DIRECTION to {new_value}?\n\n"
|
||||
"Test direction with propellers removed after changing this.",
|
||||
):
|
||||
return
|
||||
self.worker.set_parameter(f"MOT_{motor}_DIRECTION", new_value)
|
||||
except Exception as exc:
|
||||
messagebox.showerror("Cannot reverse output", str(exc))
|
||||
|
||||
def _refresh_servo_row(self, number):
|
||||
function = self.servo_functions.get(number)
|
||||
motor = motor_number_for_function(function)
|
||||
direction = self.motor_directions.get(motor) if motor is not None else None
|
||||
if function is None:
|
||||
function_text = "Waiting…"
|
||||
else:
|
||||
function_text = f"{MOTOR_FUNCTIONS.get(function, 'Other / unassigned')} ({function})"
|
||||
if motor is None:
|
||||
reversed_text = "—"
|
||||
elif direction is None:
|
||||
reversed_text = "Waiting…"
|
||||
else:
|
||||
reversed_text = "Yes" if direction == -1 else "No"
|
||||
self.servo_tree.item(str(number), values=(f"SERVO{number}", function_text, reversed_text))
|
||||
|
||||
def _poll(self):
|
||||
try:
|
||||
while True:
|
||||
event = self.events.get_nowait()
|
||||
kind = event[0]
|
||||
if kind == "heartbeat":
|
||||
_, system, autopilot, mode, armed = event[:5]
|
||||
self.vehicle_label.configure(
|
||||
text=f"{mode} • {'ARMED' if armed else 'DISARMED'}"
|
||||
)
|
||||
self.link_label.configure(text="● LINK OK", text_color="#c4e46c")
|
||||
elif kind in ("status", "statustext"):
|
||||
self.status_text.set(event[1])
|
||||
elif kind == "ack":
|
||||
self.status_text.set(f"Command {event[1]} ACK: {event[2]}")
|
||||
elif kind == "servo_param":
|
||||
_, param_id, value = event
|
||||
number = int(param_id[5:param_id.index("_")])
|
||||
self.servo_functions[number] = value
|
||||
self._refresh_servo_row(number)
|
||||
elif kind == "motor_direction":
|
||||
_, motor, value = event
|
||||
self.motor_directions[motor] = value
|
||||
for number in range(1, 17):
|
||||
if motor_number_for_function(self.servo_functions.get(number)) == motor:
|
||||
self._refresh_servo_row(number)
|
||||
elif kind == "battery":
|
||||
self.battery_voltage = event[1]
|
||||
if self.battery_voltage_smoothed is None:
|
||||
self.battery_voltage_smoothed = self.battery_voltage
|
||||
else:
|
||||
self.battery_voltage_smoothed = (
|
||||
0.75 * self.battery_voltage_smoothed + 0.25 * self.battery_voltage
|
||||
)
|
||||
self._update_battery_display()
|
||||
elif kind == "param_saved":
|
||||
self.status_text.set(f"Confirmed: {event[1]}={event[2]}")
|
||||
elif kind == "param_missing":
|
||||
self.status_text.set(f"No response for {event[1]}; continuing scan…")
|
||||
elif kind == "param_scan_complete":
|
||||
count = sum(value in MOTOR_FUNCTIONS for value in self.servo_functions.values())
|
||||
self.status_text.set(f"Servo scan complete: {count} motor output(s) assigned")
|
||||
elif kind == "log_path":
|
||||
self.log_path_text.set(f"Log: {event[1]}")
|
||||
elif kind == "error":
|
||||
self.status_text.set(event[1])
|
||||
messagebox.showerror("MAVLink", event[1])
|
||||
elif kind == "disconnected":
|
||||
self.connect_button.configure(text="Connect", state="normal")
|
||||
self.link_label.configure(text="● DISCONNECTED", text_color="#f08a82")
|
||||
self.vehicle_label.configure(text="No heartbeat")
|
||||
self.battery_voltage = None
|
||||
self.battery_voltage_smoothed = None
|
||||
self._update_battery_display()
|
||||
self.servo_functions.clear()
|
||||
self.motor_directions.clear()
|
||||
for number in range(1, 17):
|
||||
self.servo_tree.item(str(number), values=(f"SERVO{number}", "Waiting…", "Waiting…"))
|
||||
except queue.Empty:
|
||||
pass
|
||||
self.after(50, self._poll)
|
||||
|
||||
def _link_watchdog(self):
|
||||
if self.worker.target_system and time.monotonic() - self.worker.last_heartbeat > 5.0:
|
||||
if time.monotonic() - self.worker.last_rx < 2.0:
|
||||
text = "● DATA OK / HEARTBEAT DELAYED"
|
||||
else:
|
||||
text = "● ALL LINK DATA LOST"
|
||||
self.link_label.configure(text=text, text_color="#f08a82")
|
||||
self.worker._send_control(force_neutral=True)
|
||||
self.after(500, self._link_watchdog)
|
||||
|
||||
def close(self):
|
||||
self.worker.disconnect()
|
||||
self.after(150, self.destroy)
|
||||
@@ -0,0 +1,132 @@
|
||||
"""Validated V2 settings and telemetry, independent of the desktop renderer."""
|
||||
from __future__ import annotations
|
||||
|
||||
import json
|
||||
import math
|
||||
import re
|
||||
import time
|
||||
from pathlib import Path
|
||||
from urllib.parse import urlsplit
|
||||
|
||||
AXES = ("forward", "lateral", "vertical", "turn", "pitch", "roll")
|
||||
FRAMES = {
|
||||
0: ("BlueROV1", 6, AXES),
|
||||
1: ("Vectored", 6, tuple(axis for axis in AXES if axis != "pitch")),
|
||||
2: ("Vectored 6DOF", 8, AXES),
|
||||
3: ("Vectored 90", 8, AXES),
|
||||
4: ("SimpleROV 3", 3, ("forward", "vertical", "turn")),
|
||||
5: ("SimpleROV 4", 4, ("forward", "vertical", "turn", "roll")),
|
||||
6: ("SimpleROV 5", 5, ("forward", "lateral", "vertical", "turn", "roll")),
|
||||
}
|
||||
INPUT = re.compile(r"^(off|button:(?:[0-9]|[12][0-9]|3[01])|axis:(?:[0-9]|1[0-5]):[+-])$")
|
||||
|
||||
|
||||
def number(value, minimum, maximum):
|
||||
result = float(value)
|
||||
if not math.isfinite(result) or not minimum <= result <= maximum:
|
||||
raise ValueError(f"Value must be between {minimum} and {maximum}")
|
||||
return result
|
||||
|
||||
|
||||
def clean_profile(config):
|
||||
if not isinstance(config, dict) or config.get("version") != 2:
|
||||
raise ValueError("Invalid controller profile")
|
||||
if not isinstance(config.get("bindings", {}), dict) or not isinstance(config.get("actions", {}), dict):
|
||||
raise ValueError("Invalid controller bindings")
|
||||
bindings = {}
|
||||
for axis in AXES:
|
||||
item = config.get("bindings", {}).get(axis, {})
|
||||
if not isinstance(item, dict):
|
||||
raise ValueError("Invalid motion binding")
|
||||
negative, positive = item.get("negative", "off"), item.get("positive", "off")
|
||||
if not isinstance(negative, str) or not INPUT.fullmatch(negative):
|
||||
raise ValueError("Invalid negative input")
|
||||
if not isinstance(positive, str) or not INPUT.fullmatch(positive):
|
||||
raise ValueError("Invalid positive input")
|
||||
if negative == positive and positive != "off":
|
||||
raise ValueError("Choose different inputs for each direction")
|
||||
bindings[axis] = {"negative": negative, "positive": positive,
|
||||
"scale": number(item.get("scale", 1), 0, 1)}
|
||||
actions = {}
|
||||
for action in ("lights", "stream", "record"):
|
||||
source = config.get("actions", {}).get(action, "off")
|
||||
if source != "off" and (not isinstance(source, str) or not re.fullmatch(r"button:(?:[0-9]|[12][0-9]|3[01])", source)):
|
||||
raise ValueError("Actions require a button")
|
||||
actions[action] = source
|
||||
return {"version": 2, "preset": str(config.get("preset", "custom"))[:24],
|
||||
"deadZone": number(config.get("deadZone", .08), 0, .3),
|
||||
"expo": number(config.get("expo", .15), 0, 1),
|
||||
"bindings": bindings, "actions": actions}
|
||||
|
||||
|
||||
def clean_station(config):
|
||||
if not isinstance(config, dict):
|
||||
raise ValueError("Invalid station settings")
|
||||
frame_value = number(config.get("frame", 4), 0, 6)
|
||||
if not frame_value.is_integer():
|
||||
raise ValueError("Invalid frame")
|
||||
frame = int(frame_value)
|
||||
if frame not in FRAMES:
|
||||
raise ValueError("Choose an ArduSub frame")
|
||||
mode = config.get("video_mode", "whep")
|
||||
if mode not in ("whep", "video", "mjpeg"):
|
||||
raise ValueError("Unsupported stream type")
|
||||
url = str(config.get("video_url", "")).strip()
|
||||
if url:
|
||||
parsed = urlsplit(url)
|
||||
if parsed.scheme not in ("http", "https") or not parsed.hostname or parsed.username or parsed.password:
|
||||
raise ValueError("Use an HTTP stream URL without embedded credentials")
|
||||
relays = {}
|
||||
for name in ("lights_relay", "camera_relay"):
|
||||
value = number(config.get(name, -1), -1, 15)
|
||||
if not value.is_integer():
|
||||
raise ValueError("Invalid relay")
|
||||
relays[name] = int(value)
|
||||
if relays["lights_relay"] >= 0 and relays["lights_relay"] == relays["camera_relay"]:
|
||||
raise ValueError("Lights and camera need separate relays")
|
||||
return {"frame": frame, "video_mode": mode, "video_url": url[:2048], **relays}
|
||||
|
||||
|
||||
def save_json(path: Path, data):
|
||||
temporary = path.with_suffix(path.suffix + ".tmp")
|
||||
temporary.write_text(json.dumps(data, indent=2, allow_nan=False) + "\n", encoding="utf-8")
|
||||
temporary.replace(path)
|
||||
|
||||
|
||||
class Telemetry:
|
||||
"""Timestamp every group; missing or stale measurements stay unavailable."""
|
||||
def __init__(self, clock=time.monotonic):
|
||||
self.clock = clock
|
||||
self.groups = {}
|
||||
|
||||
def update(self, group, values, received_at=None):
|
||||
clean = {key: value if isinstance(value, (int, float)) and math.isfinite(value) else None
|
||||
for key, value in values.items()}
|
||||
self.groups[group] = {"values": clean, "at": self.clock() if received_at is None else received_at}
|
||||
|
||||
def snapshot(self, connected=True):
|
||||
now = self.clock()
|
||||
return {name: {"values": item["values"], "age_s": max(0, now - item["at"]),
|
||||
"stale": not connected or now - item["at"] > 3}
|
||||
for name, item in self.groups.items()}
|
||||
|
||||
|
||||
def decode_telemetry(msg):
|
||||
kind = msg.get_type()
|
||||
if kind == "ATTITUDE":
|
||||
return "attitude", {"roll": math.degrees(msg.roll), "pitch": math.degrees(msg.pitch),
|
||||
"heading": math.degrees(msg.yaw) % 360,
|
||||
"roll_rate": math.degrees(msg.rollspeed),
|
||||
"pitch_rate": math.degrees(msg.pitchspeed),
|
||||
"yaw_rate": math.degrees(msg.yawspeed)}
|
||||
if kind == "GLOBAL_POSITION_INT":
|
||||
# ArduSub reports height relative to its surface/home origin, positive up.
|
||||
return "depth", {"depth_m": -msg.relative_alt / 1000.0, "vertical_ms": msg.vz / 100.0}
|
||||
if kind in ("SCALED_IMU", "SCALED_IMU2", "SCALED_IMU3"):
|
||||
return "imu", {"ax": msg.xacc * .00980665, "ay": msg.yacc * .00980665,
|
||||
"az": msg.zacc * .00980665, "gx": msg.xgyro / 1000.0,
|
||||
"gy": msg.ygyro / 1000.0, "gz": msg.zgyro / 1000.0,
|
||||
"mx": msg.xmag / 1000.0, "my": msg.ymag / 1000.0, "mz": msg.zmag / 1000.0}
|
||||
if kind == "SCALED_PRESSURE2":
|
||||
return "pressure", {"pressure_hpa": msg.press_abs, "temperature_c": msg.temperature / 100.0}
|
||||
return None
|
||||
@@ -3,13 +3,22 @@ $ErrorActionPreference = "Stop"
|
||||
$projectRoot = Split-Path -Parent $MyInvocation.MyCommand.Path
|
||||
Set-Location -LiteralPath $projectRoot
|
||||
|
||||
if (-not (Get-Command py -ErrorAction SilentlyContinue)) {
|
||||
throw "Python 3.11 or newer is required. Install Python from python.org, then run this script again."
|
||||
}
|
||||
& (Join-Path $projectRoot 'create_shortcut.ps1')
|
||||
|
||||
if (-not (Test-Path -LiteralPath ".venv\Scripts\python.exe")) {
|
||||
if (-not (Get-Command py -ErrorAction SilentlyContinue)) {
|
||||
throw "Python 3.11 or newer is required. Install Python from python.org, then run this script again."
|
||||
}
|
||||
& py -3 -m venv .venv
|
||||
if ($LASTEXITCODE -ne 0) { throw 'Virtual environment setup failed.' }
|
||||
}
|
||||
|
||||
& .venv\Scripts\python.exe -m pip install --disable-pip-version-check -r requirements.txt
|
||||
& .venv\Scripts\python.exe app.py
|
||||
$dependencyHash = (Get-FileHash -LiteralPath 'requirements.txt' -Algorithm SHA256).Hash
|
||||
$dependencyMarker = Join-Path $projectRoot '.venv\requirements.sha256'
|
||||
$installedHash = if (Test-Path -LiteralPath $dependencyMarker) { (Get-Content -LiteralPath $dependencyMarker -Raw).Trim() } else { '' }
|
||||
if ($installedHash -ne $dependencyHash) {
|
||||
& .venv\Scripts\python.exe -m pip install --disable-pip-version-check -r requirements.txt
|
||||
if ($LASTEXITCODE -ne 0) { throw 'Dependency installation failed.' }
|
||||
Set-Content -LiteralPath $dependencyMarker -Value $dependencyHash
|
||||
}
|
||||
& .venv\Scripts\python.exe web_ui.py
|
||||
|
||||
@@ -5,6 +5,99 @@ const fs=require('node:fs'),vm=require('node:vm'),path=require('node:path');
|
||||
const {present}=require('../web/control-state.js');
|
||||
const armed={connected:true,armed_known:true,armed:true,app_state:'armed',servos:{}};
|
||||
|
||||
test('model viewport fills the available space above battery status',()=>{
|
||||
const css=fs.readFileSync(path.join(__dirname,'../web/styles.css'),'utf8');
|
||||
assert.match(css,/\.rov-stage \{ flex:1; height:auto; min-height:0; width:100%/);
|
||||
assert.match(css,/\.telemetry-zone \.model-card \{ flex: 1; min-height: 0;/);
|
||||
});
|
||||
|
||||
test('white wash stays behind controls; right panel is gray and edges reach 50 percent',()=>{
|
||||
const css=fs.readFileSync(path.join(__dirname,'../web/styles.css'),'utf8');
|
||||
assert.match(css,/\.workspace-light \{[^}]*z-index:-1/);
|
||||
assert.match(css,/\.controls-workspace \{[^}]*isolation:isolate/);
|
||||
assert.match(css,/\.controls-workspace \{[^}]*background:#ededed/);
|
||||
assert.match(css,/\.sidebar-deck \{[^}]*background:linear-gradient\(160deg,#333,#242424\)/);
|
||||
assert.match(css,/\.cursor-light::after \{[^}]*rgba\(255,255,255,\.50\)/);
|
||||
});
|
||||
|
||||
test('keyboard easing publishes intermediate demands to the real Python bridge',async()=>{
|
||||
const h=harness();h.state();h.run('bridgeReady=true');
|
||||
keyEvent(h,'keydown','w');keyEvent(h,'keydown','r');
|
||||
for(let i=0;i<10;i++){h.advance(50);await Promise.resolve();await Promise.resolve();await Promise.resolve();}
|
||||
const sent=h.calls.filter(call=>call[0]==='axes');
|
||||
assert.ok(sent.some(call=>call[1]>0&&call[1]<1),'surge ramp is transmitted, not just drawn');
|
||||
assert.ok(sent.some(call=>call[3]>0&&call[3]<1),'vertical ramp is transmitted, not just drawn');
|
||||
assert.ok(sent.every(call=>call[1]>=0&&call[1]<=1&&call[3]>=0&&call[3]<=1));
|
||||
});
|
||||
|
||||
test('cursor lighting stays decorative and arrows use centered geometry',()=>{
|
||||
const css=fs.readFileSync(path.join(__dirname,'../web/styles.css'),'utf8');
|
||||
const js=fs.readFileSync(path.join(__dirname,'../web/cursor-light.js'),'utf8');
|
||||
assert.doesNotMatch(js,/set_axes|setJoyControl|setHeave|requestControl/);
|
||||
assert.match(js,/workspace\.append\(wash\)/);
|
||||
assert.match(js,/pointerleave',clear/);
|
||||
assert.match(css,/\.cursor-light \{[^}]*pointer-events:none/);
|
||||
assert.match(css,/range-pill button \{[^}]*place-items:center/);
|
||||
assert.match(css,/#engage\.danger \.engage-label \{ color:#777/);
|
||||
});
|
||||
|
||||
test('edge lighting uses angle; only visible pills get blue and sidebar is excluded',()=>{
|
||||
const css=fs.readFileSync(path.join(__dirname,'../web/styles.css'),'utf8');
|
||||
const js=fs.readFileSync(path.join(__dirname,'../web/cursor-light.js'),'utf8');
|
||||
assert.match(js,/Math\.atan2/);
|
||||
assert.match(js,/!host\.closest\('\.sidebar-deck,#engage'\)/);
|
||||
assert.match(js,/host\.matches\(pillSelector\)/);
|
||||
assert.match(css,/\.cursor-light\.pill-light::before \{ background:radial-gradient/);
|
||||
assert.match(css,/\.cursor-light::after \{[^}]*linear-gradient\(var\(--light-angle/);
|
||||
assert.doesNotMatch(css,/\.cursor-light::after \{[^}]*radial-gradient/);
|
||||
assert.match(css,/\.rov-stage \{[^}]*border-radius:31px; overflow:hidden/);
|
||||
});
|
||||
|
||||
test('all interface typography uses Helvetica with inherited control fonts',()=>{
|
||||
const css=fs.readFileSync(path.join(__dirname,'../web/styles.css'),'utf8');
|
||||
const families=[...css.matchAll(/font-family\s*:\s*([^;}]+)/g)].map(match=>match[1].trim());
|
||||
assert.ok(families.includes('"Helvetica Neue", Helvetica, Arial, sans-serif'));
|
||||
assert.ok(families.every(family=>family==='inherit'||family==='"Helvetica Neue", Helvetica, Arial, sans-serif'));
|
||||
assert.match(css,/button, select, input \{ font: inherit; \}/);
|
||||
});
|
||||
|
||||
function keyEvent(h,type,key,repeat=false){h.fire(type,{key,repeat,target:{tagName:'BODY'},preventDefault(){}})}
|
||||
test('keyboard ramps joystick and vertical together, then eases back on release',()=>{
|
||||
const h=harness();h.state();
|
||||
keyEvent(h,'keydown','w');keyEvent(h,'keydown','d');keyEvent(h,'keydown','r');
|
||||
assert.equal(h.run('control.forward+control.turn+control.vertical'),0);
|
||||
h.advance(180);
|
||||
for(const axis of ['forward','turn','vertical'])assert.ok(h.run(`control.${axis}`)>0&&h.run(`control.${axis}`)<1);
|
||||
keyEvent(h,'keydown','w',true);h.advance(240);
|
||||
assert.ok(Math.abs(h.run('control.forward')-Math.SQRT1_2)<1e-6);
|
||||
assert.ok(Math.abs(h.run('control.turn')-Math.SQRT1_2)<1e-6);
|
||||
assert.equal(h.run('control.vertical'),1);
|
||||
keyEvent(h,'keyup','w');keyEvent(h,'keyup','d');keyEvent(h,'keyup','r');
|
||||
h.advance(180);assert.ok(h.run('control.forward')>0);assert.ok(h.run('control.vertical')>0);
|
||||
h.advance(250);assert.equal(h.run('control.forward+control.turn+control.vertical'),0);
|
||||
});
|
||||
test('keyboard reversal is continuous and focus loss cancels its ramp',()=>{
|
||||
const h=harness();h.state();keyEvent(h,'keydown','w');keyEvent(h,'keydown','r');h.advance(420);
|
||||
keyEvent(h,'keyup','w');keyEvent(h,'keyup','r');keyEvent(h,'keydown','s');keyEvent(h,'keydown','f');
|
||||
assert.equal(h.run('control.forward'),1);assert.equal(h.run('control.vertical'),1);
|
||||
h.advance(200);assert.ok(Math.abs(h.run('control.forward'))<.3);assert.ok(Math.abs(h.run('control.vertical'))<.3);
|
||||
h.advance(220);assert.equal(h.run('control.forward'),-1);assert.equal(h.run('control.vertical'),-1);
|
||||
keyEvent(h,'keyup','s');keyEvent(h,'keyup','f');h.fire('blur');h.advance(500);
|
||||
assert.equal(h.run('control.forward+control.vertical'),0);
|
||||
});
|
||||
test('touch takes ownership from a keyboard ramp without later keyboard overwrite',()=>{
|
||||
const h=harness();h.state();keyEvent(h,'keydown','w');keyEvent(h,'keydown','r');h.advance(100);
|
||||
h.el('#joystick-canvas').emit('pointerdown',{clientX:300,clientY:160});
|
||||
h.el('#heave').emit('pointerdown',{pointerId:2,clientY:300});
|
||||
keyEvent(h,'keydown','a');h.advance(450);
|
||||
assert.equal(h.run('control.turn'),1);assert.equal(Math.abs(h.run('control.forward')),0);assert.equal(h.run('control.vertical'),-1);
|
||||
});
|
||||
test('hold fill and pending engagement share the same green and glow',()=>{
|
||||
const css=fs.readFileSync(path.join(__dirname,'../web/styles.css'),'utf8');
|
||||
assert.match(css,/\.engage-progress-label \{ color:var\(--engage-green\).*filter:var\(--engage-glow\)/);
|
||||
assert.match(css,/#engage\.pending \.engage-label \{ color:var\(--engage-green\); filter:var\(--engage-glow\)/);
|
||||
});
|
||||
|
||||
test('native pywebview result wrapper can execute alongside app globals',()=>{
|
||||
const h=harness();
|
||||
// Window.evaluate_js declares these variables in the page's global scope.
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
/* Pure conditioning and log parsing tests: no hardware or browser needed. */
|
||||
const assert=require('node:assert/strict');
|
||||
const {deadZone,defaults,read,Motion}=require('../web/controller-input.js');
|
||||
const {parse}=require('../web/console-view.js');
|
||||
const pad={connected:true,axes:[0,0,0,0]};
|
||||
assert.equal(deadZone(.06),0);assert.equal(deadZone(-1),-1);assert.equal(deadZone(1),1);
|
||||
assert.equal(defaults({axes:[0,0]}).vertical,-1);
|
||||
assert.equal(read({...pad,connected:false},defaults(pad)),null);
|
||||
assert.equal(read(pad,{...defaults(pad),vertical:10}),null);
|
||||
const diagonal=read({...pad,axes:[1,-1,0,-1]},defaults(pad));
|
||||
assert(Math.abs(Math.hypot(diagonal.turn,diagonal.forward)-1)<1e-10);
|
||||
assert.equal(diagonal.vertical,1);
|
||||
assert.equal(read({...pad,axes:[-.5,0,0,0]},{...defaults(pad),invertTurn:true}).turn,deadZone(.5));
|
||||
const motion=new Motion(),target={turn:.6,forward:.8,vertical:1};
|
||||
assert.deepEqual(motion.step(target,0),{turn:0,forward:0,vertical:0});
|
||||
const partial=motion.step(target,16);assert(partial.vertical>0&&partial.vertical<.3);
|
||||
let current;for(let time=32;time<=1000;time+=16){current=motion.step(target,time);assert(Math.hypot(current.turn,current.forward)<=1+1e-10)}
|
||||
assert(current.vertical>.99);
|
||||
const neutral={turn:0,forward:0,vertical:0};
|
||||
assert(motion.step(neutral,1024).vertical>.99);
|
||||
assert(motion.step(neutral,1200).vertical>0);
|
||||
assert.deepEqual(motion.step(neutral,1400),neutral);
|
||||
motion.reset();assert.deepEqual(motion.step(target,1500),neutral);
|
||||
assert.equal(parse('2026-10-01T10:11:12.123 [RX] {"mavpackettype":"HEARTBEAT","base_mode":128}').quiet,true);
|
||||
const ack=parse('2026-10-01T10:11:12.123 [RX] {"mavpackettype":"COMMAND_ACK","command":400,"result":0}');
|
||||
assert.equal(ack.time,'10:11:12.123');assert.equal(ack.type,'COMMAND_ACK');assert.equal(ack.tone,'command');
|
||||
assert.equal(parse('2026-10-01T10:11:12 [TX_LINK_PROBE_TIMEOUT] retry').quiet,false);
|
||||
assert.equal(parse('2026-10-01T10:11:12 [RX] {"mavpackettype":"STATUSTEXT","severity":3,"text":"warning"}').tone,'warning');
|
||||
assert.equal(parse('2026-10-01T10:11:12 [RX] null').type,'RX');
|
||||
assert.equal(parse('unstructured text').payload,'unstructured text');
|
||||
console.log('PASS: dead zone, mapping/inversion, diagonal cap, ramp, finite center return, resets, console parsing and warning visibility.');
|
||||
@@ -0,0 +1,29 @@
|
||||
/* Synthetic Xbox input: no device, serial port, or browser is opened. */
|
||||
const assert=require('node:assert/strict');
|
||||
const input=require('../web/controller-input.js');
|
||||
const pad=()=>({connected:true,mapping:'standard',axes:[0,0,0,0],buttons:Array.from({length:17},()=>({value:0,pressed:false}))});
|
||||
const press=(pad,index,value=1)=>{pad.buttons[index]={value,pressed:value>.5};return pad};
|
||||
const three=input.preset(),six=input.preset('sixaxis');
|
||||
assert(input.validProfile(three));assert(input.validProfile(six));
|
||||
assert.deepEqual(input.read(pad(),three),Object.fromEntries(input.names.map(name=>[name,0])));
|
||||
assert.equal(input.read(press(pad(),1),three).vertical,1);
|
||||
assert.equal(input.read(press(pad(),0),three).vertical,-1);
|
||||
assert.equal(input.read(press(press(pad(),0),1),three).vertical,0);
|
||||
assert.equal(input.read(press(pad(),7),three).forward,1);
|
||||
assert.equal(input.read(press(pad(),6),three).forward,-1);
|
||||
assert.equal(input.read(press(press(pad(),6),7),three).forward,0);
|
||||
assert(input.read(press(pad(),7,.5),three).forward>0);
|
||||
assert(input.read(press(pad(),7,.5),three).forward<.5);
|
||||
let p=pad();p.axes[0]=1;p.axes[1]=-1;p.axes[2]=1;press(p,4);
|
||||
assert.deepEqual(input.read(p,six),{forward:0,lateral:1,vertical:0,turn:1,pitch:-1,roll:-1});
|
||||
let custom=structuredClone(six);custom.bindings.vertical={negative:'button:12',positive:'button:13',scale:.25};
|
||||
assert.equal(input.read(press(pad(),13),custom).vertical,.25);
|
||||
custom.bindings.turn.scale=0;assert.equal(input.read(p,custom).turn,0);
|
||||
custom.bindings.pitch.negative='axis:90:-';assert.equal(input.read(p,custom),null);
|
||||
assert.equal(input.read({...pad(),connected:false},three),null);
|
||||
p=pad();p.axes[0]=NaN;assert.equal(input.read(p,three),null);
|
||||
p=pad();p.buttons=[];assert.equal(input.read(p,three),null);
|
||||
assert.equal(input.actions(press(pad(),2),three).lights,true);
|
||||
assert.equal(input.migrate({turn:0,forward:1,vertical:3,invertForward:true,invertVertical:true,deadZone:.1}).bindings.forward.positive,'axis:1:-');
|
||||
const duplicate=structuredClone(three);duplicate.bindings.forward.negative='button:7';assert.equal(input.validProfile(duplicate),false);
|
||||
console.log('PASS: Xbox triggers, B/A, cancellation, six axes, custom buttons, limits, invalid devices, migration and actions.');
|
||||
@@ -0,0 +1,165 @@
|
||||
"""V2 protocol and persistence checks. Never opens a vehicle connection."""
|
||||
import math
|
||||
import queue
|
||||
import tempfile
|
||||
import time
|
||||
import unittest
|
||||
from pathlib import Path
|
||||
from types import SimpleNamespace
|
||||
from unittest.mock import Mock, patch
|
||||
|
||||
from app import Axes, MavlinkWorker, normalize_endpoint
|
||||
from rov_v2 import Telemetry, clean_station, clean_profile, decode_telemetry, save_json
|
||||
from web_ui import ControlApi
|
||||
|
||||
|
||||
class V2Tests(unittest.TestCase):
|
||||
def worker(self, frame=0, version=(4, 5, 3)):
|
||||
worker = MavlinkWorker(queue.Queue())
|
||||
worker.connection = Mock()
|
||||
worker.target_system = 1
|
||||
worker.frame_type = frame
|
||||
worker.firmware_version = version
|
||||
worker.gain = .5
|
||||
worker.last_control_at = time.monotonic() - 1
|
||||
return worker
|
||||
|
||||
def test_six_axis_mapping_and_envelope(self):
|
||||
worker = self.worker()
|
||||
worker.set_axes(Axes(forward=1, lateral=1, vertical=1, yaw=1, pitch=1, roll=1))
|
||||
worker._send_control()
|
||||
args = worker.connection.mav.manual_control_send.call_args.args
|
||||
self.assertEqual(args[6:8], (0, 3))
|
||||
self.assertEqual(args[8:], (33, 33)) # S=pitch, T=roll; ArduSub 4.5 ±400.
|
||||
self.assertEqual(args[1:5], (83, 83, 542, 83))
|
||||
|
||||
def test_modern_normalized_attitude(self):
|
||||
worker = self.worker(version=(4, 8, 0))
|
||||
worker.set_axes(Axes(pitch=.5, roll=-.5))
|
||||
worker._send_control()
|
||||
self.assertEqual(worker.connection.mav.manual_control_send.call_args.args[8:], (250, -250))
|
||||
|
||||
def test_unsupported_frame_and_old_firmware(self):
|
||||
worker = self.worker(frame=1)
|
||||
worker.set_axes(Axes(pitch=1, roll=.2))
|
||||
worker._send_control()
|
||||
self.assertEqual(worker.connection.mav.manual_control_send.call_args.args[8], 0)
|
||||
worker.firmware_version = (4, 1, 0)
|
||||
worker._send_control()
|
||||
self.assertEqual(len(worker.connection.mav.manual_control_send.call_args.args), 6)
|
||||
|
||||
def test_watchdog_neutralizes_extended_axes(self):
|
||||
worker = self.worker()
|
||||
worker.require_input_lease = True
|
||||
worker.armed = True
|
||||
worker.last_heartbeat = time.monotonic()
|
||||
worker.set_axes(Axes(pitch=1, roll=-1), 1)
|
||||
worker.last_input_at -= 2
|
||||
worker._send_control()
|
||||
self.assertEqual(worker.connection.mav.manual_control_send.call_args.args, (1, 0, 0, 500, 0, 0, 0, 3, 0, 0))
|
||||
self.assertEqual(worker.axes, Axes())
|
||||
|
||||
def test_endpoints_preserve_configured_network_host(self):
|
||||
for endpoint in ('udpin:0.0.0.0:14550', 'udpout:192.168.2.2:14550', 'tcp:192.168.2.2:5760'):
|
||||
self.assertEqual(normalize_endpoint(endpoint), endpoint)
|
||||
|
||||
def test_sensor_units_and_staleness(self):
|
||||
msg = SimpleNamespace(get_type=lambda: 'ATTITUDE', roll=math.pi/2, pitch=0, yaw=-math.pi/2, rollspeed=1, pitchspeed=0, yawspeed=0)
|
||||
group, values = decode_telemetry(msg)
|
||||
self.assertEqual(values['roll'], 90)
|
||||
self.assertEqual(values['heading'], 270)
|
||||
clock = [10]
|
||||
store = Telemetry(lambda: clock[0])
|
||||
store.update(group, values)
|
||||
clock[0] = 14
|
||||
self.assertTrue(store.snapshot()[group]['stale'])
|
||||
msg = SimpleNamespace(get_type=lambda: 'GLOBAL_POSITION_INT', relative_alt=-1200, vz=25)
|
||||
self.assertEqual(decode_telemetry(msg)[1], {'depth_m': 1.2, 'vertical_ms': .25})
|
||||
|
||||
def test_config_validation_and_atomic_roundtrip(self):
|
||||
with self.assertRaises(ValueError):
|
||||
clean_station({'video_url': 'javascript:alert(1)'})
|
||||
with self.assertRaises(ValueError):
|
||||
clean_station({'lights_relay': 1, 'camera_relay': 1})
|
||||
with self.assertRaises(ValueError):
|
||||
clean_profile({'version': 2, 'expo': float('nan')})
|
||||
with tempfile.TemporaryDirectory() as folder:
|
||||
target = Path(folder) / 'station.json'
|
||||
save_json(target, clean_station({'frame': 2}))
|
||||
import json
|
||||
self.assertEqual(json.loads(target.read_text())['frame'], 2)
|
||||
self.assertFalse(target.with_suffix('.json.tmp').exists())
|
||||
|
||||
def test_stale_current_is_not_refreshed_by_voltage(self):
|
||||
api = ControlApi()
|
||||
api.state['connected'] = True
|
||||
with patch('web_ui.time.monotonic', return_value=10):
|
||||
api._consume_battery({'current_a': 4, 'voltage': 16})
|
||||
with patch('web_ui.time.monotonic', return_value=16):
|
||||
api._consume_battery({'voltage': 15.9})
|
||||
self.assertIsNone(api._snapshot()['battery']['current_a'])
|
||||
with patch('web_ui.time.monotonic', return_value=17):
|
||||
api._consume_battery({'current_a': None})
|
||||
self.assertIsNone(api.state['battery']['current_a'])
|
||||
|
||||
def test_attitude_stream_is_never_disabled_when_requested(self):
|
||||
worker = self.worker()
|
||||
worker._configure_low_bandwidth_streams()
|
||||
rates = [(name, interval) for name, _, interval in worker.stream_config]
|
||||
self.assertIn(('ATTITUDE', 500000), rates)
|
||||
self.assertNotIn(('ATTITUDE', -1), rates)
|
||||
|
||||
def test_network_control_omits_serial_priming_heartbeat(self):
|
||||
worker = self.worker()
|
||||
worker.network_link = True
|
||||
worker._send_control()
|
||||
worker.connection.mav.heartbeat_send.assert_not_called()
|
||||
|
||||
def test_profile_saves_atomically_and_cannot_change_while_armed(self):
|
||||
api = ControlApi()
|
||||
profile = {'version': 2, 'bindings': {}, 'actions': {}}
|
||||
with tempfile.TemporaryDirectory() as folder:
|
||||
api.profiles_path = Path(folder) / 'profiles.json'
|
||||
api.save_controller_profile('$xbox', profile)
|
||||
self.assertTrue(api.profiles_path.is_file())
|
||||
before = api.profiles_path.read_bytes()
|
||||
api.state.update(connected=True, armed=True)
|
||||
with self.assertRaises(RuntimeError):
|
||||
api.save_controller_profile('$xbox', profile)
|
||||
self.assertEqual(before, api.profiles_path.read_bytes())
|
||||
|
||||
def test_native_recording_chunk_roundtrip_and_expired_token(self):
|
||||
import base64
|
||||
api = ControlApi()
|
||||
with tempfile.TemporaryDirectory() as folder, patch('web_ui.__file__', str(Path(folder) / 'web_ui.py')):
|
||||
token = api.recording_begin()
|
||||
api.recording_chunk(token, base64.b64encode(b'video chunk').decode())
|
||||
path = api.recording_end(token)
|
||||
self.assertEqual(Path(path).read_bytes(), b'video chunk')
|
||||
with self.assertRaises(ValueError):
|
||||
api.recording_chunk(token, 'AA==')
|
||||
|
||||
def test_relay_action_waits_for_ack(self):
|
||||
api = ControlApi()
|
||||
api.station_settings['lights_relay'] = 0
|
||||
worker = api.worker
|
||||
worker.connection = Mock()
|
||||
worker.target_system = worker.target_component = 1
|
||||
worker.last_heartbeat = time.monotonic()
|
||||
api.set_accessory('lights', True)
|
||||
self.assertIsNone(api.state['accessories']['lights']['accepted'])
|
||||
api._consume(('accessory_ack', 'lights', True, 2))
|
||||
self.assertFalse(api.state['accessories']['lights']['accepted'])
|
||||
self.assertEqual(api.state['accessories']['lights']['error'], 'Rejected')
|
||||
|
||||
def test_motor_names_survive_app_restart(self):
|
||||
with tempfile.TemporaryDirectory() as folder, patch('web_ui.__file__', str(Path(folder) / 'web_ui.py')):
|
||||
first = ControlApi()
|
||||
settings = first.motor_settings
|
||||
settings['motors']['1']['name'] = 'Port'
|
||||
first.save_motor_settings(settings)
|
||||
self.assertEqual(ControlApi().motor_settings['motors']['1']['name'], 'Port')
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
unittest.main()
|
||||
+178
-1
@@ -1,6 +1,9 @@
|
||||
"""No serial port is opened by these tests."""
|
||||
import queue
|
||||
import threading
|
||||
import time
|
||||
import unittest
|
||||
from types import SimpleNamespace
|
||||
from unittest.mock import Mock, patch
|
||||
|
||||
from app import Axes, MavlinkWorker, NEUTRAL_Z
|
||||
@@ -100,9 +103,18 @@ class WorkerWatchdogTests(unittest.TestCase):
|
||||
|
||||
def assertNeutral(self):
|
||||
self.worker._send_control()
|
||||
self.assertEqual(self.worker.connection.mav.manual_control_send.call_args.args,
|
||||
self.assertEqual(self.control_values(),
|
||||
(1, 0, 0, NEUTRAL_Z, 0, 0))
|
||||
|
||||
def control_values(self):
|
||||
return self.worker.connection.mav.manual_control_send.call_args.args
|
||||
|
||||
def test_manual_control_uses_native_v2_without_forced_long_payload(self):
|
||||
self.worker._send_mav(self.worker.connection, 'manual_control_send',
|
||||
1, 50, 0, 525, -20, 0)
|
||||
self.assertEqual(self.control_values(), (1, 50, 0, 525, -20, 0))
|
||||
self.assertEqual(self.worker.connection.mav.manual_control_send.call_args.kwargs, {})
|
||||
|
||||
def test_ui_freeze_neutralizes_and_does_not_replay(self):
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker.set_axes(Axes(forward=1), 1)
|
||||
@@ -112,6 +124,15 @@ class WorkerWatchdogTests(unittest.TestCase):
|
||||
self.assertNeutral()
|
||||
self.assertEqual(self.worker.axes, Axes())
|
||||
|
||||
def test_intermediate_demands_reach_mavlink_with_output_limit(self):
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker.last_control_at = 9.9
|
||||
self.worker.set_axes(Axes(forward=.25, vertical=.25), 1)
|
||||
self.worker._send_control()
|
||||
# 25% input at the default 20% limit: 5% command, not 100%.
|
||||
self.assertEqual(self.control_values(),
|
||||
(1, 50, 0, 525, 0, 0))
|
||||
|
||||
def test_heartbeat_freeze_neutralizes_even_with_live_ui(self):
|
||||
with patch("app.time.monotonic", return_value=13.1):
|
||||
self.worker.set_axes(Axes(forward=1), 1)
|
||||
@@ -122,6 +143,162 @@ class WorkerWatchdogTests(unittest.TestCase):
|
||||
self.worker.set_axes(Axes(forward=1), 19)
|
||||
self.assertEqual(self.worker.axes, Axes())
|
||||
|
||||
def test_mavlink_transmissions_are_serialized(self):
|
||||
first_entered = threading.Event()
|
||||
release_first = threading.Event()
|
||||
second_entered = threading.Event()
|
||||
|
||||
class Mav:
|
||||
def first_send(self, **_):
|
||||
first_entered.set()
|
||||
release_first.wait(1)
|
||||
|
||||
def second_send(self, **_):
|
||||
second_entered.set()
|
||||
|
||||
connection = SimpleNamespace(mav=Mav())
|
||||
first = threading.Thread(target=self.worker._send_mav,
|
||||
args=(connection, "first_send"))
|
||||
second = threading.Thread(target=self.worker._send_mav,
|
||||
args=(connection, "second_send"))
|
||||
first.start()
|
||||
self.assertTrue(first_entered.wait(.5))
|
||||
second.start()
|
||||
time.sleep(.05)
|
||||
self.assertFalse(second_entered.is_set())
|
||||
release_first.set()
|
||||
first.join(1)
|
||||
second.join(1)
|
||||
self.assertTrue(second_entered.is_set())
|
||||
|
||||
def test_live_console_is_read_only_bounded_and_keeps_newest_lines(self):
|
||||
for index in range(310):
|
||||
self.worker.log("RX_TEST", f"vehicle {index}")
|
||||
self.worker.log("TX_TEST", f"computer {index}")
|
||||
sides = self.worker.read_console(2)
|
||||
self.assertEqual(set(sides), {"rx", "tx"})
|
||||
self.assertTrue(sides["rx"][0].endswith("[RX_TEST] vehicle 308"))
|
||||
self.assertTrue(sides["rx"][1].endswith("[RX_TEST] vehicle 309"))
|
||||
self.assertTrue(sides["tx"][1].endswith("[TX_TEST] computer 309"))
|
||||
self.assertEqual(len(self.worker.console_rx_lines), 300)
|
||||
self.assertEqual(len(self.worker.console_tx_lines), 300)
|
||||
self.assertEqual(len(self.worker.console_lines), 500)
|
||||
|
||||
def test_arm_request_pauses_parameter_traffic(self):
|
||||
self.worker.armed = False
|
||||
self.worker.param_scan.append("SERVO1_FUNCTION")
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker.command_arm(True)
|
||||
self.worker.config_paused = False # A disarmed heartbeat arrived.
|
||||
self.worker._tick_param_scan(10.1)
|
||||
self.assertEqual(self.worker.command_quiet_until, 16)
|
||||
self.worker.connection.mav.param_request_read_send.assert_not_called()
|
||||
self.worker.connection.mav.command_long_send.assert_called_once()
|
||||
|
||||
def test_arm_request_retries_until_state_confirmation(self):
|
||||
self.worker.armed = False
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker.command_arm(True)
|
||||
self.worker._tick_arm_retry(10.24)
|
||||
self.assertEqual(self.worker.connection.mav.command_long_send.call_count, 1)
|
||||
self.worker._tick_arm_retry(10.25)
|
||||
self.assertEqual(self.worker.connection.mav.command_long_send.call_count, 2)
|
||||
self.worker.pending_arm_state = None
|
||||
self.worker._tick_arm_retry(10.50)
|
||||
self.assertEqual(self.worker.connection.mav.command_long_send.call_count, 2)
|
||||
|
||||
def test_outbound_command_has_valid_heartbeat_lead_in(self):
|
||||
self.worker._send_mav(self.worker.connection, "timesync_send", 0, 123)
|
||||
names = [call[0] for call in self.worker.connection.mav.method_calls]
|
||||
self.assertEqual(names[-2:], ["heartbeat_send", "timesync_send"])
|
||||
|
||||
def test_disarm_sends_neutral_and_pauses_parameter_traffic(self):
|
||||
self.worker.param_scan.append("SERVO1_FUNCTION")
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker.command_arm(False)
|
||||
self.worker.config_paused = False
|
||||
self.worker._tick_param_scan(10.1)
|
||||
self.assertEqual(self.worker.disarm_requested_until, 16)
|
||||
self.assertEqual(self.control_values(),
|
||||
(1, 0, 0, NEUTRAL_Z, 0, 0))
|
||||
self.worker.connection.mav.param_request_read_send.assert_not_called()
|
||||
|
||||
def test_telemetry_config_is_paced_and_includes_low_rate_esc(self):
|
||||
self.worker.armed = False
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker._configure_low_bandwidth_streams()
|
||||
configured = {name: interval for name, _, interval in self.worker.stream_config}
|
||||
self.assertEqual(configured["ESC_TELEMETRY_1_TO_4"], 1_000_000)
|
||||
self.assertEqual(configured["ATTITUDE"], 500_000)
|
||||
self.assertEqual(configured["GLOBAL_POSITION_INT"], 500_000)
|
||||
self.assertNotIn(("ATTITUDE", 30, -1), self.worker.stream_config)
|
||||
self.worker.connection.mav.command_long_send.assert_not_called()
|
||||
self.worker._tick_stream_config(10)
|
||||
self.assertEqual(self.worker.connection.mav.command_long_send.call_count, 1)
|
||||
self.worker._tick_stream_config(10.1)
|
||||
self.assertEqual(self.worker.connection.mav.command_long_send.call_count, 1)
|
||||
self.worker.command_quiet_until = 16
|
||||
self.worker._tick_stream_config(11)
|
||||
self.assertEqual(self.worker.connection.mav.command_long_send.call_count, 1)
|
||||
self.worker._tick_stream_config(16)
|
||||
self.assertEqual(self.worker.connection.mav.command_long_send.call_count, 2)
|
||||
|
||||
def test_link_probe_uses_configured_rate_and_measures_exact_echo(self):
|
||||
self.worker.armed = False
|
||||
self.worker.ping_rate_hz = 5
|
||||
with patch("app.time.monotonic", return_value=10), \
|
||||
patch("app.time.monotonic_ns", return_value=10_000_000_000):
|
||||
self.worker._tick_link_probe(10)
|
||||
self.worker.connection.mav.timesync_send.assert_called_once_with(
|
||||
0, 10_000_000_000)
|
||||
self.assertEqual(self.worker.pending_pings, {10_000_000_000: 10})
|
||||
self.assertEqual(self.worker.next_ping_at, 10.2)
|
||||
message = SimpleNamespace(
|
||||
tc1=1, ts1=10_000_000_000, get_type=lambda: "TIMESYNC",
|
||||
to_dict=lambda: {"tc1": 1, "ts1": 10_000_000_000})
|
||||
with patch("app.time.monotonic", return_value=10.04):
|
||||
self.worker._handle_message(message)
|
||||
quality = self.worker.events.get_nowait()
|
||||
self.assertEqual(quality[0], "link_quality")
|
||||
self.assertEqual(quality[1]["latency_ms"], 40.0)
|
||||
self.assertEqual(quality[1]["loss_percent"], 0.0)
|
||||
|
||||
def test_link_rates_rebuild_requested_telemetry_intervals(self):
|
||||
self.worker.armed = False
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker.set_link_rates(10, {
|
||||
"SYS_STATUS": 5, "SERVO_OUTPUT_RAW": 10,
|
||||
"RC_CHANNELS": 0, "ESC_TELEMETRY_1_TO_4": 2,
|
||||
})
|
||||
self.assertEqual(self.worker.ping_rate_hz, 10)
|
||||
configured = {name: interval for name, _, interval in self.worker.stream_config}
|
||||
self.assertEqual(configured["SYS_STATUS"], 200_000)
|
||||
self.assertEqual(configured["SERVO_OUTPUT_RAW"], 100_000)
|
||||
self.assertEqual(configured["RC_CHANNELS"], -1)
|
||||
self.assertEqual(configured["ESC_TELEMETRY_1_TO_4"], 500_000)
|
||||
|
||||
def test_link_probe_counts_timeout_and_pauses_for_commands(self):
|
||||
self.worker.pending_pings[4] = 5
|
||||
self.worker.rx_delivery_results.extend(((10, True), (10, False)))
|
||||
self.worker.next_ping_at = 0
|
||||
self.worker.command_quiet_until = 20
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker._tick_link_probe(10)
|
||||
self.worker.connection.mav.timesync_send.assert_not_called()
|
||||
self.assertEqual(list(self.worker.ping_results), [(10, None)])
|
||||
quality = self.worker.events.get_nowait()[1]
|
||||
self.assertEqual(quality["loss_percent"], 100.0)
|
||||
self.assertEqual(quality["grade"], "testing")
|
||||
|
||||
def test_clean_downlink_cannot_hide_failed_round_trips(self):
|
||||
self.worker.ping_results.extend([(10, None)] * 20)
|
||||
self.worker.rx_delivery_results.extend([(10, True)] * 200)
|
||||
with patch("app.time.monotonic", return_value=10):
|
||||
self.worker._publish_link_quality()
|
||||
quality = self.worker.events.get_nowait()[1]
|
||||
self.assertEqual(quality["loss_percent"], 100.0)
|
||||
self.assertEqual(quality["grade"], "poor")
|
||||
|
||||
|
||||
class BridgeTests(unittest.TestCase):
|
||||
def test_delayed_arm_after_focus_reset_or_expiry_is_not_sent(self):
|
||||
|
||||
@@ -0,0 +1,270 @@
|
||||
/* Browser regression check. Run: node tests/ui_windows.cjs [path-to-playwright]
|
||||
Uses a simulated Python bridge; never opens a COM port or sends MAVLink. */
|
||||
const assert=require('node:assert/strict');
|
||||
const fs=require('node:fs');
|
||||
const path=require('node:path');
|
||||
const http=require('node:http');
|
||||
const {chromium}=require(process.argv[2]||'playwright');
|
||||
const root=path.resolve(__dirname,'..'),output=path.join(root,'runtime','ui-check');
|
||||
fs.mkdirSync(output,{recursive:true});
|
||||
const server=http.createServer((req,res)=>{
|
||||
const url=decodeURIComponent(new URL(req.url,'http://localhost').pathname);
|
||||
let file=path.resolve(root,'.'+url);
|
||||
if(url==='/model.stl'||url==='/model')file=path.join(root,'runtime','vehicle_model.stl');
|
||||
if(!file.startsWith(root+path.sep)||!fs.existsSync(file)||!fs.statSync(file).isFile()){
|
||||
res.writeHead(404);res.end();return;
|
||||
}
|
||||
const types={'.html':'text/html','.js':'text/javascript','.css':'text/css','.stl':'model/stl'};
|
||||
res.setHeader('Content-Type',types[path.extname(file)]||'application/octet-stream');
|
||||
fs.createReadStream(file).pipe(res);
|
||||
});
|
||||
async function main(){
|
||||
await new Promise(resolve=>server.listen(0,'127.0.0.1',resolve));
|
||||
const browser=await chromium.launch({headless:true});
|
||||
try{
|
||||
const page=await browser.newPage({viewport:{width:1080,height:720}});
|
||||
const errors=[];page.on('pageerror',error=>errors.push(error.message));
|
||||
const setArmed=value=>page.evaluate(value=>{
|
||||
Object.assign(testBridge.state,{connected:true,armed:value,armed_known:true,app_state:value?'armed':'connected_disarmed'});render(testBridge.state);
|
||||
},value);
|
||||
await page.addInitScript(()=>{
|
||||
const clone=value=>JSON.parse(JSON.stringify(value));
|
||||
const servos={};for(let i=1;i<=16;i++)servos[String(i)]={function:i<=3?32+i:0,motor:i<=3?i:null,direction:i<=3?1:null};
|
||||
const state={connected:false,armed:false,armed_known:false,mode:null,app_state:'disconnected',status:'Ready',servos,link_quality:null};
|
||||
const battery={cells:4,capacity_mah:5500,c_rating:35,full_v_per_cell:4.2,empty_v_per_cell:3.3,warning_percent:20};
|
||||
const link={baud:57600,control_hz:20,ping_hz:1,system_hz:1,servo_hz:2,rc_hz:2,esc_hz:1};
|
||||
const calls={battery:0,link:0,heavy:0,reverse:0,console:0,connect:[],axes:[],axisVisual:[],stops:0};
|
||||
const sleep=ms=>new Promise(resolve=>setTimeout(resolve,ms));
|
||||
window.testBridge={state,battery,link,calls,failBattery:false,failMotor:false};
|
||||
window.testPads=[];Object.defineProperty(navigator,'getGamepads',{value:()=>window.testPads});
|
||||
window.pywebview={api:{
|
||||
initial_state:async()=>({ports:[{device:'COM5',label:'COM5'}],state:clone(state),battery_config:clone(battery),link_config:clone(link)}),
|
||||
refresh_ports:async()=>[{device:'COM5',label:'COM5'}],poll:async()=>clone(state),
|
||||
get_saved_model_info:async()=>null,set_gain:async()=>true,stop_controls:async()=>{calls.stops++;return true},set_axes:async(...axes)=>{calls.axes.push(axes);calls.axisVisual.push({joy:joystick3D.getState(),vertical:verticalControl.getState().value});return true},
|
||||
save_battery:async data=>{calls.battery++;await sleep(200);if(window.testBridge.failBattery)throw Error('Battery save failed');Object.keys(battery).forEach(k=>battery[k]=+data[k]);return clone(battery)},
|
||||
save_link_settings:async data=>{calls.link++;await sleep(250);Object.keys(link).forEach(k=>link[k]=+data[k]);return clone(link)},
|
||||
connect:async(port,baud,rate)=>{calls.connect.push({port,baud,rate});Object.assign(state,{connected:true,armed_known:true,app_state:'connected_disarmed',mode:'MANUAL',link:'LINK OK',link_quality:{grade:'excellent',probe_samples:20,rx_packets_30s:100,rtt_median_ms:24,rtt_p95_ms:40,probe_loss_percent:0,rx_sequence_loss_percent:0,heartbeat_age_s:.2}});return clone(state)},
|
||||
disconnect:async()=>{Object.assign(state,{connected:false,armed_known:false,app_state:'disconnected'});return true},
|
||||
reverse_motor:async servo=>{calls.reverse++;if(window.testBridge.failMotor)throw Error('Motor write failed');setTimeout(()=>state.servos[servo].direction*=-1,650);return true},
|
||||
set_servo_function:async(servo,motor)=>{if(window.testBridge.failMotor)throw Error('Motor write failed');setTimeout(()=>Object.assign(state.servos[servo],{motor:motor||null,function:motor===0?0:motor<=8?32+motor:73+motor,direction:motor?1:null}),650);return true},
|
||||
start_heavy_quality_test:async()=>{calls.heavy++;await sleep(250);state.heavy_quality={running:true,status:'Stage 1 of 3: 1 Hz',sent:4,replies:4,results:[]};return clone(state.heavy_quality)},
|
||||
cancel_heavy_quality_test:async()=>{state.heavy_quality={running:false,status:'Cancelled',results:[]};return clone(state.heavy_quality)},
|
||||
read_console:async()=>{calls.console++;return {rx:['2026-10-01T10:11:12.123 [RX] {"mavpackettype":"COMMAND_ACK","command":400,"result":0,"sample":1}', '2026-10-01T10:11:12.124 [RX_BAD_DATA] corrupt_frame='+calls.console, '2026-10-01T10:11:12.125 [RX] {"mavpackettype":"HEARTBEAT"}'],tx:['2026-10-01T10:11:12.124 [TX_COMMAND] ARM '+calls.console]}},
|
||||
minimize_window:async()=>true,toggle_maximize_window:async()=>false,close_window:async()=>true
|
||||
}};
|
||||
});
|
||||
await page.goto('http://127.0.0.1:'+server.address().port+'/web/index.html');
|
||||
await page.waitForFunction(()=>bridgeReady);
|
||||
const openLink=()=>page.locator('[data-open="link-modal"]').click();
|
||||
const close=async id=>{await page.locator('#'+id+' [data-close]').first().click();await page.waitForFunction(id=>!document.getElementById(id).open,id)};
|
||||
await openLink();
|
||||
await page.locator('#baud').selectOption('115200');
|
||||
await page.locator('#link-modal').getByRole('button',{name:'Cancel',exact:true}).click();
|
||||
await page.waitForFunction(()=>!document.getElementById('link-modal').open);
|
||||
await openLink();assert.equal(await page.locator('#baud').inputValue(),'57600');
|
||||
await page.locator('#custom-port-input').fill('COM42');
|
||||
await page.locator('#custom-port-btn').click();
|
||||
assert(await page.locator('#link-modal').evaluate(d=>d.open));
|
||||
assert.equal(await page.locator('#port').inputValue(),'COM42');
|
||||
await page.locator('#baud').selectOption('115200');
|
||||
assert(await page.locator('#link-form [type="submit"]').evaluate(el=>{el.click();return el.disabled}));
|
||||
await page.waitForFunction(()=>!document.getElementById('link-modal').open);
|
||||
await page.locator('#refresh').click();assert.equal(await page.locator('#port').inputValue(),'COM42');
|
||||
await page.locator('#connect').click();
|
||||
await page.waitForFunction(()=>testBridge.calls.connect.length===1);
|
||||
assert.equal(await page.evaluate(()=>testBridge.calls.connect[0].baud),115200);
|
||||
await page.locator('[data-open="battery-modal"]').click();
|
||||
await page.locator('#battery-form [name="cells"]').fill('5');
|
||||
await page.keyboard.press('Escape');await page.waitForFunction(()=>!document.getElementById('battery-modal').open);
|
||||
await page.locator('[data-open="battery-modal"]').click();
|
||||
assert.equal(await page.locator('#battery-form [name="cells"]').inputValue(),'4');
|
||||
await page.evaluate(()=>testBridge.failBattery=true);
|
||||
await page.locator('#battery-form').getByRole('button',{name:'Save battery'}).click();
|
||||
await page.locator('#battery-form .form-feedback').waitFor({state:'visible'});
|
||||
assert(await page.locator('#battery-modal').evaluate(d=>d.open));
|
||||
assert.equal(await page.locator('#battery-form .form-feedback').textContent(),'Battery save failed');
|
||||
await page.evaluate(()=>testBridge.failBattery=false);
|
||||
await page.locator('#battery-form [name="cells"]').fill('5');
|
||||
await page.locator('#battery-form').getByRole('button',{name:'Save battery'}).click();
|
||||
await page.waitForFunction(()=>!document.getElementById('battery-modal').open);
|
||||
await page.locator('[data-open="battery-modal"]').click();
|
||||
assert.equal(await page.locator('#battery-form [name="cells"]').inputValue(),'5');
|
||||
await page.screenshot({path:path.join(output,'battery.png')});await close('battery-modal');
|
||||
await page.locator('[data-open="motors-modal"]').click();
|
||||
assert.equal(await page.locator('#motor-list > .motor-row').count(),3);
|
||||
await page.locator('#motor-list > .motor-row').first().getByRole('button').click();
|
||||
await page.waitForFunction(()=>document.querySelector('#motor-list > .motor-row > span').textContent==='Confirming…');
|
||||
assert(await page.locator('#motor-list > .motor-row').first().getByRole('button').isDisabled());
|
||||
await page.waitForFunction(()=>document.querySelector('#motor-list > .motor-row > span').textContent==='Reversed');
|
||||
await page.evaluate(()=>testBridge.failMotor=true);
|
||||
await page.locator('#motor-list > .motor-row').first().locator('select').selectOption('2');
|
||||
await page.locator('#motor-feedback').waitFor({state:'visible'});
|
||||
assert.equal(await page.locator('#motor-list > .motor-row').first().locator('select').inputValue(),'1');
|
||||
await page.screenshot({path:path.join(output,'motors.png')});await close('motors-modal');
|
||||
await page.locator('#link-quality').click();
|
||||
assert.equal(await page.locator('#quality-detail-rtt').textContent(),'24 ms');
|
||||
await page.locator('#heavy-quality-run').click();
|
||||
assert(await page.locator('#heavy-quality-run').isDisabled());
|
||||
await page.locator('#heavy-quality-cancel').waitFor({state:'visible'});
|
||||
assert.equal(await page.evaluate(()=>testBridge.calls.heavy),1);
|
||||
await page.locator('#heavy-quality-cancel').click();
|
||||
await page.waitForFunction(()=>!testBridge.state.heavy_quality.running);
|
||||
await page.screenshot({path:path.join(output,'quality.png')});await close('link-quality-modal');
|
||||
await page.locator('#console').click();
|
||||
await page.waitForFunction(()=>document.getElementById('console-rx-output').textContent.includes('COMMAND_ACK'));
|
||||
await page.locator('#console-pause').click();
|
||||
const paused=await page.locator('#console-rx-output').textContent();
|
||||
await page.waitForTimeout(850);assert.equal(await page.locator('#console-rx-output').textContent(),paused);
|
||||
await page.locator('#console-pause').click();
|
||||
await page.waitForFunction(old=>document.getElementById('console-rx-output').textContent!==old,paused);
|
||||
await page.screenshot({path:path.join(output,'console.png')});await page.locator('#console-close').click();
|
||||
for(const viewport of [{width:900,height:560},{width:480,height:720}]){
|
||||
await page.setViewportSize(viewport);
|
||||
for(const id of ['link-modal','battery-modal','link-quality-modal','motors-modal','controller-modal']){
|
||||
await page.evaluate(id=>openModal(id),id);
|
||||
const box=await page.locator('#'+id).boundingBox();
|
||||
assert(box.x>=0&&box.y>=0&&box.width<=viewport.width&&box.height<=viewport.height,id+' must fit viewport');
|
||||
assert.equal(await page.evaluate(()=>canDrive()),false);
|
||||
const closeGeometry=await page.locator('#'+id+' .modal-close').evaluate(button=>{
|
||||
const b=button.getBoundingClientRect(),s=button.querySelector('svg').getBoundingClientRect();
|
||||
return {dx:Math.abs(b.x+b.width/2-s.x-s.width/2),dy:Math.abs(b.y+b.height/2-s.y-s.height/2),bg:getComputedStyle(button).backgroundColor};
|
||||
});
|
||||
assert(closeGeometry.dx<.5&&closeGeometry.dy<.5,id+' close icon must be centered');
|
||||
assert.equal(closeGeometry.bg,'rgba(0, 0, 0, 0)');
|
||||
await close(id);
|
||||
}
|
||||
}
|
||||
await page.setViewportSize({width:1080,height:720});await openLink();
|
||||
await page.screenshot({path:path.join(output,'link.png')});await close('link-modal');
|
||||
|
||||
await page.setViewportSize({width:1080,height:720});
|
||||
await page.evaluate(()=>{Object.assign(testBridge.state,{connected:true,armed:false,armed_known:true,app_state:'connected_disarmed',battery:{voltage:15.8,percent:72,cells:4,low:false}});focusChanged(true);render(testBridge.state)});
|
||||
await page.locator('#engage').focus();
|
||||
assert.equal(await page.locator('#engage').evaluate(el=>getComputedStyle(el).outlineStyle),'none');
|
||||
await page.evaluate(()=>startEngageHold());
|
||||
assert.equal(await page.locator('#input-joystick').isDisabled(),true);
|
||||
await page.evaluate(()=>cancelEngageHold(false));
|
||||
assert.equal(await page.locator('#input-joystick').isDisabled(),false);
|
||||
await page.locator('#input-joystick').click();
|
||||
for(const pending of ['arm','disarm']){
|
||||
await page.evaluate(pending=>{testBridge.state.pending_command=pending;render(testBridge.state)},pending);
|
||||
assert.equal(await page.locator('#input-keyboard').isDisabled(),true);
|
||||
assert.equal(await page.evaluate(()=>{setInputMode('keyboard');return inputMode}),'joystick');
|
||||
}
|
||||
await page.evaluate(()=>{delete testBridge.state.pending_command;testBridge.state.armed_known=false;render(testBridge.state)});
|
||||
assert.equal(await page.locator('#input-keyboard').isDisabled(),true);
|
||||
await setArmed(true);
|
||||
assert.equal(await page.locator('#input-keyboard').isDisabled(),true);
|
||||
await page.waitForFunction(()=>document.getElementById('controller-status').textContent.includes('Waiting'));
|
||||
await page.evaluate(()=>testPads=[{connected:true,id:'Test controller',index:0,axes:[1,-1,0,-1]}]);
|
||||
await page.waitForFunction(()=>document.getElementById('controller-status').textContent==='Center sticks to resume');
|
||||
assert.deepEqual(await page.evaluate(()=>({...control})),{turn:0,forward:0,vertical:0});
|
||||
await page.evaluate(()=>testPads[0].axes=[0,0,0,0]);
|
||||
await page.waitForFunction(()=>!controllerNeedCenter);
|
||||
await page.keyboard.down('w');await page.waitForTimeout(420);await page.keyboard.up('w');
|
||||
assert.equal(await page.evaluate(()=>control.forward),0);
|
||||
await page.evaluate(()=>testPads[0].axes=[1,-1,0,-1]);
|
||||
await page.waitForFunction(()=>control.vertical>0&&control.vertical<.8);
|
||||
await page.waitForFunction(()=>control.vertical>.99);
|
||||
const matching=await page.evaluate(()=>{
|
||||
const joy=joystick3D.getState(),sent=testBridge.calls.axes.at(-1);
|
||||
return {length:Math.hypot(control.turn,control.forward),joy,vertical:control.vertical,sent,visual:testBridge.calls.axisVisual.at(-1),control:{...control}};
|
||||
});
|
||||
assert(matching.length<=1.00001);
|
||||
assert.equal(matching.joy.x,matching.control.turn);assert.equal(matching.joy.y,-matching.control.forward);
|
||||
assert.equal(matching.sent[0],-matching.visual.joy.y);assert.equal(matching.sent[1],matching.visual.joy.x);assert.equal(matching.sent[2],matching.visual.vertical);
|
||||
// Dispatch even though CSS excludes pointers, to exercise the handler gate.
|
||||
await page.locator('#joystick-canvas').dispatchEvent('pointerdown',{pointerId:91,clientX:20,clientY:20,button:0});
|
||||
await page.locator('#heave').dispatchEvent('pointerdown',{pointerId:92,clientX:20,clientY:20,button:0});
|
||||
assert.equal(await page.evaluate(()=>joystick3D.getState().active||verticalControl.getState().active),false);
|
||||
await page.locator('#console').click();
|
||||
await page.waitForFunction(()=>!document.getElementById('console-dock').hidden);
|
||||
await page.waitForFunction(()=>document.querySelector('.rx-dot').classList.contains('lit')&&document.querySelector('.tx-dot').classList.contains('lit'));
|
||||
await page.locator('#console-pause').click();
|
||||
await page.waitForTimeout(500);
|
||||
assert.equal(await page.locator('.rx-dot').evaluate(el=>el.classList.contains('lit')),false);
|
||||
assert.equal(await page.locator('.tx-dot').evaluate(el=>el.classList.contains('lit')),false);
|
||||
await page.locator('#console-pause').click();
|
||||
assert.equal(await page.evaluate(()=>canDrive()),true);
|
||||
assert.equal(await page.locator('#console-rx-output .console-row').count(),2);
|
||||
await page.locator('#console-filter').selectOption('all');
|
||||
assert.equal(await page.locator('#console-rx-output .console-row').count(),3);
|
||||
await page.locator('#console-rx-output details').first().locator('summary').click();
|
||||
await page.waitForTimeout(850);assert.equal(await page.locator('#console-rx-output details').first().evaluate(el=>el.open),true);
|
||||
await page.screenshot({path:path.join(output,'controller-console.png')});await page.locator('#console-close').click();
|
||||
await page.evaluate(()=>testPads[0].axes=[0,0,0,0]);
|
||||
await page.waitForFunction(()=>control.vertical>0&&control.vertical<.95);
|
||||
await page.waitForFunction(()=>control.vertical===0&&control.turn===0&&control.forward===0);
|
||||
await setArmed(false);
|
||||
assert.equal(await page.locator('#input-keyboard').isDisabled(),false);
|
||||
await page.locator('#controller-settings').click();
|
||||
await page.screenshot({path:path.join(output,'controller-setup.png')});
|
||||
await page.locator('#controller-form [name="invertTurn"]').check();
|
||||
await page.locator('#controller-form').getByRole('button',{name:'Cancel',exact:true}).click();
|
||||
await page.waitForFunction(()=>!document.getElementById('controller-modal').open);
|
||||
await page.locator('#controller-settings').click();
|
||||
assert.equal(await page.locator('#controller-form [name="invertTurn"]').isChecked(),false);
|
||||
await page.locator('#controller-form [name="invertTurn"]').check();
|
||||
await page.locator('#controller-form').getByRole('button',{name:'Save mapping',exact:true}).click();
|
||||
await page.waitForFunction(()=>!document.getElementById('controller-modal').open);
|
||||
await setArmed(true);
|
||||
await page.waitForFunction(()=>!controllerNeedCenter);
|
||||
await page.evaluate(()=>testPads[0].axes=[.5,0,0,0]);
|
||||
await page.waitForFunction(()=>control.turn<-.2);
|
||||
await page.evaluate(()=>testPads=[]);
|
||||
await page.waitForFunction(()=>control.turn===0);
|
||||
await page.evaluate(()=>testPads=[{connected:true,id:'Test controller',index:0,axes:[.5,0,0,0]}]);
|
||||
await page.waitForTimeout(300);assert.equal(await page.evaluate(()=>control.turn),0);
|
||||
await page.evaluate(()=>testPads[0].axes=[0,0,0,0]);await page.waitForFunction(()=>!controllerNeedCenter);
|
||||
await page.evaluate(()=>testPads[0].axes=[.5,0,0,0]);await page.waitForFunction(()=>control.turn<-.2);
|
||||
await page.evaluate(()=>focusChanged(false));assert.equal(await page.evaluate(()=>control.turn),0);
|
||||
await page.evaluate(()=>focusChanged(true));await page.waitForTimeout(300);assert.equal(await page.evaluate(()=>control.turn),0);
|
||||
await page.evaluate(()=>testPads[0].axes=[0,0,0,0]);await page.waitForFunction(()=>!controllerNeedCenter);
|
||||
await page.evaluate(()=>testPads[0].axes=[.5,0,0,0]);await page.waitForFunction(()=>control.turn<-.2);
|
||||
await page.evaluate(()=>testPads[0].id='Different controller');
|
||||
await page.waitForFunction(()=>control.turn===0);
|
||||
assert.equal(await page.locator('#input-keyboard').isDisabled(),true);
|
||||
await setArmed(false);
|
||||
await page.locator('#input-keyboard').click();
|
||||
await setArmed(true);
|
||||
await page.keyboard.down('w');await page.waitForFunction(()=>control.forward>.9);await page.keyboard.up('w');
|
||||
await page.waitForFunction(()=>control.forward===0);
|
||||
await page.evaluate(()=>{Object.assign(testBridge.state,{connected:false,armed_known:false});render(testBridge.state)});
|
||||
assert.equal(await page.evaluate(()=>canDrive()),false);
|
||||
|
||||
await setArmed(false);
|
||||
const deckLayout=await page.evaluate(()=>{
|
||||
const battery=document.querySelector('.battery-card'),sidebar=document.querySelector('.sidebar-deck'),actions=document.querySelector('.activity-actions'),heading=document.querySelector('.activity-heading');
|
||||
return {last:battery===document.querySelector('.telemetry-zone').lastElementChild,title:heading.textContent,
|
||||
actionHeight:actions.querySelector('button').getBoundingClientRect().height,
|
||||
batteryHeight:battery.getBoundingClientRect().height,connectHeight:document.querySelector('#connect').getBoundingClientRect().height,
|
||||
bottomGap:sidebar.getBoundingClientRect().bottom-battery.getBoundingClientRect().bottom,
|
||||
overlay:getComputedStyle(document.querySelector('.battery-copy')).zIndex,
|
||||
actionRightGap:actions.getBoundingClientRect().right-actions.lastElementChild.getBoundingClientRect().right,
|
||||
sidebarPadding:getComputedStyle(sidebar).paddingTop,
|
||||
workspacePadding:getComputedStyle(document.querySelector('.controls-workspace')).paddingTop};
|
||||
});
|
||||
assert.equal(deckLayout.last,true);assert.equal(deckLayout.title,'Activity:');
|
||||
assert.equal(deckLayout.actionHeight,32);assert.equal(deckLayout.batteryHeight,62);assert.equal(deckLayout.connectHeight,62);
|
||||
assert(deckLayout.bottomGap>=10&&deckLayout.bottomGap<=24);assert.equal(deckLayout.overlay,'1');
|
||||
assert.equal(deckLayout.actionRightGap,0);assert.equal(deckLayout.sidebarPadding,deckLayout.workspacePadding);
|
||||
const batteryReadout=await page.locator('.battery-card').evaluate(el=>{
|
||||
const percent=el.querySelector('#battery-percent'),voltage=el.querySelector('#battery-title');
|
||||
return {percent:percent.textContent,voltage:voltage.textContent,border:getComputedStyle(el).borderTopWidth,
|
||||
mainSize:parseFloat(getComputedStyle(percent).fontSize),voltageSize:parseFloat(getComputedStyle(voltage).fontSize)};
|
||||
});
|
||||
assert.match(batteryReadout.percent,/^\d+%$/);assert.match(batteryReadout.voltage,/^\d+\.\d{2} V$/);
|
||||
assert.equal(batteryReadout.border,'0px');assert(batteryReadout.mainSize>batteryReadout.voltageSize);
|
||||
await page.screenshot({path:path.join(output,'ui-cleanup.png')});
|
||||
assert.deepEqual(errors,[]);
|
||||
console.log('PASS: settings cancel/save/failure, saved baud, custom port rescan, motor confirmation/failure, heavy test, console pause/resume, keyboard gating, five dialogs at two window sizes; controller conditioning/read-only graphics, actual bridge values, mapping, focus/unplug/identity safety and dock filtering; mode locking during hold/armed/pending/unknown states, centered SVG close icons and bottom battery layout.');
|
||||
}catch(error){
|
||||
const page=browser.contexts()[0]?.pages()[0];
|
||||
if(page){
|
||||
await page.screenshot({path:path.join(output,'failure.png')});
|
||||
console.error(await page.evaluate(()=>[...document.querySelectorAll('input')].filter(el=>!el.checkValidity()).map(el=>({name:el.name,value:el.value,error:el.validationMessage}))));
|
||||
}
|
||||
throw error;
|
||||
}finally{await browser.close();await new Promise(resolve=>server.close(resolve))}
|
||||
}
|
||||
main().catch(error=>{console.error(error);server.close();process.exitCode=1});
|
||||
+471
-49
@@ -6,7 +6,8 @@ const STATUS_LABELS = {
|
||||
link_degraded: 'Signal lost — check tether',
|
||||
};
|
||||
const $=s=>document.querySelector(s), $$=s=>[...document.querySelectorAll(s)];
|
||||
const control={forward:0,turn:0,vertical:0}, pressedKeys=new Set(); let bridgeReady=false, appState='disconnected', batteryConfig={}, servoSignature='', lastAxisSend=0, axisTimer=0, demoActive=false, demoState=null;
|
||||
const control={forward:0,turn:0,vertical:0,lateral:0,pitch:0,roll:0}, pressedKeys=new Set(); let bridgeReady=false, appState='disconnected', batteryConfig={}, linkConfig={baud:57600,control_hz:20,ping_hz:1,system_hz:1,battery_hz:1,servo_hz:2,rc_hz:2,esc_hz:1}, servoSignature='', lastAxisSend=0, axisTimer=0, demoActive=false, demoState=null;
|
||||
let motorSettings={independent:false,customized:false,motors:Object.fromEntries(Array.from({length:12},(_,i)=>[String(i+1),{name:`Motor ${i+1}`,scale:20}]))},motorSettingsQueue=Promise.resolve();
|
||||
const api=(name,...args)=>window.pywebview.api[name](...args);
|
||||
const activity=[];
|
||||
let lastReportedStatus='';
|
||||
@@ -14,27 +15,154 @@ function recordActivity(message){
|
||||
if(!message||activity[0]===message)return;
|
||||
activity.unshift(String(message));activity.length=Math.min(activity.length,3);
|
||||
['#status-text','#activity-previous','#activity-oldest'].forEach((selector,i)=>{
|
||||
const row=$(selector);if(row){row.textContent=activity[i]||'';row.hidden=!activity[i]}
|
||||
const row=$(selector);if(row){const changed=row.textContent!==(activity[i]||'');row.textContent=activity[i]||'';row.hidden=!activity[i];if(changed&&!row.hidden&&!matchMedia('(prefers-reduced-motion:reduce)').matches)row.animate([{opacity:0},{opacity:1}],{duration:180,easing:'ease-out'})}
|
||||
});
|
||||
}
|
||||
function withTimeout(promise,ms=1500){return new Promise((resolve,reject)=>{const timer=setTimeout(()=>reject(new Error('Control bridge timed out')),ms);Promise.resolve(promise).then(value=>{clearTimeout(timer);resolve(value)},error=>{clearTimeout(timer);reject(error)})})}
|
||||
let vehicleSnapshot={connected:false,armed:null}, view=ControlState.present(vehicleSnapshot), inputFocused=true,
|
||||
bridgeStale=false,lastBridgeAt=performance.now(),axisBusy=false,inputSequence=Date.now(),
|
||||
localRequest=null,commandError='',requestSerial=0,demoCommandTimer=0,lastSafetyTick=performance.now();
|
||||
const canDrive=()=>view.drive&&performance.now()-lastSafetyTick<750;
|
||||
const canDrive=()=>view.drive&&!document.querySelector('dialog[open]')&&performance.now()-lastSafetyTick<750;
|
||||
|
||||
window.canDrive=canDrive;
|
||||
function makeDemoState(){const servos={};for(let i=1;i<=16;i++)servos[String(i)]={function:i<=3?32+i:0,label:i<=3?`Motor ${i}`:'Unassigned',motor:i<=3?i:null,direction:i<=3?1:null};return {connected:true,link:'LINK OK',vehicle:'DEMO • DISARMED',armed:false,armed_known:true,mode:'MANUAL',app_state:'connected_disarmed',status:'Demo mode ready — no hardware or spoofer.',battery:{voltage:15.8,per_cell:3.95,percent:72,cells:4,low:false},servos}}
|
||||
let inputMode='keyboard',controllerKey=null,controllerConfig=null,controllerDraft=null,controllerNeedCenter=true,controllerWasDriving=false;
|
||||
let controllerProfiles={};try{controllerProfiles=JSON.parse(localStorage.getItem('sub-v2-profiles'))||{}}catch(_){}
|
||||
const controllerMotion=new ControllerInput.Motion();
|
||||
let controllerActionState={},controllerActionsReady=false;
|
||||
const controllerId=pad=>pad.index+':'+pad.id;
|
||||
function getControllers(){try{return [...(navigator.getGamepads?.()||[])].filter(pad=>pad?.connected)}catch(_){return []}}
|
||||
function loadControllerConfig(pad){
|
||||
let saved=controllerProfiles[pad?.id||'$xbox']||controllerProfiles.$xbox;
|
||||
if(!saved&&pad)try{saved=JSON.parse(localStorage.getItem('sub-controller:'+pad.id))}catch(_){}
|
||||
const config=ControllerInput.migrate(saved,pad);
|
||||
return ControllerInput.validProfile(config)?config:ControllerInput.preset();
|
||||
}
|
||||
function selectController(pad){
|
||||
resetInputs();controllerKey=pad?controllerId(pad):null;controllerConfig=loadControllerConfig(pad);
|
||||
}
|
||||
function setInputMode(mode){
|
||||
if(mode===inputMode||inputConfigurationLocked())return false;
|
||||
resetInputs();inputMode=mode;document.body.dataset.inputMode=mode;
|
||||
$('#input-keyboard').setAttribute('aria-pressed',String(mode==='keyboard'));
|
||||
$('#input-joystick').setAttribute('aria-pressed',String(mode==='joystick'));
|
||||
$('#joystick-canvas').setAttribute('aria-label',mode==='joystick'?'Controller output':'Steering and throttle joystick; W A S D keys');
|
||||
$('#heave').setAttribute('aria-label',mode==='joystick'?'Controller vertical output':'Vertical thrust control');
|
||||
return true;
|
||||
}
|
||||
function inputConfigurationLocked(){return !!(engageStart||localRequest||view.pending||vehicleSnapshot.armed===true||(vehicleSnapshot.connected&&!view.known))}
|
||||
function syncInputModeControls(){
|
||||
const locked=inputConfigurationLocked();
|
||||
$('.input-mode-switch').dataset.locked=String(locked);
|
||||
for(const button of [$('#input-keyboard'),$('#input-joystick'),$('#controller-settings')])button.disabled=locked;
|
||||
if($('#controller-modal').open)for(const field of $('#controller-form').querySelectorAll('input,select,button[type=submit],button[data-swap]'))field.disabled=locked;
|
||||
}
|
||||
window.canTouchControl=()=>inputMode==='keyboard'&&canDrive();
|
||||
$('#input-keyboard').onclick=()=>setInputMode('keyboard');
|
||||
$('#input-joystick').onclick=()=>setInputMode('joystick');
|
||||
const axisLabels={forward:'Forward',lateral:'Strafe',vertical:'Vertical',turn:'Turn',pitch:'Pitch',roll:'Roll'};
|
||||
function fillControllerForm(keepDraft=false){
|
||||
const pads=getControllers(),device=$('#controller-device'),form=$('#controller-form');
|
||||
device.replaceChildren(new Option('Xbox · offline',''),...pads.map(pad=>new Option(pad.id,controllerId(pad))));
|
||||
device.value=controllerKey||'';
|
||||
const pad=pads.find(pad=>controllerId(pad)===controllerKey);
|
||||
if(!keepDraft)controllerDraft=structuredClone(controllerConfig||loadControllerConfig(pad));
|
||||
const config=controllerDraft;
|
||||
$('#controller-preset').value=['triggers3','sixaxis','classic'].includes(config.preset)?config.preset:'custom';
|
||||
const rows=$('#controller-bindings');rows.replaceChildren();
|
||||
for(const name of ControllerInput.names){
|
||||
const row=document.createElement('div');row.className='binding-row';row.dataset.axis=name;
|
||||
const label=document.createElement('span');label.textContent=axisLabels[name];
|
||||
const meter=document.createElement('meter');meter.min=-1;meter.max=1;meter.value=0;meter.setAttribute('aria-label',axisLabels[name]+' demand');label.append(meter);row.append(label);
|
||||
for(const direction of ['negative','positive']){
|
||||
const select=document.createElement('select');select.name=name+'_'+direction;select.setAttribute('aria-label',axisLabels[name]+' '+direction);
|
||||
for(const [value,text] of ControllerInput.sources(pad))select.add(new Option(text,value));
|
||||
select.value=config.bindings[name][direction];
|
||||
select.onchange=()=>{config.bindings[name][direction]=select.value;config.preset='custom';$('#controller-preset').value='custom'};
|
||||
row.append(select);
|
||||
}
|
||||
const swap=document.createElement('button');swap.type='button';swap.dataset.swap=name;swap.className='binding-swap';swap.textContent='⇄';swap.title='Reverse '+axisLabels[name];swap.setAttribute('aria-label','Reverse '+axisLabels[name]);
|
||||
swap.onclick=()=>{const item=config.bindings[name];[item.negative,item.positive]=[item.positive,item.negative];config.preset='custom';fillControllerForm(true)};row.append(swap);
|
||||
const scale=document.createElement('input');scale.type='number';scale.min=0;scale.max=100;scale.step=1;scale.value=Math.round(config.bindings[name].scale*100);scale.setAttribute('aria-label',axisLabels[name]+' limit');
|
||||
scale.oninput=()=>{config.bindings[name].scale=Number(scale.value)/100;config.preset='custom';$('#controller-preset').value='custom'};row.append(scale);rows.append(row);
|
||||
}
|
||||
for(const action of ['lights','stream','record']){
|
||||
const select=form.elements[action];select.replaceChildren(...ControllerInput.sources(pad).filter(([value])=>!value.startsWith('axis:')).map(([value,text])=>new Option(text,value)));
|
||||
select.value=config.actions[action];select.onchange=()=>config.actions[action]=select.value;
|
||||
}
|
||||
form.elements.deadZone.value=Math.round(config.deadZone*100);form.elements.expo.value=Math.round(config.expo*100);
|
||||
form.elements.deadZone.oninput=()=>config.deadZone=Number(form.elements.deadZone.value)/100;
|
||||
form.elements.expo.oninput=()=>config.expo=Number(form.elements.expo.value)/100;
|
||||
syncInputModeControls();
|
||||
}
|
||||
$('#controller-device').onchange=e=>{
|
||||
if(inputConfigurationLocked())return;
|
||||
selectController(getControllers().find(pad=>controllerId(pad)===e.target.value));fillControllerForm();
|
||||
};
|
||||
$('#controller-preset').onchange=e=>{if(e.target.value==='custom')return;controllerDraft=ControllerInput.preset(e.target.value);fillControllerForm(true)};
|
||||
$('#controller-form').onsubmit=async e=>{
|
||||
e.preventDefault();const form=e.currentTarget,feedback=form.querySelector('.form-feedback');
|
||||
if(inputConfigurationLocked()){setFeedback(feedback,'Disengage first');return}
|
||||
if(!ControllerInput.validProfile(controllerDraft)){setFeedback(feedback,'Check inputs');return}
|
||||
const pad=getControllers().find(pad=>controllerId(pad)===controllerKey),device=pad?.id||'$xbox';
|
||||
try{
|
||||
const clean=bridgeReady?await api('save_controller_profile',device,controllerDraft):structuredClone(controllerDraft);
|
||||
controllerProfiles[device]=clean;localStorage.setItem('sub-v2-profiles',JSON.stringify(controllerProfiles));controllerConfig=clean;
|
||||
resetInputs();closeModal($('#controller-modal'));toast('Mapping saved');
|
||||
}catch(error){setFeedback(feedback,error.message||String(error))}
|
||||
};
|
||||
function pollController(now){
|
||||
try{
|
||||
if(inputMode==='joystick'||$('#controller-modal').open){
|
||||
const pads=getControllers();
|
||||
if(controllerKey===null&&pads.length&&!$('#controller-modal').open)selectController(pads[0]);
|
||||
const pad=pads.find(pad=>controllerId(pad)===controllerKey),raw=pad&&ControllerInput.read(pad,controllerConfig||loadControllerConfig(pad));
|
||||
const target=raw&&(window.V2?.filterDemand(raw)||raw);
|
||||
let status=!pad?'No controller':!raw?'Check mapping':controllerNeedCenter&&canDrive()?'Center controls':'Controller ready';
|
||||
if(inputMode==='joystick'){
|
||||
if(!target||!canDrive()){
|
||||
if(controllerWasDriving)resetInputs();controllerNeedCenter=true;controllerWasDriving=false;
|
||||
}else{
|
||||
if(controllerNeedCenter&&!Object.values(raw).some(value=>value!==0)){controllerNeedCenter=false;status='Controller ready'}
|
||||
if(!controllerNeedCenter){
|
||||
controllerWasDriving=true;
|
||||
Object.assign(control,target);window.joystick3D?.setVisual(target.turn,-target.forward);
|
||||
setHeave(target.vertical,false);updateReadouts();sendAxes();
|
||||
}
|
||||
}
|
||||
const active=ControllerInput.actions(pad,controllerConfig);
|
||||
if(!Object.values(active).some(Boolean))controllerActionsReady=true;
|
||||
if(controllerActionsReady&&inputFocused&&!document.hidden&&!document.querySelector('dialog[open]'))for(const [action,pressed] of Object.entries(active))
|
||||
if(pressed&&!controllerActionState[action])window.V2?.action(action);
|
||||
controllerActionState=active;
|
||||
}
|
||||
if($('#controller-modal').open){
|
||||
const demand=pad&&ControllerInput.read(pad,controllerDraft);
|
||||
for(const meter of $('#controller-bindings').querySelectorAll('meter'))meter.value=demand?.[meter.closest('[data-axis]').dataset.axis]||0;
|
||||
$('#controller-axes').textContent=pad?.mapping==='standard'?'Xbox layout':pad?'Raw inputs':'Xbox · offline';
|
||||
}
|
||||
if($('#controller-status').textContent!==status)$('#controller-status').textContent=status;
|
||||
$('#controller-status').dataset.quiet=String(!!pad&&!!raw);
|
||||
}else{$('#controller-status').dataset.quiet='true';$('#controller-status').textContent='Keyboard + touch'}
|
||||
}catch(error){if(controllerWasDriving)resetInputs();$('#controller-status').dataset.quiet='false';$('#controller-status').textContent='Controller unavailable'}
|
||||
requestAnimationFrame(pollController);
|
||||
}
|
||||
document.body.dataset.inputMode=inputMode;
|
||||
requestAnimationFrame(pollController);
|
||||
|
||||
|
||||
function makeDemoState(){const frame=window.V2?.station().frame??4,count=({0:6,1:6,2:8,3:8,4:3,5:4,6:5})[frame],servos={};for(let i=1;i<=16;i++)servos[String(i)]={function:i<=count?32+i:0,label:i<=count?`Motor ${i}`:'Unassigned',motor:i<=count?i:null,direction:i<=count?1:null};return {connected:true,link:'LINK OK',vehicle:'DEMO • DISARMED',armed:false,armed_known:true,mode:'MANUAL',app_state:'connected_disarmed',status:'Demo mode ready — no hardware or spoofer.',battery:{voltage:15.8,per_cell:3.95,percent:72,cells:4,low:false,current_a:3.2,consumed_mah:320,remaining_mah:5180,consumed_source:'Demo'},capabilities:{frame,firmware:[4,5,3]},accessories:{},link_quality:null,servos}}
|
||||
function updateDemo(patch){Object.assign(demoState,patch);render(demoState)}
|
||||
document.addEventListener('click',e=>{const btn=e.target.closest('.num-step');if(!btn)return;const pill=btn.closest('.number-pill');if(!pill)return;const input=pill.querySelector('input');if(!input)return;const step=+input.step||1,min=input.min!==''?+input.min:-Infinity,max=input.max!==''?+input.max:Infinity;let val=+input.value||0;if(btn.classList.contains('down'))val=Math.max(min,+(val-step).toFixed(4));else val=Math.min(max,+(val+step).toFixed(4));input.value=val;input.dispatchEvent(new Event('input',{bubbles:true}));input.dispatchEvent(new Event('change',{bubbles:true}))});
|
||||
function toast(message,error=false){const el=$('#toast');el.textContent=message;el.className=`toast show${error?' error':''}`;clearTimeout(toast.t);toast.t=setTimeout(()=>el.className='toast',2600)}
|
||||
window.showToast=toast;
|
||||
const manualPorts=new Map();
|
||||
function populatePorts(ports){
|
||||
const p=$('#port');
|
||||
if(!p)return;
|
||||
const old=p.value||'';
|
||||
p.innerHTML='';
|
||||
|
||||
const allList=[];
|
||||
const allList=[{device:'udpin:0.0.0.0:14550',label:'Network · UDP 14550',type:'network'}];
|
||||
const seen=new Set();
|
||||
|
||||
const addPort=item=>{
|
||||
@@ -50,6 +178,7 @@ function populatePorts(ports){
|
||||
};
|
||||
|
||||
if(Array.isArray(ports)) ports.forEach(addPort);
|
||||
manualPorts.forEach(addPort);
|
||||
addPort({device:'demo', label:'Demo Mode (no hardware)'});
|
||||
|
||||
let matched=false;
|
||||
@@ -71,7 +200,7 @@ function sendAxes(){
|
||||
axisTimer=0;
|
||||
if(!canDrive()||demoActive||axisBusy)return;
|
||||
lastAxisSend=performance.now();axisBusy=true;
|
||||
withTimeout(api('set_axes',control.forward,control.turn,control.vertical,++inputSequence))
|
||||
withTimeout(api('set_axes',control.forward,control.turn,control.vertical,++inputSequence,control.lateral,control.pitch,control.roll))
|
||||
.catch(()=>markBridgeStale()).finally(()=>axisBusy=false);
|
||||
};
|
||||
const wait=50-(performance.now()-lastAxisSend);
|
||||
@@ -80,29 +209,30 @@ function sendAxes(){
|
||||
// This is a local bridge lease, not extra MAVLink traffic. The worker retains
|
||||
// the configured wire rate and neutralizes if the UI stops renewing its input.
|
||||
setInterval(()=>{if(canDrive())sendAxes()},250);
|
||||
function updateReadouts(){ if(!canDrive()){$('#surge-readout').textContent='—';$('#yaw-readout').textContent='—';$('#heave-readout').textContent='—';return;}$('#surge-readout').textContent=Math.round(control.forward*100);$('#yaw-readout').textContent=Math.round(control.turn*100);$('#heave-readout').textContent=Math.round(control.vertical*100);}
|
||||
function updateReadouts(){ window.V2?.updateDemand(control);if(!canDrive()){$('#surge-readout').textContent='—';$('#yaw-readout').textContent='—';$('#heave-readout').textContent='—';return;}$('#surge-readout').textContent=Math.round(control.forward*100);$('#yaw-readout').textContent=Math.round(control.turn*100);$('#heave-readout').textContent=Math.round(control.vertical*100);}
|
||||
|
||||
window.setJoyControl=(x,y)=>{if(!canDrive())return;control.turn=x;control.forward=-y;updateReadouts();sendAxes();};
|
||||
window.setJoyControl=(x,y)=>{if(!window.canTouchControl())return;control.turn=x;control.forward=-y;updateReadouts();sendAxes();};
|
||||
function releaseHandle(el){el.classList.remove('pressed');el.classList.add('released');setTimeout(()=>el.classList.remove('released'),520)}
|
||||
|
||||
const heave=$('#heave'),hknob=$('#heave-knob'),hfill=$('#heave-fill');let heavePointer=null,heaveAnim=0;
|
||||
function setHeave(v,send=true){if(!canDrive()&&v!==0)return;v=Math.max(-1,Math.min(1,v));control.vertical=v;heave.dataset.commanded=String(Math.abs(v)>.03);hknob.style.top=`${50-v*43}%`;hfill.style.top=v>=0?`${50-v*43}%`:'50%';hfill.style.height=`${Math.abs(v)*43}%`;updateReadouts();if(send&&canDrive())sendAxes();}
|
||||
function heaveEvent(e){const b=heave.getBoundingClientRect();setHeave((b.top+b.height/2-e.clientY)/(b.height*.43))}
|
||||
function releaseHeave(e){if(heavePointer===null||(e?.pointerId!=null&&e.pointerId!==heavePointer))return;const pointer=heavePointer;heavePointer=null;try{heave.releasePointerCapture(pointer)}catch(_){}releaseHandle(hknob);easeHeave()}
|
||||
heave.addEventListener('pointerdown',e=>{if(!canDrive()||heavePointer!==null||e.button>0)return;heavePointer=e.pointerId;hknob.classList.remove('released');hknob.classList.add('pressed');cancelAnimationFrame(heaveAnim);heave.setPointerCapture(e.pointerId);heaveEvent(e);e.preventDefault()});heave.addEventListener('pointermove',e=>{if(e.pointerId===heavePointer)heaveEvent(e)});heave.addEventListener('pointerup',releaseHeave);heave.addEventListener('pointercancel',releaseHeave);heave.addEventListener('lostpointercapture',e=>{if(e.pointerId===heavePointer)releaseHeave(e)});
|
||||
function easeHeave(){const sv=control.vertical,start=performance.now();function frame(now){const p=Math.min(1,(now-start)/400),smooth=p*p*(3-2*p);setHeave(sv*(1-smooth));if(p<1)heaveAnim=requestAnimationFrame(frame)}heaveAnim=requestAnimationFrame(frame)}
|
||||
heave.addEventListener('pointerdown',e=>{if(!window.canTouchControl()||heavePointer!==null||e.button>0)return;heavePointer=e.pointerId;hknob.classList.remove('released');hknob.classList.add('pressed');cancelAnimationFrame(heaveAnim);heave.setPointerCapture(e.pointerId);heaveEvent(e);e.preventDefault()});heave.addEventListener('pointermove',e=>{if(e.pointerId===heavePointer)heaveEvent(e)});heave.addEventListener('pointerup',releaseHeave);heave.addEventListener('pointercancel',releaseHeave);heave.addEventListener('lostpointercapture',e=>{if(e.pointerId===heavePointer)releaseHeave(e)});
|
||||
function easeHeave(target=0){cancelAnimationFrame(heaveAnim);const sv=control.vertical,start=performance.now();function frame(now){const p=Math.min(1,(now-start)/400),smooth=p*p*(3-2*p);setHeave(sv+(target-sv)*smooth);if(p<1)heaveAnim=requestAnimationFrame(frame)}heaveAnim=requestAnimationFrame(frame)}
|
||||
window.verticalControl={setPos:value=>{cancelAnimationFrame(heaveAnim);setHeave(value)},easeBack:()=>{if(heavePointer===null)easeHeave()},getState:()=>({value:control.vertical,active:heavePointer!==null})};
|
||||
|
||||
function applyKeys(){if(!canDrive()){pressedKeys.clear();return;}const turn=(pressedKeys.has('d')||pressedKeys.has('e')?1:0)-(pressedKeys.has('a')||pressedKeys.has('q')?1:0),forward=(pressedKeys.has('w')?1:0)-(pressedKeys.has('s')?1:0),vertical=(pressedKeys.has('r')?1:0)-(pressedKeys.has('f')?1:0);if(!window.joystick3D?.getState().active){if(turn||forward)window.joystick3D?.setPos(turn,-forward);else window.joystick3D?.easeBack()}if(heavePointer===null){if(vertical){cancelAnimationFrame(heaveAnim);setHeave(vertical)}else easeHeave()}}
|
||||
addEventListener('keydown',e=>{if(e.key==='F3'){e.preventDefault();if(!e.repeat&&view.action==='disarm')requestControl('disarm');return;}if(/^(INPUT|SELECT|TEXTAREA)$/.test(e.target.tagName))return;if(e.key==='F2'){e.preventDefault();if(!e.repeat)startEngageHold();return;}const k=e.key.toLowerCase();if('wasdqerf'.includes(k)&&k.length===1){if(!canDrive())return;e.preventDefault();if(!pressedKeys.has(k)){pressedKeys.add(k);applyKeys();}}});addEventListener('keyup',e=>{if(e.key==='F2'){e.preventDefault();cancelEngageHold(true);return;}const k=e.key.toLowerCase();if(pressedKeys.delete(k))applyKeys();});
|
||||
function applyKeys(){if(inputMode!=='keyboard'||!canDrive()){pressedKeys.clear();return;}const extra=window.V2?.filterDemand({lateral:(pressedKeys.has('l')?1:0)-(pressedKeys.has('j')?1:0),pitch:(pressedKeys.has('k')?1:0)-(pressedKeys.has('i')?1:0),roll:(pressedKeys.has('o')?1:0)-(pressedKeys.has('u')?1:0)});Object.assign(control,extra);updateReadouts();sendAxes();const turn=(pressedKeys.has('d')||pressedKeys.has('e')?1:0)-(pressedKeys.has('a')||pressedKeys.has('q')?1:0),forward=(pressedKeys.has('w')?1:0)-(pressedKeys.has('s')?1:0),vertical=(pressedKeys.has('r')?1:0)-(pressedKeys.has('f')?1:0);if(!window.joystick3D?.getState().active)window.joystick3D?.easeTo(turn,-forward);if(heavePointer===null)easeHeave(vertical)}
|
||||
addEventListener('keydown',e=>{if(e.key==='F3'){e.preventDefault();if(!e.repeat&&view.action==='disarm')requestControl('disarm');return;}if(document.querySelector('dialog[open]')||/^(INPUT|SELECT|TEXTAREA)$/.test(e.target.tagName))return;if(e.key==='F2'){e.preventDefault();if(!e.repeat)startEngageHold();return;}const k=e.key.toLowerCase();if('wasdqerfjlikuo'.includes(k)&&k.length===1){if(inputMode!=='keyboard'||!canDrive())return;e.preventDefault();if(e.repeat)return;if(!pressedKeys.has(k)){pressedKeys.add(k);applyKeys();}}});addEventListener('keyup',e=>{if(e.key==='F2'){e.preventDefault();cancelEngageHold(true);return;}const k=e.key.toLowerCase();if(pressedKeys.delete(k))applyKeys();});
|
||||
function resetInputs(){
|
||||
controllerMotion.reset();controllerNeedCenter=true;controllerWasDriving=false;
|
||||
if(gainPointer!==null)releaseGain({pointerId:gainPointer});
|
||||
clearTimeout(axisTimer);axisTimer=0;pressedKeys.clear();cancelEngageHold(false);
|
||||
window.joystick3D?.reset();
|
||||
const pointer=heavePointer;heavePointer=null;cancelAnimationFrame(heaveAnim);
|
||||
if(pointer!==null)try{heave.releasePointerCapture(pointer)}catch(_){}
|
||||
hknob.classList.remove('pressed','released');
|
||||
control.forward=control.turn=control.vertical=0;setHeave(0,false);
|
||||
for(const axis of Object.keys(control))control[axis]=0;setHeave(0,false);window.V2?.updateDemand(control);controllerActionState={};controllerActionsReady=false;
|
||||
if(bridgeReady&&!demoActive)api('stop_controls',++inputSequence).catch(()=>{});
|
||||
}
|
||||
function focusChanged(focused){inputFocused=focused;if(!focused)resetInputs();render(vehicleSnapshot)}
|
||||
@@ -111,28 +241,64 @@ addEventListener('focus',()=>focusChanged(!document.hidden));
|
||||
document.addEventListener('visibilitychange',()=>focusChanged(!document.hidden&&document.hasFocus()));
|
||||
addEventListener('pagehide',()=>focusChanged(false));
|
||||
|
||||
function setFeedback(el,message=''){
|
||||
if(!el)return;
|
||||
el.textContent=message;el.hidden=!message;
|
||||
}
|
||||
function openModal(id){
|
||||
const el=typeof id==='string'?document.getElementById(id):id;
|
||||
if(!el)return;
|
||||
if(!el||el.open)return;
|
||||
if(el.id==='controller-modal'&&inputConfigurationLocked()){toast('Disengage before changing joystick settings.');return}
|
||||
resetInputs();
|
||||
el._returnFocus=document.activeElement;
|
||||
if(el.id==='battery-modal')fillBatteryForm();
|
||||
if(el.id==='controller-modal')fillControllerForm();
|
||||
if(el.id==='link-modal'){
|
||||
fillLinkForm();
|
||||
$('#custom-port-status').textContent='';
|
||||
$('#custom-port-input').value='';
|
||||
}
|
||||
el.querySelectorAll('.form-feedback').forEach(feedback=>setFeedback(feedback));
|
||||
el.classList.remove('closing');
|
||||
if(!el.open)el.showModal();
|
||||
el.showModal();
|
||||
}
|
||||
function closeModal(dialog){
|
||||
if(!dialog||!dialog.open||dialog.classList.contains('closing'))return;
|
||||
if(!dialog||!dialog.open||dialog.classList.contains('closing')||dialog.querySelector('[data-busy="true"]'))return;
|
||||
dialog.classList.add('closing');
|
||||
let done=false;
|
||||
const finish=()=>{
|
||||
if(done)return;
|
||||
done=true;
|
||||
dialog.removeEventListener('animationend',finish);
|
||||
dialog.removeEventListener('animationend',onEnd);
|
||||
dialog.classList.remove('closing');
|
||||
dialog.close();
|
||||
if(dialog._returnFocus?.isConnected)dialog._returnFocus.focus({preventScroll:true});
|
||||
};
|
||||
dialog.addEventListener('animationend',finish,{once:true});
|
||||
setTimeout(finish,300);
|
||||
const onEnd=e=>{if(e.target===dialog)finish()};
|
||||
dialog.addEventListener('animationend',onEnd);
|
||||
setTimeout(finish,180);
|
||||
}
|
||||
$$('[data-open]').forEach(b=>b.onclick=()=>openModal(b.dataset.open));
|
||||
$$('[data-close]').forEach(b=>b.onclick=()=>closeModal(b.closest('dialog')));
|
||||
$('#link-quality').onclick=()=>openModal('link-quality-modal');
|
||||
let heavyActionBusy=false;
|
||||
async function requestHeavyTest(action){
|
||||
if(heavyActionBusy)return;
|
||||
heavyActionBusy=true;
|
||||
setFeedback($('#heavy-quality-error'));
|
||||
renderHeavyQuality(vehicleSnapshot.heavy_quality,vehicleSnapshot.connected,vehicleSnapshot.armed);
|
||||
try{
|
||||
const test=await api(action);
|
||||
vehicleSnapshot.heavy_quality=test;
|
||||
renderHeavyQuality(test,vehicleSnapshot.connected,vehicleSnapshot.armed);
|
||||
}catch(e){setFeedback($('#heavy-quality-error'),e.message||'Link test unavailable. Try again.')}
|
||||
finally{
|
||||
heavyActionBusy=false;
|
||||
renderHeavyQuality(vehicleSnapshot.heavy_quality,vehicleSnapshot.connected,vehicleSnapshot.armed);
|
||||
}
|
||||
}
|
||||
$('#heavy-quality-run').onclick=()=>requestHeavyTest('start_heavy_quality_test');
|
||||
$('#heavy-quality-cancel').onclick=()=>requestHeavyTest('cancel_heavy_quality_test');
|
||||
$$('dialog').forEach(d=>{
|
||||
d.addEventListener('cancel',e=>{e.preventDefault();closeModal(d)});
|
||||
d.addEventListener('click',e=>{
|
||||
@@ -255,7 +421,7 @@ $('#connect').onclick=async()=>{
|
||||
recordActivity(`Connecting to ${port}…`);
|
||||
toast(`Connecting to ${port}…`);
|
||||
try{
|
||||
const confirmedState=await api('connect',port,+$('#baud').value,+$('#rate').value);
|
||||
const confirmedState=await api('connect',port,+linkConfig.baud||57600,+linkConfig.control_hz||20);
|
||||
if(confirmedState)render(confirmedState);
|
||||
toast(confirmedState?.armed_known?'MAVLink connected':'Waiting for vehicle telemetry',!confirmedState?.armed_known);
|
||||
}catch(e){
|
||||
@@ -270,7 +436,9 @@ const customPortBtn=$('#custom-port-btn'), customPortInput=$('#custom-port-input
|
||||
if(customPortBtn&&customPortInput){
|
||||
const applyCustomPort=()=>{
|
||||
const val=customPortInput.value.trim();
|
||||
if(!val)return;
|
||||
if(!val){$('#custom-port-status').textContent='Enter a port first.';customPortInput.focus();return;}
|
||||
if(vehicleSnapshot.connected)return;
|
||||
manualPorts.set(val,{device:val,label:`Custom (${val})`});
|
||||
const p=$('#port');
|
||||
let exists=false;
|
||||
for(const opt of p.options){
|
||||
@@ -280,39 +448,57 @@ if(customPortBtn&&customPortInput){
|
||||
p.add(new Option(`Custom (${val})`, val), 0);
|
||||
p.value=val;
|
||||
}
|
||||
closeModal($('#link-modal'));
|
||||
toast(`Selected port: ${val}`);
|
||||
$('#custom-port-status').textContent=`Selected ${val}. Apply settings, then connect.`;
|
||||
};
|
||||
customPortBtn.onclick=applyCustomPort;
|
||||
customPortInput.onkeydown=e=>{if(e.key==='Enter'){e.preventDefault();applyCustomPort();}};
|
||||
}
|
||||
const engageButton=$('#engage');
|
||||
const engageProgressLabel=engageButton?.querySelector('.engage-progress-label');
|
||||
let engageHoldTimer=null,engageStart=0,engagePointer=null,completedEngagePointer=null,suppressEngageClick=false,engageVisualState='',engageTransitionTimer=null;
|
||||
const ENGAGE_HOLD_MS=1400;
|
||||
let engageLabelValue=$('#engage-label')?.textContent||'engage';
|
||||
let engageHoldTimer=null,engageStart=0,engagePointer=null,completedEngagePointer=null,suppressEngageClick=false,engageVisualState='',engageTransitionTimer=null,engageAppendFrame=null;
|
||||
const ENGAGE_HOLD_MS=600;
|
||||
|
||||
function applyEngageVisual(next){
|
||||
if(!engageButton)return;
|
||||
const label=({'ENGAGE':'engage','DISARM':'disengage','ENGAGING…':'engaging…','DISARMING…':'disengaging…','DISARM · ?':'disengage · ?','STATE UNKNOWN':'state unknown'})[next.label]||next.label.toLowerCase();
|
||||
// Interaction updates immediately; the short fade never gates emergency access.
|
||||
const label=({'ENGAGE':'engage','DISARM':'disengage','ENGAGING…':'engaging','DISARMING…':'disengaging','DISARM · ?':'disengage · ?','STATE UNKNOWN':'state unknown'})[next.label]||next.label.toLowerCase();
|
||||
// Update the state label without delaying the requested control action.
|
||||
engageButton.disabled=!next.action;
|
||||
engageButton.setAttribute('aria-busy',String(next.pending));
|
||||
engageButton.setAttribute('aria-label',label);
|
||||
engageButton.title=next.action==='disarm'?'Request disarm immediately (F3)':next.action==='arm'?'Hold 1.4 seconds to engage (F2)':next.message;
|
||||
engageButton.title=next.action==='disarm'?'Request disarm immediately (F3)':next.action==='arm'?'Hold 0.6 seconds to engage (F2)':next.message;
|
||||
const key=`${next.label}/${next.tone}`;
|
||||
if(engageVisualState===key)return;
|
||||
const previous=engageVisualState;engageVisualState=key;
|
||||
if(engageAppendFrame)cancelAnimationFrame(engageAppendFrame);
|
||||
clearTimeout(engageTransitionTimer);
|
||||
engageButton.classList.remove('arm','danger','subtle','charged','pending');
|
||||
engageButton.classList.add(next.tone==='danger'?'danger':next.tone==='pending'?'pending':'arm');
|
||||
engageButton.style.setProperty('--engage-progress',next.pending?'100%':'0%');
|
||||
$('#engage-label').textContent=label;
|
||||
const mainLabel=$('#engage-label'),previousLabel=engageLabelValue;
|
||||
const appended=previousLabel==='engage'&&label==='engaging'||previousLabel==='disengage'&&label==='disengaging';
|
||||
let suffix=null;
|
||||
if(appended){
|
||||
const previousWidth=mainLabel.getBoundingClientRect().width;
|
||||
const stem=previousLabel.slice(0,-1);
|
||||
mainLabel.replaceChildren(document.createTextNode(stem));
|
||||
suffix=document.createElement('span');suffix.className='engage-suffix';suffix.textContent=label.slice(stem.length);mainLabel.append(suffix);
|
||||
const appendedWidth=mainLabel.getBoundingClientRect().width;
|
||||
mainLabel.style.setProperty('--engage-append-shift',`${(appendedWidth-previousWidth)/2}px`);
|
||||
mainLabel.classList.add('is-appending');
|
||||
}else{
|
||||
mainLabel.classList.remove('is-appending');
|
||||
mainLabel.style.removeProperty('--engage-append-shift');
|
||||
mainLabel.textContent=label;
|
||||
}
|
||||
engageLabelValue=label;
|
||||
if(engageProgressLabel)engageProgressLabel.textContent=label;
|
||||
const sheen=engageButton.querySelector('.engage-sheen-label');if(sheen)sheen.textContent=label;
|
||||
if(previous){
|
||||
engageButton.classList.remove('state-transition');void engageButton.offsetWidth;
|
||||
engageButton.classList.add('state-transition');
|
||||
engageTransitionTimer=setTimeout(()=>engageButton.classList.remove('state-transition'),240);
|
||||
if(suffix)engageAppendFrame=requestAnimationFrame(()=>suffix.isConnected&&suffix.classList.add('is-visible'));
|
||||
engageTransitionTimer=setTimeout(()=>engageButton.classList.remove('state-transition'),200);
|
||||
}
|
||||
}
|
||||
function completeEngage(){
|
||||
@@ -356,12 +542,14 @@ function startEngageHold(e){
|
||||
if(view.action!=='arm'||!inputFocused||engageStart)return;
|
||||
if(e&&e.button!==undefined&&e.button!==0)return;
|
||||
engagePointer=e?.pointerId??'keyboard';engageStart=performance.now();engageButton.classList.add('charging');engageButton.style.setProperty('--engage-progress','0%');
|
||||
syncInputModeControls();
|
||||
if(e?.pointerId!=null)engageButton.setPointerCapture(e.pointerId);
|
||||
engageHoldTimer=requestAnimationFrame(updateEngageProgress);
|
||||
}
|
||||
function cancelEngageHold(showHint=true){
|
||||
if(!engageStart)return;
|
||||
const elapsed=performance.now()-engageStart,pointer=engagePointer;cancelAnimationFrame(engageHoldTimer);engageHoldTimer=null;engageStart=0;engagePointer=null;engageButton.classList.remove('charging');engageButton.classList.add('canceling');engageButton.style.setProperty('--engage-progress','0%');setTimeout(()=>engageButton.classList.remove('canceling'),280);if(typeof pointer==='number')try{engageButton.releasePointerCapture(pointer)}catch(_){}if(showHint&&elapsed>80)toast('Engagement canceled');
|
||||
syncInputModeControls();
|
||||
}
|
||||
|
||||
if(engageButton){
|
||||
@@ -380,7 +568,72 @@ if(engageButton){
|
||||
}
|
||||
|
||||
$('#logs').onclick=()=>api('open_logs');
|
||||
function setGain(value){const gain=$('#gain');gain.value=Math.max(+gain.min,Math.min(+gain.max,value));$('#gain-value').textContent=`${gain.value}%`;if(bridgeReady)api('set_gain',+gain.value)}
|
||||
const consoleDock=$('#console-dock'),consoleRx=$('#console-rx-output'),consoleTx=$('#console-tx-output');
|
||||
let consoleRefreshBusy=false,consolePaused=false,consoleCache={rx:[],tx:[]},consoleSignature='',consoleOpen=false,consoleCloseTimer=0;
|
||||
const consolePulseTimers={};
|
||||
function pulseConsole(side){
|
||||
const dot=$('.'+side+'-dot');
|
||||
clearTimeout(consolePulseTimers[side]);dot.classList.add('lit');
|
||||
consolePulseTimers[side]=setTimeout(()=>dot.classList.remove('lit'),260);
|
||||
}
|
||||
function renderConsole(){
|
||||
const filter=$('#console-filter').value,signature=filter+JSON.stringify(consoleCache);
|
||||
if(signature===consoleSignature)return;
|
||||
consoleSignature=signature;ConsoleView.render(consoleRx,consoleCache.rx||[],filter);ConsoleView.render(consoleTx,consoleCache.tx||[],filter);
|
||||
}
|
||||
function setConsoleOpen(open){
|
||||
consoleOpen=open;clearTimeout(consoleCloseTimer);consoleDock.classList.toggle('closing',!open);
|
||||
if(open){consoleDock.hidden=false;$('.app-shell').classList.add('console-open')}
|
||||
else consoleCloseTimer=setTimeout(()=>{consoleDock.hidden=true;$('.app-shell').classList.remove('console-open')},180);
|
||||
$('#console').setAttribute('aria-expanded',String(open));
|
||||
if(open)refreshConsole();else $('#console').focus({preventScroll:true});
|
||||
}
|
||||
$('#console').setAttribute('aria-controls','console-dock');
|
||||
$('#console').setAttribute('aria-expanded','false');
|
||||
$('#console').onclick=()=>setConsoleOpen(!consoleOpen);
|
||||
$('#console-close').onclick=()=>setConsoleOpen(false);
|
||||
$('#console-filter').onchange=renderConsole;
|
||||
$('#console-pause').onclick=()=>{
|
||||
consolePaused=!consolePaused;
|
||||
$('#console-pause').textContent=consolePaused?'Resume':'Pause';
|
||||
$('#console-pause').setAttribute('aria-pressed',String(consolePaused));
|
||||
$('#console-state').textContent=consolePaused?'Paused':'';
|
||||
$('#console-state').hidden=!consolePaused;
|
||||
if(!consolePaused)refreshConsole();
|
||||
};
|
||||
async function refreshConsole(){
|
||||
if(!consoleOpen||!bridgeReady||consoleRefreshBusy||consolePaused)return;
|
||||
consoleRefreshBusy=true;
|
||||
try{
|
||||
const sides=await withTimeout(api('read_console',150),1500);
|
||||
if(consolePaused||!consoleOpen)return;
|
||||
const filter=$('#console-filter').value;
|
||||
for(const side of ['rx','tx']){
|
||||
const previous=new Set(consoleCache[side]||[]);
|
||||
if((sides[side]||[]).some(line=>!previous.has(line)&&(filter==='all'||!ConsoleView.parse(line).quiet)))pulseConsole(side);
|
||||
}
|
||||
consoleCache=sides;renderConsole();
|
||||
$('#console-state').textContent='';$('#console-state').hidden=true;
|
||||
}catch(error){if(consoleOpen){$('#console-state').hidden=false;$('#console-state').textContent='Unavailable: '+error.message}}
|
||||
finally{consoleRefreshBusy=false}
|
||||
}
|
||||
setInterval(refreshConsole,750);
|
||||
function syncMotorScalingUI(){
|
||||
const independent=!!motorSettings.independent;
|
||||
document.body.dataset.motorScaling=independent?'independent':'shared';
|
||||
const toggle=$('#motor-scale-independent');if(toggle)toggle.checked=independent;
|
||||
const gain=$('#gain'),down=$('#gain-down'),up=$('#gain-up');
|
||||
if(gain){gain.disabled=independent;gain.title=independent?'Set motor scales in Motor setup':'Shared limit for every motor';}
|
||||
if(down)down.disabled=independent;if(up)up.disabled=independent;
|
||||
}
|
||||
function pushMotorSettings(persist=true){
|
||||
if(!bridgeReady)return Promise.resolve(motorSettings);
|
||||
const payload=JSON.parse(JSON.stringify(motorSettings));
|
||||
motorSettingsQueue=motorSettingsQueue.catch(()=>{}).then(()=>api('save_motor_settings',payload,persist)).then(saved=>{motorSettings=saved;syncMotorScalingUI();if(persist){servoSignature='';renderMotors(vehicleSnapshot.servos||{});toast('Motor settings saved')}return saved}).catch(error=>{setFeedback($('#motor-feedback'),error.message||'Could not save motor settings.');throw error});
|
||||
return motorSettingsQueue;
|
||||
}
|
||||
function motorScale(motor){return motorSettings.independent?(motorSettings.motors[String(motor)]?.scale??100):+$('#gain').value}
|
||||
function setGain(value){if(motorSettings.independent)return;const gain=$('#gain');gain.value=Math.max(+gain.min,Math.min(+gain.max,value));$('#gain-value').textContent=`${gain.value}%`;servoSignature='';renderMotors(vehicleSnapshot.servos||{});if(bridgeReady)api('set_gain',+gain.value)}
|
||||
$('#gain').oninput=e=>setGain(+e.target.value);$('#gain-down').onclick=()=>setGain(+$('#gain').value-5);$('#gain-up').onclick=()=>setGain(+$('#gain').value+5);
|
||||
// Explicit pointer ownership makes the full range rail a reliable touch target
|
||||
// in the embedded window, without depending on native range drag defaults.
|
||||
@@ -391,21 +644,129 @@ gainSlider.addEventListener('pointerdown',e=>{if(gainPointer!==null||e.button>0)
|
||||
gainSlider.addEventListener('pointermove',e=>{if(e.pointerId===gainPointer)gainFromPointer(e)});
|
||||
['pointerup','pointercancel','lostpointercapture'].forEach(type=>gainSlider.addEventListener(type,releaseGain));
|
||||
gainSlider.addEventListener('keydown',e=>{const delta={ArrowRight:1,ArrowUp:1,ArrowLeft:-1,ArrowDown:-1}[e.key];if(delta){e.preventDefault();setGain(+gainSlider.value+delta)}else if(e.key==='Home'||e.key==='End'){e.preventDefault();setGain(+(e.key==='Home'?gainSlider.min:gainSlider.max))}});
|
||||
$('#battery-form').onsubmit=async e=>{e.preventDefault();const data=Object.fromEntries(new FormData(e.target));try{batteryConfig=await api('save_battery',data);closeModal($('#battery-modal'));toast('Battery settings saved')}catch(err){toast(err.message,true)}};
|
||||
async function saveSettings(form,method,commit,message){
|
||||
if(form.dataset.busy==='true'||!form.reportValidity())return;
|
||||
const data=Object.fromEntries(new FormData(form));
|
||||
const button=form.querySelector('[type="submit"]'),label=button.textContent;
|
||||
const disabled=new Map([...form.querySelectorAll('input,select,button')].map(el=>[el,el.disabled]));
|
||||
form.dataset.busy='true';disabled.forEach((_,el)=>el.disabled=true);button.textContent='Saving…';
|
||||
setFeedback(form.querySelector('.form-feedback'));
|
||||
let saved=false;
|
||||
try{commit(await api(method,data));saved=true;toast(message)}
|
||||
catch(error){setFeedback(form.querySelector('.form-feedback'),error.message||'Could not save settings. Try again.')}
|
||||
finally{
|
||||
delete form.dataset.busy;disabled.forEach((value,el)=>el.disabled=value);button.textContent=label;
|
||||
if(saved)closeModal(form.closest('dialog'));
|
||||
}
|
||||
}
|
||||
$('#battery-form').onsubmit=e=>{e.preventDefault();saveSettings(e.target,'save_battery',value=>batteryConfig=value,'Battery settings saved')};
|
||||
function fillBatteryForm(){for(const [k,v] of Object.entries(batteryConfig)){const el=$(`#battery-form [name=${k}]`);if(el)el.value=v}}
|
||||
function renderMotors(servos){const signature=JSON.stringify(servos);if(signature===servoSignature)return;servoSignature=signature;const list=$('#motor-list');list.innerHTML='';for(let i=1;i<=16;i++){const s=servos[String(i)]||{},row=document.createElement('div');row.className='motor-row';const opts=['<option value="0">Unassigned</option>',...Array.from({length:12},(_,n)=>`<option value="${n+1}" ${s.motor===n+1?'selected':''}>Motor ${n+1}</option>`)].join('');row.innerHTML=`<strong>SERVO${i}</strong><select aria-label="SERVO${i} function">${opts}</select><span>${s.direction==null?'—':s.direction===-1?'Reversed':'Normal'}</span><button class="button subtle">Reverse</button>`;row.querySelector('select').onchange=e=>{if(demoActive){const motor=+e.target.value;demoState.servos[String(i)]={function:motor?32+motor:0,label:motor?`Motor ${motor}`:'Unassigned',motor:motor||null,direction:motor?1:null};servoSignature='';renderMotors(demoState.servos);toast(`Demo SERVO${i} updated`)}else api('set_servo_function',i,+e.target.value).catch(x=>toast(x.message,true))};row.querySelector('button').onclick=()=>{if(demoActive){if(s.motor){s.direction=s.direction===-1?1:-1;servoSignature='';renderMotors(demoState.servos);toast(`Demo Motor ${s.motor} reversed`)}else toast(`SERVO${i} is unassigned`,true)}else api('reverse_motor',i).catch(x=>toast(x.message,true))};list.append(row)}}
|
||||
$('#link-form').onsubmit=e=>{e.preventDefault();saveSettings(e.target,'save_link_settings',value=>linkConfig=value,'Link settings applied')};
|
||||
function fillLinkForm(){for(const [k,v] of Object.entries(linkConfig)){const el=$(`#link-form [name=${k}]`);if(el)el.value=v}}
|
||||
const motorEdits=new Map();
|
||||
$('#motor-scale-independent').onchange=e=>{
|
||||
if(e.target.checked&&!motorSettings.customized){for(let motor=1;motor<=12;motor++)motorSettings.motors[String(motor)].scale=+$('#gain').value;motorSettings.customized=true}
|
||||
motorSettings={...motorSettings,independent:e.target.checked};syncMotorScalingUI();servoSignature='';renderMotors(vehicleSnapshot.servos||{});pushMotorSettings(true).catch(()=>{});
|
||||
};
|
||||
async function requestMotorEdit(servo,kind,value){
|
||||
if(motorEdits.has(servo))return;
|
||||
const s=vehicleSnapshot.servos?.[String(servo)]||{};
|
||||
const expected=kind==='function'?(value===0?0:value<=8?32+value:73+value):-s.direction;
|
||||
setFeedback($('#motor-feedback'));
|
||||
if(demoActive){
|
||||
if(kind==='function')Object.assign(s,{function:expected,motor:value||null,direction:value?1:null});
|
||||
else s.direction=expected;
|
||||
servoSignature='';renderMotors(demoState.servos);toast('Demo motor updated');return;
|
||||
}
|
||||
motorEdits.set(servo,{kind,expected,started:performance.now()});
|
||||
servoSignature='';renderMotors(vehicleSnapshot.servos||{});
|
||||
try{
|
||||
await api(kind==='function'?'set_servo_function':'reverse_motor',servo,...(kind==='function'?[value]:[]));
|
||||
}catch(error){
|
||||
motorEdits.delete(servo);
|
||||
setFeedback($('#motor-feedback'),error.message||'Motor change failed. Try again.');
|
||||
servoSignature='';renderMotors(vehicleSnapshot.servos||{});
|
||||
}
|
||||
}
|
||||
function renderMotors(servos){
|
||||
for(const [servo,edit] of motorEdits){
|
||||
const state=servos[String(servo)]||{};
|
||||
if((edit.kind==='function'?state.function:state.direction)===edit.expected){motorEdits.delete(servo);toast(`SERVO${servo} change confirmed`)}
|
||||
else if(!vehicleSnapshot.connected||performance.now()-edit.started>8000){motorEdits.delete(servo);setFeedback($('#motor-feedback'),`SERVO${servo}: confirmation not received.`)}
|
||||
}
|
||||
const editable=!!vehicleSnapshot.connected&&!vehicleSnapshot.armed&&(demoActive||view.known);
|
||||
const assignments=Object.entries(servos).filter(([,state])=>state.motor).sort((a,b)=>a[1].motor-b[1].motor);
|
||||
const servoByMotor=new Map(assignments.map(([servo,state])=>[String(state.motor),{servo,...state}]));
|
||||
$('#motor-status').textContent=!vehicleSnapshot.connected?'Offline':vehicleSnapshot.armed?'Armed':`${assignments.length} outputs`;
|
||||
const shownMotors=[...new Set(assignments.map(([,state])=>state.motor))].sort((a,b)=>a-b);
|
||||
const structure=JSON.stringify([assignments.map(([port,state])=>[port,state.function,state.motor,state.direction]),editable,[...motorEdits],motorSettings.independent,shownMotors,Object.values(motorSettings.motors).map(m=>m.name)]);
|
||||
if(structure!==servoSignature){
|
||||
servoSignature=structure;const list=$('#motor-list');list.replaceChildren();
|
||||
for(const motor of shownMotors){
|
||||
const row=document.createElement('article');row.className='motor-row';row.dataset.motor=String(motor);
|
||||
row.innerHTML='<input class="motor-name" type="text" maxlength="24" autocomplete="off" aria-label="Motor name"><input class="motor-scale" type="range" min="0" max="100" step="1" aria-label="Motor output scale"><output class="motor-scale-value"></output><button type="button" class="button subtle motor-reverse">Reverse</button><span class="motor-channel"></span>';
|
||||
const name=row.querySelector('.motor-name');name.onchange=()=>{motorSettings.motors[String(motor)].name=name.value.trim().slice(0,24)||`Motor ${motor}`;name.value=motorSettings.motors[String(motor)].name;pushMotorSettings(true).catch(()=>{})};
|
||||
const scale=row.querySelector('.motor-scale');scale.oninput=()=>{motorSettings.customized=true;motorSettings.motors[String(motor)].scale=+scale.value;row.querySelector('output').textContent=`${scale.value}%`;pushMotorSettings(false).catch(()=>{})};scale.onchange=()=>pushMotorSettings(true).catch(()=>{});
|
||||
row.querySelector('.motor-reverse').onclick=()=>{const state=servoByMotor.get(String(motor));if(state?.servo)requestMotorEdit(state.servo,'direction')};list.append(row);
|
||||
}
|
||||
const details=document.createElement('details');details.className='motor-mapping';const summary=document.createElement('summary');summary.textContent='Assignments';details.append(summary);
|
||||
for(let i=1;i<=16;i++){
|
||||
const state=servos[String(i)]||{},pending=motorEdits.get(i),row=document.createElement('div');row.className='motor-map-row';row.innerHTML='<span class="motor-map-port"></span><select aria-label="Servo output motor assignment"></select><span class="motor-map-direction"></span>';
|
||||
row.querySelector('.motor-map-port').textContent=`SERVO${i}`;const select=row.querySelector('select');select.add(new Option(state.function==null?'Reading…':'Unassigned','0'));for(let motor=1;motor<=12;motor++)select.add(new Option(motorSettings.motors[String(motor)]?.name||`Motor ${motor}`,String(motor)));select.value=String(state.motor||0);select.disabled=!editable||!!pending||state.function==null;select.onchange=e=>requestMotorEdit(i,'function',+e.target.value);
|
||||
row.querySelector('.motor-map-direction').textContent=pending?'Saving…':state.direction==null?'—':state.direction===-1?'Reversed':'Normal';details.append(row);
|
||||
}
|
||||
list.append(details);
|
||||
}
|
||||
for(const motor of shownMotors){
|
||||
const row=$(`#motor-list .motor-row[data-motor="${motor}"]`),state=servoByMotor.get(String(motor))||{},settings=motorSettings.motors[String(motor)]||{name:`Motor ${motor}`,scale:20};if(!row)continue;
|
||||
const servo=state.servo||null,name=row.querySelector('.motor-name');if(document.activeElement!==name)name.value=settings.name;
|
||||
const scale=row.querySelector('.motor-scale');scale.disabled=!motorSettings.independent;if(document.activeElement!==scale)scale.value=motorScale(motor);
|
||||
row.querySelector('.motor-scale-value').textContent=`${motorScale(motor)}%`;row.querySelector('.motor-channel').textContent=servo?`SERVO${servo} · ${state.output_us||'—'} µs`:'Unassigned';
|
||||
const reverse=row.querySelector('.motor-reverse');reverse.disabled=!editable||!servo||state.direction==null||motorEdits.has(servo);reverse.textContent=state.direction===-1?'Restore':'Reverse';reverse.setAttribute('aria-label',`${reverse.textContent} ${settings.name}`);
|
||||
}
|
||||
}
|
||||
function renderHeavyQuality(test,connected,armed){
|
||||
const status=$('#heavy-quality-status'),results=$('#heavy-quality-results'),run=$('#heavy-quality-run'),stop=$('#heavy-quality-cancel');
|
||||
if(!status||!results||!run||!stop)return;
|
||||
const quality=demoActive?null:vehicleSnapshot.link_quality;
|
||||
$('#quality-detail-rtt').textContent=quality?.rtt_median_ms==null?'—':`${Math.round(quality.rtt_median_ms)} ms`;
|
||||
$('#quality-detail-loss').textContent=quality?.probe_loss_percent==null?'—':`${quality.probe_loss_percent.toFixed(1)}%`;
|
||||
$('#quality-detail-downlink').textContent=quality?.rx_sequence_loss_percent==null?'—':`${quality.rx_sequence_loss_percent.toFixed(1)}%`;
|
||||
const running=!!test?.running;
|
||||
status.textContent=running?`${test.status} · ${test.replies||0}/${test.sent||0} replies`:(test?.status==='Complete'?'Test complete. Results below.':test?.status==='Cancelled'?'Test stopped. Partial results below.':demoActive?'Demo has no hardware link to measure.':!connected?'Connect to run a test.':armed?'Disarm to run a test.':'Ready to test.');
|
||||
run.disabled=heavyActionBusy||running||!connected||armed||demoActive;
|
||||
run.textContent=!connected?'Connect to run test':armed?'Disarm to run test':demoActive?'Unavailable in demo':test?.status==='Complete'?'Run again':'Run heavy test';
|
||||
stop.hidden=!running;
|
||||
stop.disabled=heavyActionBusy;
|
||||
results.replaceChildren();
|
||||
for(const row of test?.results||[]){
|
||||
const line=document.createElement('div');line.className='heavy-result-row';
|
||||
const rate=document.createElement('strong');rate.textContent=`${row.rate_hz} Hz`;
|
||||
const stats=document.createElement('span');
|
||||
const loss=row.loss_percent==null?'—':`${row.loss_percent.toFixed(1)}% loss`;
|
||||
const rtt=row.median_rtt_ms==null?'—':`${row.median_rtt_ms.toFixed(0)} ms median / ${row.p95_rtt_ms.toFixed(0)} ms p95`;
|
||||
stats.textContent=`${row.replies}/${row.sent} replies · ${loss} · ${rtt}`;
|
||||
line.append(rate,stats);results.append(line);
|
||||
}
|
||||
}
|
||||
function render(s,confirmed=false){
|
||||
vehicleSnapshot=s;
|
||||
if(confirmed&&localRequest?.sent && (s.pending_command===localRequest.name || s.command_error ||
|
||||
(s.armed_known&&s.armed===(localRequest.name==='arm')))) localRequest=null;
|
||||
const previous=view;
|
||||
view=ControlState.present(s,{stale:bridgeStale,focused:inputFocused,pending:localRequest?.name,error:commandError});
|
||||
syncInputModeControls();
|
||||
window.V2?.render(s);
|
||||
if((previous.drive&&!view.drive)||(previous.action==='arm'&&view.action!=='arm'))resetInputs();
|
||||
appState=bridgeStale&&s.connected?'link_degraded':s.app_state||'disconnected';
|
||||
renderHeavyQuality(s.heavy_quality,s.connected,s.armed);
|
||||
document.body.dataset.appState=appState;
|
||||
document.body.dataset.controlsEnabled=String(view.drive);
|
||||
const driveEnabled=view.drive;
|
||||
document.body.dataset.controlsEnabled=String(driveEnabled);
|
||||
document.body.dataset.telemetryStale=String(!view.known||!!s.battery_stale);
|
||||
$('#port').disabled=!!s.connected;
|
||||
$('#custom-port-input').disabled=!!s.connected||$('#link-form').dataset.busy==='true';
|
||||
$('#custom-port-btn').disabled=!!s.connected||$('#link-form').dataset.busy==='true';
|
||||
const isOnline=(appState==='connected_disarmed'||appState==='armed');
|
||||
const connectBtn=$('#connect');
|
||||
const connectLabel=connectBtn?connectBtn.querySelector('.btn-label'):null;
|
||||
@@ -436,7 +797,7 @@ function render(s,confirmed=false){
|
||||
controlStatus.classList.toggle('is-error',view.error);
|
||||
controlStatus.hidden=!(view.pending||view.error||(view.known&&s.armed&&!inputFocused));
|
||||
const motorBtn=$('[data-open="motors-modal"]');
|
||||
if(motorBtn)motorBtn.disabled=(!isOnline);
|
||||
if(motorBtn)motorBtn.disabled=false;
|
||||
|
||||
const confirmedCommand=previous.pending&&!view.pending&&view.known&&!view.error;
|
||||
const reported=commandError||s.command_error||((!view.known&&s.connected&&appState!=='connecting')?'Telemetry stale — vehicle state unknown':s.status);
|
||||
@@ -447,14 +808,60 @@ function render(s,confirmed=false){
|
||||
updateReadouts();
|
||||
const b=s.battery;
|
||||
if(b){
|
||||
$('#battery-title').textContent=`${b.voltage.toFixed(2)} V`;
|
||||
$('#battery-percent').textContent=`${Math.round(b.percent)}% • ${b.cells}s${!view.known||s.battery_stale?' · stale':''}`;
|
||||
$('#battery-fill').style.width=`${b.percent}%`;
|
||||
$('#battery-fill').style.background=b.low?'var(--red)':'var(--acid)';
|
||||
$('#battery-title').textContent=Number.isFinite(b.voltage)?`${b.voltage.toFixed(2)} V`:'Voltage unavailable';
|
||||
$('#battery-percent').textContent=Number.isFinite(b.percent)?`${Math.round(b.percent)}%`:'—';
|
||||
$('#battery-live-voltage').textContent=Number.isFinite(b.voltage)?`${b.voltage.toFixed(2)} V`:'—';
|
||||
$('#battery-live-current').textContent=Number.isFinite(b.current_a)?`${b.current_a.toFixed(1)} A`:'Unavailable';
|
||||
$('#battery-live-consumed').textContent=Number.isFinite(b.consumed_mah)?`${Math.round(b.consumed_mah).toLocaleString()} mAh`:'Unavailable';
|
||||
$('#battery-live-consumed-source').textContent=b.consumed_source||'';
|
||||
$('#battery-live-remaining').textContent=Number.isFinite(b.remaining_mah)?`${Math.round(b.remaining_mah).toLocaleString()} mAh`:Number.isFinite(b.remaining_percent)?`${Math.round(b.remaining_percent)}%`:'Unavailable';
|
||||
$('#battery-live-note').textContent=s.battery_stale?'Battery telemetry is stale. Check the telemetry rate and battery monitor.':b.charge_source==='Voltage estimate'?'Charge percentage is estimated from voltage. Add a calibrated current sensor for consumption readings.':'Live values come from the flight controller; accuracy depends on its battery monitor setup.';
|
||||
$('.battery-card').dataset.stale=String(!view.known||!!s.battery_stale);
|
||||
$('.battery-card').title=`${b.charge_source||'Battery status'} · ${b.cells}S${!view.known||s.battery_stale?' · stale reading':''} · Battery settings`;
|
||||
$('#battery-fill').style.width=`${Number.isFinite(b.percent)?b.percent:0}%`;
|
||||
$('#battery-fill').style.background=b.low?'var(--battery-low)':'var(--battery-charge)';
|
||||
$('.battery-card').dataset.low=String(!!b.low);
|
||||
}else{
|
||||
$('#battery-title').textContent='—';
|
||||
$('#battery-percent').textContent='waiting';
|
||||
$('#battery-title').textContent='No voltage';
|
||||
$('#battery-percent').textContent='—';
|
||||
$('#battery-live-voltage').textContent='—';$('#battery-live-current').textContent='—';
|
||||
$('#battery-live-consumed').textContent='—';$('#battery-live-consumed-source').textContent='';
|
||||
$('#battery-live-remaining').textContent='—';$('#battery-live-note').textContent='Waiting for battery telemetry.';
|
||||
$('.battery-card').dataset.stale='false';
|
||||
$('.battery-card').title='Waiting for battery voltage · Battery settings';
|
||||
$('#battery-fill').style.width='0';
|
||||
$('.battery-card').dataset.low='false';
|
||||
}
|
||||
const quality=s.link_quality,qualityCard=$('#link-quality');
|
||||
if(qualityCard){
|
||||
if(demoActive){
|
||||
qualityCard.dataset.grade='offline';
|
||||
$('#link-quality-grade').textContent='Demo';
|
||||
$('#link-quality-roundtrip').textContent='no hardware link test';
|
||||
$('#link-quality-downlink').textContent='';
|
||||
renderMotors(s.servos||{});
|
||||
return;
|
||||
}
|
||||
const grade=quality?.grade||(s.connected?'testing':'offline');
|
||||
qualityCard.dataset.grade=grade;
|
||||
$('#link-quality-grade').textContent=grade.charAt(0).toUpperCase()+grade.slice(1);
|
||||
if(quality&&quality.probe_samples){
|
||||
const percent=value=>value==null?'—':`${value.toFixed(1)}%`;
|
||||
const median=quality.rtt_median_ms==null?'—':`${Math.round(quality.rtt_median_ms)} ms`;
|
||||
const p95=quality.rtt_p95_ms==null?'—':`${Math.round(quality.rtt_p95_ms)} ms`;
|
||||
$('#link-quality-roundtrip').textContent=`round trip ${median} / ${p95} p95 • loss ${percent(quality.probe_loss_percent)}`;
|
||||
const downLoss=percent(quality.rx_sequence_loss_percent);
|
||||
const badFrames=quality.rx_corrupt_frames_20s??0;
|
||||
const badBytes=quality.rx_corrupt_bytes_20s??0;
|
||||
const age=quality.heartbeat_age_s==null?'—':`${quality.heartbeat_age_s.toFixed(1)} s`;
|
||||
$('#link-quality-downlink').textContent=`FC → PC loss ${downLoss} • ${badFrames} bad frames (${badBytes} B) • heartbeat ${age}`;
|
||||
if(quality.probe_samples<10||quality.rx_packets_30s<10){
|
||||
$('#link-quality-grade').textContent=`Testing ${Math.min(quality.probe_samples,quality.rx_packets_30s)}/10`;
|
||||
}
|
||||
}else{
|
||||
$('#link-quality-roundtrip').textContent=s.connected?'testing round trip…':'waiting for connection';
|
||||
$('#link-quality-downlink').textContent='';
|
||||
}
|
||||
}
|
||||
renderMotors(s.servos||{});
|
||||
}
|
||||
@@ -560,18 +967,25 @@ async function boot(){
|
||||
if(booted||booting||!hasDesktopApi())return;
|
||||
booting=true;clearTimeout(bootRetry);
|
||||
try{
|
||||
// OS port discovery must not depend on model/config initialization succeeding.
|
||||
populatePorts(await withTimeout(api('refresh_ports'),4000));
|
||||
const init=await withTimeout(api('initial_state'),4000);
|
||||
batteryConfig=init.battery_config||{};
|
||||
populatePorts(init.ports);
|
||||
linkConfig=init.link_config||{};
|
||||
motorSettings=init.motor_settings||motorSettings;
|
||||
controllerProfiles=init.controller_profiles||controllerProfiles;
|
||||
controllerConfig=null;
|
||||
window.V2?.setStation(init.station_settings||{});
|
||||
syncMotorScalingUI();
|
||||
fillBatteryForm();
|
||||
fillLinkForm();
|
||||
bridgeReady=true;booted=true;lastBridgeAt=performance.now();
|
||||
if(!demoActive)render(init.state);
|
||||
poll();
|
||||
// Populate the serial selector before starting the optional model load.
|
||||
// A large cached mesh must never delay an operator seeing USB COM ports.
|
||||
loadDefaultModel();
|
||||
// COM discovery can block on Windows drivers; finish the first paint first.
|
||||
setTimeout(()=>withTimeout(api('refresh_ports'),4000).then(populatePorts).catch(()=>{}),0);
|
||||
// Let the controls paint before fetching and parsing the large STL mesh.
|
||||
const startModelLoad=()=>{void loadDefaultModel()};
|
||||
if('requestIdleCallback' in window)requestIdleCallback(startModelLoad,{timeout:2500});
|
||||
else setTimeout(startModelLoad,1500);
|
||||
if(!portRefreshTimer)portRefreshTimer=setInterval(async()=>{
|
||||
if(appState==='disconnected'||demoActive){
|
||||
try{populatePorts(await withTimeout(api('refresh_ports'),1500))}
|
||||
@@ -592,11 +1006,19 @@ function waitForBridge(){
|
||||
if(hasDesktopApi())boot();
|
||||
setTimeout(waitForBridge,250);
|
||||
}
|
||||
window.V2.init({
|
||||
api,bridge:()=>bridgeReady,demo:()=>demoActive,toast,open:openModal,close:closeModal,
|
||||
locked:inputConfigurationLocked,reset:resetInputs,touch:()=>window.canTouchControl(),demand:()=>control,
|
||||
axis:(name,value)=>{control[name]=value;updateReadouts();sendAxes()},
|
||||
scaling:allowed=>{const toggle=$('#motor-scale-independent');toggle.disabled=!allowed||inputConfigurationLocked();toggle.title=allowed?'Independent scales':'SimpleROV 3 only';if(!allowed&&motorSettings.independent){motorSettings.independent=false;syncMotorScalingUI();servoSignature=''}},
|
||||
demoAccessory:(name,enabled)=>{if(demoState){demoState.accessories??={};demoState.accessories[name]={requested:enabled,accepted:true,demo:true};render(demoState)}},
|
||||
previewFrame:(frame,count)=>{if(demoState){demoState.capabilities={frame,firmware:[4,5,3]};for(let i=1;i<=16;i++)demoState.servos[String(i)]={function:i<=count?32+i:0,label:i<=count?`Motor ${i}`:'Unassigned',motor:i<=count?i:null,direction:i<=count?1:null};servoSignature='';render(demoState)}}
|
||||
});
|
||||
|
||||
addEventListener('pywebviewready',boot);
|
||||
render(vehicleSnapshot);
|
||||
if(document.readyState==='loading'){
|
||||
addEventListener('DOMContentLoaded',()=>{loadDefaultModel();waitForBridge()});
|
||||
addEventListener('DOMContentLoaded',waitForBridge);
|
||||
}else{
|
||||
loadDefaultModel();
|
||||
waitForBridge();
|
||||
}
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
/* Read-only presentation of the existing local RX/TX logs. */
|
||||
((root)=>{
|
||||
const quiet=/^(HEARTBEAT|TIMESYNC|LINK_PROBE|HEAVY_PROBE|GCS)/;
|
||||
function parse(line){
|
||||
const match=String(line).match(/^(\S+) \[([^\]]+)\] ([\s\S]*)$/);
|
||||
if(!match)return {time:'',type:'Message',payload:String(line),raw:String(line),tone:'normal',quiet:false};
|
||||
const [,timestamp,category,message]=match;
|
||||
let payload=message,type=category.replace(/^(RX|TX)_?/,'')||category;
|
||||
try{payload=JSON.parse(message);type=payload.mavpackettype||type}catch(_){}
|
||||
const tone=/BAD_DATA|ERROR|TIMEOUT|FAIL/.test(category)||type==='STATUSTEXT'&&Number(payload.severity)<=4?'warning':/COMMAND|ACK|PARAM_SET|OPERATOR/.test(category+' '+type)?'command':'normal';
|
||||
const time=timestamp.match(/T(\d{2}:\d{2}:\d{2}(?:\.\d+)?)/)?.[1]||timestamp;
|
||||
const pairs=typeof payload==='string'?[...payload.matchAll(/(?:^|\s)([a-zA-Z_]\w*)=([^\s]+)/g)]:[];
|
||||
const fields=pairs.length?Object.fromEntries(pairs.map(([,key,value])=>[key,value])):payload;
|
||||
return {time,type,payload,fields,raw:String(line),tone,quiet:tone!=='warning'&&(quiet.test(type)||/LINK_PROBE|HEAVY_PROBE|HEARTBEAT/.test(category))};
|
||||
}
|
||||
function valueText(value){
|
||||
if(typeof value==='number')return Number.isInteger(value)?String(value):Number(value.toFixed(3)).toString();
|
||||
if(Array.isArray(value))return value.slice(0,6).map(valueText).join(', ')+(value.length>6?'…':'');
|
||||
return typeof value==='object'?JSON.stringify(value):String(value);
|
||||
}
|
||||
function makeRow(row,previous){
|
||||
if(previous&&previous.dataset.key===row.raw&&previous.dataset.tone===row.tone)return previous;
|
||||
const details=previous||document.createElement('details');
|
||||
details.className='console-row';details.dataset.key=row.raw;details.dataset.tone=row.tone;
|
||||
let summary=details.querySelector('summary'),time,body,type,fields,raw;
|
||||
if(!summary){
|
||||
details.replaceChildren();summary=document.createElement('summary');time=document.createElement('time');
|
||||
body=document.createElement('span');body.className='console-message';type=document.createElement('strong');
|
||||
fields=document.createElement('span');fields.className='console-fields';body.append(type,fields);summary.append(time,body);
|
||||
raw=document.createElement('pre');details.append(summary,raw);
|
||||
}else{
|
||||
time=summary.querySelector('time');body=summary.querySelector('.console-message');
|
||||
type=body.querySelector('strong');fields=body.querySelector('.console-fields');raw=details.querySelector('pre');
|
||||
}
|
||||
time.textContent=row.time;type.textContent=row.type;fields.replaceChildren();
|
||||
const values=row.fields??row.payload;
|
||||
if(typeof values==='object'&&values!==null){
|
||||
for(const [key,value] of Object.entries(values).filter(([key])=>key!=='mavpackettype').slice(0,6)){
|
||||
const item=document.createElement('span'),label=document.createElement('i'),text=document.createElement('b');
|
||||
label.textContent=key+' ';text.textContent=valueText(value);item.append(label,text);fields.append(item);
|
||||
}
|
||||
}else fields.textContent=row.payload;
|
||||
raw.textContent=typeof row.payload==='object'?JSON.stringify(row.payload,null,2):row.raw;
|
||||
return details;
|
||||
}
|
||||
function render(host,lines,filter){
|
||||
const atBottom=host.scrollHeight-host.scrollTop-host.clientHeight<36,scroll=host.scrollTop;
|
||||
const rows=lines.map(parse).filter(row=>filter==='all'||!row.quiet);
|
||||
const existing=new Map();
|
||||
for(const node of host.querySelectorAll('details.console-row')){
|
||||
const key=node.dataset.key,list=existing.get(key)||[];list.push(node);existing.set(key,list);
|
||||
}
|
||||
if(!rows.length){
|
||||
if(!host.querySelector('.console-empty')){
|
||||
const empty=document.createElement('p');empty.className='console-empty';
|
||||
empty.textContent='No messages';
|
||||
empty.title=filter==='all'?'Waiting for session messages.':'Routine heartbeat and probe traffic is hidden. Choose All traffic to see it.';
|
||||
host.replaceChildren(empty);
|
||||
}
|
||||
return;
|
||||
}
|
||||
const wanted=rows.map(row=>makeRow(row,existing.get(row.raw)?.shift()||null));
|
||||
let cursor=host.firstElementChild;
|
||||
for(const node of wanted){if(node!==cursor)host.insertBefore(node,cursor);cursor=node.nextElementSibling}
|
||||
while(cursor){const next=cursor.nextElementSibling;cursor.remove();cursor=next}
|
||||
if(atBottom&&!host.querySelector('details[open]'))host.scrollTop=host.scrollHeight;else host.scrollTop=scroll;
|
||||
}
|
||||
root.ConsoleView={parse,render};
|
||||
if(typeof module!=='undefined')module.exports=root.ConsoleView;
|
||||
})(typeof window!=='undefined'?window:globalThis);
|
||||
@@ -18,7 +18,7 @@
|
||||
label=online?'DISARM · ?':'STATE UNKNOWN'; tone='danger'; action=online?'disarm':null;
|
||||
message='Vehicle state unknown. Inputs cleared; disarm is not confirmed.';
|
||||
} else if (known && online) {
|
||||
action=focused?'arm':null; message='Disarmed · hold 1.4 seconds to engage.';
|
||||
action=focused?'arm':null; message='Disarmed · hold 0.6 seconds to engage.';
|
||||
}
|
||||
if (stale) message='Telemetry unavailable. Inputs cleared; vehicle state unknown.';
|
||||
const failure=error || state.command_error;
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
/* Controller conditioning is independent of drawing and MAVLink transport. */
|
||||
((root)=>{
|
||||
const clamp=value=>Math.max(-1,Math.min(1,Number.isFinite(value)?value:0));
|
||||
function deadZone(value,zone=.08){
|
||||
value=clamp(value);zone=Math.max(0,Math.min(.4,zone));
|
||||
return Math.abs(value)<=zone?0:Math.sign(value)*(Math.abs(value)-zone)/(1-zone);
|
||||
}
|
||||
function defaults(pad){
|
||||
return {turn:0,forward:1,vertical:pad?.axes?.length>=4?3:pad?.axes?.length>=3?2:-1,
|
||||
invertTurn:false,invertForward:true,invertVertical:true,deadZone:.08};
|
||||
}
|
||||
function read(pad,config){
|
||||
if(config?.version===2)return readProfile(pad,config);
|
||||
if(!pad?.connected||!pad.axes)return null;
|
||||
const axis=(index,invert)=>{
|
||||
if(index===-1)return 0;
|
||||
if(!Number.isInteger(index)||index<0||index>=pad.axes.length||!Number.isFinite(pad.axes[index]))return null;
|
||||
return deadZone(pad.axes[index],config.deadZone)*(invert?-1:1);
|
||||
};
|
||||
let turn=axis(config.turn,config.invertTurn),forward=axis(config.forward,config.invertForward),vertical=axis(config.vertical,config.invertVertical);
|
||||
if(turn===null||forward===null||vertical===null)return null;
|
||||
const length=Math.hypot(turn,forward);if(length>1){turn/=length;forward/=length}
|
||||
return {turn,forward,vertical};
|
||||
}
|
||||
class Smoother{
|
||||
constructor(){this.reset()}
|
||||
reset(){this.value=0;this.last=null;this.release=null}
|
||||
step(target,now){
|
||||
target=clamp(target);
|
||||
const dt=this.last===null?0:Math.max(0,Math.min(.05,(now-this.last)/1000));this.last=now;
|
||||
if(target===0){
|
||||
if(!this.release)this.release={at:now,start:this.value};
|
||||
const t=Math.min(1,Math.max(0,(now-this.release.at)/360)),ease=t*t*(3-2*t);
|
||||
this.value=this.release.start*(1-ease);
|
||||
}else{
|
||||
this.release=null;
|
||||
this.value+=(target-this.value)*(1-Math.exp(-dt/.1));
|
||||
if(Math.abs(target-this.value)<.001)this.value=target;
|
||||
}
|
||||
return this.value;
|
||||
}
|
||||
}
|
||||
class Motion{
|
||||
constructor(){this.axes={turn:new Smoother(),forward:new Smoother(),vertical:new Smoother()}}
|
||||
reset(){Object.values(this.axes).forEach(axis=>axis.reset())}
|
||||
step(target,now){
|
||||
const demand=Object.fromEntries(Object.entries(this.axes).map(([key,axis])=>[key,axis.step(target[key],now)]));
|
||||
const length=Math.hypot(demand.turn,demand.forward);if(length>1){demand.turn/=length;demand.forward/=length}
|
||||
return demand;
|
||||
}
|
||||
}
|
||||
const names=['forward','lateral','vertical','turn','pitch','roll'];
|
||||
const pair=(negative='off',positive='off')=>({negative,positive,scale:1});
|
||||
function preset(name='triggers3'){
|
||||
const bindings=Object.fromEntries(names.map(axis=>[axis,pair()]));
|
||||
bindings.forward=pair('button:6','button:7');
|
||||
bindings.vertical=pair('button:0','button:1');
|
||||
bindings.turn=pair('axis:0:-','axis:0:+');
|
||||
if(name==='sixaxis'){
|
||||
bindings.lateral=pair('axis:2:-','axis:2:+');
|
||||
bindings.pitch=pair('axis:1:-','axis:1:+');
|
||||
bindings.roll=pair('button:4','button:5');
|
||||
}else if(name==='classic'){
|
||||
bindings.forward=pair('axis:1:+','axis:1:-');
|
||||
bindings.vertical=pair('axis:3:+','axis:3:-');
|
||||
}
|
||||
return {version:2,preset:name,deadZone:.08,expo:.15,bindings,
|
||||
actions:{lights:'button:2',stream:'button:3',record:'button:8'}};
|
||||
}
|
||||
function migrate(config,pad){
|
||||
if(config?.version===2)return structuredClone(config);
|
||||
if(!config)return preset(pad&&pad.mapping!=='standard'?'classic':'triggers3');
|
||||
const result=preset('classic');
|
||||
for(const axis of ['forward','vertical','turn']){
|
||||
const index=config[axis],invert=config['invert'+axis[0].toUpperCase()+axis.slice(1)];
|
||||
result.bindings[axis]=Number.isInteger(index)&&index>=0?
|
||||
pair(`axis:${index}:${invert?'+':'-'}`,`axis:${index}:${invert?'-':'+'}`):pair();
|
||||
}
|
||||
result.deadZone=config.deadZone??.08;
|
||||
result.actions={lights:'off',stream:'off',record:'off'};
|
||||
return result;
|
||||
}
|
||||
function validProfile(config){
|
||||
const source=value=>typeof value==='string'&&/^(off|button:(?:[0-9]|[12][0-9]|3[01])|axis:(?:[0-9]|1[0-5]):[+-])$/.test(value);
|
||||
return config?.version===2&&Number.isFinite(config.deadZone)&&config.deadZone>=0&&config.deadZone<=.3&&
|
||||
Number.isFinite(config.expo)&&config.expo>=0&&config.expo<=1&&names.every(axis=>{
|
||||
const item=config.bindings?.[axis];return item&&source(item.negative)&&source(item.positive)&&
|
||||
(item.negative==='off'||item.negative!==item.positive)&&Number.isFinite(item.scale)&&item.scale>=0&&item.scale<=1;
|
||||
})&&['lights','stream','record'].every(action=>source(config.actions?.[action])&&!config.actions[action].startsWith('axis:'));
|
||||
}
|
||||
function inputValue(pad,source,zone){
|
||||
if(source==='off')return 0;
|
||||
const parts=source.split(':'),index=Number(parts[1]);
|
||||
if(parts[0]==='button'){
|
||||
const button=pad.buttons?.[index];if(!button||!Number.isFinite(button.value))return null;
|
||||
return index===6||index===7?Math.max(0,deadZone(button.value,zone)):(button.pressed?1:0);
|
||||
}
|
||||
const value=pad.axes?.[index];
|
||||
return Number.isFinite(value)?Math.max(0,deadZone(value,zone)*(parts[2]==='-'?-1:1)):null;
|
||||
}
|
||||
function readProfile(pad,config){
|
||||
if(!pad?.connected||!validProfile(config))return null;
|
||||
const result={};
|
||||
for(const name of names){
|
||||
const item=config.bindings[name],negative=inputValue(pad,item.negative,config.deadZone),positive=inputValue(pad,item.positive,config.deadZone);
|
||||
if(negative===null||positive===null)return null;
|
||||
const value=clamp(positive-negative);
|
||||
result[name]=((1-config.expo)*value+config.expo*value**3)*item.scale;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
function actions(pad,config){
|
||||
return Object.fromEntries(Object.entries(config?.actions||{}).map(([name,source])=>[name,!!pad&&inputValue(pad,source,0)>.5]));
|
||||
}
|
||||
function sources(pad){
|
||||
const choices=[['off','Off']],axes=['Left X','Left Y','Right X','Right Y'];
|
||||
for(let index=0;index<Math.max(4,pad?.axes?.length||0);index++)for(const sign of ['-','+'])
|
||||
choices.push([`axis:${index}:${sign}`,`${axes[index]||'Axis '+index} ${sign==='-'?'−':'+'}`]);
|
||||
const buttons=['A','B','X','Y','LB','RB','LT','RT','View','Menu','Left click','Right click','D-pad up','D-pad down','D-pad left','D-pad right','Guide'];
|
||||
for(let index=0;index<Math.max(17,pad?.buttons?.length||0);index++)choices.push([`button:${index}`,buttons[index]||'Button '+index]);
|
||||
return choices;
|
||||
}
|
||||
root.ControllerInput={deadZone,defaults,read,Motion,names,preset,migrate,validProfile,actions,sources};
|
||||
if(typeof module!=='undefined')module.exports=root.ControllerInput;
|
||||
})(typeof window!=='undefined'?window:globalThis);
|
||||
@@ -0,0 +1,42 @@
|
||||
/* Decorative only: no control demands or vehicle state are accessed here. */
|
||||
(() => {
|
||||
const workspace=document.querySelector('.controls-workspace');
|
||||
if(!workspace)return;
|
||||
const wash=document.createElement('span');
|
||||
wash.className='workspace-light';wash.setAttribute('aria-hidden','true');workspace.append(wash);
|
||||
// Explicit visual surfaces, not every semantic button. The entire sidebar
|
||||
// and text-only Engage control are excluded from local lighting.
|
||||
const pillSelector='.config-btn,.modal .button,.range-pill,.number-pill';
|
||||
const shapeSelector=`${pillSelector},.heave-track,.heave-knob,.joystick,.modal`;
|
||||
const layers=[...document.querySelectorAll(shapeSelector)].filter(host=>!host.closest('.sidebar-deck,#engage')).map(host=>{
|
||||
host.classList.add('light-surface');
|
||||
const layer=document.createElement('span');layer.className='cursor-light';
|
||||
layer.setAttribute('aria-hidden','true');
|
||||
layer.classList.toggle('pill-light',host.matches(pillSelector));
|
||||
host.append(layer);return {host,layer};
|
||||
});
|
||||
let frame=0,point=null;
|
||||
const clear=()=>{point=null;cancelAnimationFrame(frame);frame=0;wash.classList.remove('lit');layers.forEach(({layer})=>layer.classList.remove('lit','near'))};
|
||||
function paint(){
|
||||
frame=0;if(!point)return;
|
||||
const {x,y}=point,r=workspace.getBoundingClientRect();
|
||||
wash.style.setProperty('--light-x',`${x-r.left}px`);wash.style.setProperty('--light-y',`${y-r.top}px`);
|
||||
wash.classList.toggle('lit',x>=r.left&&x<=r.right&&y>=r.top&&y<=r.bottom);
|
||||
for(const {host,layer} of layers){
|
||||
const b=host.getBoundingClientRect();
|
||||
layer.style.setProperty('--light-x',`${x-b.left}px`);layer.style.setProperty('--light-y',`${y-b.top}px`);
|
||||
const inside=x>=b.left&&x<=b.right&&y>=b.top&&y<=b.bottom;
|
||||
// CSS gradient angles start at up; atan2 is measured from the x axis.
|
||||
const angle=Math.atan2(y-(b.top+b.height/2),x-(b.left+b.width/2))*180/Math.PI+90;
|
||||
layer.style.setProperty('--light-angle',`${angle}deg`);
|
||||
layer.classList.toggle('lit',inside);layer.classList.add('near');
|
||||
}
|
||||
}
|
||||
document.addEventListener('pointermove',event=>{
|
||||
if(event.pointerType==='touch'){clear();return}
|
||||
point={x:event.clientX,y:event.clientY};if(!frame)frame=requestAnimationFrame(paint);
|
||||
},{passive:true});
|
||||
document.documentElement.addEventListener('pointerleave',clear);
|
||||
document.addEventListener('pointercancel',clear);window.addEventListener('blur',clear);
|
||||
document.addEventListener('visibilitychange',()=>{if(document.hidden)clear()});
|
||||
})();
|
||||
@@ -0,0 +1,229 @@
|
||||
/* Video stays in the browser's media pipeline; no frames cross the control bridge. */
|
||||
(()=>{
|
||||
const $=id=>document.getElementById(id);
|
||||
const frames={0:['BlueROV1',6,['forward','lateral','vertical','turn','pitch','roll']],1:['Vectored',6,['forward','lateral','vertical','turn','roll']],2:['Full 6DOF',8,['forward','lateral','vertical','turn','pitch','roll']],3:['6DOF 90°',8,['forward','lateral','vertical','turn','pitch','roll']],4:['SimpleROV 3',3,['forward','vertical','turn']],5:['SimpleROV 4',4,['forward','vertical','turn','roll']],6:['SimpleROV 5',5,['forward','lateral','vertical','turn','roll']]};
|
||||
let station={frame:4,video_mode:'whep',video_url:'',lights_relay:-1,camera_relay:-1};
|
||||
try{station={...station,...JSON.parse(localStorage.getItem('sub-v2-station'))}}catch(_){}
|
||||
let host,snapshot={},workspace='drive',streaming=false,connecting=false,generation=0,peer=null,sessionUrl=null,abort=null;
|
||||
let recorder=null,recordToken=null,recordQueue=Promise.resolve(),recordChunks=[],recordBytes=0,ownedStream=null,recordError=null,saving=false;
|
||||
let demoFrame=0,lastPaint=0,streamStarted=0,auxBusy=false,streamTimer=0,capabilitySignature='',demoLastClock=-1;
|
||||
const notify=(message,error=false)=>host?.toast(message,error);
|
||||
const call=(name,...args)=>host.api(name,...args);
|
||||
const demo=()=>!!host?.demo();
|
||||
const frame=()=>frames[(demo()||!snapshot.connected)?station.frame:snapshot.capabilities?.frame]||frames[4];
|
||||
function supported(){
|
||||
let axes=frame()[2];
|
||||
const firmware=snapshot.capabilities?.firmware;
|
||||
if(snapshot.connected&&!demo()&&!(firmware&&(firmware[0]>4||firmware[0]===4&&(firmware[1]===5||firmware[1]>=8))))axes=axes.filter(axis=>axis!=='pitch'&&axis!=='roll');
|
||||
return axes;
|
||||
}
|
||||
function filterDemand(demand){return Object.fromEntries(Object.entries(demand).map(([name,value])=>[name,supported().includes(name)?value:0]))}
|
||||
function view(name){
|
||||
if(name===workspace)return;
|
||||
host.reset();workspace=name;document.body.dataset.view=name;
|
||||
$('dashboard').hidden=name!=='dashboard';document.querySelector('.primary-control-zone').hidden=name!=='drive';
|
||||
$('view-drive').setAttribute('aria-pressed',String(name==='drive'));$('view-dashboard').setAttribute('aria-pressed',String(name==='dashboard'));
|
||||
}
|
||||
function fillStation(){
|
||||
const form=$('station-form');
|
||||
for(const [name,value] of Object.entries(station))if(form.elements[name])form.elements[name].value=value;
|
||||
for(const field of form.querySelectorAll('input,select,button[type=submit]'))field.disabled=host.locked();
|
||||
}
|
||||
function state(text){$('camera-state').textContent=text;$('camera-empty').hidden=false}
|
||||
function showStream(){
|
||||
clearTimeout(streamTimer);connecting=false;
|
||||
$('camera-empty').hidden=true;$('camera-record').disabled=station.video_mode==='mjpeg'&&!demo();
|
||||
$('camera-badge').textContent=demo()?'Demo':'Stream';streamStarted=performance.now();demoLastClock=-1;$('stream-clock').textContent='00:00';
|
||||
}
|
||||
async function startStream(){
|
||||
if(streaming||connecting)return;
|
||||
if(!demo()&&!station.video_url){host.open('station-modal');return}
|
||||
const current=++generation;connecting=true;state('Connecting');$('camera-toggle').textContent='Stop';
|
||||
clearTimeout(streamTimer);streamTimer=setTimeout(()=>{if(current===generation)void failStream('Stream timeout')},10000);
|
||||
try{
|
||||
if(demo()){
|
||||
$('camera-demo').hidden=false;streaming=true;showStream();demoFrame=requestAnimationFrame(drawDemo);
|
||||
}else if(station.video_mode==='mjpeg'){
|
||||
const img=$('camera-image');img.onload=()=>{if(current!==generation)return;streaming=true;img.hidden=false;showStream()};
|
||||
img.onerror=()=>{if(current===generation)void failStream('Stream unavailable')};img.src=station.video_url;
|
||||
}else if(station.video_mode==='video'){
|
||||
const video=$('camera-video');video.onerror=()=>{if(current===generation)void failStream('Stream unavailable')};video.onended=()=>{if(current===generation)void stopStream()};video.src=station.video_url;video.hidden=false;await video.play();
|
||||
if(current!==generation)return;streaming=true;showStream();
|
||||
}else{
|
||||
abort=new AbortController();const timeout=setTimeout(()=>abort?.abort(),10000);
|
||||
try{
|
||||
peer=new RTCPeerConnection({iceServers:[]});const connection=peer;
|
||||
connection.addTransceiver('video',{direction:'recvonly'});
|
||||
connection.ontrack=event=>{if(current!==generation)return;$('camera-video').srcObject=event.streams[0]||new MediaStream([event.track]);$('camera-video').hidden=false;void $('camera-video').play().catch(()=>{});streaming=true;showStream()};
|
||||
connection.onconnectionstatechange=()=>{if(current===generation&&connection.connectionState==='failed')void failStream('Camera disconnected')};
|
||||
await connection.setLocalDescription(await connection.createOffer());
|
||||
if(connection.iceGatheringState!=='complete')await new Promise(resolve=>{
|
||||
const timer=setTimeout(resolve,2000);connection.addEventListener('icegatheringstatechange',()=>{if(connection.iceGatheringState==='complete'){clearTimeout(timer);resolve()}},{once:true});
|
||||
});
|
||||
if(current!==generation)return;
|
||||
const response=await fetch(station.video_url,{method:'POST',headers:{'Content-Type':'application/sdp'},body:connection.localDescription.sdp,signal:abort.signal});
|
||||
if(!response.ok)throw new Error('WHEP '+response.status);
|
||||
const location=response.headers.get('Location');let resource=location?new URL(location,station.video_url).href:null;
|
||||
if(resource&&new URL(resource).origin!==new URL(station.video_url).origin)resource=null;
|
||||
if(current!==generation){if(resource)void fetch(resource,{method:'DELETE'}).catch(()=>{});return}
|
||||
sessionUrl=resource;
|
||||
const sdp=await response.text();if(current!==generation)return;
|
||||
await connection.setRemoteDescription({type:'answer',sdp});
|
||||
}finally{clearTimeout(timeout)}
|
||||
}
|
||||
}catch(error){if(current===generation){await stopStream();state('Unavailable');notify(error.message||'Stream unavailable',true)}}
|
||||
finally{if(current===generation&&streaming)connecting=false}
|
||||
}
|
||||
async function failStream(message){await stopStream();state(message);notify(message,true)}
|
||||
async function stopStream(){
|
||||
++generation;connecting=false;streaming=false;abort?.abort();abort=null;
|
||||
clearTimeout(streamTimer);
|
||||
if(recorder&&recorder.state!=='inactive')recorder.stop();
|
||||
peer?.close();peer=null;
|
||||
if(sessionUrl){void fetch(sessionUrl,{method:'DELETE'}).catch(()=>{});sessionUrl=null}
|
||||
cancelAnimationFrame(demoFrame);demoFrame=0;
|
||||
const video=$('camera-video');video.onerror=video.onended=null;video.pause();video.srcObject=null;video.removeAttribute('src');video.load();video.hidden=true;
|
||||
const img=$('camera-image');img.onload=img.onerror=null;img.removeAttribute('src');img.hidden=true;
|
||||
$('camera-demo').hidden=true;$('camera-record').disabled=true;$('camera-toggle').textContent='Start';$('stream-clock').textContent='';state('Camera off');
|
||||
}
|
||||
function drawDemo(now){
|
||||
if(!streaming||!demo())return;
|
||||
demoFrame=requestAnimationFrame(drawDemo);
|
||||
if(workspace!=='dashboard'||document.hidden||now-lastPaint<40)return;lastPaint=now;
|
||||
const seconds=Math.floor((now-streamStarted)/1000);
|
||||
if(seconds!==demoLastClock){demoLastClock=seconds;$('stream-clock').textContent=String(Math.floor(seconds/60)).padStart(2,'0')+':'+String(seconds%60).padStart(2,'0')}
|
||||
const canvas=$('camera-demo'),rect=canvas.getBoundingClientRect();
|
||||
const width=Math.max(320,Math.round(rect.width)),height=Math.max(180,Math.round(rect.height));
|
||||
if(canvas.width!==width||canvas.height!==height){canvas.width=width;canvas.height=height}
|
||||
const c=canvas.getContext('2d'),gradient=c.createLinearGradient(0,0,0,height);gradient.addColorStop(0,'#28444a');gradient.addColorStop(1,'#101e25');c.fillStyle=gradient;c.fillRect(0,0,width,height);
|
||||
const light=c.createRadialGradient(width*.52,height*.62,4,width*.52,height*.62,width*.6);light.addColorStop(0,'#90aaa324');light.addColorStop(1,'#00000000');c.fillStyle=light;c.fillRect(0,0,width,height);
|
||||
c.strokeStyle='#9eb2a92a';c.lineWidth=1;
|
||||
for(let i=-4;i<8;i++){c.beginPath();c.moveTo(width*.5+i*16,height*.45);c.lineTo(width*.5+i*110,height);c.stroke()}
|
||||
for(let i=0;i<8;i++){const y=height*.45+(i/8)**2*height*.55;c.beginPath();c.moveTo(0,y);c.lineTo(width,y);c.stroke()}
|
||||
const pipe=c.createLinearGradient(0,height*.58,0,height*.76);pipe.addColorStop(0,'#a1afa0');pipe.addColorStop(.4,'#6e8980');pipe.addColorStop(1,'#263e3d');c.fillStyle=pipe;c.fillRect(width*.16,height*.58,width*.72,height*.18);
|
||||
c.strokeStyle='#b3c2b166';c.strokeRect(width*.16,height*.58,width*.72,height*.18);
|
||||
c.fillStyle='#c3d7c977';for(let i=0;i<32;i++){const x=(i*89.7+Math.sin(now/5000+i)*9)%width,y=(i*37.9+now*.004)%height;c.fillRect(x,y,1,1)}
|
||||
c.strokeStyle='#e1f0e477';c.beginPath();c.moveTo(width/2-10,height/2);c.lineTo(width/2+10,height/2);c.moveTo(width/2,height/2-10);c.lineTo(width/2,height/2+10);c.stroke();
|
||||
}
|
||||
async function toggleRecord(){
|
||||
if(saving)return;
|
||||
if(recorder&&recorder.state!=='inactive'){recorder.stop();return}
|
||||
if(!streaming)return;
|
||||
try{
|
||||
const stream=demo()?$('camera-demo').captureStream(24):$('camera-video').srcObject||$('camera-video').captureStream?.();
|
||||
if(!stream?.getVideoTracks().length)throw new Error('Recording unavailable');
|
||||
ownedStream=demo()?stream:null;recordToken=host.bridge()?await call('recording_begin'):null;recordQueue=Promise.resolve();recordChunks=[];recordBytes=0;recordError=null;
|
||||
const mime=['video/webm;codecs=vp8','video/webm'].find(type=>MediaRecorder.isTypeSupported(type));
|
||||
recorder=new MediaRecorder(stream,mime?{mimeType:mime,videoBitsPerSecond:4000000}:undefined);
|
||||
recorder.ondataavailable=event=>{
|
||||
if(!event.data.size)return;
|
||||
if(recordToken){const token=recordToken;recordQueue=recordQueue.then(async()=>{
|
||||
if(recordError)return;
|
||||
const data=await new Promise((resolve,reject)=>{const reader=new FileReader();reader.onload=()=>resolve(String(reader.result).split(',')[1]);reader.onerror=reject;reader.readAsDataURL(event.data)});
|
||||
await call('recording_chunk',token,data);
|
||||
}).catch(error=>{recordError=error;if(recorder?.state==='recording')recorder.stop()})}
|
||||
else{recordChunks.push(event.data);recordBytes+=event.data.size;if(recordBytes>256*1024*1024&&recorder.state==='recording')recorder.stop()}
|
||||
};
|
||||
recorder.onstop=async()=>{
|
||||
saving=true;$('camera-record').textContent='Saving';$('recording-badge').hidden=true;
|
||||
try{
|
||||
await recordQueue;
|
||||
if(recordToken){const path=await call('recording_end',recordToken);notify(recordError?'Recording interrupted':'Video saved',!!recordError);if(path)$('camera-record').title=path}
|
||||
else{const blob=new Blob(recordChunks,{type:recorder.mimeType}),url=URL.createObjectURL(blob),link=document.createElement('a');link.href=url;link.download='argo-'+Date.now()+'.webm';link.click();setTimeout(()=>URL.revokeObjectURL(url),60000);notify('Video saved')}
|
||||
}catch(error){notify(error.message||'Save failed',true)}
|
||||
finally{ownedStream?.getTracks().forEach(track=>track.stop());ownedStream=null;recordToken=null;recordChunks=[];saving=false;$('camera-record').textContent='Record';$('camera-record').setAttribute('aria-pressed','false');recorder=null}
|
||||
};
|
||||
recorder.start(1000);$('camera-record').textContent='Stop record';$('camera-record').setAttribute('aria-pressed','true');$('recording-badge').hidden=false;
|
||||
}catch(error){if(recordToken)await call('recording_end',recordToken).catch(()=>{});recordToken=null;notify(error.message||'Recording unavailable',true)}
|
||||
}
|
||||
async function accessory(name){
|
||||
if(auxBusy||!snapshot.connected)return;
|
||||
const relay=station[name+'_relay'];if(relay<0){host.open('station-modal');return}
|
||||
auxBusy=true;
|
||||
try{
|
||||
const previous=snapshot.accessories?.[name],enabled=!(previous?.accepted&&previous.requested);
|
||||
if(demo())host.demoAccessory(name,enabled);else await call('set_accessory',name,enabled);
|
||||
if(name==='camera'&&!enabled)await stopStream();
|
||||
}catch(error){notify(error.message||'Accessory unavailable',true)}finally{auxBusy=false}
|
||||
}
|
||||
function updateDemand(demand){
|
||||
if(!host)return;
|
||||
const axes=supported();$('extra-controls').hidden=!axes.some(axis=>['lateral','pitch','roll'].includes(axis));
|
||||
for(const label of $('extra-controls').querySelectorAll('[data-motion]')){
|
||||
const axis=label.dataset.motion;label.hidden=!axes.includes(axis);label.querySelector('input').value=Math.round((demand[axis]||0)*100);
|
||||
label.querySelector('input').disabled=!host.touch();label.querySelector('output').value=Math.round((demand[axis]||0)*100);
|
||||
}
|
||||
}
|
||||
function render(s){
|
||||
snapshot=s;
|
||||
if(!host)return;
|
||||
const signature=String(!!s.connected)+':'+supported().join(',');
|
||||
if(capabilitySignature&&signature!==capabilitySignature)host.reset();
|
||||
capabilitySignature=signature;
|
||||
host.scaling((demo()||!s.connected)?station.frame===4:s.capabilities?.frame===4);
|
||||
if($('station-modal').open)for(const field of $('station-form').querySelectorAll('input,select,button[type=submit]'))field.disabled=host.locked();
|
||||
const telemetry=demo()&&s.connected?{
|
||||
attitude:{values:{heading:124,pitch:4.2,roll:-2.1},stale:false},depth:{values:{depth_m:1.8},stale:false},
|
||||
imu:{values:{ax:.12,ay:-.08,az:9.78,gx:.01,gy:.02,gz:0,mx:.21,my:.04,mz:.43},stale:false},pressure:{values:{pressure_hpa:1190,temperature_c:18.6},stale:false}
|
||||
}:s.telemetry||{};
|
||||
const value=(group,key)=>s.connected&&!telemetry[group]?.stale?telemetry[group]?.values?.[key]:null;
|
||||
const format=(value,unit,digits=1)=>Number.isFinite(value)?value.toFixed(digits)+unit:'—';
|
||||
const show=(id,number,unit,digits)=>{$(id).textContent=format(number,unit,digits);$(id).parentElement.dataset.stale=String(!Number.isFinite(number))};
|
||||
show('live-depth',value('depth','depth_m'),' m',2);show('live-heading',value('attitude','heading'),'°',0);show('live-pitch',value('attitude','pitch'),'°',1);show('live-roll',value('attitude','roll'),'°',1);
|
||||
const battery=s.battery||{},fresh=s.connected&&!s.battery_stale;
|
||||
const current=fresh&&!battery.current_stale?battery.current_a:null;
|
||||
show('live-current',current,' A',1);show('live-power',fresh&&Number.isFinite(current)&&Number.isFinite(battery.voltage)?current*battery.voltage:null,' W',1);
|
||||
show('live-charge',fresh?battery.consumed_mah:null,' mAh',0);
|
||||
for(const [id,keys,unit] of [['live-accel',['ax','ay','az'],'m/s²'],['live-gyro',['gx','gy','gz'],'rad/s'],['live-mag',['mx','my','mz'],'G']]){
|
||||
const values=keys.map(key=>value('imu',key));$(id).textContent=values.every(Number.isFinite)?values.map(value=>value.toFixed(2)).join(' / ')+' '+unit:'—';
|
||||
}
|
||||
show('live-temperature',value('pressure','temperature_c'),' °C',1);show('live-pressure',value('pressure','pressure_hpa'),' hPa',1);
|
||||
$('sensor-state').textContent=demo()&&s.connected?'Demo':!s.connected?'Offline':Object.values(telemetry).some(group=>!group.stale)?'Receiving':'No data';
|
||||
$('detected-frame').textContent=s.connected&&!demo()?(frames[s.capabilities?.frame]?.[0]||'Detecting'):demo()?'Demo':'Offline';
|
||||
for(const [name,id] of [['lights','lights-toggle'],['camera','camera-power']]){
|
||||
const item=s.accessories?.[name],pending=item&&item.accepted===null&&!item.error;
|
||||
$(id).disabled=!s.connected||station[name+'_relay']<0||!!pending;$(id).setAttribute('aria-pressed',String(!!(item?.accepted&&item.requested)));
|
||||
$(id).title=item?.error||(pending?'Awaiting ACK':station[name+'_relay']<0?'Configure relay':'Relay '+station[name+'_relay']);
|
||||
}
|
||||
if(streaming)$('stream-clock').textContent=new Date(performance.now()-streamStarted).toISOString().slice(14,19);
|
||||
$('sensor-record').setAttribute('aria-pressed',String(!!s.sensor_recording));$('sensor-record').textContent=s.sensor_recording?'Stop log':'Log data';
|
||||
$('sensor-record').disabled=!s.connected||demo();
|
||||
updateDemand(host.demand());
|
||||
}
|
||||
function action(name){if(name==='stream')void(streaming||connecting?stopStream():startStream());else if(name==='record')void toggleRecord();else if(name==='lights')void accessory('lights')}
|
||||
function init(callbacks){
|
||||
host=callbacks;
|
||||
$('view-drive').onclick=()=>view('drive');$('view-dashboard').onclick=()=>view('dashboard');
|
||||
$('camera-toggle').onclick=()=>action('stream');$('camera-record').onclick=()=>action('record');$('lights-toggle').onclick=()=>accessory('lights');$('camera-power').onclick=()=>accessory('camera');
|
||||
$('sensor-record').onclick=async()=>{try{if(demo())throw new Error('Live telemetry required');if(!host.bridge())throw new Error('Connect desktop');const path=await call('sensor_record',!snapshot.sensor_recording);if(path)$('sensor-record').title=path}catch(error){notify(error.message,true)}};
|
||||
for(const name of ['lights_relay','camera_relay']){
|
||||
const select=$('station-form').elements[name];select.add(new Option('Off','-1'));for(let index=0;index<16;index++)select.add(new Option('Relay '+index,String(index)));
|
||||
}
|
||||
const stationObserver=new MutationObserver(()=>{if($('station-modal').open)fillStation()});stationObserver.observe($('station-modal'),{attributes:true,attributeFilter:['open']});
|
||||
document.querySelector('[data-open=station-modal]').addEventListener('click',fillStation);
|
||||
$('station-form').onsubmit=async event=>{
|
||||
event.preventDefault();const form=event.currentTarget,feedback=form.querySelector('.form-feedback');
|
||||
if(host.locked()){feedback.textContent='Disengage first';feedback.hidden=false;return}
|
||||
const config=Object.fromEntries(new FormData(form));for(const name of ['frame','lights_relay','camera_relay'])config[name]=Number(config[name]);
|
||||
try{
|
||||
if(config.video_url){const url=new URL(config.video_url);if(!['http:','https:'].includes(url.protocol)||url.username||url.password)throw new Error('Use an HTTP stream URL')}
|
||||
if(config.lights_relay>=0&&config.lights_relay===config.camera_relay)throw new Error('Use separate relays');
|
||||
if(streaming||connecting)await stopStream();
|
||||
station=host.bridge()?await call('save_station_settings',config):config;localStorage.setItem('sub-v2-station',JSON.stringify(station));
|
||||
host.previewFrame(station.frame,frames[station.frame][1]);host.reset();host.close($('station-modal'));notify('Vehicle saved');render(snapshot);
|
||||
}catch(error){feedback.textContent=error.message||String(error);feedback.hidden=false}
|
||||
};
|
||||
for(const label of $('extra-controls').querySelectorAll('[data-motion]')){
|
||||
const input=label.querySelector('input'),axis=label.dataset.motion;
|
||||
input.oninput=()=>{if(host.touch())host.axis(axis,Number(input.value)/100)};
|
||||
const release=()=>{if(host.touch())host.axis(axis,0);input.value=0};
|
||||
input.onpointerup=release;input.onpointercancel=release;input.onblur=release;input.onkeyup=release;
|
||||
}
|
||||
for(const [name,text,value] of [['attitude_hz','Attitude · Hz',2],['depth_hz','Depth · Hz',2],['imu_hz','IMU · Hz',1],['pressure_hz','Pressure · Hz',1]]){
|
||||
const label=document.createElement('label'),span=document.createElement('span'),select=document.createElement('select');span.textContent=text;select.name=name;
|
||||
for(const rate of [0,1,2,5,10])select.add(new Option(rate===0?'Off':String(rate),String(rate)));select.value=String(value);label.append(span,select);$('link-form').querySelectorAll('.form-grid')[1].append(label);
|
||||
}
|
||||
addEventListener('pagehide',()=>void stopStream());document.body.dataset.view='drive';render(snapshot);
|
||||
}
|
||||
window.V2={init,render,filterDemand,action,updateDemand,station:()=>station,setStation:config=>{station={...station,...config};render(snapshot)}};
|
||||
})();
|
||||
+129
-22
@@ -3,8 +3,9 @@
|
||||
<head>
|
||||
<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=20260827-bridge-v5">
|
||||
<title>Argo V2</title>
|
||||
<link rel="stylesheet" href="styles.css?v=20261022-v2">
|
||||
<link rel="stylesheet" href="v2.css?v=20261022-v2">
|
||||
</head>
|
||||
<body>
|
||||
<main class="app-shell">
|
||||
@@ -34,7 +35,7 @@
|
||||
<!-- Telemetry / Status Zone -->
|
||||
<section class="telemetry-zone" aria-label="Vehicle Telemetry and Status">
|
||||
<div class="deck-card model-card">
|
||||
<div class="rov-stage" aria-label="Top view of three-thruster ROV">
|
||||
<div class="rov-stage" aria-label="Vehicle model">
|
||||
<canvas id="model-canvas" aria-label="Interactive STL vehicle model"></canvas>
|
||||
<div id="model-status" class="model-status">Initializing…</div>
|
||||
<div class="model-tools">
|
||||
@@ -44,20 +45,25 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Battery Status -->
|
||||
<button class="battery-card ghost" data-open="battery-modal">
|
||||
<span><small>Battery</small><strong id="battery-title">—</strong></span><i id="battery-percent">waiting</i>
|
||||
<b><em id="battery-fill"></em></b>
|
||||
<button id="link-quality" type="button" class="link-quality" data-grade="offline" title="Open link-quality details" aria-haspopup="dialog" aria-controls="link-quality-modal">
|
||||
<span class="link-quality-dot" aria-hidden="true"></span>
|
||||
<span><small>Data link</small><strong id="link-quality-grade">Offline</strong></span>
|
||||
<i><span id="link-quality-roundtrip">waiting for connection</span><span id="link-quality-downlink"></span></i>
|
||||
</button>
|
||||
|
||||
<div class="deck-status-bar">
|
||||
<header class="activity-heading">Activity:</header>
|
||||
<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 class="activity-actions"><button type="button" id="console" class="logs-link" title="Read live console" aria-label="Read live console">Console</button><button type="button" id="logs" class="logs-link" title="Open session logs" aria-label="Open session logs">Logs</button></div>
|
||||
</div>
|
||||
<button class="battery-card ghost" data-open="battery-modal" aria-label="Battery status and settings">
|
||||
<span class="battery-meter" aria-hidden="true"><em id="battery-fill"></em></span>
|
||||
<span class="battery-copy"><span class="battery-summary"><strong id="battery-percent">—</strong><small id="battery-title">No voltage</small></span></span>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
</aside>
|
||||
@@ -66,6 +72,7 @@
|
||||
<section class="controls-workspace" aria-label="Primary Vehicle Controls">
|
||||
<!-- Frameless Drag & Window Controls Header -->
|
||||
<div class="workspace-topbar">
|
||||
<div class="input-mode-controls"><div class="input-mode-switch" role="group" aria-label="Control input"><button type="button" id="input-keyboard" aria-pressed="true">Keyboard</button><button type="button" id="input-joystick" aria-pressed="false">Joystick</button></div><button type="button" id="controller-settings" class="controller-settings" data-open="controller-modal">Mapping</button></div>
|
||||
<div class="workspace-drag-area pywebview-drag-region"></div>
|
||||
<div class="window-actions">
|
||||
<button id="window-min" aria-label="Minimize" title="Minimize"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/></svg></button>
|
||||
@@ -74,6 +81,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="workspace-nav"><div class="view-switch" role="group" aria-label="Workspace"><button id="view-drive" type="button" aria-pressed="true">Drive</button><button id="view-dashboard" type="button" aria-pressed="false">Dashboard</button></div><span class="version-mark">V2</span><button class="quiet-button" data-open="station-modal" type="button">Vehicle</button></div>
|
||||
<p id="controller-status" class="controller-status" role="status">Keyboard + touch</p>
|
||||
<section id="dashboard" class="dashboard" aria-label="Vehicle dashboard" hidden>
|
||||
<div class="camera-stage">
|
||||
<video id="camera-video" muted autoplay playsinline hidden></video><img id="camera-image" alt="Camera stream" hidden><canvas id="camera-demo" aria-label="Simulated inspection camera" hidden></canvas>
|
||||
<div id="camera-empty" class="camera-empty"><svg viewBox="0 0 48 48" aria-hidden="true"><rect x="5" y="12" width="27" height="24" rx="6"/><path d="m32 20 11-6v20l-11-6"/></svg><span id="camera-state">Camera off</span></div>
|
||||
<div class="camera-overlay"><span id="camera-badge">Preview</span><span id="recording-badge" hidden>● REC</span><span id="stream-clock"></span></div>
|
||||
</div>
|
||||
<div class="dashboard-actions"><button id="camera-toggle" type="button">Start</button><button id="camera-record" type="button" aria-pressed="false" disabled>Record</button><button id="lights-toggle" type="button" aria-pressed="false" disabled>Lights</button><button id="camera-power" type="button" aria-pressed="false" disabled>Camera power</button><button id="sensor-record" type="button" aria-pressed="false">Log data</button></div>
|
||||
<div class="telemetry-strip" aria-label="Live telemetry"><div><span>Depth</span><strong id="live-depth">—</strong></div><div><span>Heading</span><strong id="live-heading">—</strong></div><div><span>Current</span><strong id="live-current">—</strong></div><div><span>Pitch</span><strong id="live-pitch">—</strong></div><div><span>Roll</span><strong id="live-roll">—</strong></div><div><span>Power</span><strong id="live-power">—</strong></div></div>
|
||||
<details class="sensor-details"><summary>Sensors <span id="sensor-state">Offline</span></summary><div class="sensor-values"><div><span>Acceleration</span><strong id="live-accel">—</strong></div><div><span>Gyroscope</span><strong id="live-gyro">—</strong></div><div><span>Magnetometer</span><strong id="live-mag">—</strong></div><div><span>Temperature</span><strong id="live-temperature">—</strong></div><div><span>Pressure</span><strong id="live-pressure">—</strong></div><div><span>Charge used</span><strong id="live-charge">—</strong></div></div></details>
|
||||
</section>
|
||||
<section class="primary-control-zone" aria-label="Primary Control Zone">
|
||||
<!-- Reserved Engage / Disarm row -->
|
||||
<div class="engage-header-zone">
|
||||
@@ -92,12 +111,12 @@
|
||||
<!-- Steering / Throttle Joystick -->
|
||||
<article class="control-card steer-card">
|
||||
<header>
|
||||
<div><small>steer + throttle</small></div>
|
||||
<span class="key-hint">w a s d</span>
|
||||
<div title="Steer and throttle · W A S D"></div>
|
||||
|
||||
</header>
|
||||
<div class="joystick-pad">
|
||||
<div id="joystick" class="joystick" touch-action="none">
|
||||
<canvas id="joystick-canvas" aria-label="Steering and throttle joystick; W A S D keys"></canvas>
|
||||
<canvas id="joystick-canvas" title="Steer and throttle · W A S D" aria-label="Steering and throttle joystick; W A S D keys"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
@@ -109,13 +128,13 @@
|
||||
<!-- Vertical Thruster Slider -->
|
||||
<article class="control-card vertical-card">
|
||||
<header>
|
||||
<div><small>vertical</small></div>
|
||||
<span class="key-hint">r / f</span>
|
||||
<div title="Vertical thrust · R / F"></div>
|
||||
|
||||
</header>
|
||||
<div class="heave-pad">
|
||||
<div class="vertical-control">
|
||||
<span>rise</span>
|
||||
<div id="heave" class="heave-track" touch-action="none">
|
||||
<div id="heave" title="Vertical thrust · R / F" class="heave-track" touch-action="none">
|
||||
<div class="heave-center"></div>
|
||||
<div id="heave-fill" class="heave-fill"></div>
|
||||
<div id="heave-knob" class="heave-knob"></div>
|
||||
@@ -132,27 +151,115 @@
|
||||
<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>
|
||||
<button id="gain-down" type="button" aria-label="Decrease output limit"><svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="m14 6-6 6 6 6"/></svg></button>
|
||||
<input id="gain" aria-label="Shared motor output limit" type="range" min="0" max="100" step="1" value="20">
|
||||
<button id="gain-up" type="button" aria-label="Increase output limit"><svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="m10 6 6 6-6 6"/></svg></button>
|
||||
</div>
|
||||
</label>
|
||||
<button class="button subtle config-btn" data-open="motors-modal">Motor setup</button>
|
||||
</div>
|
||||
<div id="extra-controls" class="extra-controls" hidden><label data-motion="lateral"><span>Strafe</span><input type="range" min="-100" max="100" value="0" aria-label="Strafe demand"><output>0</output></label><label data-motion="pitch"><span>Pitch</span><input type="range" min="-100" max="100" value="0" aria-label="Pitch demand"><output>0</output></label><label data-motion="roll"><span>Roll</span><input type="range" min="-100" max="100" value="0" aria-label="Roll demand"><output>0</output></label></div>
|
||||
</section>
|
||||
</section>
|
||||
<aside id="console-dock" class="console-dock" aria-labelledby="console-title" hidden>
|
||||
<header class="console-dock-header"><div><h2 id="console-title" title="Local session messages. Select a message to expand its details.">Console</h2></div><button id="console-close" type="button" class="console-close" aria-label="Hide console" title="Hide console"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button></header>
|
||||
<div class="console-toolbar"><label><span class="visually-hidden">Console filter</span><select id="console-filter"><option value="useful">Useful traffic</option><option value="all">All traffic</option></select></label><button id="console-pause" type="button" aria-pressed="false">Pause</button></div>
|
||||
<p id="console-state" class="console-state" role="status" title="Pausing the viewer does not stop session logging." hidden></p>
|
||||
<div class="console-streams"><section class="console-side"><header><i class="rx-dot" aria-hidden="true" title="Vehicle to PC · new displayed message"></i><span>RX</span></header><div id="console-rx-output" class="console-output" tabindex="0" aria-label="Received messages"></div></section><section class="console-side"><header><i class="tx-dot" aria-hidden="true" title="PC to vehicle · new displayed message"></i><span>TX</span></header><div id="console-tx-output" class="console-output" tabindex="0" aria-label="Sent messages"></div></section></div>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<div id="toast" class="toast"></div>
|
||||
|
||||
<!-- Modals -->
|
||||
<dialog id="link-modal" class="modal"><button class="modal-close" data-close>×</button><small>connection</small><h2>Link Settings</h2><div class="form-grid two"><label><span>Baud rate</span><select id="baud"><option>9600</option><option>19200</option><option>38400</option><option selected>57600</option><option>115200</option></select></label><label><span>Control rate</span><select id="rate"><option>10</option><option selected>20</option></select></label></div><div style="margin-top:14px;"><label style="display:flex;flex-direction:column;gap:6px;"><span style="font-size:11px;font-weight:500;color:var(--muted)">Custom Port / Endpoint</span><div style="display:flex;gap:8px;"><input id="custom-port-input" placeholder="e.g. COM3 or tcp:127.0.0.1:5760" style="flex:1;height:32px;padding:0 12px;font-size:11px;"><button type="button" id="custom-port-btn" class="button subtle" style="white-space:nowrap;">Use Port</button></div></label></div><p class="note" style="margin-top:14px;">20 Hz is recommended for smooth intermediate commands on this link.</p></dialog>
|
||||
<dialog id="battery-modal" class="modal"><button class="modal-close" data-close>×</button><small>Power</small><h2>Battery Settings</h2><form id="battery-form" class="form-grid three"><label><span>Cells (S)</span><div class="number-pill"><button type="button" class="num-step down" tabindex="-1">‹</button><input name="cells" type="number" min="1" step="1"><button type="button" class="num-step up" tabindex="-1">›</button></div></label><label><span>Capacity (mAh)</span><div class="number-pill"><button type="button" class="num-step down" tabindex="-1">‹</button><input name="capacity_mah" type="number" min="1" step="50"><button type="button" class="num-step up" tabindex="-1">›</button></div></label><label><span>C rating</span><div class="number-pill"><button type="button" class="num-step down" tabindex="-1">‹</button><input name="c_rating" type="number" min="1" step=".1"><button type="button" class="num-step up" tabindex="-1">›</button></div></label><label><span>Full V / cell</span><div class="number-pill"><button type="button" class="num-step down" tabindex="-1">‹</button><input name="full_v_per_cell" type="number" step=".01"><button type="button" class="num-step up" tabindex="-1">›</button></div></label><label><span>Empty V / cell</span><div class="number-pill"><button type="button" class="num-step down" tabindex="-1">‹</button><input name="empty_v_per_cell" type="number" step=".01"><button type="button" class="num-step up" tabindex="-1">›</button></div></label><label><span>Warning %</span><div class="number-pill"><button type="button" class="num-step down" tabindex="-1">‹</button><input name="warning_percent" type="number" min="0" max="100" step="1"><button type="button" class="num-step up" tabindex="-1">›</button></div></label><div class="modal-actions wide"><button type="button" class="button subtle" data-close>Cancel</button><button class="button connect-button">Save Settings</button></div></form></dialog>
|
||||
<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>
|
||||
<dialog id="link-modal" class="modal" aria-labelledby="link-title">
|
||||
<button class="modal-close" type="button" data-close aria-label="Close window"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button><h2 id="link-title">Link settings</h2>
|
||||
<form id="link-form" title="Baud changes apply on the next connection.">
|
||||
<section class="settings-section"><h3>Serial connection</h3>
|
||||
<div class="form-grid two"><label><span>Baud rate</span><select id="baud" name="baud"><option value="9600">9600</option><option value="19200">19200</option><option value="38400">38400</option><option value="57600" selected>57600</option><option value="115200">115200</option></select></label><label><span>Control rate · Hz</span><select id="rate" name="control_hz"><option value="10">10</option><option value="20" selected>20</option></select></label></div>
|
||||
|
||||
<label class="custom-port-label"><span>Custom port or endpoint</span><div class="custom-port-row"><input id="custom-port-input" placeholder="COM3 or tcp:127.0.0.1:5760" autocomplete="off"><button type="button" id="custom-port-btn" class="button subtle">Use port</button></div></label>
|
||||
<p id="custom-port-status" class="note" role="status"></p>
|
||||
</section>
|
||||
<section class="settings-section"><h3 title="Lower rates leave more bandwidth for controls. Rates reset after a reboot.">Telemetry rates</h3>
|
||||
<div class="form-grid two">
|
||||
<label><span>Quality check · Hz</span><select name="ping_hz"><option value="1" selected>1</option><option value="2">2</option><option value="5">5</option><option value="10">10</option></select></label>
|
||||
<label><span>Battery / system · Hz</span><select name="system_hz"><option value="0">Off</option><option value="1" selected>1</option><option value="2">2</option><option value="5">5</option><option value="10">10</option></select></label>
|
||||
<label><span>Battery detail · Hz</span><select name="battery_hz"><option value="0">Off</option><option value="1" selected>1</option><option value="2">2</option><option value="5">5</option><option value="10">10</option></select></label>
|
||||
<label><span>Motor outputs · Hz</span><select name="servo_hz"><option value="0">Off</option><option value="1">1</option><option value="2" selected>2</option><option value="5">5</option><option value="10">10</option></select></label>
|
||||
<label><span>RC channels · Hz</span><select name="rc_hz"><option value="0">Off</option><option value="1">1</option><option value="2" selected>2</option><option value="5">5</option><option value="10">10</option></select></label>
|
||||
<label><span>ESC telemetry · Hz</span><select name="esc_hz"><option value="0">Off</option><option value="1" selected>1</option><option value="2">2</option><option value="5">5</option><option value="10">10</option></select></label>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<p class="form-feedback" role="alert" hidden></p>
|
||||
<div class="modal-actions"><button type="button" class="button subtle" data-close>Cancel</button><button type="submit" class="button modal-primary">Apply settings</button></div>
|
||||
</form>
|
||||
</dialog>
|
||||
<dialog id="link-quality-modal" class="modal quality-modal" aria-labelledby="quality-title">
|
||||
<button class="modal-close" type="button" data-close aria-label="Close window"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button><h2 id="quality-title">Link quality</h2>
|
||||
|
||||
<div class="quality-summary" title="Round-trip replies, incoming packet loss, and heartbeat freshness."><div><span>Round trip</span><strong id="quality-detail-rtt">—</strong></div><div><span>Probe loss</span><strong id="quality-detail-loss">—</strong></div><div><span>FC → PC loss</span><strong id="quality-detail-downlink">—</strong></div></div>
|
||||
<section class="heavy-test-panel"><h3 title="Tests 1, 5 and 10 Hz for about 35 seconds while disarmed. The live check resumes afterward.">Extended test</h3>
|
||||
<div id="heavy-quality-status" class="heavy-quality-status" role="status">Connect to run an extended test.</div>
|
||||
<div id="heavy-quality-results" class="heavy-quality-results"></div>
|
||||
<p id="heavy-quality-error" class="form-feedback" role="alert" hidden></p>
|
||||
<div class="modal-actions"><button id="heavy-quality-run" type="button" class="button modal-primary">Run extended test</button><button id="heavy-quality-cancel" type="button" class="button subtle" hidden>Stop test</button></div>
|
||||
</section>
|
||||
</dialog>
|
||||
<dialog id="battery-modal" class="modal" aria-labelledby="battery-title-modal">
|
||||
<button class="modal-close" type="button" data-close aria-label="Close window"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button><h2 id="battery-title-modal">Battery</h2>
|
||||
<section class="battery-live" aria-label="Live battery readings">
|
||||
<div class="battery-live-grid">
|
||||
<div><span>Pack voltage</span><strong id="battery-live-voltage">—</strong></div>
|
||||
<div><span>Current draw</span><strong id="battery-live-current">—</strong></div>
|
||||
<div><span>Charge used</span><strong id="battery-live-consumed">—</strong><small id="battery-live-consumed-source"></small></div>
|
||||
<div><span>Capacity left</span><strong id="battery-live-remaining">—</strong></div>
|
||||
</div>
|
||||
<p id="battery-live-note" class="note">Waiting for battery telemetry.</p>
|
||||
</section>
|
||||
<form id="battery-form" title="Charge is estimated from voltage; capacity and C rating describe the battery.">
|
||||
<div class="form-grid two"><label><span>Cells · S</span><div class="number-pill"><button type="button" class="num-step down" aria-label="Decrease Cells · S">‹</button><input name="cells" type="number" min="1" step="1" max="16" required><button type="button" class="num-step up" aria-label="Increase Cells · S">›</button></div></label><label><span>Capacity · mAh</span><div class="number-pill"><button type="button" class="num-step down" aria-label="Decrease Capacity · mAh">‹</button><input name="capacity_mah" type="number" min="50" step="50" required><button type="button" class="num-step up" aria-label="Increase Capacity · mAh">›</button></div></label><label><span>C rating</span><div class="number-pill"><button type="button" class="num-step down" aria-label="Decrease C rating">‹</button><input name="c_rating" type="number" min="1" step="0.1" required><button type="button" class="num-step up" aria-label="Increase C rating">›</button></div></label><label><span>Low charge warning · %</span><div class="number-pill"><button type="button" class="num-step down" aria-label="Decrease Low charge warning · %">‹</button><input name="warning_percent" type="number" min="0" step="1" max="100" required><button type="button" class="num-step up" aria-label="Increase Low charge warning · %">›</button></div></label></div>
|
||||
<section class="settings-section"><h3>Voltage per cell</h3><div class="form-grid two"><label><span>Full · V</span><div class="number-pill"><button type="button" class="num-step down" aria-label="Decrease Full · V">‹</button><input name="full_v_per_cell" type="number" min="0.01" step="0.01" required><button type="button" class="num-step up" aria-label="Increase Full · V">›</button></div></label><label><span>Empty · V</span><div class="number-pill"><button type="button" class="num-step down" aria-label="Decrease Empty · V">‹</button><input name="empty_v_per_cell" type="number" min="0.01" step="0.01" required><button type="button" class="num-step up" aria-label="Increase Empty · V">›</button></div></label></div></section>
|
||||
<p class="form-feedback" role="alert" hidden></p>
|
||||
<div class="modal-actions"><button type="button" class="button subtle" data-close>Cancel</button><button type="submit" class="button modal-primary">Save battery</button></div>
|
||||
</form>
|
||||
</dialog>
|
||||
<dialog id="motors-modal" class="modal motor-modal" aria-labelledby="motors-title">
|
||||
<button class="modal-close" type="button" data-close aria-label="Close window"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button><h2 id="motors-title">Motor outputs</h2><p id="motor-status" class="note" role="status">Offline</p>
|
||||
<p id="motor-feedback" class="form-feedback" role="alert" hidden></p>
|
||||
<div class="motor-scale-heading"><span>Output</span><label class="switch-control"><input id="motor-scale-independent" type="checkbox"><span class="switch-track" aria-hidden="true"></span><span>Independent</span></label></div>
|
||||
<div id="motor-list" class="motor-list"></div>
|
||||
</dialog>
|
||||
<dialog id="controller-modal" class="modal controller-modal" aria-labelledby="controller-title">
|
||||
<button class="modal-close" type="button" data-close aria-label="Close window"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button><h2 id="controller-title">Joystick setup</h2>
|
||||
<form id="controller-form">
|
||||
<div class="form-grid two"><label><span>Controller</span><select id="controller-device"></select></label><label><span>Preset</span><select id="controller-preset"><option value="triggers3">Triggers · 3</option><option value="sixaxis">Six axes</option><option value="classic">Classic sticks</option><option value="custom">Custom</option></select></label></div>
|
||||
<p id="controller-axes" class="note" hidden>Xbox · offline</p>
|
||||
<div class="binding-head"><span>Motion</span><span>Negative</span><span>Positive</span><span></span><span>Limit %</span></div>
|
||||
<div id="controller-bindings"></div>
|
||||
<div class="form-grid two mapping-tuning"><label><span>Dead zone %</span><input name="deadZone" type="number" min="0" max="30" step="1" required></label><label><span>Expo %</span><input name="expo" type="number" min="0" max="100" step="1" required></label></div>
|
||||
<details class="mapping-actions"><summary>Buttons</summary><div class="form-grid three"><label><span>Lights</span><select name="lights"></select></label><label><span>Stream</span><select name="stream"></select></label><label><span>Record</span><select name="record"></select></label></div></details>
|
||||
|
||||
<p class="form-feedback" role="alert" hidden></p>
|
||||
<div class="modal-actions"><button type="button" class="button subtle" data-close>Cancel</button><button type="submit" class="button modal-primary">Save mapping</button></div>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<dialog id="station-modal" class="modal station-modal" aria-labelledby="station-title"><button class="modal-close" type="button" data-close aria-label="Close window"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button><h2 id="station-title">Vehicle</h2><form id="station-form">
|
||||
<div class="form-grid two"><label><span>Preview frame</span><select name="frame"><option value="4">SimpleROV · 3</option><option value="0">BlueROV1 · 6</option><option value="1">Vectored · 6</option><option value="2">Full 6DOF · 8</option><option value="3">6DOF 90° · 8</option><option value="5">SimpleROV · 4</option><option value="6">SimpleROV · 5</option></select></label><div class="detected-frame"><span>FC frame</span><strong id="detected-frame">Offline</strong></div></div>
|
||||
<section class="settings-section"><h3>Camera</h3><label><span>Stream type</span><select name="video_mode"><option value="whep">WebRTC · WHEP</option><option value="video">HTTP video</option><option value="mjpeg">MJPEG</option></select></label><label><span>Stream URL</span><input name="video_url" type="url" placeholder="http://192.168.2.2:8889/cam/whep" autocomplete="off"></label></section>
|
||||
<section class="settings-section"><h3>Accessories</h3><div class="form-grid two"><label><span>Lights relay</span><select name="lights_relay"></select></label><label><span>Camera relay</span><select name="camera_relay"></select></label></div></section>
|
||||
<p class="form-feedback" role="alert" hidden></p><div class="modal-actions"><button type="button" class="button subtle" data-close>Cancel</button><button type="submit" class="button modal-primary">Save</button></div>
|
||||
</form></dialog>
|
||||
|
||||
<script src="model-viewer.js?v=20260826-controls-v2"></script>
|
||||
<script src="joystick-3d.js?v=20260827-polish-v3"></script>
|
||||
<script src="joystick-3d.js?v=20261002-spacing-motion-v2"></script>
|
||||
<script src="control-state.js?v=20260827-state-v1"></script>
|
||||
<script src="app.js?v=20260827-bridge-v6"></script>
|
||||
<script src="controller-input.js?v=20261022-v2"></script>
|
||||
<script src="dashboard.js?v=20261022-v2"></script>
|
||||
<script src="console-view.js?v=20261002-console-v2"></script>
|
||||
<script src="app.js?v=20261022-v2"></script>
|
||||
<script src="cursor-light.js?v=20260827-directional-v10"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+14
-5
@@ -23,20 +23,29 @@
|
||||
if(amount>.025){ctx.beginPath();ctx.moveTo(cx,cy);ctx.lineTo(kx,ky);ctx.strokeStyle='rgba(78,91,85,.24)';ctx.lineWidth=3;ctx.lineCap='round';ctx.stroke()}
|
||||
|
||||
ctx.save();ctx.shadowColor='rgba(17,25,21,.22)';ctx.shadowBlur=activePointer===null?8:12;ctx.shadowOffsetY=3;
|
||||
ctx.beginPath();ctx.arc(kx,ky,knob,0,Math.PI*2);ctx.fillStyle=activePointer===null?'#555':'#353535';ctx.fill();ctx.restore();
|
||||
const handle=ctx.createLinearGradient(kx-knob*.574,ky-knob*.819,kx+knob*.574,ky+knob*.819);
|
||||
handle.addColorStop(0,activePointer===null?'#737373':'#606060');handle.addColorStop(1,activePointer===null?'#454545':'#393939');
|
||||
ctx.beginPath();ctx.arc(kx,ky,knob,0,Math.PI*2);ctx.fillStyle=handle;ctx.fill();ctx.restore();
|
||||
ctx.beginPath();ctx.arc(kx,ky,knob,0,Math.PI*2);ctx.strokeStyle='rgba(255,255,255,.42)';ctx.lineWidth=1;ctx.stroke();
|
||||
ctx.beginPath();ctx.arc(kx,ky,4,0,Math.PI*2);ctx.fillStyle='#dfe5e1';ctx.fill();
|
||||
}
|
||||
function publish(){window.setJoyControl?.(x,y)}
|
||||
function setPosition(nextX,nextY,notify=true){const length=Math.hypot(nextX,nextY);if(length>1){nextX/=length;nextY/=length}x=nextX;y=nextY;draw();if(notify)publish()}
|
||||
function positionFromEvent(event){const rect=canvas.getBoundingClientRect(),g=geometry();setPosition((event.clientX-rect.left-g.cx)/g.travel,(event.clientY-rect.top-g.cy)/g.travel)}
|
||||
function returnToCenter(){cancelAnimationFrame(returnFrame);const startX=x,startY=y,start=performance.now();const tick=now=>{const p=Math.min(1,(now-start)/360),smooth=p*p*(3-2*p);setPosition(startX*(1-smooth),startY*(1-smooth));if(p<1)returnFrame=requestAnimationFrame(tick)};returnFrame=requestAnimationFrame(tick)}
|
||||
function easeTo(nextX,nextY){
|
||||
cancelAnimationFrame(returnFrame);
|
||||
const length=Math.hypot(nextX,nextY);if(length>1){nextX/=length;nextY/=length}
|
||||
const startX=x,startY=y,start=performance.now();
|
||||
const tick=now=>{const p=Math.min(1,(now-start)/360),smooth=p*p*(3-2*p);setPosition(startX+(nextX-startX)*smooth,startY+(nextY-startY)*smooth);if(p<1)returnFrame=requestAnimationFrame(tick)};
|
||||
returnFrame=requestAnimationFrame(tick);
|
||||
}
|
||||
function returnToCenter(){easeTo(0,0)}
|
||||
function release(event){if(activePointer===null||(event?.pointerId!=null&&event.pointerId!==activePointer))return;const pointer=activePointer;activePointer=null;try{canvas.releasePointerCapture(pointer)}catch(_){}canvas.classList.remove('is-active');draw();returnToCenter()}
|
||||
|
||||
canvas.addEventListener('pointerdown',event=>{if(activePointer!==null||!window.canDrive?.()||event.button>0)return;activePointer=event.pointerId;cancelAnimationFrame(returnFrame);canvas.setPointerCapture(event.pointerId);canvas.classList.add('is-active');positionFromEvent(event);event.preventDefault()});
|
||||
canvas.addEventListener('pointerdown',event=>{if(activePointer!==null||!window.canTouchControl?.()||event.button>0)return;activePointer=event.pointerId;cancelAnimationFrame(returnFrame);canvas.setPointerCapture(event.pointerId);canvas.classList.add('is-active');positionFromEvent(event);event.preventDefault()});
|
||||
canvas.addEventListener('pointermove',event=>{if(event.pointerId===activePointer)positionFromEvent(event)});
|
||||
canvas.addEventListener('pointerup',release);canvas.addEventListener('pointercancel',release);canvas.addEventListener('lostpointercapture',event=>{if(event.pointerId===activePointer)release(event)});
|
||||
canvas.addEventListener('pointerleave',event=>{if(event.pointerType==='mouse'&&event.pointerId===activePointer)release(event)});
|
||||
addEventListener('resize',resize);resize();
|
||||
window.joystick3D={setPos(nextX,nextY){cancelAnimationFrame(returnFrame);setPosition(nextX,nextY)},easeBack(){if(activePointer===null)returnToCenter()},reset(){const pointer=activePointer;activePointer=null;cancelAnimationFrame(returnFrame);if(pointer!==null)try{canvas.releasePointerCapture(pointer)}catch(_){}canvas.classList.remove('is-active');setPosition(0,0,false)},getState(){return {x,y,active:activePointer!==null}}};
|
||||
addEventListener('resize',resize);new ResizeObserver(resize).observe(host);resize();
|
||||
window.joystick3D={setVisual(nextX,nextY){setPosition(nextX,nextY,false)},setPos(nextX,nextY){cancelAnimationFrame(returnFrame);setPosition(nextX,nextY)},easeTo(nextX,nextY){if(activePointer===null)easeTo(nextX,nextY)},easeBack(){if(activePointer===null)returnToCenter()},reset(){const pointer=activePointer;activePointer=null;cancelAnimationFrame(returnFrame);if(pointer!==null)try{canvas.releasePointerCapture(pointer)}catch(_){}canvas.classList.remove('is-active');setPosition(0,0,false)},getState(){return {x,y,active:activePointer!==null}}};
|
||||
})();
|
||||
|
||||
+433
-29
@@ -1,5 +1,19 @@
|
||||
/* SUB Control UI – Desktop Layout */
|
||||
|
||||
/* Isolated pointer lighting: no layout or input interception. */
|
||||
.controls-workspace { position:relative; isolation:isolate; }
|
||||
.workspace-light { position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; opacity:0; background:radial-gradient(600px circle at var(--light-x) var(--light-y),rgba(255,255,255,.35),transparent 75%); transition:opacity .35s ease-out; }
|
||||
.workspace-light.lit { opacity:1; }
|
||||
.light-surface { position:relative; }
|
||||
.cursor-light { position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit; }
|
||||
.cursor-light::before,.cursor-light::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s ease-out; }
|
||||
.cursor-light.pill-light::before { background:radial-gradient(240px circle at var(--light-x) var(--light-y),rgba(110,190,235,.08),transparent 80%); }
|
||||
.cursor-light::after { padding:1px; background:linear-gradient(var(--light-angle,315deg),transparent 30%,rgba(255,255,255,.13) 65%,rgba(255,255,255,.50) 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
|
||||
.cursor-light.lit::before,.cursor-light.near::after { opacity:1; }
|
||||
.joystick > .cursor-light { inset:7%; border-radius:50%; }
|
||||
#engage > .cursor-light::after { display:none; }
|
||||
@media (prefers-reduced-motion:reduce) { .workspace-light,.cursor-light::before,.cursor-light::after { transition:none; } }
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #0c1012;
|
||||
@@ -14,7 +28,7 @@
|
||||
--amber: #f2c675;
|
||||
--red: #f0958b;
|
||||
--shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||||
font-family: Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@@ -525,6 +539,7 @@ body[data-app-state="link_degraded"] .status-line .status-dot {
|
||||
margin-left: auto;
|
||||
}
|
||||
.logs-link:hover { color: #f1f4f2; }
|
||||
.activity-actions { display:flex; align-items:center; gap:12px; }
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
PRIMARY CONTROL ZONE (Workspace)
|
||||
@@ -540,6 +555,59 @@ body[data-app-state="link_degraded"] .status-line .status-dot {
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ── Active MAVLink link test ── */
|
||||
.link-quality {
|
||||
display: grid;
|
||||
grid-template-columns: 8px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
min-height: 48px;
|
||||
padding: 3px 0;
|
||||
color: #eef2f0;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border-radius: 9px;
|
||||
transition: background-color .18s ease;
|
||||
}
|
||||
.link-quality:hover,.link-quality:focus-visible { background:rgba(255,255,255,.055); outline:none; }
|
||||
.link-quality-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #667074;
|
||||
}
|
||||
.link-quality span:not(.link-quality-dot) { display:flex; flex-direction:column; gap:1px; min-width:0; }
|
||||
.link-quality small { color:#8d979a; font-size:10px; font-weight:400; }
|
||||
.link-quality strong { font-size:14px; font-weight:500; line-height:1.15; }
|
||||
.link-quality i {
|
||||
grid-column: 2;
|
||||
min-width: 0;
|
||||
color: #aab2b4;
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
font-style: normal;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.link-quality i span { display:block; }
|
||||
.link-quality[data-grade="excellent"] .link-quality-dot { background:#bce96c; box-shadow:0 0 8px rgba(188,233,108,.35); }
|
||||
.link-quality[data-grade="good"] .link-quality-dot { background:#85c7e8; }
|
||||
.link-quality[data-grade="fair"] .link-quality-dot { background:#e7bf69; }
|
||||
.link-quality[data-grade="poor"] .link-quality-dot { background:#f07f78; box-shadow:0 0 8px rgba(240,127,120,.3); }
|
||||
.link-quality[data-grade="testing"] .link-quality-dot { background:#aab3b6; }
|
||||
.quality-modal { width:min(520px,calc(100vw - 32px)); }
|
||||
.heavy-test-panel { margin-top:18px; padding-top:14px; border-top:1px solid rgba(128,145,145,.2); }
|
||||
.heavy-quality-status { font-size:14px; font-weight:500; }
|
||||
.heavy-quality-results { display:grid; gap:6px; margin-top:12px; }
|
||||
.heavy-result-row { display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:7px 10px; border-radius:10px; background:rgba(120,140,140,.08); font-size:12px; }
|
||||
.heavy-result-row strong { flex:none; }
|
||||
.heavy-result-row span { text-align:right; color:var(--muted); }
|
||||
.primary-control-zone {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
@@ -645,23 +713,27 @@ body[data-app-state="link_degraded"] .status-line .status-dot {
|
||||
pointer-events: none;
|
||||
}
|
||||
.engage-button.charging { transition: background-color .24s ease, border-color .24s ease, color .2s ease; }
|
||||
.engage-face { position: relative; display: grid; place-items: center; min-width: 74px; }
|
||||
.engage-face > span { grid-area: 1/1; font-size: 11px; font-weight: 650; letter-spacing: .12em; }
|
||||
.engage-face { position:relative; display:grid; place-items:center; width:7.5em; height:1em; min-width:0; text-align:center; font-size:clamp(52px,11cqw,90px); }
|
||||
.engage-face > span { grid-area:1/1; justify-self:center; align-self:start; font-size:11px; font-weight:650; letter-spacing:.12em; white-space:nowrap; }
|
||||
.engage-label {
|
||||
position:relative;
|
||||
color: transparent;
|
||||
background: linear-gradient(105deg,#f4f6f3 20%,#ffffff 43%,#9da6a2 50%,#ffffff 57%,#f4f6f3 80%);
|
||||
background-size: 250% 100%;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
text-align:center;
|
||||
transition:transform 180ms cubic-bezier(.77,0,.175,1);
|
||||
}
|
||||
#engage .engage-label.is-appending { transform:translateX(var(--engage-append-shift,0px)); }
|
||||
.arm:not(:disabled):not(.charging):not(.canceling):not(.state-transition) .engage-label { animation: engage-shimmer 4.8s linear infinite; }
|
||||
.engage-suffix { display:inline-block; opacity:0; clip-path:inset(0 100% 0 0); transform:translateX(-.08em); transition:clip-path 180ms cubic-bezier(.77,0,.175,1),opacity 120ms ease-out,transform 180ms cubic-bezier(.77,0,.175,1); }
|
||||
.state-transition .engage-suffix,.engage-suffix.is-visible { opacity:1; clip-path:inset(0); transform:translateX(0); }
|
||||
.engage-progress-label {
|
||||
color: #a9ed72;
|
||||
clip-path: inset(0 calc(100% - var(--engage-progress)) 0 0);
|
||||
transition: opacity .18s ease;
|
||||
}
|
||||
.state-transition .engage-face { animation: state-label .24s ease-out; }
|
||||
@keyframes state-label { from {opacity:.35} to {opacity:1} }
|
||||
@keyframes engage-shimmer { 0%,35%{background-position:160% 0} 80%,100%{background-position:-90% 0} }
|
||||
.engage-button:hover { transform:none; }
|
||||
.engage-button.pending { background:#405346; border-color:#516e56; }
|
||||
@@ -947,21 +1019,14 @@ body[data-telemetry-stale="true"] #battery-fill { opacity:.35; }
|
||||
color: #7a8280;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.motor-modal { width: min(600px, calc(100vw - 40px)); }
|
||||
.motor-head, .motor-row {
|
||||
display: grid;
|
||||
grid-template-columns: 70px 1fr 80px 75px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid #e0e4df;
|
||||
font-size: 10.5px;
|
||||
}
|
||||
.motor-head {
|
||||
font-weight: 500;
|
||||
color: #727a7c;
|
||||
border-bottom: 1.5px solid #c8cec6;
|
||||
}
|
||||
.motor-modal { width: min(860px, calc(100vw - 40px)); }
|
||||
.battery-live { margin:14px 0 20px; padding:14px; border-radius:16px; background:#f0f3ef; }
|
||||
.battery-live-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
|
||||
.battery-live-grid > div { min-width:0; padding:10px 11px; border-radius:12px; background:#fff; }
|
||||
.battery-live-grid span,.battery-live-grid small { display:block; color:#727b77; font-size:11px; }
|
||||
.battery-live-grid strong { display:block; margin-top:7px; color:#303936; font-size:18px; font-weight:500; font-variant-numeric:tabular-nums; }
|
||||
.battery-live-grid small { margin-top:4px; }
|
||||
.battery-live .note { margin:10px 0 0; line-height:1.5; font-size:12px; }
|
||||
|
||||
/* ── Toast ── */
|
||||
.toast {
|
||||
@@ -1011,6 +1076,37 @@ body[data-app-state="link_degraded"] button[data-open="motors-modal"] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.console-modal {
|
||||
width: min(1040px, calc(100vw - 64px));
|
||||
max-width: 1040px;
|
||||
}
|
||||
.console-split { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; min-width:0; }
|
||||
.console-split section { min-width:0; }
|
||||
.console-split header { display:flex; align-items:center; gap:7px; margin:0 2px 7px; }
|
||||
.console-split header i { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
|
||||
.console-split header .rx-dot { background:#79c8eb; }
|
||||
.console-split header .tx-dot { background:#bce96c; }
|
||||
.console-split header span { color:#303836; font-size:12px; font-weight:600; }
|
||||
.console-split header small { margin-left:auto; color:#7d8683; font-size:10px; }
|
||||
.console-split pre {
|
||||
height: min(55vh, 480px);
|
||||
margin: 0;
|
||||
padding: 14px;
|
||||
overflow: auto;
|
||||
border: 1px solid #d9ddda;
|
||||
border-radius: 12px;
|
||||
background: #171b1d;
|
||||
color: #dce4e1;
|
||||
font: 11px/1.45 Consolas, "SFMono-Regular", monospace;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
user-select: text;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.console-split { grid-template-columns:1fr; }
|
||||
.console-split pre { height:220px; }
|
||||
}
|
||||
|
||||
/* A pending or unknown armed state must stay legible, even without a link. */
|
||||
#engage.danger:disabled, #engage.pending:disabled { opacity:1 !important; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@@ -1039,7 +1135,7 @@ body #connect, body #connect:hover, body #connect.is-connected, body #connect.is
|
||||
}
|
||||
body #connect .btn-label { animation:none; }
|
||||
.telemetry-zone { gap:20px; }
|
||||
.rov-stage { height:clamp(180px,32vh,250px); min-height:180px; touch-action:none; }
|
||||
.rov-stage { flex:1; height:auto; min-height:0; width:100%; touch-action:none; border-radius:31px; overflow:hidden; background:transparent; }
|
||||
.model-card { justify-content:flex-start; }
|
||||
.rov-stage::before { display:none; }
|
||||
.model-tools button { font-size:12px; padding:7px 11px; }
|
||||
@@ -1052,27 +1148,31 @@ body #connect .btn-label { animation:none; }
|
||||
.activity-history li { font-size:12px; font-weight:300; line-height:1.25; color:#999; overflow-wrap:anywhere; }
|
||||
.activity-history #status-text { color:#fff; font-size:12px; font-weight:300; }
|
||||
.activity-history li[hidden] { display:none; }
|
||||
.controls-workspace { padding:8px 20px 16px; background:#f6f6f6; }
|
||||
.controls-workspace { padding:8px 20px 16px; background:#ededed; }
|
||||
.primary-control-zone { grid-template-rows:120px minmax(0,1fr) 52px; }
|
||||
.engage-header-zone { display:block; position:relative; height:120px; min-height:0; margin:0; padding:0; }
|
||||
body #engage { width:calc(100% + 40px); margin-left:-20px; height:104px; padding:0 20px; border:0; border-radius:0; background:transparent; box-shadow:none; }
|
||||
body #engage:hover, body #engage.pending, body #engage.danger { background:transparent; border:0; }
|
||||
#engage::before, #engage::after { display:none; }
|
||||
body #engage { align-items:flex-end; padding-bottom:12px; }
|
||||
.engage-face > span { font-family:"Segoe UI Variable Display","Segoe UI",Arial,sans-serif; font-size:clamp(64px,7.3vw,90px); font-weight:200; letter-spacing:.015em; line-height:1; padding-bottom:.22em; margin-bottom:-.22em; }
|
||||
.engage-face > span { font-family:inherit; font-size:clamp(52px,11cqw,90px); font-weight:200; letter-spacing:.015em; line-height:1; padding-bottom:.22em; margin-bottom:-.22em; }
|
||||
#engage { --engage-green:#4cce73; --engage-glow:drop-shadow(0 0 2px rgba(76,206,115,.3)); }
|
||||
#engage .engage-label { color:#777; background:none; animation:none; }
|
||||
.engage-sheen-label { color:#fff; pointer-events:none; opacity:0; mask-image:linear-gradient(105deg,transparent 40%,#000 49%,#000 51%,transparent 60%); mask-size:300% 100%; mask-repeat:no-repeat; -webkit-mask-image:linear-gradient(105deg,transparent 40%,#000 49%,#000 51%,transparent 60%); -webkit-mask-size:300% 100%; -webkit-mask-repeat:no-repeat; }
|
||||
#engage:is(.arm,.danger):not(:disabled):not(.charging):not(.canceling):not(.state-transition) .engage-sheen-label { opacity:1; animation:engage-sweep 2.2s linear infinite; }
|
||||
@keyframes engage-sweep { from {mask-position:100% 0;-webkit-mask-position:100% 0} to {mask-position:0% 0;-webkit-mask-position:0% 0} }
|
||||
.engage-progress-label { color:#4cce73; clip-path:none; filter:drop-shadow(0 0 2px rgba(76,206,115,.3)); mask-image:linear-gradient(to right,#000 calc(var(--engage-progress) - 8%),transparent var(--engage-progress)); -webkit-mask-image:linear-gradient(to right,#000 calc(var(--engage-progress) - 8%),transparent var(--engage-progress)); }
|
||||
.engage-progress-label { color:var(--engage-green); clip-path:none; filter:var(--engage-glow); mask-image:linear-gradient(to right,#000 calc(var(--engage-progress) - 8%),transparent var(--engage-progress)); -webkit-mask-image:linear-gradient(to right,#000 calc(var(--engage-progress) - 8%),transparent var(--engage-progress)); }
|
||||
#engage.charged .engage-progress-label { mask-image:none; -webkit-mask-image:none; }
|
||||
#engage.pending .engage-label { color:#5a8753; background:none; }
|
||||
#engage.danger .engage-label { color:#171717; }
|
||||
#engage.pending .engage-label { color:var(--engage-green); filter:var(--engage-glow); background:none; }
|
||||
#engage.danger .engage-label { color:#777; }
|
||||
#engage:focus-visible { outline:2px solid #8d9991; outline-offset:-6px; }
|
||||
.control-status { position:absolute; z-index:2; top:100%; left:0; right:0; margin:0; min-height:0; text-align:center; font-size:12px; max-height:48px; overflow:auto; background:#f6f6f6; }
|
||||
.control-status { position:absolute; z-index:2; top:100%; left:0; right:0; margin:0; min-height:0; text-align:center; font-size:12px; max-height:48px; overflow:auto; background:transparent; }
|
||||
.control-status[hidden] { display:none; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.engage-sheen-label { display:none; }
|
||||
#engage .engage-label.is-appending { transition:none; transform:none; }
|
||||
.engage-suffix { transition:opacity var(--ui-duration,180ms) ease-out; }
|
||||
.state-transition .engage-suffix { clip-path:inset(0); transform:none; }
|
||||
}
|
||||
.controls-grid {
|
||||
--joy-size:min(54vh,calc(100vw - 480px),460px);
|
||||
@@ -1094,10 +1194,11 @@ body #engage { align-items:flex-end; padding-bottom:12px; }
|
||||
.heave-fill { left:22px; right:22px; background:#999; }
|
||||
.control-toolbar { display:flex; justify-content:center; align-items:center; gap:16px; padding-top:12px; }
|
||||
.control-toolbar .output-limit { width:auto; flex-direction:row; align-items:center; font-size:13px; gap:12px; color:#777; }
|
||||
.control-toolbar .output-limit span { flex:0 0 128px; width:128px; gap:8px; align-items:baseline; justify-content:space-between; }
|
||||
.control-toolbar .output-limit > span { flex:0 0 128px; width:128px; gap:8px; align-items:baseline; justify-content:space-between; }
|
||||
.control-toolbar .output-limit b { display:inline-block; flex:0 0 4ch; width:4ch; text-align:right; color:#333; font-variant-numeric:tabular-nums; }
|
||||
.control-toolbar .range-pill { width:175px; grid-template-columns:28px 1fr 28px; height:40px; background:#e7e7e7; border:0; }
|
||||
.control-toolbar .range-pill button { width:28px; height:40px; color:#666; font-size:22px; }
|
||||
.control-toolbar .range-pill button { width:28px; height:40px; padding:0; display:grid; place-items:center; color:#666; line-height:1; }
|
||||
.control-toolbar .range-pill button svg { width:24px; height:24px; display:block; }
|
||||
.control-toolbar .range-pill input[type="range"] { background:#c4c4c4; height:20px; background-clip:content-box; padding:8px 0; }
|
||||
.control-toolbar .range-pill input[type="range"]::-webkit-slider-thumb { width:18px; height:18px; background:#858585; }
|
||||
.control-toolbar .config-btn { width:auto; height:40px; padding:0 18px; font-size:13px; background:#e7e7e7; color:#444; border:0; border-radius:999px; }
|
||||
@@ -1115,3 +1216,306 @@ body:not([data-controls-enabled="true"]) .controls-grid { opacity:.65; }
|
||||
.telemetry-zone { gap:12px; }
|
||||
.activity-history { gap:4px; }
|
||||
}
|
||||
|
||||
/* Settings windows: readable fields, predictable spacing, one action hierarchy. */
|
||||
.modal {
|
||||
color-scheme: light;
|
||||
width: min(560px, calc(100vw - 32px));
|
||||
max-height: calc(100dvh - 32px);
|
||||
padding: 28px;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
border: 1px solid #dedfdf;
|
||||
border-radius: 20px;
|
||||
background: #f6f6f6;
|
||||
box-shadow: 0 24px 80px rgba(0,0,0,.24);
|
||||
backdrop-filter: none;
|
||||
}
|
||||
.modal[open] { animation: dialog-in .16s ease-out; }
|
||||
.modal.closing { animation: dialog-out .12s ease-in forwards; }
|
||||
.modal::backdrop { background: rgba(15,19,22,.4); backdrop-filter: blur(3px); }
|
||||
.modal > small { display:block; color:#73787b; font-size:12px; font-weight:400; margin:0 42px 6px 0; }
|
||||
.modal h2 { margin:0 40px 18px 0; font-size:28px; letter-spacing:-.025em; font-weight:400; }
|
||||
.modal h3 { margin:0 0 10px; font-size:14px; font-weight:500; color:#454b4e; }
|
||||
.modal .note { font-size:13px; line-height:1.5; margin:8px 0 0; color:#676e71; }
|
||||
.modal-close { top:16px; right:16px; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#e9ebec; color:#555c60; font-size:25px; line-height:1; }
|
||||
.modal-close:hover { background:#dfe3e5; }
|
||||
.settings-section { margin-top:22px; }
|
||||
.settings-section + .settings-section { border-top:1px solid #e0e3e4; padding-top:20px; }
|
||||
.modal .form-grid { gap:16px; margin-top:10px; }
|
||||
.modal .form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
|
||||
.modal label { min-width:0; font-size:13px; line-height:1.35; font-weight:400; color:#50585c; }
|
||||
.modal label > span { display:block; margin-bottom:7px; }
|
||||
.modal input,.modal select { width:100%; min-width:0; height:42px; padding:0 13px; border:1px solid #d7dcde; border-radius:999px; background:#fff; color:#272c2f; font-size:14px; font-weight:400; }
|
||||
.modal select { padding-right:28px; }
|
||||
.modal :is(button,input,select,summary,pre):focus-visible { outline:2px solid #6598b5; outline-offset:3px; }
|
||||
.modal .number-pill { height:42px; grid-template-columns:36px minmax(0,1fr) 36px; background:#fff; border:1px solid #d7dcde; }
|
||||
.modal .number-pill button { width:36px; height:40px; font-size:24px; color:#5b666b; }
|
||||
.modal .number-pill input { border:0; padding:0; height:40px; appearance:textfield; -moz-appearance:textfield; }
|
||||
.modal .number-pill input::-webkit-inner-spin-button { appearance:none; }
|
||||
.modal .number-pill:focus-within { border-color:#6598b5; }
|
||||
.custom-port-label { display:block; margin-top:16px; }
|
||||
.custom-port-row { display:flex; gap:8px; }
|
||||
.custom-port-row input { flex:1; }
|
||||
.modal .button { min-height:42px; height:auto; padding:10px 18px; font-size:14px; font-weight:400; border-radius:999px; white-space:normal; }
|
||||
.modal .button.subtle { background:#e9ebec; border:0; color:#424b50; }
|
||||
.modal .modal-primary { background:#333e44; color:#fff; border:0; }
|
||||
.modal .modal-primary:hover { background:#455660; }
|
||||
.modal .modal-actions { margin-top:24px; gap:10px; align-items:center; }
|
||||
.modal .form-feedback { margin:16px 0 0; padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.5; color:#9b392e; background:#f5e6e3; }
|
||||
.modal [hidden] { display:none !important; }
|
||||
.modal [data-busy="true"] { cursor:progress; }
|
||||
.motor-modal { width:min(860px,calc(100vw - 32px)); }
|
||||
@media (max-width:650px) { .battery-live-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
|
||||
.motor-other { margin-top:16px; }
|
||||
.motor-other summary { cursor:pointer; padding:12px 0; color:#697278; font-size:13px; }
|
||||
.quality-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:18px; }
|
||||
.quality-summary div { border-radius:14px; background:#e9ebec; padding:14px 12px; min-width:0; }
|
||||
.quality-summary span { display:block; font-size:12px; color:#697278; margin-bottom:8px; }
|
||||
.quality-summary strong { font-size:20px; font-weight:400; font-variant-numeric:tabular-nums; }
|
||||
.modal .heavy-quality-status { padding:12px; background:#e9ebec; border-radius:12px; font-size:14px; margin-top:14px; }
|
||||
.modal .heavy-result-row { font-size:13px; padding:10px 12px; font-variant-numeric:tabular-nums; }
|
||||
.console-modal { width:min(1020px,calc(100vw - 32px)); }
|
||||
.console-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; }
|
||||
.console-toolbar .note { margin:0; }
|
||||
.modal .console-split header small { font-size:12px; }
|
||||
.modal .console-split pre { height:clamp(180px,48vh,430px); padding:14px; font-size:12px; line-height:1.55; border-radius:12px; }
|
||||
@keyframes dialog-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
|
||||
@keyframes dialog-out { to { opacity:0; transform:translateY(5px); } }
|
||||
@media (max-width:520px) {
|
||||
.modal { padding:22px 18px; }
|
||||
.modal .form-grid.two { grid-template-columns:1fr; }
|
||||
.quality-summary { gap:6px; }
|
||||
.quality-summary div { padding:12px 8px; }
|
||||
.quality-summary strong { font-size:17px; }
|
||||
}
|
||||
@media (prefers-reduced-motion:reduce) {
|
||||
.modal[open],.modal.closing { animation:none; }
|
||||
}
|
||||
|
||||
/* Input selection stays separate from vehicle arming and command ownership. */
|
||||
#engage:focus,#engage:focus-visible { outline:none!important; box-shadow:none!important; }
|
||||
.controls-workspace { container-type:inline-size; }
|
||||
.input-mode-controls { display:flex; align-items:center; gap:6px; flex-shrink:0; -webkit-app-region:no-drag; }
|
||||
.input-mode-switch { display:flex; padding:3px; gap:2px; background:#dedede; border-radius:999px; }
|
||||
.input-mode-switch button,.controller-settings { border:0; border-radius:999px; background:transparent; color:#686868; padding:7px 11px; font-size:12px; cursor:pointer; }
|
||||
.input-mode-switch button[aria-pressed="true"] { background:#fafafa; color:#252525; box-shadow:0 1px 3px #0000000c; }
|
||||
.controller-settings { background:#dedede; }
|
||||
.controller-status { margin:0; height:24px; flex-shrink:0; font-size:12px; line-height:20px; color:#6d7478; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
body[data-input-mode="joystick"] .key-hint { visibility:hidden; }
|
||||
body[data-input-mode="joystick"] :is(#joystick-canvas,#heave) { pointer-events:none; cursor:default; }
|
||||
.controls-grid { --joy-size:min(52vh,calc(100cqw - 136px),460px); }
|
||||
.control-toolbar { flex-wrap:wrap; gap:8px 14px; }
|
||||
.primary-control-zone { grid-template-rows:120px minmax(0,1fr) auto; }
|
||||
.control-toolbar { min-height:52px; }
|
||||
.engage-face > span { font-size:clamp(52px,11cqw,90px); }
|
||||
.controller-mapping-head,.controller-mapping-row { display:grid; grid-template-columns:1fr 1.25fr 50px; gap:14px; align-items:center; }
|
||||
.controller-mapping-head { color:#777; font-size:12px; margin-bottom:8px; }
|
||||
.controller-mapping-row { margin:8px 0; }
|
||||
.modal .controller-mapping-row input[type="checkbox"] { width:22px; height:22px; min-height:0; margin:auto; padding:0; accent-color:#527f9b; }
|
||||
.controller-mapping-row label { display:flex; align-items:center; }
|
||||
#controller-axes { min-height:22px; margin:12px 0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; color:#65737d; font-size:12px; }
|
||||
#controller-form > label { margin-top:18px; }
|
||||
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
|
||||
|
||||
/* Read-only local console, not a modal: driving stays available while it is open. */
|
||||
.app-shell.console-open { grid-template-columns:260px minmax(0,1fr) 340px; }
|
||||
.console-dock[hidden] { display:none!important; }
|
||||
.console-dock { display:flex; flex-direction:column; min-width:0; min-height:0; padding:18px 16px; background:#f5f5f5; border-left:1px solid #d8dcde; color:#29343b; color-scheme:light; }
|
||||
.console-dock-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
|
||||
.console-dock-header small { font-size:11px; color:#81888d; }
|
||||
.console-dock-header h2 { font-size:22px; font-weight:400; margin:4px 0 0; letter-spacing:-.02em; }
|
||||
.console-close { width:38px; height:38px; flex-shrink:0; border:0; border-radius:999px; background:#e7e8e9; color:#48525a; font-size:25px; cursor:pointer; }
|
||||
.console-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; }
|
||||
.console-toolbar label { flex:1; min-width:0; }
|
||||
.console-toolbar select,.console-toolbar button { height:34px; border:0; border-radius:999px; background:#e7e9ea; color:#42525e; font-size:12px; padding:0 12px; }
|
||||
.console-toolbar select { width:100%; }
|
||||
.console-toolbar button { cursor:pointer; }
|
||||
.console-state { min-height:28px; margin:10px 0 8px; font-size:11px; color:#7e868b; line-height:1.4; }
|
||||
.console-streams { display:grid; grid-template-rows:1fr 1fr; gap:14px; min-height:0; flex:1; }
|
||||
.console-side { display:flex; flex-direction:column; min-height:0; }
|
||||
.console-side > header { display:flex; align-items:center; gap:6px; padding:0 4px 8px; font-size:12px; font-weight:500; color:#435966; }
|
||||
.console-side > header small { margin-left:auto; font-size:11px; font-weight:300; color:#899198; }
|
||||
.console-side > header i { width:6px; height:6px; border-radius:50%; background:#5888a3; }
|
||||
.console-side > header .tx-dot { background:#659287; }
|
||||
.console-output { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; padding:0 8px; border:1px solid #e0e3e5; border-radius:12px; background:#fafbfc; color:#343d43; font:12px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif; }
|
||||
.console-row { border-bottom:1px solid #e9edef; }
|
||||
.console-row:last-child { border-bottom:0; }
|
||||
.console-row summary { display:flex; gap:8px; cursor:pointer; padding:10px 0; list-style:none; }
|
||||
.console-row summary::-webkit-details-marker { display:none; }
|
||||
.console-row time { flex-shrink:0; color:#929ba1; font:10px/1.8 ui-monospace,Consolas,monospace; font-variant-numeric:tabular-nums; }
|
||||
.console-message { min-width:0; display:block; overflow-wrap:anywhere; }
|
||||
.console-message strong { display:block; font-size:11px; font-weight:500; color:#517c97; letter-spacing:.025em; }
|
||||
.console-row[data-tone="command"] strong { color:#467a69; }
|
||||
.console-row[data-tone="warning"] strong { color:#aa664b; }
|
||||
.console-fields { display:flex; flex-wrap:wrap; gap:2px 8px; font-size:11px; }
|
||||
.console-fields i { color:#929a9f; font-style:normal; }
|
||||
.console-fields b { font-weight:400; color:#45535d; }
|
||||
.console-row pre { margin:0 0 10px; padding:10px; border-radius:8px; background:#eef1f3; color:#52616c; font:11px/1.5 ui-monospace,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
|
||||
.console-empty { color:#959da3; font-size:12px; line-height:1.6; margin:14px 0; }
|
||||
@media (max-height:610px) { .primary-control-zone { grid-template-rows:100px minmax(0,1fr) auto; } .controls-grid { --joy-size:min(46vh,calc(100cqw - 136px),420px); } }
|
||||
@media (max-width:1000px) {
|
||||
.app-shell.console-open { grid-template-columns:260px minmax(0,1fr); }
|
||||
.console-dock { position:absolute; top:0; right:0; bottom:0; width:min(340px,calc(100vw - 32px)); z-index:12; box-shadow:-8px 0 24px #00000012; border-radius:12px 0 0 12px; }
|
||||
}
|
||||
|
||||
/* Three shared sizes: compact 32px, standard 40px, primary 62px. */
|
||||
:root {
|
||||
--pill-sm:32px; --pill-md:40px; --pill-lg:62px; --pill-radius:999px;
|
||||
--battery-charge:#63cb85; --battery-low:#e98a7b;
|
||||
}
|
||||
.port-row select,.icon-button { height:var(--pill-sm); }
|
||||
.icon-button { width:var(--pill-sm); }
|
||||
body #connect { height:var(--pill-lg); border-radius:var(--pill-radius); }
|
||||
.input-mode-switch { height:var(--pill-md); padding:4px; }
|
||||
.input-mode-switch button { height:var(--pill-sm); padding:0 12px; }
|
||||
.controller-settings { height:var(--pill-md); padding:0 14px; }
|
||||
.input-mode-switch button:disabled { opacity:.65!important; }
|
||||
.input-mode-switch button[aria-pressed="true"]:disabled { opacity:1!important; }
|
||||
.control-toolbar .range-pill,.control-toolbar .config-btn { height:var(--pill-md); border-radius:var(--pill-radius); }
|
||||
.control-toolbar .range-pill button { height:var(--pill-md); }
|
||||
.window-actions button { width:var(--pill-md); height:var(--pill-md); }
|
||||
.console-toolbar select,.console-toolbar button { height:var(--pill-sm); border-radius:var(--pill-radius); }
|
||||
.modal input,.modal select,.modal .number-pill { height:var(--pill-md); border-radius:var(--pill-radius); }
|
||||
.modal .number-pill input,.modal .number-pill button { height:calc(var(--pill-md) - 2px); }
|
||||
.modal .button { min-height:var(--pill-md); padding:8px 18px; border-radius:var(--pill-radius); }
|
||||
.modal .controller-mapping-row input[type="checkbox"] { height:22px; border-radius:4px; }
|
||||
|
||||
/* Fixed SVG geometry avoids font baselines shifting the close icon. */
|
||||
.modal-close,.modal-close:hover,.console-close,.console-close:hover,.window-actions .window-close,.window-actions .window-close:hover {
|
||||
display:grid; place-items:center; width:var(--pill-md); height:var(--pill-md);
|
||||
padding:0; border:0; border-radius:0; background:transparent; box-shadow:none;
|
||||
}
|
||||
.modal-close svg,.console-close svg { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
|
||||
.modal-close:hover,.console-close:hover { color:#222; }
|
||||
.heave-knob { height:var(--pill-md); background:linear-gradient(145deg,#737373,#454545); }
|
||||
|
||||
/* Activity has a heading, compact event history, then explicit actions. */
|
||||
.telemetry-zone { gap:16px; }
|
||||
.deck-status-bar { flex-shrink:0; margin-top:0; padding-top:12px; }
|
||||
.activity-heading { display:block; margin:0 0 8px; color:#eee; font-size:14px; font-weight:650; }
|
||||
.activity-history { gap:4px; margin:0 0 10px; }
|
||||
.activity-actions { display:flex; gap:8px; }
|
||||
.activity-actions .logs-link {
|
||||
display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
|
||||
height:var(--pill-sm); min-width:76px; padding:0 14px; margin:0;
|
||||
border:0; border-radius:var(--pill-radius); background:#414141; color:#eee;
|
||||
font-size:12px; font-weight:400; letter-spacing:0; line-height:1; cursor:pointer;
|
||||
}
|
||||
.activity-actions .logs-link:hover { background:#4b4b4b; }
|
||||
.activity-actions .logs-link:focus-visible { outline:2px solid #a5c0d0; outline-offset:2px; }
|
||||
.activity-actions .logs-link[aria-expanded="true"] { background:#555; }
|
||||
|
||||
/* Battery is the final deck item: text floats above the charge fill. */
|
||||
.battery-card {
|
||||
position:relative; display:block; flex-shrink:0; width:100%; height:var(--pill-lg);
|
||||
min-height:var(--pill-lg); margin:0; padding:0; overflow:hidden;
|
||||
border:0; border-radius:var(--pill-radius); background:#314b3a;
|
||||
color:#f2f5f2; isolation:isolate;
|
||||
}
|
||||
.battery-meter { position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
|
||||
.battery-meter #battery-fill { display:block; height:100%; width:0; border-radius:inherit; background:var(--battery-charge); opacity:.55; transition:width .35s ease,background .2s ease,opacity .18s ease-out; }
|
||||
.battery-card .battery-copy { position:absolute; inset:0; z-index:1; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:8px; padding:0 18px; pointer-events:none; }
|
||||
.battery-summary { display:flex; flex-direction:column; gap:3px; flex-shrink:0; }
|
||||
.battery-card small { color:#d7e8dc; font-size:12px; line-height:1; font-variant-numeric:tabular-nums; }
|
||||
.battery-card strong { font-size:26px; font-weight:400; line-height:1.15; font-variant-numeric:tabular-nums; }
|
||||
.battery-card i { align-self:auto; color:#d9e0da; text-align:right; font-size:12px; line-height:1.35; font-style:normal; }
|
||||
.battery-card[data-low="true"] { background:#4a3734; }
|
||||
.battery-card[data-stale="true"] #battery-fill { opacity:.25; }
|
||||
.battery-card:focus-visible { outline:2px solid #a5c0d0; outline-offset:2px; }
|
||||
|
||||
/* The same slender, rounded scrollbar is used by every scrollable panel. */
|
||||
*::-webkit-scrollbar { width:8px; height:8px; }
|
||||
*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner { background:transparent; }
|
||||
*::-webkit-scrollbar-thumb { min-height:28px; border:2px solid transparent; border-radius:var(--pill-radius); background:#aeb6ba; background-clip:padding-box; }
|
||||
*::-webkit-scrollbar-thumb:hover { background:#87959e; background-clip:padding-box; }
|
||||
*::-webkit-scrollbar-button { display:none; width:0; height:0; }
|
||||
.sidebar-deck::-webkit-scrollbar-thumb { background:#666; background-clip:padding-box; }
|
||||
.modal { scrollbar-gutter:stable; }
|
||||
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width:thin; scrollbar-color:#aeb6ba transparent; } }
|
||||
@media (max-height:610px) { .telemetry-zone { gap:12px; } }
|
||||
|
||||
/* Shared panel geometry and quiet, presentational motion. Never ease command data. */
|
||||
:root { --panel-inset:20px; --ui-gap:12px; --ui-duration:180ms; --ui-ease:cubic-bezier(.2,0,.2,1); }
|
||||
.sidebar-deck,.controls-workspace,.console-dock { padding:var(--panel-inset); }
|
||||
.sidebar-deck,.telemetry-zone,.deck-connection,.port-row,.activity-actions,.input-mode-controls,.console-toolbar,.console-streams { gap:var(--ui-gap); }
|
||||
.deck-connection { padding-bottom:var(--ui-gap); }
|
||||
.workspace-topbar,.console-dock-header { min-height:var(--pill-md); height:var(--pill-md); margin-bottom:var(--ui-gap); }
|
||||
.port-row select,.port-row .icon-button { height:var(--pill-md); }
|
||||
.port-row .icon-button { width:var(--pill-md); }
|
||||
.activity-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
|
||||
.activity-actions .logs-link { min-width:0; width:100%; }
|
||||
.console-dock-header h2 { margin:0; }
|
||||
.console-toolbar { margin-bottom:var(--ui-gap); }
|
||||
.console-state { min-height:0; margin:0 0 var(--ui-gap); font-size:12px; }
|
||||
.console-side > header { padding-left:0; padding-right:0; }
|
||||
.console-side > header i { background:#b4bdc2; transition:background-color var(--ui-duration) ease-out,box-shadow var(--ui-duration) ease-out; }
|
||||
.console-side > header .rx-dot.lit { background:#4fa4cf; box-shadow:0 0 5px #4fa4cf66; }
|
||||
.console-side > header .tx-dot.lit { background:#56ae8a; box-shadow:0 0 5px #56ae8a66; }
|
||||
:is(button,select,input,.input-mode-switch,.console-row summary,.heave-knob,.heave-fill,.control-status,.battery-card)::before,
|
||||
:is(button,select,input,.input-mode-switch,.console-row summary,.heave-knob,.heave-fill,.control-status,.battery-card)::after,
|
||||
:is(button,select,input,.input-mode-switch,.console-row summary,.heave-knob,.heave-fill,.control-status,.battery-card) {
|
||||
transition-property:background-color,border-color,color,opacity,box-shadow,filter;
|
||||
transition-duration:var(--ui-duration); transition-timing-function:var(--ui-ease);
|
||||
}
|
||||
/* Keep pointer positions immediate; the existing conditioning owns motor easing. */
|
||||
.modal[open],.console-dock:not([hidden]),.form-feedback:not([hidden]),.console-state:not([hidden]),.console-row pre { animation:ui-fade-in var(--ui-duration) var(--ui-ease); }
|
||||
.modal.closing,.console-dock.closing { animation:ui-fade-out var(--ui-duration) ease-out forwards; pointer-events:none; }
|
||||
@keyframes ui-fade-in { from { opacity:0; } to { opacity:1; } }
|
||||
@keyframes ui-fade-out { from { opacity:1; } to { opacity:0; } }
|
||||
.controller-status { transition:opacity var(--ui-duration) ease-out; }
|
||||
.controller-status[data-quiet="true"] { opacity:0; pointer-events:none; }
|
||||
|
||||
/* Motor scaling and control-plane fit: keep interaction areas inside their rows. */
|
||||
.primary-control-zone { grid-template-rows:clamp(76px,14vh,108px) minmax(0,1fr) auto; }
|
||||
.engage-header-zone { height:auto; min-height:0; align-self:stretch; }
|
||||
body #engage { height:100%; min-height:0; }
|
||||
.controls-grid { --joy-size:min(40vh,calc(100cqw - 168px),380px); min-height:0; align-content:center; }
|
||||
.joystick { min-width:0; min-height:0; max-width:100%; max-height:100%; }
|
||||
.joystick-pad,.heave-pad { min-width:0; min-height:0; flex:1 1 auto; overflow:hidden; }
|
||||
.control-card { min-width:0; min-height:0; overflow:hidden; }
|
||||
.control-toolbar { flex-wrap:nowrap; min-height:48px; padding:5px 0 0; gap:clamp(8px,1.5vw,18px); }
|
||||
.control-toolbar .output-limit { min-width:0; }
|
||||
.control-toolbar .output-limit > span { flex:0 1 120px; width:120px; }
|
||||
.control-toolbar .range-pill { width:clamp(112px,20cqw,190px); flex:0 1 190px; }
|
||||
body[data-motor-scaling="independent"] .control-toolbar .output-limit { opacity:.42; }
|
||||
body[data-motor-scaling="independent"] .control-toolbar .range-pill { background:#dedfdf; }
|
||||
.control-toolbar .range-pill :disabled { cursor:not-allowed; }
|
||||
@media (max-height:610px) {
|
||||
.primary-control-zone { grid-template-rows:clamp(64px,12vh,82px) minmax(0,1fr) auto; }
|
||||
.controls-grid { --joy-size:min(34vh,calc(100cqw - 168px),300px); }
|
||||
}
|
||||
.motor-modal { width:min(720px,calc(100vw - 36px)); max-height:calc(100dvh - 28px); padding:clamp(18px,3vw,28px); overflow:auto; }
|
||||
.motor-modal > h2 { margin:0 0 2px; }
|
||||
.motor-scale-heading { display:flex; align-items:center; justify-content:space-between; padding:12px 0 7px; border-bottom:1px solid #e7eae7; color:#56635b; font-size:12px; }
|
||||
.switch-control { display:flex; align-items:center; gap:9px; cursor:pointer; color:#34423a; font-size:12px; }
|
||||
.switch-control input { position:absolute; opacity:0; width:1px; height:1px; }
|
||||
.switch-track { position:relative; display:block; width:34px; height:20px; border-radius:999px; background:#d8ddda; transition:background-color 160ms ease-out; }
|
||||
.switch-track::after { content:""; position:absolute; width:14px; height:14px; left:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 1px 2px #0002; transition:transform 160ms ease-out; }
|
||||
.switch-control input:checked + .switch-track { background:#4d8767; }
|
||||
.switch-control input:checked + .switch-track::after { transform:translateX(14px); }
|
||||
.switch-control input:focus-visible + .switch-track { outline:2px solid #6598b5; outline-offset:3px; }
|
||||
.motor-list { display:grid; }
|
||||
.motor-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(100px,1.5fr) 42px 76px; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #e7eae7; }
|
||||
.motor-name { min-width:0; height:34px; padding:0 8px; border:1px solid transparent; border-radius:6px; background:transparent; font-size:13px; }
|
||||
.motor-name:hover,.motor-name:focus { border-color:#d8dfda; background:#fff; }
|
||||
.motor-row .motor-scale { width:100%; min-width:0; height:22px; padding:0; border:0; background:transparent; accent-color:#4d8767; }
|
||||
.motor-scale-value { color:#344b3c; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
|
||||
.motor-reverse { min-height:30px; padding:5px 9px; font-size:11px; }
|
||||
.motor-reverse:disabled { opacity:.42; cursor:not-allowed; }
|
||||
.motor-channel { grid-column:1/-1; margin-top:-8px; color:#87918a; font-size:10px; }
|
||||
.motor-mapping { margin-top:8px; }
|
||||
.motor-mapping summary { padding:9px 0; color:#657168; font-size:12px; cursor:pointer; }
|
||||
.motor-map-row { display:grid; grid-template-columns:65px minmax(0,1fr) 72px; align-items:center; gap:9px; padding:6px 0; border-bottom:1px solid #edf0ed; }
|
||||
.motor-map-port { color:#4b5a50; font:11px ui-monospace,Consolas,monospace; }
|
||||
.motor-map-row select { height:32px; font-size:12px; }
|
||||
.motor-map-direction { color:#77827b; font-size:11px; text-align:right; }
|
||||
body[data-motor-scaling="independent"] .control-toolbar .output-limit { opacity:.42; }
|
||||
body[data-motor-scaling="independent"] .control-toolbar .range-pill { background:#dedfdf; }
|
||||
.control-toolbar .range-pill :disabled { cursor:not-allowed; }
|
||||
.controls-grid { align-content:start; }
|
||||
.joystick-pad,.heave-pad { padding-top:0; }
|
||||
.joystick { transform:translateY(-7px); }
|
||||
@media (max-width:640px) { .motor-row { grid-template-columns:minmax(0,1fr) minmax(75px,1.3fr) 38px 70px; gap:7px; } .motor-map-row { grid-template-columns:54px minmax(0,1fr) 64px; gap:6px; } }
|
||||
@media (max-width:520px) { .motor-modal { padding:18px 14px; } .motor-row { grid-template-columns:minmax(0,1fr) minmax(64px,1fr) 36px 66px; gap:5px; } .motor-name { font-size:12px; } .motor-reverse { padding:5px 6px; } }
|
||||
@media (prefers-reduced-motion:reduce) { .switch-track,.switch-track::after { transition:none; } }
|
||||
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
/* V2 uses the existing deck, type scale, and flat settings rows. */
|
||||
:root { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
|
||||
[hidden] { display:none !important; }
|
||||
.workspace-nav { display:flex; align-items:center; gap:12px; margin:0 0 10px; min-height:32px; }
|
||||
.view-switch { display:flex; gap:2px; padding:3px; background:#e1e1e1; border-radius:20px; }
|
||||
.view-switch button,.quiet-button { border:0; background:transparent; color:#737575; border-radius:18px; padding:6px 14px; cursor:pointer; font-size:12px; }
|
||||
.view-switch [aria-pressed=true] { background:#fafafa; color:#242929; box-shadow:0 1px 3px #0000000c; }
|
||||
.workspace-nav .quiet-button { margin-left:auto; }
|
||||
.version-mark { color:#9a9e9d; font-size:10px; letter-spacing:.08em; }
|
||||
#controller-settings { display:block; }
|
||||
.controller-modal { width:min(730px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); overflow:auto; }
|
||||
.binding-head,.binding-row { display:grid; grid-template-columns:80px minmax(100px,1fr) minmax(100px,1fr) 28px 54px; gap:8px; align-items:center; }
|
||||
.binding-head { font-size:10px; color:#858b89; padding:8px 0; }
|
||||
.binding-row { padding:9px 0; border-top:1px solid #dedfdd; }
|
||||
.binding-row > span { font-size:12px; font-weight:500; }
|
||||
.binding-row meter { display:block; width:50px; height:3px; margin-top:7px; accent-color:#6d9c8b; }
|
||||
.binding-row select,.binding-row input { height:34px; min-height:34px; padding:0 8px; border-radius:8px; font-size:12px; min-width:0; }
|
||||
.binding-row input { text-align:center; padding:0 2px; font-variant-numeric:tabular-nums; }
|
||||
.binding-swap { background:transparent; border:0; height:32px; color:#6a7470; font-size:19px; cursor:pointer; border-radius:7px; }
|
||||
.binding-swap:hover { background:#e0e5e1; }
|
||||
.mapping-tuning { margin-top:14px; }
|
||||
.mapping-actions { margin-top:16px; font-size:12px; }
|
||||
.mapping-actions summary { padding:8px 0; cursor:pointer; color:#727b76; }
|
||||
.form-grid.three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
|
||||
.dashboard { display:flex; flex:1; flex-direction:column; min-height:0; gap:0; overflow:auto; }
|
||||
.camera-stage { flex:1 1 220px; min-height:150px; position:relative; border-radius:14px; overflow:hidden; background:#18282d; color:#f2f6f5; isolation:isolate; }
|
||||
.camera-stage video,.camera-stage img,.camera-stage canvas { display:block; width:100%; height:100%; position:absolute; inset:0; object-fit:contain; }
|
||||
.camera-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#8fa5aa; font-size:12px; }
|
||||
.camera-empty svg { width:40px; fill:none; stroke:currentColor; stroke-width:1.4; opacity:.65; }
|
||||
.camera-overlay { pointer-events:none; position:absolute; top:14px; left:16px; right:16px; display:flex; align-items:center; gap:10px; font-size:10px; text-shadow:0 1px 3px #000; color:#d7e5e4; }
|
||||
#camera-badge { border:1px solid #a8c1c245; border-radius:10px; padding:3px 8px; background:#16282c55; }
|
||||
#recording-badge { color:#ff9e93; font-weight:600; }
|
||||
#stream-clock { margin-left:auto; font-variant-numeric:tabular-nums; }
|
||||
.dashboard-actions { display:flex; align-items:center; gap:5px; padding:10px 0; flex-wrap:wrap; }
|
||||
.dashboard-actions button { min-height:32px; padding:6px 12px; border-radius:18px; border:0; background:#e0e2df; color:#46524b; font-size:11px; cursor:pointer; white-space:nowrap; }
|
||||
.dashboard-actions button[aria-pressed=true] { background:#d0ddd5; color:#345844; }
|
||||
.dashboard-actions button:disabled { opacity:.4; cursor:default; }
|
||||
.telemetry-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:12px; border-top:1px solid #d9deda; padding:14px 0; }
|
||||
.telemetry-strip > div { min-width:0; display:flex; flex-direction:column; gap:3px; }
|
||||
.telemetry-strip span { font-size:10px; color:#7b8480; }
|
||||
.telemetry-strip strong { font-weight:400; font-size:clamp(18px,2.2vw,26px); color:#36463d; font-variant-numeric:tabular-nums; letter-spacing:-.035em; white-space:nowrap; }
|
||||
.telemetry-strip [data-stale=true] strong { color:#a4aaa5; }
|
||||
.sensor-details { border-top:1px solid #d9deda; padding:10px 0 0; font-size:11px; }
|
||||
.sensor-details summary { cursor:pointer; color:#58665d; }
|
||||
.sensor-details summary span { float:right; color:#939c96; font-size:10px; }
|
||||
.sensor-values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px 0; }
|
||||
.sensor-values div { min-width:0; display:flex; flex-direction:column; gap:4px; }
|
||||
.sensor-values span { color:#87908a; font-size:10px; }
|
||||
.sensor-values strong { font-size:11px; font-weight:500; color:#4b5c50; font-variant-numeric:tabular-nums; }
|
||||
.detected-frame { display:flex; flex-direction:column; gap:9px; color:#859086; font-size:12px; padding-top:4px; }
|
||||
.detected-frame strong { color:#4b5c50; font-weight:500; }
|
||||
.extra-controls { display:flex; gap:16px; margin-top:8px; padding:10px 0 0; border-top:1px solid #d9deda; }
|
||||
.extra-controls label { display:grid; flex:1; min-width:0; grid-template-columns:1fr 24px; gap:4px; color:#7e8981; font-size:10px; }
|
||||
.extra-controls label input { width:100%; min-width:0; grid-row:2; grid-column:1/-1; accent-color:#668c78; height:18px; }
|
||||
.extra-controls output { text-align:right; font-variant-numeric:tabular-nums; }
|
||||
.primary-control-zone { grid-template-rows:clamp(64px,11vh,90px) minmax(0,1fr) auto auto; }
|
||||
.controls-grid { --joy-size:min(34vh,calc(100cqw - 146px),370px); }
|
||||
.workspace-topbar { margin-bottom:8px; }
|
||||
:is(.view-switch button,.quiet-button,.binding-swap,.dashboard-actions button):active { transform:scale(.97); }
|
||||
:is(.view-switch button,.quiet-button,.binding-swap,.dashboard-actions button):focus-visible { outline:2px solid #6b9a84; outline-offset:2px; }
|
||||
.station-modal { width:min(560px,calc(100vw - 28px)); }
|
||||
body[data-view=dashboard] #controller-status { position:absolute; clip:rect(0,0,0,0); }
|
||||
@media (max-width:760px) {
|
||||
.binding-head,.binding-row { grid-template-columns:66px minmax(0,1fr) minmax(0,1fr) 24px 46px; gap:6px; }
|
||||
.binding-row select { padding:0 4px; font-size:11px; }
|
||||
.controller-modal { padding:22px 18px; }
|
||||
.controls-workspace { padding:16px; }
|
||||
.dashboard-actions { gap:4px; }.dashboard-actions button { padding:6px 9px; }
|
||||
}
|
||||
@media (max-width:600px) {
|
||||
.app-shell { grid-template-columns:170px minmax(0,1fr); }
|
||||
.sidebar-deck { padding:14px; }
|
||||
.input-mode-switch button { padding:6px 8px; }
|
||||
.controls-grid { --joy-size:min(30vh,calc(100cqw - 95px),300px); grid-template-columns:minmax(0,1fr) 70px; gap:6px; }
|
||||
.control-toolbar { flex-wrap:wrap; gap:8px; }.control-toolbar .range-pill { width:100px; }
|
||||
.control-toolbar .output-limit > span { width:auto; flex-basis:auto; }
|
||||
.window-actions { gap:0; }.window-actions button { width:24px; }
|
||||
.extra-controls { gap:8px; }.workspace-nav { gap:6px; }
|
||||
.view-switch button { padding:6px 9px; }.workspace-nav .quiet-button { padding:6px; }
|
||||
.version-mark { display:none; }
|
||||
}
|
||||
@media (prefers-reduced-motion:reduce) { :is(.view-switch button,.quiet-button,.binding-swap,.dashboard-actions button) { transition:none; transform:none !important; } }
|
||||
@@ -8,8 +8,10 @@ import time
|
||||
import base64
|
||||
import shutil
|
||||
import http.server
|
||||
import socketserver
|
||||
import urllib.parse
|
||||
import csv
|
||||
import uuid
|
||||
import math
|
||||
from pathlib import Path
|
||||
|
||||
import webview
|
||||
@@ -17,6 +19,7 @@ from serial.tools import list_ports
|
||||
|
||||
from app import Axes, MOTOR_FUNCTIONS, MavlinkWorker, motor_number_for_function
|
||||
from vehicle_state import VehicleState
|
||||
from rov_v2 import Telemetry, clean_profile, clean_station, save_json, number
|
||||
|
||||
|
||||
class ControlApi:
|
||||
@@ -28,9 +31,31 @@ class ControlApi:
|
||||
self.worker.require_input_lease = True
|
||||
self.vehicle_state = VehicleState()
|
||||
self.battery_received_at = None
|
||||
self.battery_last_current = None
|
||||
self.battery_last_current_at = None
|
||||
self.battery_session_consumed_mah = 0.0
|
||||
self.battery_fields_at = {}
|
||||
self.demo_mode = False
|
||||
self.lock = threading.Lock()
|
||||
self._poll_lock = threading.Lock()
|
||||
self.telemetry = Telemetry()
|
||||
self.station_path = Path(__file__).resolve().parent / "station_settings.json"
|
||||
self.profiles_path = self.station_path.with_name("controller_profiles.json")
|
||||
self.station_settings = clean_station({})
|
||||
self.controller_profiles = {}
|
||||
try:
|
||||
self.station_settings = clean_station(json.loads(self.station_path.read_text(encoding="utf-8")))
|
||||
except (OSError, ValueError, TypeError):
|
||||
pass
|
||||
try:
|
||||
self.controller_profiles = {str(key)[:256]: clean_profile(value) for key, value in
|
||||
json.loads(self.profiles_path.read_text(encoding="utf-8")).items()}
|
||||
except (OSError, ValueError, TypeError, AttributeError):
|
||||
pass
|
||||
self._recording_lock = threading.Lock()
|
||||
self._recording = None
|
||||
self._sensor_file = None
|
||||
self._sensor_writer = None
|
||||
self.state = {
|
||||
"connected": False,
|
||||
"link": "DISCONNECTED",
|
||||
@@ -40,12 +65,36 @@ class ControlApi:
|
||||
"app_state": "disconnected",
|
||||
"status": "Ready. Select a USB port to begin.",
|
||||
"battery": None,
|
||||
"link_quality": None,
|
||||
"heavy_quality": None,
|
||||
"log_path": None,
|
||||
"servos": {str(i): {"function": None, "direction": None} for i in range(1, 17)},
|
||||
"motor_test_active": False,
|
||||
"capabilities": {"frame": None, "firmware": None},
|
||||
"accessories": {},
|
||||
"sensor_recording": False,
|
||||
"servos": {str(i): {"function": None, "direction": None, "output_us": None} for i in range(1, 17)},
|
||||
}
|
||||
self.servo_functions: dict[int, int] = {}
|
||||
self.motor_directions: dict[int, int] = {}
|
||||
self.motor_settings_path = Path(__file__).resolve().parent / "motor_settings.json"
|
||||
self.motor_settings = {
|
||||
"independent": False,
|
||||
"customized": False,
|
||||
"motors": {str(i): {"name": f"Motor {i}", "scale": 20} for i in range(1, 13)},
|
||||
}
|
||||
try:
|
||||
saved_motor_settings = json.loads(self.motor_settings_path.read_text(encoding="utf-8"))
|
||||
self.motor_settings = self._clean_motor_settings(saved_motor_settings)
|
||||
except (OSError, ValueError, TypeError):
|
||||
pass
|
||||
if self.station_settings["frame"] != 4:
|
||||
self.motor_settings["independent"] = False
|
||||
self.worker.set_motor_scaling(
|
||||
self.motor_settings["independent"],
|
||||
{int(i): entry["scale"] for i, entry in self.motor_settings["motors"].items()},
|
||||
)
|
||||
self.battery_path = Path(__file__).resolve().parent / "battery_settings.json"
|
||||
self.link_path = Path(__file__).resolve().parent / "link_settings.json"
|
||||
self.model_path = Path(__file__).resolve().parent / "model_settings.json"
|
||||
self.model_cache = Path(__file__).resolve().parent / "runtime" / "vehicle_model.stl"
|
||||
self.model_cache_name = Path(__file__).resolve().parent / "runtime" / "vehicle_model_name.txt"
|
||||
@@ -62,13 +111,26 @@ class ControlApi:
|
||||
self.battery_config.update(json.loads(self.battery_path.read_text(encoding="utf-8")))
|
||||
except (OSError, ValueError, TypeError):
|
||||
pass
|
||||
self.link_config = {
|
||||
"baud": 57600, "control_hz": 20,
|
||||
"ping_hz": 1, "system_hz": 1, "battery_hz": 1, "servo_hz": 2,
|
||||
"rc_hz": 2, "esc_hz": 1,
|
||||
"attitude_hz": 2, "depth_hz": 2, "imu_hz": 1, "pressure_hz": 1,
|
||||
}
|
||||
try:
|
||||
self.link_config.update(json.loads(self.link_path.read_text(encoding="utf-8")))
|
||||
except (OSError, ValueError, TypeError):
|
||||
pass
|
||||
self._apply_link_config()
|
||||
|
||||
def initial_state(self):
|
||||
return {
|
||||
"ports": self.refresh_ports(),
|
||||
"battery_config": self.battery_config,
|
||||
"link_config": self.link_config,
|
||||
"motor_settings": self.motor_settings,
|
||||
"station_settings": self.station_settings,
|
||||
"controller_profiles": self.controller_profiles,
|
||||
"state": self._snapshot(),
|
||||
"model_info": self.get_saved_model_info(),
|
||||
}
|
||||
|
||||
def refresh_ports(self):
|
||||
@@ -225,7 +287,12 @@ class ControlApi:
|
||||
print(f"[web_ui] connect() called: port={port!r}, baud={baud!r}, rate={rate!r}")
|
||||
if not port:
|
||||
raise ValueError("Select a USB serial port")
|
||||
if str(port).lower() in ("demo", "tcp:127.0.0.1:5760", "udpin:127.0.0.1:14550"):
|
||||
self.telemetry = Telemetry()
|
||||
self.state["capabilities"] = {"frame": None, "firmware": None}
|
||||
self.state["accessories"] = {}
|
||||
self.state["battery"] = None
|
||||
self.battery_fields_at = {}
|
||||
if str(port).lower() == "demo":
|
||||
self.demo_mode = True
|
||||
self.servo_functions = {1: 33, 2: 34, 3: 35}
|
||||
self.motor_directions = {1: 1, 2: 1, 3: 1}
|
||||
@@ -233,6 +300,9 @@ class ControlApi:
|
||||
self.state.update(
|
||||
connected=True, link="LINK OK", vehicle="DEMO • DISARMED",
|
||||
armed=False, mode="MANUAL", status="Demo mode ready — no hardware connected.",
|
||||
link_quality={"grade": "excellent", "latency_ms": 12.0,
|
||||
"loss_percent": 0.0, "samples": 20,
|
||||
"corrupt_frames_20s": 0, "heartbeat_age_s": 0.1},
|
||||
battery={"voltage": 15.8, "per_cell": 3.95, "percent": 72,
|
||||
"cells": 4, "low": False},
|
||||
)
|
||||
@@ -242,8 +312,12 @@ class ControlApi:
|
||||
self.state["servos"][str(servo)] = {
|
||||
"function": function, "label": MOTOR_FUNCTIONS.get(function, "Unassigned"),
|
||||
"motor": motor, "direction": self.motor_directions.get(motor) if motor else None,
|
||||
"output_us": None,
|
||||
}
|
||||
return self._snapshot()
|
||||
self.battery_last_current = None
|
||||
self.battery_last_current_at = None
|
||||
self.battery_session_consumed_mah = 0.0
|
||||
self.worker.rate_hz = int(rate)
|
||||
with self.lock:
|
||||
self.vehicle_state.disconnect()
|
||||
@@ -268,16 +342,60 @@ class ControlApi:
|
||||
raise TimeoutError(f"No MAVLink heartbeat received from {port} within 8 seconds")
|
||||
|
||||
def disconnect(self):
|
||||
self.sensor_record(False)
|
||||
self.worker.stop_motor_test()
|
||||
with self.lock:
|
||||
self.state["motor_test_active"] = False
|
||||
if self.worker.heavy_quality_test is not None:
|
||||
self.worker.cancel_heavy_quality_test()
|
||||
if self.demo_mode:
|
||||
self.demo_mode = False
|
||||
with self.lock:
|
||||
self.state.update(connected=False, link="DISCONNECTED", vehicle="No heartbeat",
|
||||
armed=False, mode=None, battery=None, status="Demo mode disconnected")
|
||||
armed=False, mode=None, battery=None, link_quality=None,
|
||||
status="Demo mode disconnected")
|
||||
return True
|
||||
self.worker.disconnect()
|
||||
return True
|
||||
|
||||
def set_axes(self, forward, turn, vertical, sequence=None):
|
||||
def start_heavy_quality_test(self):
|
||||
if self.demo_mode:
|
||||
raise RuntimeError("The heavy link test requires a real flight-controller connection")
|
||||
return self.worker.start_heavy_quality_test()
|
||||
|
||||
def cancel_heavy_quality_test(self):
|
||||
return self.worker.cancel_heavy_quality_test()
|
||||
|
||||
def start_motor_test(self, motor, throttle_percent):
|
||||
motor, throttle_percent = int(motor), int(throttle_percent)
|
||||
if self.demo_mode:
|
||||
raise RuntimeError("Motor tests require a real flight-controller connection")
|
||||
with self.lock:
|
||||
if not self.state.get("connected") or not self.state.get("armed"):
|
||||
raise RuntimeError("Connect and arm the vehicle before motor testing")
|
||||
assignment = next((item for item in self.state["servos"].values() if item.get("motor") == motor), None)
|
||||
if assignment is None:
|
||||
raise ValueError(f"Motor {motor} is not assigned to a servo output")
|
||||
if self.state.get("motor_test_active"):
|
||||
raise RuntimeError("A motor test is already active")
|
||||
effective_percent = round(throttle_percent * self.worker.motor_output_scale(motor))
|
||||
self.state["motor_test_active"] = True
|
||||
self.state["status"] = f"Motor {motor} test active at {effective_percent}% output"
|
||||
try:
|
||||
return self.worker.start_motor_test(motor, effective_percent)
|
||||
except Exception:
|
||||
with self.lock:
|
||||
self.state["motor_test_active"] = False
|
||||
raise
|
||||
|
||||
def stop_motor_test(self):
|
||||
self.worker.stop_motor_test()
|
||||
with self.lock:
|
||||
self.state["status"] = "Motor test released; waiting for flight-controller stop"
|
||||
return True
|
||||
|
||||
def set_axes(self, forward, turn, vertical, sequence=None, lateral=0, pitch=0, roll=0):
|
||||
values = [number(value, -1, 1) for value in (forward, lateral, vertical, turn, pitch, roll)]
|
||||
if self.demo_mode:
|
||||
with self.lock:
|
||||
self.state["status"] = (
|
||||
@@ -287,13 +405,95 @@ class ControlApi:
|
||||
return True
|
||||
with self.lock:
|
||||
allowed = self.vehicle_state.snapshot()["controls_allowed"]
|
||||
self.worker.set_axes(Axes(
|
||||
max(-1.0, min(1.0, float(forward))), 0.0,
|
||||
max(-1.0, min(1.0, float(vertical))),
|
||||
max(-1.0, min(1.0, float(turn))),
|
||||
) if allowed else Axes(), sequence)
|
||||
self.worker.set_axes(Axes(*values) if allowed else Axes(), sequence)
|
||||
return True
|
||||
|
||||
def _require_settings(self):
|
||||
if self.state.get("connected") and (self.state.get("armed") or
|
||||
(not self.demo_mode and not self.vehicle_state.snapshot()["armed_known"])):
|
||||
raise RuntimeError("Disengage first")
|
||||
|
||||
def save_controller_profile(self, device, profile):
|
||||
with self.lock:
|
||||
self._require_settings()
|
||||
clean = clean_profile(profile)
|
||||
updated = {**self.controller_profiles, str(device)[:256]: clean}
|
||||
save_json(self.profiles_path, updated)
|
||||
self.controller_profiles = updated
|
||||
self.worker.set_axes(Axes())
|
||||
return clean
|
||||
|
||||
def save_station_settings(self, config):
|
||||
with self.lock:
|
||||
self._require_settings()
|
||||
clean = clean_station(config)
|
||||
save_json(self.station_path, clean)
|
||||
self.station_settings = clean
|
||||
if clean["frame"] != 4 and (self.demo_mode or not self.state.get("connected")):
|
||||
self.motor_settings["independent"] = False
|
||||
self.worker.set_motor_scaling(False, {int(key): item["scale"] for key, item in self.motor_settings["motors"].items()})
|
||||
# Frame selection describes the preview; actual FRAME_TYPE is read
|
||||
# from the connected autopilot and never silently overwritten.
|
||||
return clean
|
||||
|
||||
def set_accessory(self, name, enabled):
|
||||
if name not in ("lights", "camera") or not isinstance(enabled, bool):
|
||||
raise ValueError("Invalid accessory")
|
||||
relay = self.station_settings[name + "_relay"]
|
||||
if relay < 0:
|
||||
raise RuntimeError("Set relay first")
|
||||
if self.demo_mode:
|
||||
self.state["accessories"][name] = {"requested": enabled, "accepted": True, "demo": True}
|
||||
return True
|
||||
self.worker.accessory(name, relay, enabled)
|
||||
with self.lock:
|
||||
self.state["accessories"][name] = {"requested": enabled, "accepted": None, "at": time.monotonic()}
|
||||
return True
|
||||
|
||||
def sensor_record(self, enabled):
|
||||
with self.lock:
|
||||
if enabled and self._sensor_file is None:
|
||||
folder = Path(__file__).resolve().parent / "logs"
|
||||
folder.mkdir(exist_ok=True)
|
||||
self._sensor_file = (folder / f"sensors_{time.time_ns()}.csv").open("w", newline="", encoding="utf-8")
|
||||
self._sensor_writer = csv.writer(self._sensor_file)
|
||||
self._sensor_writer.writerow(("monotonic_s", "group", "field", "value"))
|
||||
elif not enabled and self._sensor_file is not None:
|
||||
self._sensor_file.close()
|
||||
self._sensor_file = self._sensor_writer = None
|
||||
self.state["sensor_recording"] = bool(enabled)
|
||||
return self._sensor_file.name if self._sensor_file else None
|
||||
|
||||
def recording_begin(self):
|
||||
with self._recording_lock:
|
||||
if self._recording:
|
||||
raise RuntimeError("Already recording")
|
||||
folder = Path(__file__).resolve().parent / "runtime" / "recordings"
|
||||
folder.mkdir(parents=True, exist_ok=True)
|
||||
path = folder / f"rov_{time.time_ns()}.webm"
|
||||
token = uuid.uuid4().hex
|
||||
self._recording = (token, path.open("wb"), path)
|
||||
return token
|
||||
|
||||
def recording_chunk(self, token, data):
|
||||
if not isinstance(data, str) or len(data) > 12 * 1024 * 1024:
|
||||
raise ValueError("Invalid video chunk")
|
||||
chunk = base64.b64decode(data, validate=True)
|
||||
with self._recording_lock:
|
||||
if not self._recording or token != self._recording[0]:
|
||||
raise ValueError("Recording expired")
|
||||
self._recording[1].write(chunk)
|
||||
return True
|
||||
|
||||
def recording_end(self, token):
|
||||
with self._recording_lock:
|
||||
if not self._recording or token != self._recording[0]:
|
||||
return None
|
||||
_, handle, path = self._recording
|
||||
handle.close()
|
||||
self._recording = None
|
||||
return str(path)
|
||||
|
||||
def stop_controls(self, sequence=None):
|
||||
"""Invalidate queued input without claiming that the vehicle disarmed."""
|
||||
with self.lock:
|
||||
@@ -302,10 +502,48 @@ class ControlApi:
|
||||
return True
|
||||
|
||||
def set_gain(self, value):
|
||||
value = max(5, min(50, int(value)))
|
||||
value = max(0, min(100, int(value)))
|
||||
if self.motor_settings["independent"]:
|
||||
raise RuntimeError("Use per-motor scales while independent scaling is enabled")
|
||||
with self.worker.lock:
|
||||
self.worker.gain = value / 100.0
|
||||
return value
|
||||
|
||||
@staticmethod
|
||||
def _clean_motor_settings(settings):
|
||||
if not isinstance(settings, dict):
|
||||
raise ValueError("Motor settings must be an object")
|
||||
requested = settings.get("motors", {})
|
||||
if not isinstance(requested, dict):
|
||||
raise ValueError("Motor settings are invalid")
|
||||
motors = {}
|
||||
for motor in range(1, 13):
|
||||
entry = requested.get(str(motor), {})
|
||||
if not isinstance(entry, dict):
|
||||
entry = {}
|
||||
name = str(entry.get("name", f"Motor {motor}")).strip()[:24] or f"Motor {motor}"
|
||||
try:
|
||||
scale = max(0, min(100, int(entry.get("scale", 20))))
|
||||
except (TypeError, ValueError):
|
||||
scale = 20
|
||||
motors[str(motor)] = {"name": name, "scale": scale}
|
||||
return {"independent": bool(settings.get("independent", False)), "customized": bool(settings.get("customized", False)), "motors": motors}
|
||||
|
||||
def save_motor_settings(self, settings, persist=True):
|
||||
clean = self._clean_motor_settings(settings)
|
||||
if clean["independent"] != self.motor_settings["independent"]:
|
||||
self._require_settings()
|
||||
if clean["independent"] and self.worker.frame_type not in (None, 4):
|
||||
raise ValueError("Independent scales require SimpleROV 3")
|
||||
if persist:
|
||||
self.motor_settings_path.write_text(json.dumps(clean, indent=2) + "\n", encoding="utf-8")
|
||||
self.motor_settings = clean
|
||||
self.worker.set_motor_scaling(
|
||||
clean["independent"],
|
||||
{int(i): entry["scale"] for i, entry in clean["motors"].items()},
|
||||
)
|
||||
return clean
|
||||
|
||||
def command(self, name, sequence=None, expires_at=None):
|
||||
if self.demo_mode:
|
||||
if name not in ("manual", "arm", "disarm"):
|
||||
@@ -389,8 +627,38 @@ class ControlApi:
|
||||
raise ValueError("Full voltage per cell must be greater than empty voltage")
|
||||
if not 0 <= clean["warning_percent"] <= 100:
|
||||
raise ValueError("Warning percentage must be between 0 and 100")
|
||||
self.battery_config = clean
|
||||
self.battery_path.write_text(json.dumps(clean, indent=2) + "\n", encoding="utf-8")
|
||||
self.battery_config = clean
|
||||
return clean
|
||||
|
||||
def _apply_link_config(self):
|
||||
self.worker.rate_hz = self.link_config["control_hz"]
|
||||
self.worker.set_link_rates(self.link_config["ping_hz"], {
|
||||
"SYS_STATUS": self.link_config["system_hz"],
|
||||
"BATTERY_STATUS": self.link_config["battery_hz"],
|
||||
"SERVO_OUTPUT_RAW": self.link_config["servo_hz"],
|
||||
"RC_CHANNELS": self.link_config["rc_hz"],
|
||||
"ESC_TELEMETRY_1_TO_4": self.link_config["esc_hz"],
|
||||
"ATTITUDE": self.link_config["attitude_hz"],
|
||||
"GLOBAL_POSITION_INT": self.link_config["depth_hz"],
|
||||
"SCALED_IMU": self.link_config["imu_hz"],
|
||||
"SCALED_PRESSURE2": self.link_config["pressure_hz"],
|
||||
})
|
||||
|
||||
def save_link_settings(self, config):
|
||||
allowed = {0, 1, 2, 5, 10}
|
||||
clean = {key: int(config.get(key, value)) for key, value in self.link_config.items()}
|
||||
if clean["baud"] not in {9600, 19200, 38400, 57600, 115200}:
|
||||
raise ValueError("Choose a supported baud rate")
|
||||
if clean["control_hz"] not in {10, 20}:
|
||||
raise ValueError("Control rate must be 10 or 20 Hz")
|
||||
if clean["ping_hz"] not in {1, 2, 5, 10}:
|
||||
raise ValueError("Link test rate must be 1, 2, 5 or 10 Hz")
|
||||
if any(clean[key] not in allowed for key in ("system_hz", "battery_hz", "servo_hz", "rc_hz", "esc_hz", "attitude_hz", "depth_hz", "imu_hz", "pressure_hz")):
|
||||
raise ValueError("Telemetry rates must be Off, 1, 2, 5 or 10 Hz")
|
||||
self.link_path.write_text(json.dumps(clean, indent=2) + "\n", encoding="utf-8")
|
||||
self.link_config = clean
|
||||
self._apply_link_config()
|
||||
return clean
|
||||
|
||||
def open_logs(self):
|
||||
@@ -399,6 +667,10 @@ class ControlApi:
|
||||
os.startfile(path)
|
||||
return True
|
||||
|
||||
def read_console(self, limit=150):
|
||||
"""Return a bounded, read-only view of the local session console."""
|
||||
return self.worker.read_console(limit)
|
||||
|
||||
def poll(self):
|
||||
# Bound a poll even if telemetry arrives continuously.
|
||||
with self._poll_lock:
|
||||
@@ -431,6 +703,32 @@ class ControlApi:
|
||||
def _snapshot(self):
|
||||
with self.lock:
|
||||
snap = json.loads(json.dumps(self.state))
|
||||
snap["motor_settings"] = self.motor_settings
|
||||
snap["telemetry"] = self.telemetry.snapshot(bool(snap.get("connected")))
|
||||
if snap.get("battery") and not self.demo_mode:
|
||||
now = time.monotonic()
|
||||
snap["battery"]["current_stale"] = now - self.battery_fields_at.get("current_a", 0) > 5
|
||||
if snap["battery"]["current_stale"]:
|
||||
snap["battery"]["current_a"] = None
|
||||
for field in ("voltage", "per_cell", "consumed_mah", "remaining_percent"):
|
||||
key = "voltage" if field == "per_cell" else field
|
||||
if now - self.battery_fields_at.get(key, 0) > 5:
|
||||
snap["battery"][field] = None
|
||||
battery = snap["battery"]
|
||||
if battery.get("remaining_percent") is not None:
|
||||
battery["percent"] = battery["remaining_percent"]
|
||||
elif battery.get("per_cell") is not None:
|
||||
low, high = self.battery_config["empty_v_per_cell"], self.battery_config["full_v_per_cell"]
|
||||
battery["percent"] = max(0, min(100, (battery["per_cell"] - low) * 100 / (high - low)))
|
||||
battery["charge_source"] = "Voltage estimate"
|
||||
else:
|
||||
battery["percent"] = None
|
||||
capacity = self.battery_config["capacity_mah"]
|
||||
battery["remaining_mah"] = (max(0, capacity - battery["consumed_mah"]) if battery.get("consumed_mah") is not None else
|
||||
round(capacity * battery["remaining_percent"] / 100) if battery.get("remaining_percent") is not None else None)
|
||||
for accessory in snap["accessories"].values():
|
||||
if accessory.get("accepted") is None and time.monotonic() - accessory.get("at", 0) > 3:
|
||||
accessory["error"] = "No ACK"
|
||||
snap["app_state"] = self._derive_app_state()
|
||||
if not self.demo_mode:
|
||||
snap.update(self.vehicle_state.snapshot())
|
||||
@@ -446,6 +744,9 @@ class ControlApi:
|
||||
if kind == "heartbeat":
|
||||
_, system, autopilot, mode, armed = event[:5]
|
||||
self.vehicle_state.heartbeat(armed, event[5] if len(event) > 5 else None)
|
||||
if not armed and self.state.get("motor_test_active"):
|
||||
self.state["motor_test_active"] = False
|
||||
self.state["status"] = "Flight controller reports disarmed after motor test"
|
||||
self.state.update(
|
||||
connected=True, link="LINK OK", vehicle=f"{mode} • {'ARMED' if armed else 'DISARMED'}",
|
||||
armed=bool(armed),
|
||||
@@ -458,16 +759,36 @@ class ControlApi:
|
||||
self.vehicle_state.ack(event[2], event[3] if len(event) > 3 else None)
|
||||
self.state["status"] = f"Command {event[1]} ACK: {event[2]}"
|
||||
elif kind == "battery":
|
||||
self.battery_received_at = time.monotonic()
|
||||
voltage = float(event[1])
|
||||
cells = self.battery_config["cells"]
|
||||
per_cell = voltage / cells
|
||||
low, high = self.battery_config["empty_v_per_cell"], self.battery_config["full_v_per_cell"]
|
||||
percent = max(0, min(100, (per_cell - low) * 100 / (high - low)))
|
||||
self.state["battery"] = {
|
||||
"voltage": voltage, "per_cell": per_cell, "percent": percent,
|
||||
"cells": cells, "low": percent <= self.battery_config["warning_percent"],
|
||||
}
|
||||
self._consume_battery(event[1])
|
||||
elif kind == "capabilities":
|
||||
self.state["capabilities"].update(event[1])
|
||||
if event[1].get("frame", 4) != 4:
|
||||
self.motor_settings["independent"] = False
|
||||
self.worker.set_motor_scaling(False, {int(key): item["scale"] for key, item in self.motor_settings["motors"].items()})
|
||||
elif kind == "telemetry":
|
||||
self.telemetry.update(event[1], event[2], event[3])
|
||||
if self._sensor_writer:
|
||||
self._sensor_writer.writerows((event[3], event[1], key, value) for key, value in event[2].items())
|
||||
self._sensor_file.flush()
|
||||
elif kind == "accessory_ack":
|
||||
self.state["accessories"][event[1]] = {"requested": event[2], "accepted": event[3] == 0,
|
||||
"error": None if event[3] == 0 else "Rejected"}
|
||||
elif kind == "servo_output":
|
||||
for servo, output_us in event[1].items():
|
||||
if servo in self.state["servos"]:
|
||||
self.state["servos"][servo]["output_us"] = output_us
|
||||
elif kind == "motor_test_ack":
|
||||
self.state["status"] = "Motor test accepted by flight controller"
|
||||
elif kind == "motor_test_rejected":
|
||||
self.state["motor_test_active"] = False
|
||||
self.state["status"] = f"Motor test rejected: {event[1]}"
|
||||
elif kind == "motor_test_stopped":
|
||||
self.state["motor_test_active"] = False
|
||||
self.state["status"] = f"Motor test ended: {event[1]}"
|
||||
elif kind == "link_quality":
|
||||
self.state["link_quality"] = event[1]
|
||||
elif kind == "heavy_quality":
|
||||
self.state["heavy_quality"] = event[1]
|
||||
elif kind == "servo_param":
|
||||
_, param_id, value = event
|
||||
servo = int(param_id[5:param_id.index("_")])
|
||||
@@ -490,9 +811,71 @@ class ControlApi:
|
||||
last_err = self.state.get("last_error")
|
||||
status_msg = last_err if last_err else "Disconnected"
|
||||
self.state.update(connected=False, link="DISCONNECTED", vehicle="No heartbeat",
|
||||
mode=None, status=status_msg)
|
||||
mode=None, link_quality=None, status=status_msg, motor_test_active=False)
|
||||
self.state["last_error"] = None
|
||||
|
||||
def _consume_battery(self, data):
|
||||
self.battery_received_at = time.monotonic()
|
||||
now = self.battery_received_at
|
||||
previous = self.state.get("battery") or {}
|
||||
battery = dict(previous)
|
||||
battery["cells"] = self.battery_config["cells"]
|
||||
for field in ("voltage", "current_a", "consumed_mah", "remaining_percent"):
|
||||
if field in data:
|
||||
value = data[field]
|
||||
if isinstance(value, (float, int)) and math.isfinite(value) and value >= 0:
|
||||
self.battery_fields_at[field] = now
|
||||
else:
|
||||
battery[field] = None
|
||||
self.battery_fields_at.pop(field, None)
|
||||
voltage = data.get("voltage")
|
||||
if voltage is not None and float(voltage) > 0:
|
||||
battery["voltage"] = float(voltage)
|
||||
battery["per_cell"] = float(voltage) / self.battery_config["cells"]
|
||||
current = data.get("current_a")
|
||||
if current is not None and float(current) >= 0:
|
||||
current = float(current)
|
||||
if self.battery_last_current is not None and self.battery_last_current_at is not None:
|
||||
elapsed = now - self.battery_last_current_at
|
||||
if 0 < elapsed <= 10:
|
||||
average = (current + self.battery_last_current) / 2
|
||||
self.battery_session_consumed_mah += average * 1000 * elapsed / 3600
|
||||
self.battery_last_current = current
|
||||
self.battery_last_current_at = now
|
||||
battery["current_a"] = current
|
||||
elif "current_a" in data:
|
||||
self.battery_last_current = None
|
||||
self.battery_last_current_at = None
|
||||
consumed = data.get("consumed_mah")
|
||||
if consumed is not None and int(consumed) >= 0:
|
||||
battery["consumed_mah"] = int(consumed)
|
||||
battery["consumed_source"] = "Flight controller"
|
||||
elif self.battery_last_current is not None:
|
||||
battery["consumed_mah"] = round(self.battery_session_consumed_mah)
|
||||
battery["consumed_source"] = "Session estimate"
|
||||
self.battery_fields_at["consumed_mah"] = now
|
||||
remaining = data.get("remaining_percent")
|
||||
if remaining is not None and 0 <= int(remaining) <= 100:
|
||||
battery["remaining_percent"] = int(remaining)
|
||||
battery["charge_source"] = "Flight controller"
|
||||
capacity = self.battery_config["capacity_mah"]
|
||||
if battery.get("consumed_mah") is not None:
|
||||
battery["remaining_mah"] = max(0, capacity - battery["consumed_mah"])
|
||||
elif battery.get("remaining_percent") is not None:
|
||||
battery["remaining_mah"] = round(capacity * battery["remaining_percent"] / 100)
|
||||
if battery.get("remaining_percent") is not None:
|
||||
percent = battery["remaining_percent"]
|
||||
elif battery.get("per_cell") is not None:
|
||||
low = self.battery_config["empty_v_per_cell"]
|
||||
high = self.battery_config["full_v_per_cell"]
|
||||
percent = max(0, min(100, (battery["per_cell"] - low) * 100 / (high - low)))
|
||||
battery["charge_source"] = "Voltage estimate"
|
||||
else:
|
||||
percent = None
|
||||
battery["percent"] = percent
|
||||
battery["low"] = percent is not None and percent <= self.battery_config["warning_percent"]
|
||||
self.state["battery"] = battery
|
||||
|
||||
def _update_servo(self, servo):
|
||||
function = self.servo_functions.get(servo)
|
||||
motor = motor_number_for_function(function)
|
||||
@@ -501,9 +884,13 @@ class ControlApi:
|
||||
"label": MOTOR_FUNCTIONS.get(function, "Unassigned") if function is not None else "Waiting…",
|
||||
"motor": motor,
|
||||
"direction": self.motor_directions.get(motor) if motor else None,
|
||||
"output_us": (self.state["servos"].get(str(servo)) or {}).get("output_us"),
|
||||
}
|
||||
|
||||
def close(self):
|
||||
self.sensor_record(False)
|
||||
if self._recording:
|
||||
self.recording_end(self._recording[0])
|
||||
self.worker.disconnect()
|
||||
|
||||
|
||||
@@ -578,21 +965,26 @@ class AppHTTPHandler(http.server.SimpleHTTPRequestHandler):
|
||||
|
||||
def start_local_server(directory: Path) -> int:
|
||||
handler = lambda *args, **kwargs: AppHTTPHandler(*args, directory=str(directory), **kwargs)
|
||||
server = socketserver.TCPServer(("127.0.0.1", 0), handler)
|
||||
server = http.server.ThreadingHTTPServer(("127.0.0.1", 0), handler)
|
||||
port = server.server_address[1]
|
||||
threading.Thread(target=server.serve_forever, daemon=True).start()
|
||||
return port
|
||||
|
||||
|
||||
def main():
|
||||
if os.name == "nt":
|
||||
# Keep the running window separate from generic Python taskbar groups.
|
||||
import ctypes
|
||||
ctypes.windll.shell32.SetCurrentProcessExplicitAppUserModelID("SUBControl.Desktop")
|
||||
from desktop_shortcut import ensure_desktop_shortcut
|
||||
ensure_desktop_shortcut()
|
||||
api = ControlApi()
|
||||
api._migrate_legacy_model()
|
||||
project_root = Path(__file__).resolve().parent
|
||||
port = start_local_server(project_root)
|
||||
app_url = f"http://127.0.0.1:{port}/web/index.html?v={int(time.time())}"
|
||||
win_w, win_h, min_dims = _get_window_size()
|
||||
window = webview.create_window(
|
||||
"SUB Control", url=app_url, js_api=api,
|
||||
"Argo V2", url=app_url, js_api=api,
|
||||
width=win_w, height=win_h, min_size=min_dims,
|
||||
background_color="#111719", frameless=True, easy_drag=False,
|
||||
shadow=True,
|
||||
@@ -602,7 +994,8 @@ def main():
|
||||
window.events.maximized += lambda: setattr(api, "maximized", True)
|
||||
window.events.restored += lambda: setattr(api, "maximized", False)
|
||||
try:
|
||||
webview.start(debug=True)
|
||||
icon_path = project_root / "assets" / "sub-control.ico"
|
||||
webview.start(debug=os.environ.get("SUB_CONTROL_DEBUG") == "1", icon=str(icon_path) if icon_path.is_file() else None)
|
||||
finally:
|
||||
api.close()
|
||||
|
||||
|
||||
Reference in New Issue
Block a user