Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

ROS for Beginners III: Web-based Navigation with ROSBridge

Name: ROS for Beginners III: Web-based Navigation with ROSBridge
Rating: 4.5 (258 reviews)

Leverage the use of React and JavaScript to control and monitor robot ROS navigation using Web interfaces

Created byAnis Koubaa

Last updated 5/2023

English

What you'll learn

Create a web interface to teleoperate a robot
Develop a web interface for robot navigation
Use JavaScript React front-end development
Use ROSBridge to interact with ROS ecosystem

Course content

6 sections • 45 lectures • 2h 49m total length

Introduction4:45
Overview of Libraries and Resources4:43
[Important] Seed project structure0:41
How to follow this course?0:14
[IMPORTANT] What is you face errors and need to debug and find solutions?0:58
Accessing the Instructor Code for the Udemy ROSBridge Course0:23

Install a new React Application1:27
Understand the anatomy of a React App7:28
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.
Setting-up the bootstrap theme4:05
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 a Header and Footer components6:52
Add a navigation bar to the header component7:00
Create a Router of Pages8:01
Customize the footer2:07

Overview of the <Connection/> component3:10
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.
Understand the concept of state in React7:43
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/> Component2:08
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 Dependency12:47
Create an Alert component4:00
Connection Logic with ROSLib and React State3:57
Connect to ROSBridge3:32
Dealing with automatic reconnection2:55
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.
Clean code and use configuration file5:35

Create a Teleoperation Component1:28
Arrange page layout using the React Grid structure2:59
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 the React Joystick Component4:52
The structure of the handleMove method1:13
Create a cmd_vel publisher inside handleMove4:00
Create and publish a twist message using ROSLib4:14
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.
The event property of the react joystick component0:20
Setting the right velocities from the Joystick component throttle1:58
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.
The HandleStop Method1:55

Note before watching next lectures0:17
Setup the Turtlebot3 Simulator2:42
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 Teleop with Turtlebot33:57
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.
Create the Robot State ReactJS Component5:41
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 position on the map6:41
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.
Create a subscriber for the orientation6:41
Create a subscriber for the velocities5:58

Overview1:37
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 a <Map> component1:21
Initialize a ROS Connection in <Map> Component1:19
Importing Map and Navigation JS Libraries2:21
Visualize the map on the browser6:48
Improve the page layout0:36
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 map5:41
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.

Requirements

Be familiar with ROS concepts and ecosystem
Recognizes the concepts of the navigation
Has basic knowledge on Web development
Understand Javascript

Description

Welcome to the course on ROS for Beginners III Web-based Navigation with ROSBridge. I am Anis Koubaa, and I will be your instructor in this course. This course is the third course in the series ROS For Beginners. It is a project-based course that deals with how to develop a web interface to teleoperate and interact with ROS-enabled robots.

Project Overview

At the end of this course project, you will develop a web interface that will allow you to teleoperate and monitor the robot based on ROS. The Web interface will be developed using ReactJS, which is a popular JavaScript framework for front-end development.

We will first start by developing a component that will tell us whether the robot with which we would like to communicate is connected or not connected. Then, you will develop another component to teleoperate the robot through a web-based joystick in ReactJS. You also implement a button for stopping the robot in an emergency situation. Furthermore, the web interface will display live information about the robot such as its position, orientation, and linear and angular velocity. The last part of this project deals with map-based navigation. You will be able to display the navigation map on the web browser and send the goal location for the robot to navigate to. In the end, you will develop a comprehensive web interface that will allow you to interact with your robot easily through a web interface using the most popular JavaScript framework, which is ReactJS.

Why this course?

This course represents a first step into the world of cloud robotics.

Cloud robotics is an emerging topic in the last few years and it aims at integrating mobile robots with cloud computing systems and the Internet of Things through web services interfaces.

Besides, I have developed this course because there are not sufficient pointers and no comprehensive tutorials on how to make web browsers interact with robots.

What's worth in this course?

This course is unique in the sense that it is designed to Bridge the gap between the robotics world and the web development world.

In fact, most of the engineers who work in the robotic area do not have a background in web development, and most of the web developers do not have a background on robots or ROS. This course bridges these two areas together and provides a systematic introduction to the topic of web development for ROS-enabled robots.

Furthermore, we will use the ReactJS web development technology which the most evolving most popular javascript front-end development framework.

You will learn all the tricks in a step-by-step approach to help you save plenty of time looking around for scattered documentation.

Pre-requisites

To take the most benefit from this course, you should be already familiar with Robot Operating System (ROS) and its navigation stack. If you are not familiar with ROS, then take by two courses ROS For Beginners I and ROS For Beginners II before diving into this course.

As we will do some web development, it will be recommended to have some very basic understanding of HTML, CSS, and JavaScript, just basics and nothing advanced. You can take any introduction about HTML, CSS, and JS if you do not know about them.

It is not required that you have any Prior knowledge of ReactJS because I will introduce all the essential concepts in this course.

Welcome to the course and I wish you a pleasant learning experience.

Who this course is for:

Cloud robotics engineers
Any ROS learner and enthusiast
Software developer for robotics applications

ROS for Beginners III: Web-based Navigation with ROSBridge

What you'll learn

Explore related topics

Course content

Introduction6 lectures • 12min

Create the Basic React Application7 lectures • 37min

Connection Component: Establish a Robot Connection with the Web App9 lectures • 46min

Teleoperation Component: Drive your robot from the web app9 lectures • 23min

Display Robot Position, Orientation and Speed7 lectures • 32min

Map-based navigation on the browser7 lectures • 20min

Requirements

Description

Who this course is for: