Eurobot Web

A web dashboard built for Eurobot robot competitions, focused on robot status monitoring and strategy selection.

Robot Status
ROS status, startup groups, battery, SIMA, parameters

Playmat
Mission buttons, sequence planning, live score

Control Panel
Layout, theme, SIMA names, backup, assets

Features • ROS Bridge Interfaces • API And Config Files • Getting Started • Deployment • Development

Features

Eurobot 2026 Web is a React dashboard for the robot-side screen, laptop, iPad, or dual-monitor pit setup. It connects to ROS 2 through rosbridge, persists competition parameters in /home/share/data, and keeps local UI assets such as robot GLB files and sponsor logos in browser storage.

The app has three primary panels:

Panel	Current functionality
Robot Status	ROS bridge connection state, battery voltage, USB device status, startup plug signal, startup group state, game time, game score, SIMA online status, game ready/service call controls, game start publisher, on-take test publisher, rival/dock/nav/SIMA/robot-config parameter editing, sponsor fullscreen overlay, robot 3D preview.
Playmat	2026 field visualization, 18 mission buttons, click order sequence, plan import, saved plans in browser storage, live estimated score from ROS, selected plan service server for the robot startup flow.
Control Panel	Half-screen layout toggle, active panel selection, theme accent, BMS hostname, playmat background selection, SIMA instance-name whitelist editing, browser backup/restore ZIP, factory reset for browser data, IndexedDB manager for GLB models and sponsor logos.

ROS Bridge Interfaces

The frontend loads roslibjs as a static script (index.html → /lib/roslib.min.js), which exposes window.ROSLIB. React code uses that global through src/utils/useRosConnection.ts (and a few components that read window.ROSLIB directly). The bridge URL is fixed in code as:

ws://localhost:9090

roslib bundle (maintenance)

*.min.js: minified build (smaller download; same runtime behavior as the non-minified bundle for a given release).
Stay on roslib 1.x for this app. The checked-in file matches the classic browser bundle (global ROSLIB, Ros / Topic / Service APIs). On npm, the latest tag is roslib 2.x, which ships as ES modules for bundlers and is not a drop-in replacement for a single script tag; migrating would mean importing from roslib in Vite, removing the global, and re-testing every bridge call.
Stability: Prefer pinning to a known 1.x release (for example 1.4.1) rather than chasing latest on npm. Optional refresh from CDN (run at repo root):
```
curl -fsSL -o public/lib/roslib.min.js 'https://unpkg.com/roslib@1.4.1/build/roslib.min.js'
```
To follow the newest 1.x line without editing the URL on each patch release, you can use roslib@1 instead of 1.4.1 in that path.

Use this section as the rosbridge whitelist reference.

Whitelist Summary

Topics:

/robot_status/battery_voltage
/robot_status/usb/chassis
/robot_status/usb/mission
/robot_status/usb/lidar
/robot_status/usb/esp
/robot_status/usb/imu
/robot/startup/plug
/robot/startup/groups_state
/robot/startup/game_time
/game_score
/score
/robot/startup/ideal_score
/<sima_name>/status
/robot/on_put

Services:

/robot/startup/ready_signal
/robot/startup/web_plan

Replace /<sima_name>/status with the exact SIMA names configured in Control Panel, for example /sima_01/status.

Subscribed Topics

Topic	Type	Used by	Content / behavior
`/robot_status/battery_voltage`	`std_msgs/msg/Float32`	Robot Status	Battery voltage. Display is smoothed and considered stale after 8 seconds without messages.
`/robot_status/usb/chassis`	`std_msgs/msg/Bool`	Robot Status	Chassis STM32 USB/device connectivity.
`/robot_status/usb/mission`	`std_msgs/msg/Bool`	Robot Status	Mission STM32 USB/device connectivity.
`/robot_status/usb/lidar`	`std_msgs/msg/Bool`	Robot Status	LiDAR connectivity.
`/robot_status/usb/esp`	`std_msgs/msg/Bool`	Robot Status	ESP32 connectivity.
`/robot_status/usb/imu`	`std_msgs/msg/Bool`	Robot Status	IMU connectivity.
`/robot/startup/plug`	`std_msgs/msg/Bool`	Robot Status	Startup plug/ready signal. `true` marks connected and expires after 5 seconds without another `true`; `false` clears immediately.
`/robot/startup/groups_state`	`std_msgs/msg/Int32MultiArray`	Robot Status	Startup group states in order: `MAIN`, `VISION`, `NAVIGATION`, `LOCALIZATION`. UI maps `0` to yellow, `3` to green, missing/other values to red.
`/robot/startup/game_time`	`std_msgs/msg/Float32`	Robot Status	Current match/game time value.
`/game_score`	`std_msgs/msg/Int32`	Robot Status, Playmat	Current game score. Also drives Playmat estimated score.
`/score`	`std_msgs/msg/Int32`	Playmat	Primary live score source. If no recent message is seen, Playmat falls back to startup ideal score.
`/robot/startup/ideal_score`	`std_msgs/msg/Int32`	Playmat	Fallback estimated score from the main startup process.
`/<sima_name>/status`	`std_msgs/msg/Bool`	Robot Status	Dynamic SIMA online status. Names come from Control Panel localStorage key `sima-instance-names`; defaults are `sima_01` through `sima_08`. A SIMA is considered stale after 1.3 seconds.

