system_webview

A real-time system monitoring dashboard for ROS 2. It provides a web-based UI that displays live CPU, memory, swap, 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

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:

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

The build automatically runs npm install && npm run build inside the web/ directory and installs the static export to share/system_webview/web.

Usage

Launch

The included launch file starts two nodes: rosbridge_websocket and the http_server:

ros2 launch system_webview main.launch.py

Then open http://localhost:2525 in a browser.

Changing the HTTP port

```bash

File truncated at 100 lines see the full file