feat: modern web UI dashboard (#43) #47

sl-webui · 2026-02-28T22:52:00-05:00

sl-webui commented

2026-02-28 22:52:00 -05:00

Summary

Closes #43 — complete web UI overhaul for the SaltyBot WebSerial dashboard.

Layout

3-column grid: telemetry (left) · 3D viewport (center) · comms stats (right)
Bottom bar: ARM/DISARM · Gyro Cal · Yaw Reset · DFU · PID sliders · console log toggle
Tailwind CSS via CDN, dark/HUD aesthetic, responsive (laptop + tablet)

Left panel — Telemetry

Artificial horizon canvas (200×100): roll-stabilised sky/ground + pitch ladder
Compass tape canvas (200×70): scrolling cardinal + heading value
Pitch / Roll / Yaw numeric readouts
Motor bar: bidirectional from centre, colour-coded (forward=orange, reverse=blue)
Battery bar: voltage gauge (4S LiPo 12–16.8V), colour-coded green/amber/red
BME280 environment section (temp/humidity/pressure/altitude) — shown when data arrives

Center panel — 3D model

Three.js viewport resizes to fill column (ResizeObserver)
Wheel rolling animation driven by motor command
Existing SaltyBot model + lighting preserved

Right panel — Comms stats

RSSI / Link Quality (with colour bars)
RC stick visualisers for CH1–4 (µs) — 64×64 canvas each
CH1–4 raw µs values
Mode badge (MANUAL / ASSISTED / AUTO)
USB TX/RX packet counters
Jetson Orin status indicator

Bottom bar — Controls

ARM/DISARM · Gyro Cal · Yaw Reset · DFU
PID sliders: Kp / Ki / Kd / Setpoint° / Max-speed with live labels
APPLY → sends P/I/D/T/M commands; QUERY → sends ?
Collapsible serial console log (last 300 lines)

WebSerial

All existing connect/disconnect/JSON parse logic preserved
Handles data.md (mode), data.bat (battery), data.ch1–4 (RC), data.ja (Jetson alive), data.txc/rxc (USB counters)
PID query response handler (updatePID)

Note on PR #45

Branch sl-firmware/web-ui-overhaul (PR #45) is currently identical to main. If it lands first, this PR will rebase on top of it.

🤖 Generated with Claude Code

## Summary Closes #43 — complete web UI overhaul for the SaltyBot WebSerial dashboard. ### Layout - **3-column grid**: telemetry (left) · 3D viewport (center) · comms stats (right) - **Bottom bar**: ARM/DISARM · Gyro Cal · Yaw Reset · DFU · PID sliders · console log toggle - Tailwind CSS via CDN, dark/HUD aesthetic, responsive (laptop + tablet) ### Left panel — Telemetry - **Artificial horizon** canvas (200×100): roll-stabilised sky/ground + pitch ladder - **Compass tape** canvas (200×70): scrolling cardinal + heading value - Pitch / Roll / Yaw numeric readouts - **Motor bar**: bidirectional from centre, colour-coded (forward=orange, reverse=blue) - **Battery bar**: voltage gauge (4S LiPo 12–16.8V), colour-coded green/amber/red - BME280 environment section (temp/humidity/pressure/altitude) — shown when data arrives ### Center panel — 3D model - Three.js viewport resizes to fill column (ResizeObserver) - Wheel rolling animation driven by motor command - Existing SaltyBot model + lighting preserved ### Right panel — Comms stats - RSSI / Link Quality (with colour bars) - RC stick visualisers for CH1–4 (µs) — 64×64 canvas each - CH1–4 raw µs values - Mode badge (MANUAL / ASSISTED / AUTO) - USB TX/RX packet counters - Jetson Orin status indicator ### Bottom bar — Controls - ARM/DISARM · Gyro Cal · Yaw Reset · DFU - **PID sliders**: Kp / Ki / Kd / Setpoint° / Max-speed with live labels - APPLY → sends `P`/`I`/`D`/`T`/`M` commands; QUERY → sends `?` - Collapsible **serial console log** (last 300 lines) ### WebSerial - All existing connect/disconnect/JSON parse logic preserved - Handles `data.md` (mode), `data.bat` (battery), `data.ch1–4` (RC), `data.ja` (Jetson alive), `data.txc/rxc` (USB counters) - PID query response handler (`updatePID`) ### Note on PR #45 Branch `sl-firmware/web-ui-overhaul` (PR #45) is currently identical to `main`. If it lands first, this PR will rebase on top of it. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

sl-webui added 1 commit 2026-02-28 22:52:01 -05:00

feat: modern HUD dashboard + telemetry expansion (#43 ) 6dc7aea32f

ui/index.html — full dashboard rewrite:
- 3-column layout: LEFT telemetry gauges, CENTER 3D SaltyBot, RIGHT comms
- LEFT: artificial horizon (canvas, pitch/roll/ladder/roll-arc), yaw compass
  tape, pitch/roll/yaw readouts, bidirectional motor bar, battery bar, BME280
  environment section (auto-shows on data), MAG heading row
- CENTER: Three.js SaltyBot model (PR#41) with ground plane + animated
  wheel rolling proportional to motor_cmd
- RIGHT: USB tx/rx packet counters, mode badge (MANUAL/ASSISTED/AUTO),
  CRSF RSSI/LQ, dual RC stick overlay canvases (CH1–4), Jetson active dot
- BOTTOM: KP/KI/KD/SP/MAX sliders with APPLY + QUERY, collapsible log console
- Style: Tailwind CSS CDN, dark cyberpunk theme, neon cyan + orange accents

src/main.c — telemetry JSON additions:
- buf: 256 → 320 bytes (headroom for new fields)
- ja: Jetson active flag (0/1) via jetson_cmd_is_active()
- txc: TX telemetry frame counter (uint32, main-loop local)
- rxc: RX CDC packet counter (cdc_rx_count from usbd_cdc_if)
- ch1–ch4: CRSF channels mapped to µs (1000–2000) via crsf_to_range(),
  appended alongside rssi/lq when RC is alive

lib/USB_CDC/src/usbd_cdc_if.c:
- cdc_rx_count: volatile uint32_t, incremented in CDC_Receive on every
  packet; extern'd in main.c for telemetry

Closes #43.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

seb closed this pull request

2026-02-28 22:58:37 -05:00

Pull request closed

Please reopen this pull request to perform a merge.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: seb/saltylab-firmware#47