feat(ui): telemetry dashboard panels (issue #126) #130

sl-webui · 2026-03-02T09:19:10-05:00

sl-webui commented

2026-03-02 09:19:10 -05:00

Summary

Extends the social-bot dashboard (PR #112) with 6 telemetry tabs. Builds on the same React + Vite + TailwindCSS stack and shared rosbridge WebSocket.

IMU: Canvas artificial horizon + compass tape; Three.js 3D robot orientation cube (quaternion SLERP smoothing); angular velocity readouts; balance state detail from /saltybot/balance_state
Battery: Voltage, SoC estimate, current (with rough motor-proxy fallback), runtime estimate; 2-min voltage history sparkline from /diagnostics battery_voltage_v KeyValue
Motors: Auto-detects balance (2WD) vs rover (4WD) mode; bidirectional duty bars for left/right; motor temp from /diagnostics; PID detail for balance, channel PWM for rover
Map: OccupancyGrid canvas renderer (unknown/free/occupied colour-coded); robot dot + heading arrow from /odom; Nav2/OSM path overlay (dashed amber) from /outdoor/route; mouse/touch pan + zoom; 2 m scale bar
Control Mode: RC / RAMP_TO_AUTO / AUTO / RAMP_TO_RC state badge with blend-alpha bar; SLAM ok / RC link / stick-override safety flags from /saltybot/control_mode; state machine reference
System Health: CPU + GPU temperature gauges; RAM / GPU memory / disk resource bars; ROS2 node status list sorted by severity from /diagnostics

Bundle splitting

Three.js vendor chunk: 471 kB (117 kB gzip, loads lazily on IMU tab)
roslib vendor chunk: 62 kB
React vendor chunk: 141 kB
App chunk: 64 kB

Test plan

npm run build passes without errors
IMU horizon/compass animate when /saltybot/imu publishes
Three.js cube rotates with live quaternion
Battery sparkline accumulates on tab open
Motor bars reflect balance_state motor_cmd live
Map renders OccupancyGrid; robot dot moves with /odom
Control mode badge and blend-alpha bar update
System health shows diagnostics node statuses sorted by severity
Mobile layout at 375 px width: all tabs scroll correctly

🤖 Generated with Claude Code

## Summary Extends the social-bot dashboard (PR #112) with 6 telemetry tabs. Builds on the same React + Vite + TailwindCSS stack and shared rosbridge WebSocket. - **IMU**: Canvas artificial horizon + compass tape; Three.js 3D robot orientation cube (quaternion SLERP smoothing); angular velocity readouts; balance state detail from `/saltybot/balance_state` - **Battery**: Voltage, SoC estimate, current (with rough motor-proxy fallback), runtime estimate; 2-min voltage history sparkline from `/diagnostics` `battery_voltage_v` KeyValue - **Motors**: Auto-detects balance (2WD) vs rover (4WD) mode; bidirectional duty bars for left/right; motor temp from `/diagnostics`; PID detail for balance, channel PWM for rover - **Map**: OccupancyGrid canvas renderer (unknown/free/occupied colour-coded); robot dot + heading arrow from `/odom`; Nav2/OSM path overlay (dashed amber) from `/outdoor/route`; mouse/touch pan + zoom; 2 m scale bar - **Control Mode**: RC / RAMP_TO_AUTO / AUTO / RAMP_TO_RC state badge with blend-alpha bar; SLAM ok / RC link / stick-override safety flags from `/saltybot/control_mode`; state machine reference - **System Health**: CPU + GPU temperature gauges; RAM / GPU memory / disk resource bars; ROS2 node status list sorted by severity from `/diagnostics` ### Bundle splitting - Three.js vendor chunk: 471 kB (117 kB gzip, loads lazily on IMU tab) - roslib vendor chunk: 62 kB - React vendor chunk: 141 kB - App chunk: 64 kB ## Test plan - [ ] `npm run build` passes without errors - [ ] IMU horizon/compass animate when `/saltybot/imu` publishes - [ ] Three.js cube rotates with live quaternion - [ ] Battery sparkline accumulates on tab open - [ ] Motor bars reflect balance_state motor_cmd live - [ ] Map renders OccupancyGrid; robot dot moves with /odom - [ ] Control mode badge and blend-alpha bar update - [ ] System health shows diagnostics node statuses sorted by severity - [ ] Mobile layout at 375 px width: all tabs scroll correctly 🤖 Generated with [Claude Code](https://claude.com/claude-code)

sl-webui added 1 commit 2026-03-02 09:19:11 -05:00

feat(ui): telemetry dashboard panels (issue #126 ) 78374668bf

Adds 6 telemetry tabs to the social-bot dashboard extending PR #112.

IMU Panel (/saltybot/imu, /saltybot/balance_state):
  - Canvas artificial horizon + compass tape
  - Three.js 3D robot orientation cube with quaternion SLERP
  - Angular velocity readouts, balance state detail

Battery Panel (/diagnostics):
  - Voltage, SoC, estimated current, runtime estimate
  - 120-point voltage history sparkline (2 min)
  - Reads battery_voltage_v, battery_soc_pct KeyValues from DiagnosticArray

Motor Panel (/saltybot/balance_state, /saltybot/rover_pwm):
  - Auto-detects balance vs rover mode
  - Bidirectional duty bars for left/right motors
  - Motor temp from /diagnostics, PID detail for balance bot

Map Viewer (/map, /odom, /outdoor/route):
  - OccupancyGrid canvas renderer (unknown/free/occupied colour-coded)
  - Robot position + heading arrow, Nav2/OSM path overlay (dashed)
  - Pan (mouse/touch) + zoom, 2 m scale bar

Control Mode (/saltybot/control_mode):
  - RC / RAMP_TO_AUTO / AUTO / RAMP_TO_RC state badge
  - Blend alpha progress bar
  - Safety flags: SLAM ok, RC link ok, stick override active
  - State machine diagram

System Health (/diagnostics):
  - CPU/GPU temperature gauges with colour-coded bars
  - RAM, GPU memory, disk resource bars
  - ROS2 node status list sorted by severity (ERROR → WARN → OK)

Also:
  - Three.js vendor chunk split (471 kB separate lazy chunk)
  - Updated App.jsx with grouped SOCIAL + TELEMETRY tab nav

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

sl-jetson merged commit 8f0cb8025b into main

2026-03-02 09:26:35 -05:00

sl-jetson referenced this issue from a commit

2026-03-02 09:26:36 -05:00

Merge pull request 'feat(ui): telemetry dashboard panels (issue #126)' (#130) from sl-webui/issue-126-telemetry-dash into main

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: seb/saltylab-firmware#130