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

feat: WebUI event log panel (Issue #576) #579

Merged
sl-jetson merged 1 commits from sl-webui/issue-576-event-log into main 2026-03-14 12:13:57 -04:00
Conversation 0 Commits 1 Files Changed 3 +685
sl-webui commented 2026-03-14 11:54:36 -04:00
Collaborator
Copy Link

Summary

Implements Issue #576 — standalone filterable real-time event log panel.

Files

  • ui/event_log_panel.html — layout, toolbar, severity buttons, empty state
  • ui/event_log_panel.js — rosbridge subscriptions, ring buffer, render engine
  • ui/event_log_panel.css — dark-theme, responsive CSS layout

No build step. Serve ui/ directory with any static server or open directly.

Features

Feature Details
Ring buffer 1000 entries max; oldest dropped when full
Topics /rosout (rcl_interfaces/msg/Log) + /saltybot/events (std_msgs/String JSON)
Severity filters DEBUG / INFO / WARN / ERROR / FATAL / EVENT — toggle each on/off
Node filter Select dropdown auto-populated from seen node names
Text search Live filtering with <mark> highlight; Ctrl+F shortcut; Esc to clear
Auto-scroll Scrolls to latest entry; pauses on hover (messages still buffered)
Scroll detection User scrolling up stops auto-scroll; reaching bottom resumes
Pause/Resume Explicit button to lock scroll position
CSV export Exports current filtered view; filename includes ISO timestamp
Clear Clears ring buffer + resets node dropdown
System entries Connect/disconnect events shown as [system] entries
Colors Left border stripe + text color per severity level
Columns Timestamp (ms precision) · Severity · Node · Message
Responsive Node column hidden on narrow screens (≤640px)
Persistence WS URL saved in localStorage

ROS Topics

Topic Type Notes
/rosout rcl_interfaces/msg/Log All ROS2 nodes; level byte 10/20/30/40/50
/saltybot/events std_msgs/String JSON {level, node, msg} or raw string

Test plan

  • Open ui/event_log_panel.html, connect to rosbridge
  • /rosout messages appear with correct severity color and node name
  • /saltybot/events JSON messages appear as EVENT level
  • Toggle DEBUG off — debug entries disappear from view (not lost)
  • Toggle back on — reappear
  • Node dropdown populated after first message from each node
  • Select node — only that node's entries shown
  • Text search filters entries and highlights match in yellow
  • Ctrl+F focuses search input
  • Auto-scroll follows new entries; pauses on mouse hover
  • Scroll up manually — auto-scroll stops; scroll to bottom — resumes
  • Pause button freezes scroll position
  • CSV export downloads file with correct columns
  • Clear empties feed and resets node dropdown
  • Mobile: node column hidden, layout intact
  • WS URL remembered on page reload

🤖 Generated with Claude Code

## Summary Implements Issue #576 — standalone filterable real-time event log panel. ### Files - `ui/event_log_panel.html` — layout, toolbar, severity buttons, empty state - `ui/event_log_panel.js` — rosbridge subscriptions, ring buffer, render engine - `ui/event_log_panel.css` — dark-theme, responsive CSS layout No build step. Serve `ui/` directory with any static server or open directly. ### Features | Feature | Details | |---|---| | **Ring buffer** | 1000 entries max; oldest dropped when full | | **Topics** | `/rosout` (rcl_interfaces/msg/Log) + `/saltybot/events` (std_msgs/String JSON) | | **Severity filters** | DEBUG / INFO / WARN / ERROR / FATAL / EVENT — toggle each on/off | | **Node filter** | Select dropdown auto-populated from seen node names | | **Text search** | Live filtering with `<mark>` highlight; Ctrl+F shortcut; Esc to clear | | **Auto-scroll** | Scrolls to latest entry; pauses on hover (messages still buffered) | | **Scroll detection** | User scrolling up stops auto-scroll; reaching bottom resumes | | **Pause/Resume** | Explicit button to lock scroll position | | **CSV export** | Exports current filtered view; filename includes ISO timestamp | | **Clear** | Clears ring buffer + resets node dropdown | | **System entries** | Connect/disconnect events shown as `[system]` entries | | **Colors** | Left border stripe + text color per severity level | | **Columns** | Timestamp (ms precision) · Severity · Node · Message | | **Responsive** | Node column hidden on narrow screens (≤640px) | | **Persistence** | WS URL saved in `localStorage` | ### ROS Topics | Topic | Type | Notes | |---|---|---| | `/rosout` | `rcl_interfaces/msg/Log` | All ROS2 nodes; level byte 10/20/30/40/50 | | `/saltybot/events` | `std_msgs/String` | JSON `{level, node, msg}` or raw string | ## Test plan - [ ] Open `ui/event_log_panel.html`, connect to rosbridge - [ ] `/rosout` messages appear with correct severity color and node name - [ ] `/saltybot/events` JSON messages appear as EVENT level - [ ] Toggle DEBUG off — debug entries disappear from view (not lost) - [ ] Toggle back on — reappear - [ ] Node dropdown populated after first message from each node - [ ] Select node — only that node's entries shown - [ ] Text search filters entries and highlights match in yellow - [ ] Ctrl+F focuses search input - [ ] Auto-scroll follows new entries; pauses on mouse hover - [ ] Scroll up manually — auto-scroll stops; scroll to bottom — resumes - [ ] Pause button freezes scroll position - [ ] CSV export downloads file with correct columns - [ ] Clear empties feed and resets node dropdown - [ ] Mobile: node column hidden, layout intact - [ ] WS URL remembered on page reload 🤖 Generated with Claude Code
sl-webui added 1 commit 2026-03-14 11:54:37 -04:00 
Standalone 3-file filterable real-time event log (no build step).

Files:
  ui/event_log_panel.html  — layout, toolbar, empty state
  ui/event_log_panel.js    — rosbridge subscriptions, ring buffer, render
  ui/event_log_panel.css   — dark-theme, responsive grid layout

Features:
- 1000-entry ring buffer (oldest dropped when full, FIFO)
- Subscribes /rosout (rcl_interfaces/msg/Log) + /saltybot/events (std_msgs/String JSON)
- Severity filter buttons: DEBUG / INFO / WARN / ERROR / FATAL / EVENT (toggle on/off)
- Node name filter: select dropdown populated from seen nodes
- Live text search with <mark> highlight, Ctrl+F shortcut, Esc to clear
- Auto-scroll to latest entry; pauses on mouse hover (messages still buffered)
- Manual pause/resume button; detects user scroll-up and stops auto-scroll
- CSV export of current filtered view with timestamp (filename includes ISO date)
- Clear all entries button
- Color-coded by severity: left border stripe + text color per level
- Entry columns: timestamp (ms precision) | severity | node | message
- [system] entries for connect/disconnect events
- WS URL persisted in localStorage
- Responsive: node column hidden on narrow screens

ROS topics:
  SUB /rosout               rcl_interfaces/msg/Log  (all nodes)
  SUB /saltybot/events      std_msgs/String (JSON: {level,node,msg})

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
sl-jetson merged commit 5a3f4d1df6 into main 2026-03-14 12:13:57 -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#579
No description provided.
Delete Branch "sl-webui/issue-576-event-log"

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?