Published Topics

Topic	Type	Published by	Payload
`/robot/startup/plug`	`std_msgs/msg/Bool`	Robot Status	Publishes `{ data: true }` when Game Start is triggered.
`/robot/on_put`	`std_msgs/msg/Int16`	Robot Status	HW Test publishes four messages at 400 ms intervals with `data` in `0`…`3`.

Service Clients

Service	Type	Called by	Request / response handling
`/robot/startup/ready_signal`	`btcpp_ros2_interfaces/srv/StartUpSrv`	Robot Status	Called four times for groups `1` to `4` with `{ group: gid, state: 1 }`. Response is expected to include `{ group, success }`; the UI logs a warning if the response group differs or `success=false`, then continues to the next group.

Service Servers Advertised By The Web UI

Service	Type	Advertised by	Response
`/robot/startup/web_plan`	`std_srvs/srv/Trigger`	Playmat	Returns `success=true`; `message` is the selected plan id as a string, or `"0"` if no plan is selected.

API And Config Files

The Express API lives in src/api/index.js and is mounted under /api by src/server.js. Data is stored in /home/share/data; production Compose mounts that directory from the host.

REST API

Method	Path	Backing file	Purpose
`GET`	`/api/rival-radius`	`rival_params.yaml`	Read `nav_rival_parameters.rival_inscribed_radius` in meters. Frontend displays centimeters.
`POST`	`/api/rival-radius`	`rival_params.yaml`	Update rival radius, clamped to `0.0` to `0.5` m. Body: `{ "radius": number }`.
`GET`	`/api/dock-rival-params`	`rival_params.yaml`	Read `dock_rival_radius` and `dock_rival_degree`.
`POST`	`/api/dock-rival-params`	`rival_params.yaml`	Update dock rival radius and degree. Radius is clamped to `0.0` to `0.5` m; degree to `0` to `360`.
`GET`	`/api/nav-params?profile=<name>`	`nav_<profile>_params.yaml`	Read navigation max linear/angular velocity for `didilong`, `fast`, `slow`, `linearBoost`, or `angularBoost`.
`POST`	`/api/nav-params`	`nav_<profile>_params.yaml`	Update navigation profile. Body: `{ "profile": string, "linearVelocity": number, "angularVelocity": number }`. Linear is clamped to `0.1` to `1.6`; angular to `1.0` to `15.0`.
`GET`	`/api/sima-params`	`sima.json`	Read `sima_start_time` and `plan_code`.
`POST`	`/api/sima-params`	`sima.json`	Update SIMA start time and plan code. Body: `{ "sima_start_time": number, "plan_code": number }`.
`GET`	`/api/button-states`	`button.json`	Read playmat button states, flat sequence, and derived `pantry_sequence` / `collection_sequence`.
`POST`	`/api/button-states`	`button.json`	Update playmat button states and sequence. Mission arrays are derived from the flat sequence.
`GET`	`/api/robot-config`	`robot_config.yaml`	Read supported ROS parameter fields from `/**.ros__parameters`. Falls back to legacy `robot_config_black.yaml` if present.
`POST`	`/api/robot-config`	`robot_config.yaml`	Update supported robot config parameters and remove `robot_name` from the YAML.
`GET`	`/api/mission-sequence`	`button.json`	Read pantry/collection sequence. Legacy `mission_sequence.json` or `mission_sequence_black.json` is migrated into `button.json` when needed.
`POST`	`/api/mission-sequence`	`button.json`	Store manual pantry/collection sequence in `button.json`.
`POST`	`/api/reset-to-defaults`	all server-side config files	Reset rival, nav, SIMA, robot config, and playmat/mission state to defaults.

YAML / JSON Files

rival_params.yaml

nav_rival_parameters:
rival_inscribed_radius: 0.22dock_rival_parameters:
dock_rival_radius: 0.46dock_rival_degree: 120

Navigation profiles:

File	`max_linear_velocity`	`max_angular_velocity`
`nav_didilong_params.yaml`	`1.5`	`1.0`
`nav_fast_params.yaml`	`1.1`	`12.0`
`nav_slow_params.yaml`	`0.8`	`2.0`
`nav_linearBoost_params.yaml`	`1.1`	`2.0`
`nav_angularBoost_params.yaml`	`0.5`	`12.0`

robot_config.yaml

