seb/saltylab-firmware
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

feat: WebUI diagnostics dashboard (Issue #562) #567

Merged
sl-jetson merged 1 commits from sl-webui/issue-562-diagnostics into main 2026-03-14 11:49:40 -04:00
Conversation 0 Commits 1 Files Changed 3 +1089
sl-webui commented 2026-03-14 11:42:00 -04:00
Collaborator
Copy Link

Summary

Implements Issue #562 — standalone system diagnostics dashboard for the Saltybot WebUI.

Files

  • ui/diagnostics_panel.html — markup, all panels
  • ui/diagnostics_panel.js — rosbridge subscriptions, state machine, render loop
  • ui/diagnostics_panel.css — responsive dark-theme layout (CSS grid)

No build step. Open ui/diagnostics_panel.html directly or serve ui/ with any static server.

Panels

Panel Metrics Thresholds
Battery Voltage (V), SOC (%), Current (A), 2-min sparkline warn ≤13.6V / crit ≤13.0V
Temperatures CPU, GPU (Jetson), Board/STM32, Motor L/R warn 75°C / crit 90°C
Motor Current Per-wheel current gauge, CMD value, balance_state warn 8A / crit 12A
Resources RAM, GPU memory, Disk (used/total + bar) warn 80% / crit 95%
Network WiFi RSSI bars (5-level), latency (ms), MQTT broker status rssi warn -70dBm
Node Health Full DiagnosticArray — OK/WARN/ERROR/STALE per node per-node level

Features

  • Auto 2 Hz — rosbridge subscriptions with throttle_rate: 500ms, pulsing dot indicator
  • System status bar — HEALTHY/DEGRADED/FAULT/STALE + per-section badges
  • Alert thresholds — red/amber/green for every metric with smooth transitions
  • Battery sparkline — canvas history graph, last 120 samples (~2 min at 1 Hz)
  • Responsive — 3-col → 2-col → 1-col CSS grid via media queries
  • WS URL persisted in localStorage

ROS Topics

Topic Type Usage
/diagnostics diagnostic_msgs/DiagnosticArray All metrics (KeyValues + node status)
/saltybot/balance_state std_msgs/String (JSON) Motor cmd + robot state

Test plan

  • Open ui/diagnostics_panel.html, connect to rosbridge
  • Battery section updates with voltage/SOC/current from /diagnostics
  • Sparkline draws voltage history over time
  • Temp boxes color correctly at each threshold level
  • Motor current bars scale with actual current draw
  • RAM/Disk bars fill proportionally
  • RSSI bars update with wifi_rssi_dbm KeyValue
  • Node list shows OK/WARN/ERROR/STALE per diagnostic status
  • System badge changes to DEGRADED/FAULT when any node reports errors
  • Refresh dot pulses every update cycle
  • Mobile layout collapses to 1-column

🤖 Generated with Claude Code

## Summary Implements Issue #562 — standalone system diagnostics dashboard for the Saltybot WebUI. ### Files - `ui/diagnostics_panel.html` — markup, all panels - `ui/diagnostics_panel.js` — rosbridge subscriptions, state machine, render loop - `ui/diagnostics_panel.css` — responsive dark-theme layout (CSS grid) No build step. Open `ui/diagnostics_panel.html` directly or serve `ui/` with any static server. ### Panels | Panel | Metrics | Thresholds | |---|---|---| | **Battery** | Voltage (V), SOC (%), Current (A), 2-min sparkline | warn ≤13.6V / crit ≤13.0V | | **Temperatures** | CPU, GPU (Jetson), Board/STM32, Motor L/R | warn 75°C / crit 90°C | | **Motor Current** | Per-wheel current gauge, CMD value, balance_state | warn 8A / crit 12A | | **Resources** | RAM, GPU memory, Disk (used/total + bar) | warn 80% / crit 95% | | **Network** | WiFi RSSI bars (5-level), latency (ms), MQTT broker status | rssi warn -70dBm | | **Node Health** | Full DiagnosticArray — OK/WARN/ERROR/STALE per node | per-node level | ### Features - **Auto 2 Hz** — rosbridge subscriptions with `throttle_rate: 500ms`, pulsing dot indicator - **System status bar** — HEALTHY/DEGRADED/FAULT/STALE + per-section badges - **Alert thresholds** — red/amber/green for every metric with smooth transitions - **Battery sparkline** — canvas history graph, last 120 samples (~2 min at 1 Hz) - **Responsive** — 3-col → 2-col → 1-col CSS grid via media queries - **WS URL** persisted in `localStorage` ### ROS Topics | Topic | Type | Usage | |---|---|---| | `/diagnostics` | `diagnostic_msgs/DiagnosticArray` | All metrics (KeyValues + node status) | | `/saltybot/balance_state` | `std_msgs/String` (JSON) | Motor cmd + robot state | ## Test plan - [ ] Open `ui/diagnostics_panel.html`, connect to rosbridge - [ ] Battery section updates with voltage/SOC/current from /diagnostics - [ ] Sparkline draws voltage history over time - [ ] Temp boxes color correctly at each threshold level - [ ] Motor current bars scale with actual current draw - [ ] RAM/Disk bars fill proportionally - [ ] RSSI bars update with wifi_rssi_dbm KeyValue - [ ] Node list shows OK/WARN/ERROR/STALE per diagnostic status - [ ] System badge changes to DEGRADED/FAULT when any node reports errors - [ ] Refresh dot pulses every update cycle - [ ] Mobile layout collapses to 1-column 🤖 Generated with Claude Code
sl-webui added 1 commit 2026-03-14 11:42:01 -04:00 
Standalone 3-file diagnostics dashboard (ui/diagnostics_panel.{html,js,css}).
No build step — serve the ui/ directory directly. roslib.js via CDN.

Panels:
- Battery: voltage (V), SOC (%), current (A) with large readouts + gauge bars
  + 2-minute sparkline history canvas, 4S LiPo thresholds
- Temperatures: CPU/GPU (Jetson tegrastats) + Board/STM32 + Motor L/R
  color-coded temp boxes with mini progress bars (green<60 amber<75 red>75°C)
- Motor current: per-wheel current gauge bars + CMD value + balance_state label
  Thresholds: warn 8A / crit 12A
- Resources: RAM / GPU memory / Disk — gauge bars with used/total display
  Thresholds: warn 80% / crit 95%
- WiFi / Network: RSSI signal bars (5-level) + dBm readout + latency (ms)
  MQTT broker status via mqtt_connected KeyValue
- ROS2 node health: full DiagnosticArray node list with OK/WARN/ERROR/STALE
  badges, per-node message preview, MutationObserver count badge

Features:
- Auto 2 Hz refresh via rosbridge subscriptions (throttle_rate: 500ms)
- Pulsing refresh indicator dot on each update
- System status bar: HEALTHY/DEGRADED/FAULT/STALE badge + battery/thermal/net
- Alert thresholds: red/amber/green for every metric
- Responsive CSS grid: 3-col → 2-col → 1-col via media queries
- WS URL persisted in localStorage

ROS topics:
  SUB /diagnostics              diagnostic_msgs/DiagnosticArray
  SUB /saltybot/balance_state   std_msgs/String (JSON)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
sl-jetson merged commit 4116232b27 into main 2026-03-14 11:49:40 -04:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
shaytac sl-controls sl-firmware sl-jetson sl-mechanical sl-perception sl-uwb sl-webui seb
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: seb/saltylab-firmware#567
No description provided.
Delete Branch "sl-webui/issue-562-diagnostics"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?