🐞 FRE Information Panel

ROS 2 package + React/Vite web UI for displaying information alerts (plant health, pest detection, etc.).

The project uses rclnodejs/web as the browser bridge and is containerised through the aoc_container_base stack.

Topics

Alerts

• Topic: /information_panel/alert
• Message type: std_msgs/msg/String
• Expected options: [ "bee", "butterfly", "ladybird", "diseased_plant" ]
• Can be passed as bee,butterfly when both are detected.
• Example: diseased_plant for diseased plant classification.

Architecture

• ROS package: src/fre_information_panel
• Frontend: React + Vite (served on port 5173)
• Bridge: rclnodejs-web WebSocket capability endpoint proxied at /capability on port 5173
• Runtime command: ros2 launch fre_information_panel web.launch.py

ROS + Node Coupling

This package is intentionally coupled so ROS tooling also drives the Node build.

• rosdep installs system dependencies from package.xml, including nodejs.
• colcon build triggers npm install and npm run build via CMake custom target.
• ros2 launch starts the UI and bridge as separate processes.
• The UI display timeout is configurable with the launch argument alert_persistence_ms.
• Runtime requires Node.js >=24.11.1 <25 (see .nvmrc, package.json engines, and Dockerfile configuration).

Devcontainer Usage

1. Open the repository in VS Code.
2. Run Dev Containers: Rebuild and Reopen in Container.
3. The devcontainer uses .devcontainer/compose.yaml and automatically builds the workspace during container startup.
4. The ROS environment is sourced automatically for the devcontainer session.

If you want to run the same container stack outside VS Code, use the compose file directly:

docker compose -f .devcontainer/compose.yaml up --build

Build and Run

From inside the devcontainer, start the panel with:

ros2 launch fre_information_panel web.launch.py

This launch file starts two processes separately:

• the rclnodejs/web bridge
• the UI static server

To change how long text remains visible after the most recent topic update:

ros2 launch fre_information_panel web.launch.py alert_persistence_ms:=5000

And to remove the introduction sound effects on each detection use the following parameter:

ros2 launch fre_information_panel web.launch.py alert_announcement_with_introduction:=false

These values are both exposed to the final container as environment variables, see compose.yaml.

Services exposed:

• UI: http://localhost:5173
• WebSocket bridge (proxied): ws://localhost:5173/capability

The bridge path is runtime-configurable in Docker with FRE_INFORMATION_PANEL_BRIDGE_ENDPOINT (defaults to /capability), while the browser always connects through the same host it loaded the UI from.

Rebuilding After Changes

The devcontainer already performs the initial build and environment setup for you.

If you change the package and need to rebuild it manually, run colcon from /workspace so the cached build, install, and log volumes are reused:

cd /workspace
colcon build --packages-select fre_information_panel

Formatting and Lint Checks

Run style checks from the frontend package directory:

cd /workspace/src/fre_information_panel

Check formatting only:

npm run format:check

Check lint only:

npm run lint

Run both checks together (same command used by CI):

npm run style

To automatically apply formatting changes:

npm run format

Functional Test

1. Start the panel with:

ros2 launch fre_information_panel web.launch.py

2. Open http://localhost:5173 (or hostname:5173 if connecting remotely).

   • Add ?sound=off (for example http://localhost:5173/?sound=off) to disable rendering the audio player UI.

3. Publish a test message from another ROS terminal in the same domain:

ros2 topic pub --once /information_panel/alert std_msgs/msg/String "{data: 'bee'}"
ros2 topic pub --once /information_panel/alert std_msgs/msg/String "{data: 'butterfly'}"
ros2 topic pub --once /information_panel/alert std_msgs/msg/String "{data: 'ladybird'}"
ros2 topic pub --once /information_panel/alert std_msgs/msg/String "{data: 'diseased_plant@left'}"
ros2 topic pub --once /information_panel/alert std_msgs/msg/String "{data: 'bee,ladybird'}"
ros2 topic pub --once /information_panel/alert std_msgs/msg/String "{data: 'bee,butterfly'}"
ros2 topic pub --once /information_panel/alert std_msgs/msg/String "{data: 'bee,butterfly,ladybird'}"

4. Confirm the page updates to display the alert.

Optional Hot-Reload UI Workflow

The default workflow is ROS-first via ros2 launch. For frontend iteration only, you can run the bridge from ROS and the UI from Vite with hot reload.

1. Start only the bridge:

ros2 launch fre_information_panel web.launch.py start_ui:=false

2. In a second terminal, start the Vite dev server from the package source tree:

cd /workspace/src/fre_information_panel
npm run dev

3. Open the hot-reload UI at http://localhost:5173.

This mode is intended for development only and is not the default workflow.

Docker Image Build

The CI workflow builds .devcontainer/Dockerfile target final.

Manual build:

docker build -t fre-information-panel --target final -f .devcontainer/Dockerfile .

Manual run:

docker run --rm -p 5173:5173 fre-information-panel