system_webview

A real-time system monitoring dashboard for ROS 2. It provides a web-based UI that displays live CPU, memory, network bandwidth, USB bus utilization, and load average statistics, a scrollable /rosout log viewer, and interactive node and topic browsers — all served from a single ROS 2 node.

Features

Resource Monitor

Log Viewer

Node Viewer

Topic Viewer

Enabling Real-Time USB Monitoring

By default, the dashboard shows claimed USB bandwidth based on device speeds. For actual real-time USB traffic monitoring (useful for detecting camera saturation), enable usbmon:

# Load the usbmon kernel module
sudo modprobe usbmon

# Mount debugfs (skip if already mounted)
mountpoint -q /sys/kernel/debug || sudo mount -t debugfs none /sys/kernel/debug

# Verify usbmon is available
sudo ls /sys/kernel/debug/usb/usbmon/

When usbmon is available and the process has read access, USB bus cards will show a “📊 Live” badge with actual bandwidth usage. Without it, only claimed bandwidth is displayed.

Note: The http_server process needs read access to /sys/kernel/debug/usb/usbmon/0u. Run with sudo or adjust permissions as needed.

Architecture

flowchart TB
    subgraph Browser["Browser (http://hostname:2525)"]
        direction LR
        Stats["System Stats<br/>(polls /api/system)"]
        Logs["/rosout Log Viewer<br/>(WebSocket → rosbridge :9090)"]
    end

    subgraph Backend
        direction LR
        HTTP["http_server<br/>(C++ node)<br/>:2525"]
        ROS["rosbridge_server<br/>(WebSocket node)<br/>:9090"]
    end

    subgraph System
        direction LR
        Proc["/proc/stat<br/>/proc/meminfo<br/>/proc/loadavg"]
        Graph["ROS 2 graph"]
    end

    Stats -->|HTTP GET| HTTP
    Logs -->|ws://| ROS
    HTTP --> Proc
    ROS --> Graph

Prerequisites

• ROS 2 (Humble, Iron, or Jazzy)
• colcon build tool
• Node.js ≥ 18 and npm (used at build time to compile the frontend)
• cpp-httplib development headers

Install system dependencies (Ubuntu)

sudo apt update
sudo apt install ros-${ROS_DISTRO}-rosbridge-server libcpp-httplib-dev nodejs npm

Note: If your distro’s Node.js is too old, use nvm to install a recent version.

Building

Clone into a colcon workspace and build:

```bash mkdir -p ~/ros2_ws/src cd ~/ros2_ws/src git clone https://github.com/namo-robotics/ros2_system_webview.git

cd ~/ros2_ws source /opt/ros/${ROS_DISTRO}/setup.bash colcon build source install/setup.bash

File truncated at 100 lines see the full file

Changelog for package system_webview

0.0.3 (2026-03-26)

• fix lint errors
• add per-node resource monitoring
• Refactor HTML and TypeScript configuration for improved readability
  • Updated the HTML structure in index.html for better formatting and consistency.
  • Simplified the TypeScript configuration in tsconfig.json by consolidating array elements for "lib" and "paths" options.
• Contributors: David Brown

0.0.2 (2026-03-21)

• update resource monitor screenshot
• feat: add build and SSG manifests, update index files, and enhance system types
  • Introduced _buildManifest.js and _ssgManifest.js for improved static generation.
  • Updated index.html to reflect new resource paths and maintain consistency.
  • Modified index.txt to align with the latest changes in the application structure.
  • Enhanced UsbBusStats interface in system.ts to include real-time USB traffic metrics.
• feat: update index.html and index.txt for new styles and scripts; add network and USB stats interfaces
  • Updated index.html to include new stylesheet and script references.
  • Modified index.txt to reflect changes in the app page structure.
  • Removed 'peer' property from several dependencies in package-lock.json.
  • Added new interfaces for NetworkStats, UsbDeviceStats, and UsbBusStats in system.ts to enhance system monitoring capabilities.
• Contributors: David Brown

0.0.1 (2026-03-07)

• feat: update styles and build manifests for improved UI and performance
  • Added new Tailwind CSS file for styling enhancements.
  • Created new build manifest and SSG manifest files for better routing and static generation.
  • Updated index.html to reference new CSS and JS files, ensuring the latest styles and scripts are loaded.
  • Adjusted index.txt to reflect changes in the build process and resource references.
• feat: add initial build files for ROS2 System Monitor
  • Added webpack chunk for optimized JavaScript loading.
  • Included Tailwind CSS for styling with a new CSS file.
  • Created build manifest and SSG manifest for static site generation.
  • Generated index.html with structured layout and initial content.
  • Added index.txt for internal routing and component management.
• docs: update README.md with project overview, features, architecture, prerequisites, and usage instructions
• feat: initialize web application with Next.js and TypeScript
  • Added package.json for project dependencies and scripts.
  • Created postcss.config.mjs for Tailwind CSS integration.
  • Set up tailwind.config.ts for Tailwind CSS configuration.
  • Added tsconfig.json for TypeScript compiler options.
  • Defined ROS-related types in ros.ts for log messages and connection statuses.
  • Created roslib.d.ts for type definitions of the roslib library.
  • Implemented system.ts to define interfaces for system statistics and resource usage.
• Initial commit: Add basic structure for system_webview with HTTP server and web interface
• Initial commit
• Contributors: David Brown