Nekton React GUI

Intro

Refactored Nekton GUI into a React application

• Introduced modularity by breaking the UI into independent components
• rosbridge provides a WebSocket server that enables the React application to communicate with ROS
• roslibjs supplies a JavaScript API to connect to the rosbridge_server and interact with ROS topics and services

Project Setup

Environment Setup

• cd into the React project

# checkout react_branch
cd ~/vip_ws/src/NektonSoftware/nekton_topside/topside_react_ui

• Install dependencies if needed

npm i
npm install roslib

Using the GUI

• Run GUI locally

npm run dev

• Open in browser

 http://localhost:5173/

Sonar Simulation

• Launch the lightweight-sensor-simulation

ros2 launch nekton_bringup odom_simulation.py world:=sensor.world

Rosbridge

• Launch rosbridge_websocket server (Should be launched already)

ros2 launch rosbridge_server rosbridge_websocket_launch.xml

React Notes/UI Components

Create a ROS Connection Component

• Create a RosConnection.jsx component to manage the main ROS connection (via roslibjs) and pass it down.

Sonar Visualization

• Nekton Sonar Visualization

Nekton UI

• Artificial Horizon
• Buttons
• Alerts
• Camera feed
• Sonar feed
• Depth and altimeter visualization
• Thruster visualization
• Camera and Sonar Mosaicing