/**:
ros__parameters:
pantry_aggressiveness: 0.0pantry_sensitivity: 2.0pantry_rival_sigma: 0.3pantry_rival_distance_threshold: 0.3collection_aggressiveness: 0.0collection_sensitivity: 2.0collection_rival_sigma: 0.3collection_rival_distance_threshold: 0.3flip_distance_threshold: 0.1cursor_tolerance: 0.18

sima.json

{
"sima_start_time": 85,
"plan_code": 1
}

button.json

{
"states": {
"0": false,
"1": false
},
"sequence": [],
"pantry_sequence": [],
"collection_sequence": []
}

Getting Started

Prerequisites

Docker and Docker Compose
ROS 2 with rosbridge_server
A rosbridge websocket available at ws://localhost:9090

Run With Docker

Clone and enter the repo:

git clone -b Eurobot-2026 https://github.com/DIT-ROBOTICS/Eurobot-Web.git
cd Eurobot-Web

Start the development container:

docker compose -f docker-compose.dev.yml up -d

Open the app:
Service URL
Frontend dev server http://localhost:5173
Express API http://localhost:3001/api
ROS bridge websocket ws://localhost:9090

Start ROS Bridge

sudo apt install ros-<distro>-rosbridge-server
ros2 launch rosbridge_server rosbridge_websocket_launch.xml

Deployment

Development

docker compose -f docker-compose.dev.yml up -d
docker compose -f docker-compose.dev.yml logs -f app-dev
docker compose -f docker-compose.dev.yml down

The dev Compose file uses host networking and starts both the Express API and Vite dev server:

bun install && node src/server.js & bun run dev -- --host 0.0.0.0

Production

Images are published to GHCR by .github/workflows/docker-build-and-push.yml on pushes to eurobot-YYYY / Eurobot-YYYY (for example Eurobot-2026). The image tag is only the year (:2026, not latest). Match that on the machine that runs Compose, for example:

export EUROBOT_IMAGE_TAG=2026 # optional; default in compose is 2026 for this branch
docker compose pull && docker compose up -d
docker compose logs -f eurobot-2026-web
docker compose down

Production runs a built React app behind Nginx, keeps the API server available, uses host networking, and persists server-side config through:

/home/share/data:/home/share/data

Development

Stack

Area	Technology
Frontend	React 19, TypeScript, Vite
Styling	Tailwind CSS 4, Radix UI, Lucide React, React Icons
ROS bridge	roslib 1.x browser bundle (`public/lib/roslib.min.js`, `window.ROSLIB`) over WebSocket
API server	Express, js-yaml
3D assets	model-viewer, Three.js / React Three Fiber dependencies
Browser storage	localStorage, IndexedDB, JSZip backup/restore
Deployment	Docker, Docker Compose, Nginx

Useful Commands

npm run dev
npm run build
npm run lint
npm run server

Browser-Side Data

The Control Panel can export and restore browser-local data as eurobot-web-backup_YYYYMMDD.zip. The backup includes selected localStorage keys, custom robot GLB files, and sponsor logos. Server-side /home/share/data YAML/JSON files are not included in that browser backup.

Important localStorage keys include:

Key	Purpose
`sima-instance-names`	Dynamic SIMA topic names used for `/<name>/status`.
`bms-hostname`	BMS/ESP hostname shown in the UI.
`playmat-background-id`	Active playmat background.
`savedPlans`	Playmat plan presets.
`activePanel`, `verticalPanel`, `isHalfScreen`	Layout state.

License

This project is licensed under the MIT License.

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
docs		docs
public		public
src		src
.gitignore		.gitignore
.npmrc		.npmrc
Dockerfile		Dockerfile
Dockerfile.dev		Dockerfile.dev
LICENSE		LICENSE
README.md		README.md
bun.lock		bun.lock
components.json		components.json
docker-compose.dev.yml		docker-compose.dev.yml
docker-compose.yml		docker-compose.yml
eslint.config.js		eslint.config.js
index.html		index.html
nginx.conf		nginx.conf
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Navigation Menu

Uh oh!

Repository files navigation

Eurobot Web

Features

ROS Bridge Interfaces

roslib bundle (maintenance)

Whitelist Summary

Subscribed Topics

Published Topics

Service Clients

Service Servers Advertised By The Web UI

API And Config Files

REST API

YAML / JSON Files

Getting Started

Prerequisites

Run With Docker

Start ROS Bridge

Deployment

Development

Production

Development

Stack

Useful Commands

Browser-Side Data

License

About

Releases

Packages

Used by

Contributors

Languages

Service	URL
Frontend dev server	http://localhost:5173
Express API	http://localhost:3001/api
ROS bridge websocket	ws://localhost:9090

Uh oh!

Latest commit

History

Folders and files

Repository files navigation

Eurobot Web

Features

ROS Bridge Interfaces

roslib bundle (maintenance)

Whitelist Summary

Subscribed Topics

Published Topics

Service Clients

Service Servers Advertised By The Web UI

API And Config Files

REST API

YAML / JSON Files

Getting Started

Prerequisites

Run With Docker

Start ROS Bridge

Deployment

Development

Production

Development

Stack

Useful Commands

Browser-Side Data

License

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages