Web UI (ros2_medkit_web_ui)

ros2_medkit_web_ui is a lightweight web application for browsing SOVD entity trees. It connects to the ros2_medkit gateway and visualizes the entity hierarchy.

ros2_medkit_web_ui main interface — The ros2_medkit_web_ui interface showing entity tree, detail panel, and data view.

Features 

Server Connection Dialog — Enter the URL of your gateway
Entity Tree Sidebar — Browse the hierarchical structure with lazy-loading
Entity Detail Panel — View raw JSON details of any selected entity
Data/Operations/Configurations — Virtual folders for each entity

Quick Start 

Using Docker 

# Pull from GitHub Container Registry
docker pull ghcr.io/selfpatch/ros2_medkit_web_ui:latest
docker run -p 3000:80 ghcr.io/selfpatch/ros2_medkit_web_ui:latest

Then open http://localhost:3000 in your browser.

From Source 

# Clone the repository
git clone https://github.com/selfpatch/ros2_medkit_web_ui.git
cd ros2_medkit_web_ui

# Install dependencies
npm install

# Build for production
npm run build

# Start development server (port 5173)
npm run dev

Connecting to ros2_medkit 

Open the web UI in your browser — you’ll see the connection dialog:

Connection dialog prompting for gateway URL.
Enter the gateway URL (e.g., http://localhost:8080) and base endpoint (e.g., api/v1):

Enter your gateway URL and click Connect.
Browse the entity tree in the left sidebar:

Entity tree showing areas and components.
Expand nodes to see the hierarchy:

Expanded tree showing apps and virtual folders.
Click on any entity to view its details:

Detail panel showing entity metadata and capabilities.

Tip

The web UI is a different origin than the gateway, so the gateway must allow it via CORS. The launch files and the Docker image allow http://localhost:3000 and http://localhost:5173, matched exactly: http://127.0.0.1:3000 is rejected. See Server Configuration for CORS settings, or pass the origins to the launch file, for example cors_allowed_origins:=http://localhost:3000,http://127.0.0.1:3000. The list replaces the defaults, and an empty value turns CORS off.

Using the Interface 

Data View 

Click on the data folder under any entity to see available topics:

Click on a specific topic to see its current value:

Topic data view — Real-time topic data with JSON visualization.

Operations 

The operations folder shows available services and actions:

Execute an operation and see the result:

Operation execution with request/response display.

Configurations 

The configurations folder exposes ROS 2 node parameters:

Edit parameters directly in the UI:

Configuration edit — Inline parameter editing with type validation.

Docker Compose Example 

Run both gateway and web UI together:

# docker-compose.yml
services:
  gateway:
    image: ghcr.io/selfpatch/ros2_medkit-jazzy:latest
    command: ros2 launch ros2_medkit_gateway bringup.launch.py
    network_mode: host
    ipc: host

  web_ui:
    image: ghcr.io/selfpatch/ros2_medkit_web_ui:latest
    ports:
      - "3000:80"

The gateway shares the host network, so it joins the robot’s DDS graph and its default bind 127.0.0.1:8080 is the host’s loopback. Open http://localhost:3000: that origin is allowed by default, while http://127.0.0.1:3000 is not. On a bridge network instead, run bringup.launch.py server_host:=0.0.0.0 and publish 8080 (see Troubleshooting & FAQ).

Docker Image Tags 

Images are published to GitHub Container Registry:

Trigger	Image Tags
Push/merge to `main`	`latest`, `sha-<commit>`
Git tag `v1.2.3`	`1.2.3`, `1.2`, `1`, `sha-<commit>`

Tech Stack 

React 19 — UI framework
TypeScript — Type safety
Vite — Build tool
TailwindCSS 4 — Styling
shadcn/ui — UI components
Zustand — State management

Repository 

https://github.com/selfpatch/ros2_medkit_web_ui