Capabilities2 UI

A Node.js + React-based web application that connects to foxglove-rosbridge and visualizes /events messages published in ROS2 using the CDR encoding format.

This app allows:

• Live real-time visualization of capability events
• Storage of incoming events in MongoDB
• Modular CDR decoding for easy support of new message types and topics
• REST API for historical data access

🚀 How to Run

1. Prerequisites

• Node.js ≥ 18.x
• MongoDB (running locally or via Atlas)
• ROS2 Capabilities2 system publishing to /events via foxglove-bridge

2. Clone and Setup

git clone https://github.com/CollaborativeRoboticsLab/capabilities2-ui.git
cd capabilities2-ui

3. Backend

cd backend
npm install

# Setup MongoDB URI
echo "MONGO_URI=mongodb://localhost:27017/capabilities2" > .env

# Start the backend (REST API + WebSocket + Foxglove client)
node server.js

If the backend does not start properly (fails to connect with mongodb) run the following commands

sudo rm -f /tmp/mongodb-27017.sock
sudo systemctl start mongod
sudo systemctl status mongod

and then retry the server

node server.js

4. Frontend

cd ../frontend
npm install
npm start

Then visit: http://localhost:3000

Adding New Topics

To add support for another ROS2 topic:

1. Create a decoder under backend/decoders/yourDecoder.js
2. Implement decoding logic using CdrReader
3. Register it in decoders/index.js as

"/your/topic": require("./yourDecoder")

API Endpoints

Method	URL	Description
GET	/api/events	List all stored events
POST	/api/events	Add new event (manual testing)

Credits

• Foxglove WebSocket Protocol
• @foxglove/cdr
• ROS2 + DDS community for message protocols