Web UI (sovd_web_ui)

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

sovd_web_ui main interface

The sovd_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/sovd_web_ui:latest
docker run -p 3000:80 ghcr.io/selfpatch/sovd_web_ui:latest

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

From Source

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

# Install dependencies
npm install

# Build for production
npm run build

# Start development server (port 5173)
npm run dev

Connecting to ros2_medkit

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

    Connection dialog

    Connection dialog prompting for gateway URL.

  2. Enter the gateway URL (e.g., http://localhost:8080) and base endpoint (e.g., api/v1):

    Connection dialog with URL

    Enter your gateway URL and click Connect.

  3. Browse the entity tree in the left sidebar:

    Entity tree collapsed

    Entity tree showing areas and components.

  4. Expand nodes to see the hierarchy:

    Entity tree expanded

    Expanded tree showing apps and virtual folders.

  5. Click on any entity to view its details:

    Entity detail panel

    Detail panel showing entity metadata and capabilities.

Tip

If the gateway runs on a different host, ensure CORS is configured. See Server Configuration for CORS settings.

Using the Interface

Data View

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

Data view

List of topics published by an entity.

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:

Operations panel

List of operations (services and actions) for an entity.

Execute an operation and see the result:

Operation execution

Operation execution with request/response display.

Configurations

The configurations folder exposes ROS 2 node parameters:

Configurations list

List of parameters with current values.

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
version: '3.8'
services:
  gateway:
    image: ros:jazzy
    command: >
      bash -c "source /opt/ros/jazzy/setup.bash &&
               ros2 launch ros2_medkit_gateway gateway.launch.py server_host:=0.0.0.0"
    ports:
      - "8080:8080"
    network_mode: host

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

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/sovd_web_ui

See Also