ROS for Beginners III: Web-based Navigation with ROSBridge

Set up a new react app with create react app, name the project, install dependencies, and begin developing an application that will interact with and monitor robots.

Explore the anatomy of a React app by inspecting the node_modules, public directory, index.html, and root element, and learn how the app renders into the root using React.

Clean up and prepare the project, then integrate a bootstrap theme by downloading and importing a bootstrap package, trying Spacelab, sketchy, and other layouts to tailor the app's look.

Create header and footer components and assemble them into a React app. Organize components in a folder, import header, footer, and body, and render a navigation menu.

Build a header navigation bar inside the header component with bootstrap in a React app, install react-bootstrap, import Navbar, and configure links to home and about pages using routing.

Learn how to build a simple router in a React app to switch between home and about pages, using a Bootstrap container and React Router's switch and route components.

Finalize the footer in the boilerplate, center the main content using 80% height, and prepare for publisher-subscriber interactions, map visualization, and navigation actions with React on the front end.

Establish a websocket bridge between the web app and rosbridge to exchange messages with ROS ecosystem. Create a Connection component that displays the web app's connection status to the bridge.

Learn how React state enables dynamic UI by creating a counter with a state variable and setState, then use the concept to indicate robot connectivity with green or red alerts.

Create the connection component within the components folder, import and define the connection class, and render it to verify the UI updates and resolve the undefined connection error.

Import the roslib dependency to enable web-based navigation with rosbridge, choosing local script imports over npm for reliable websocket communication between the web app and ROS.

Display the robot's connection status with a bootstrap alert for connected or disconnected. Bind a state variable defaulting to false and use a green or red variant to reflect status.

Develops the connection logic for a web-based ROS interface using roslib and React state, subscribing to connection events and updating state when the robot connects or disconnects.

Learn to connect to rosbridge over websocket by configuring the ip and port, invoking the connect method, and handling connection events to reflect online status and auto-reconnect after disconnection.

Implement an automatic reconnection strategy for a web app using a timeout that retries reconnecting to ROSBridge every three seconds, ensuring the robot's connected state updates automatically.

Learn to replace hardcoded connection values with a config file by importing a config object that defines parameters like the server IP, bridge port, and reconnection timer to simplify maintenance.

Develop and visualize a daily operation teleoperation component that sends messages to the bridge, which transfers them to the ecosystem to move the robot, using boilerplate code.

Create a bootstrap grid layout in a React app using a container, rows, and columns to organize connection and daily operation components, with a placeholder for the map.

Develop a React joystick component to send velocity commands via ROSBridge, implementing move and stop handlers that publish angular and linear velocities for web-based robot navigation.

Implement joystick control by publishing linear velocity for forward motion and angular velocity for turning, and publish a zero twist to stop using a publisher and twist message to rosbridge.

Set up a cmd_vel publisher inside handleMove, configure the velocity topic via a config object, and ensure publisher initialization across components for ROSBridge web-based navigation.

Create a twist message with linear and angular components, set linear x and angular values, and publish it via ROSLib to control a robot’s movement from a joystick with throttle.

Discover how the event property of the react joystick component fires when you adjust the throttle, reporting movement in both horizontal and vertical directions for web-based navigation.

Learn to map joystick events to smooth velocity commands for ROSBridge navigation by scaling vertical and horizontal inputs, producing proportional linear and angular motion with automatic stop.

Publish a zero velocity message to stop the robot, bind the stop keyword, and test the handle stop method from the web browser to control movement.

Set up the more advanced turtle boucherie simulator and visualize the robot's position, orientation, and velocities in the web browser, including loading a map and running the navigation stack.

Test teleoperation of a Turtlebot3 via ROSBridge, adjusting topic names with a config file and resolving manifest errors, then visualize position and quaternion orientation from odometry in the browser.

Develop a ReactJS class component named robot state, defining position (X, Y, orientation) and velocity (linear, angular), and prepare a subscribe mechanism to visualize live updates.

Create a position subscriber and visualize the robot's pose on the map in real time using rosbridge, with topic setup, message handling, and a two-decimal display.

Convert the orientation quaternion to roll, pitch, and yaw, and express angles in degrees. Use three.js to implement the conversion and visualize the robot's position and orientation in the browser.

Create a subscriber for velocities by configuring a topic, subscribing to twist messages, and updating the robot's linear velocity and angular velocity in real time through a callback.

Visualize the map by subscribing to the map topic and drive the robot on the map by using the robot pose published and overlaid in the web browser.

Create and integrate a new map component by wiring boilerplate map class code, importing and exporting it, and subscribing to the map topic to visualize the map image.

Initialize a ROS connection in the map component by creating a bridge connection, defining state variables, and using componentDidMount to visualize the map topic in the web browser.

Import and configure the map visualization and navigation libraries in a ROSBridge project, place them in public resources, update index.html, and subscribe to the map to render the web interface.

Visualize the map in a web browser by creating a viewer, configuring a navigation client with an occupancy grid, and connecting to the navigation stack server to send navigation goals.

Reorganize the web-based robot interface by placing the map in the same row as the robot state, displaying the position and velocity (linear and angular) together.

Visualize the robot position on the map by publishing the robot pose from the robot state publisher, enabling a web-based navigation viewer to subscribe to the pose.