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

Changelog for package system_webview

Forthcoming

• 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