Nekton React GUI

Intro

Converted Nekton GUI into a React application to improve 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

• Run the React project

checkout react_branch
cd ~/vip_ws/src/NektonSoftware/nekton_topside/topside_react_ui
npm i
npm run dev

• Open in browser

 http://localhost:5173/

• Install roslib

npm install roslib

• Launch rosbridge_websocket server

ros2 launch rosbridge_server rosbridge_websocket_launch.xml

Create a ROS Connection Component

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

Sonar Visualization

The sonar image is converted to LaserScan

Testing

• Publish a fake LaserScan with 100 points at 5 meters continuously at 10 Hz

        ros2 topic pub -r 10 /nekton/sonar_forward sensor_msgs/msg/LaserScan "{
  header: {stamp: {sec: 0, nanosec: 0}, frame_id: 'sonar_forward'},
  angle_min: -0.3927,
  angle_max: 0.3927,
  angle_increment: 0.0079,
  range_min: 1.0,
  range_max: 10.0,
  ranges: $(python3 -c 'print([5.0]*100)'),
  intensities: $(python3 -c 'print([1.0]*100)')
}"