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

feat: WebUI map view (Issue #587) #591

Merged
sl-jetson merged 1 commits from sl-webui/issue-587-map-view into main 2026-03-14 13:32:50 -04:00
Conversation 0 Commits 1 Files Changed 3 +1019
sl-webui commented 2026-03-14 12:20:29 -04:00
Collaborator
Copy Link

Summary

Implements Issue #587 — interactive 2D map panel with UWB position and RPLIDAR scan overlay.

Files

  • ui/map_panel.html — layout, canvas, sidebar, toolbar
  • ui/map_panel.js — rosbridge subscriptions, canvas renderer, zoom/pan, anchor manager
  • ui/map_panel.css — dark-theme, responsive CSS grid

No build step. Serve ui/ directory directly.

Canvas Layers

Layer Source Style
Grid Generated 1m squares, dark blue lines
World origin Computed Axis cross lines
Scale bar Computed 1m ruler, bottom-right
LIDAR scan /scan LaserScan Green dots at range/angle around robot
Safety zone — danger 0.30m radius Red dashed ring
Safety zone — warn 1.00m radius Amber dashed ring
Breadcrumb trail /saltybot/pose/fused Fading cyan polyline, last 100 pts
UWB anchors User-configured Amber diamond markers + labels
Robot /saltybot/pose/fused Circle + forward arrow; red when e-stopped

Interactions

  • Mouse wheel — zoom centered on cursor position
  • Click + drag — pan (pointer capture API)
  • Pinch to zoom — two-finger touch
  • Auto-center toggle — keeps robot centered as it moves
  • +/−/Reset buttons — discrete zoom and view reset
  • Clear trail — wipes 100-pt breadcrumb history
  • Mouse hover — shows world coordinates (m) in bottom-left HUD

ROS Topics

Topic Type Throttle
/saltybot/pose/fused geometry_msgs/PoseStamped 50ms
/scan sensor_msgs/LaserScan 100ms + cbor
/saltybot/safety_zone/status std_msgs/String (JSON) 200ms

Sidebar

  • Robot x/y position (m), heading (°), trail point count
  • Safety zone: forward zone (CLEAR/WARN/DANGER), closest obstacle (m), e-stop flag
  • UWB anchor manager: add anchors with x/y/label; persisted in localStorage; removable
  • Topic reference

E-stop

Pulsing red banner overlaid on map when estop_active: true in /saltybot/safety_zone/status.

Test plan

  • Open ui/map_panel.html, connect to rosbridge
  • Robot marker appears and tracks /saltybot/pose/fused
  • Heading arrow rotates with robot yaw (quaternion → yaw)
  • LIDAR scan dots appear around robot matching scan geometry
  • Danger ring (0.30m) and warn ring (1.00m) move with robot
  • Safety zone status updates sidebar forward_zone + closest_obstacle
  • E-stop banner appears when estop_active: true
  • Breadcrumb trail grows to 100 points then rotates
  • Add UWB anchor via form — diamond marker appears on map
  • Remove anchor — marker disappears; anchors persist on reload
  • Mouse wheel zooms centered on cursor
  • Drag pans map; auto-center disables when panning
  • Auto-center button re-enables and snaps to robot
  • Pinch to zoom works on mobile touch
  • Mouse hover shows correct world coords (m)
  • Mobile: sidebar hidden, canvas fills full width

🤖 Generated with Claude Code

## Summary Implements Issue #587 — interactive 2D map panel with UWB position and RPLIDAR scan overlay. ### Files - `ui/map_panel.html` — layout, canvas, sidebar, toolbar - `ui/map_panel.js` — rosbridge subscriptions, canvas renderer, zoom/pan, anchor manager - `ui/map_panel.css` — dark-theme, responsive CSS grid No build step. Serve `ui/` directory directly. ### Canvas Layers | Layer | Source | Style | |---|---|---| | Grid | Generated | 1m squares, dark blue lines | | World origin | Computed | Axis cross lines | | Scale bar | Computed | 1m ruler, bottom-right | | LIDAR scan | `/scan` LaserScan | Green dots at range/angle around robot | | Safety zone — danger | 0.30m radius | Red dashed ring | | Safety zone — warn | 1.00m radius | Amber dashed ring | | Breadcrumb trail | `/saltybot/pose/fused` | Fading cyan polyline, last 100 pts | | UWB anchors | User-configured | Amber diamond markers + labels | | Robot | `/saltybot/pose/fused` | Circle + forward arrow; red when e-stopped | ### Interactions - **Mouse wheel** — zoom centered on cursor position - **Click + drag** — pan (pointer capture API) - **Pinch to zoom** — two-finger touch - **Auto-center toggle** — keeps robot centered as it moves - **+/−/Reset buttons** — discrete zoom and view reset - **Clear trail** — wipes 100-pt breadcrumb history - **Mouse hover** — shows world coordinates (m) in bottom-left HUD ### ROS Topics | Topic | Type | Throttle | |---|---|---| | `/saltybot/pose/fused` | `geometry_msgs/PoseStamped` | 50ms | | `/scan` | `sensor_msgs/LaserScan` | 100ms + cbor | | `/saltybot/safety_zone/status` | `std_msgs/String` (JSON) | 200ms | ### Sidebar - Robot x/y position (m), heading (°), trail point count - Safety zone: forward zone (CLEAR/WARN/DANGER), closest obstacle (m), e-stop flag - UWB anchor manager: add anchors with x/y/label; persisted in `localStorage`; removable - Topic reference ### E-stop Pulsing red banner overlaid on map when `estop_active: true` in `/saltybot/safety_zone/status`. ## Test plan - [ ] Open `ui/map_panel.html`, connect to rosbridge - [ ] Robot marker appears and tracks `/saltybot/pose/fused` - [ ] Heading arrow rotates with robot yaw (quaternion → yaw) - [ ] LIDAR scan dots appear around robot matching scan geometry - [ ] Danger ring (0.30m) and warn ring (1.00m) move with robot - [ ] Safety zone status updates sidebar forward_zone + closest_obstacle - [ ] E-stop banner appears when `estop_active: true` - [ ] Breadcrumb trail grows to 100 points then rotates - [ ] Add UWB anchor via form — diamond marker appears on map - [ ] Remove anchor — marker disappears; anchors persist on reload - [ ] Mouse wheel zooms centered on cursor - [ ] Drag pans map; auto-center disables when panning - [ ] Auto-center button re-enables and snaps to robot - [ ] Pinch to zoom works on mobile touch - [ ] Mouse hover shows correct world coords (m) - [ ] Mobile: sidebar hidden, canvas fills full width 🤖 Generated with Claude Code
sl-webui added 1 commit 2026-03-14 12:20:30 -04:00 
Standalone 3-file 2D map panel (ui/map_panel.{html,js,css}).
No build step. Open directly or serve ui/ directory.

Canvas layers (drawn every animation frame):
  - Grid lines (1m spacing) + world-origin axis cross + 1m scale bar
  - RPLIDAR scan dots (/scan, green, cbor-compressed, 100ms throttle)
  - Safety zone rings: danger 0.30m (red dashed) + warn 1.00m (amber dashed)
  - 100-position breadcrumb trail with fading cyan polyline + dots every 5 pts
  - UWB anchor markers (amber diamond + label, user-configured)
  - Robot marker: circle + forward arrow, red when e-stopped

Interactions:
  - Mouse wheel zoom (zooms around cursor)
  - Click+drag pan
  - Pinch-to-zoom (touch, two-finger)
  - Auto-center toggle (robot stays centered when on)
  - Zoom +/- buttons, Reset view button
  - Clear trail button
  - Mouse hover shows world coords (m) in bottom-left HUD

ROS topics:
  SUB /saltybot/pose/fused        geometry_msgs/PoseStamped   50ms throttle
  SUB /scan                       sensor_msgs/LaserScan       100ms + cbor
  SUB /saltybot/safety_zone/status std_msgs/String (JSON)     200ms throttle

Sidebar:
  - Robot position (x, y m) + heading (°)
  - Safety zone: forward zone (CLEAR/WARN/DANGER), closest obstacle (m), e-stop
  - UWB anchor manager: add/remove anchors with x/y/label, persisted localStorage
  - Topic reference

E-stop banner: pulsing red overlay when /saltybot/safety_zone/status estop_active=true

Mobile-responsive: sidebar hidden on <700px, canvas fills viewport.
WS URL persisted in localStorage.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
sl-jetson merged commit f2743198e5 into main 2026-03-14 13:32:50 -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#591
No description provided.
Delete Branch "sl-webui/issue-587-map-view"

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?