Web UI overhaul — modern dashboard with gauges, telemetry, RC overlay #43

New Issue

seb · 2026-02-28T22:09:16-05:00

seb commented

2026-02-28 22:09:16 -05:00

Request

The current web UI is functional but looks like a debug terminal. Needs a full redesign — modern, polished, readable at a glance.

@max — please create beads for the team to address this. Can be split across multiple agents (UI/frontend work).

Dashboard Layout

Left Panel — Gauges & Telemetry

Attitude gauges: Artificial horizon (pitch+roll), compass (yaw) — styled like aircraft instruments or modern car gauges
Motor output: Dual bar gauge (left/right wheel), -100% to +100%, color-coded (green=forward, red=reverse)
Battery: Voltage gauge with color zones (green/yellow/red), numeric voltage + percentage
Power: Current draw (amps) and wattage, real-time
Temperature: From BME280 — ambient temp gauge
Pressure/Humidity: Small readouts from BME280
Speed: Estimated ground speed (from motor RPM or IMU integration)

Center — 3D Model (existing, keep)

The SaltyBot 3D model stays, but:
- Better lighting/materials (match the artist render — matte black, orange accents)
- Ground plane with grid
- LED ring on model should match state color
- Wheels should spin based on motor command

Right Panel — Communication Stats

USB: RX/TX bytes per second, packet count, error count, connection uptime
RC (CRSF/ELRS): Link quality, RSSI, frame rate, failsafe status
RC Sticks overlay: Visual representation of CH1-CH4 stick positions (two crosshair widgets like transmitter gimbals)
Mode indicator: RC_MANUAL / RC_ASSISTED / AUTONOMOUS with icon
Jetson link: Heartbeat status, last command, latency

Bottom Bar — Controls

Keep existing buttons (Connect, ARM, DFU, Yaw Reset, Gyro Cal)
Add: Mode select dropdown, PID tuning sliders, speed limit slider
Status log/console (collapsible) — last 20 messages

Design Guidelines

Dark theme (current dark bg is fine)
Use CSS Grid or Flexbox for responsive layout
Gauges: consider a library like gauge.js, svg-gauge, or custom SVG/Canvas
Smooth animations (CSS transitions, requestAnimationFrame)
Color scheme: match SaltyLab brand — matte black, orange/amber accents, cyan highlights
Mobile-friendly is a bonus but desktop-first

Firmware Requirements

Some telemetry not yet in the JSON stream — will need firmware updates:

Battery voltage (v field — ADC on PC1)
Current draw (a field — ADC on PC3)
CRSF link quality + RSSI (lq, rssi fields)
RC channel values (ch1-ch6 fields)
Packet counter (seq field)

These should be separate issues/beads for firmware team.

## Request The current web UI is functional but looks like a debug terminal. Needs a full redesign — modern, polished, readable at a glance. @max — please create beads for the team to address this. Can be split across multiple agents (UI/frontend work). ## Dashboard Layout ### Left Panel — Gauges & Telemetry - **Attitude gauges:** Artificial horizon (pitch+roll), compass (yaw) — styled like aircraft instruments or modern car gauges - **Motor output:** Dual bar gauge (left/right wheel), -100% to +100%, color-coded (green=forward, red=reverse) - **Battery:** Voltage gauge with color zones (green/yellow/red), numeric voltage + percentage - **Power:** Current draw (amps) and wattage, real-time - **Temperature:** From BME280 — ambient temp gauge - **Pressure/Humidity:** Small readouts from BME280 - **Speed:** Estimated ground speed (from motor RPM or IMU integration) ### Center — 3D Model (existing, keep) - The SaltyBot 3D model stays, but: - Better lighting/materials (match the artist render — matte black, orange accents) - Ground plane with grid - LED ring on model should match state color - Wheels should spin based on motor command ### Right Panel — Communication Stats - **USB:** RX/TX bytes per second, packet count, error count, connection uptime - **RC (CRSF/ELRS):** Link quality, RSSI, frame rate, failsafe status - **RC Sticks overlay:** Visual representation of CH1-CH4 stick positions (two crosshair widgets like transmitter gimbals) - **Mode indicator:** RC_MANUAL / RC_ASSISTED / AUTONOMOUS with icon - **Jetson link:** Heartbeat status, last command, latency ### Bottom Bar — Controls - Keep existing buttons (Connect, ARM, DFU, Yaw Reset, Gyro Cal) - Add: Mode select dropdown, PID tuning sliders, speed limit slider - Status log/console (collapsible) — last 20 messages ## Design Guidelines - Dark theme (current dark bg is fine) - Use CSS Grid or Flexbox for responsive layout - Gauges: consider a library like `gauge.js`, `svg-gauge`, or custom SVG/Canvas - Smooth animations (CSS transitions, requestAnimationFrame) - Color scheme: match SaltyLab brand — matte black, orange/amber accents, cyan highlights - Mobile-friendly is a bonus but desktop-first ## Firmware Requirements Some telemetry not yet in the JSON stream — will need firmware updates: - Battery voltage (`v` field — ADC on PC1) - Current draw (`a` field — ADC on PC3) - CRSF link quality + RSSI (`lq`, `rssi` fields) - RC channel values (`ch1`-`ch6` fields) - Packet counter (`seq` field) These should be separate issues/beads for firmware team.

seb commented

2026-02-28 22:12:03 -05:00

Design directive from Tee: Use Tailwind CSS with a futuristic robotic theme.

Think:

Dark slate/charcoal background with subtle grid lines
Neon cyan + orange accents (matching SaltyLab brand)
Glowing borders on panels, frosted glass effect (backdrop-blur)
Monospace/tech fonts (JetBrains Mono, Space Grotesk, or Orbitron for headers)
Gauges with glow effects (box-shadow, SVG filters)
Smooth micro-animations on data updates
HUD/cockpit feel — like piloting a mech, not reading a spreadsheet

Reference vibes: Cyberpunk 2077 UI, Iron Man HUD, Tesla vehicle dashboard, Betaflight Configurator dark mode

Use Tailwind CDN (<script src="https://cdn.tailwindcss.com">) — single HTML file, no build step needed.

**Design directive from Tee:** Use **Tailwind CSS** with a futuristic robotic theme. Think: - Dark slate/charcoal background with subtle grid lines - Neon cyan + orange accents (matching SaltyLab brand) - Glowing borders on panels, frosted glass effect (backdrop-blur) - Monospace/tech fonts (JetBrains Mono, Space Grotesk, or Orbitron for headers) - Gauges with glow effects (box-shadow, SVG filters) - Smooth micro-animations on data updates - HUD/cockpit feel — like piloting a mech, not reading a spreadsheet Reference vibes: Cyberpunk 2077 UI, Iron Man HUD, Tesla vehicle dashboard, Betaflight Configurator dark mode Use Tailwind CDN (`<script src="https://cdn.tailwindcss.com">`) — single HTML file, no build step needed.

sl-firmware referenced a pull request that will close this issue

2026-02-28 22:41:20 -05:00

feat: Web UI overhaul — modern HUD dashboard (#43) #45

sl-webui referenced this issue from a commit

2026-02-28 22:50:29 -05:00

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

sl-webui referenced a pull request that will close this issue

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

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

seb closed this issue

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

seb referenced this issue from a commit