Developing Web Interfaces for ROS
From the essential to advanced widgets, learn how to control and monitor robots with ROS using just your web browser, all on the web!
Would you like to control and monitor robots with ROS using just your web browser?
- Understand how to make ROS data available to other environments
- Understand how to create simple but efficient web pages
- Understand how to publish to topics and control robots from the web
- Understand how to subscribe to topics and monitor ROS data from the web
- Understand how to work with ROS params from the web
- Understand how to consume ROS services and action servers from the web
- Create powerful interfaces that show: 3D models, maps and camera images
Simulation robots used in this course
Hector Quadrotor, Fetch, Husky, Turtlebot 2
What you’ll create
Setup the Development Environment
Move the Robot
Tracking the Robot
Subscribe to an odometry topic, which will provide us with real-time data on the robot’s moving position
Create powerful interfaces that show: 3D models, maps and camera images
What you will learn
Unit 1: Introduction
- What’s this project about?
- Let’s Practice! – Using a simulated robot to see the interaction between a Web Page and ROS.
Unit 1: Setting up our development environment (Part 1)
- Creating and Running a Web Page
- Adding Styles to the Page
- Lets Practice! – Fix the knowledge of HTML + CSS using a bootstrap library to define grids.
Unit 2: Setting up our development environment (Part 2)
- Define a Standard to Debug the Code
Unit 3: Move the Robot! Publishing to a topic!
- The lifecycle of the page
- Understanding the Lifecycle of a Web Page
- Handling events of the page + Controlling the robot
- Let’s Practice! – Create two buttons for the web page
Unit 4: Move the Robot! Using a Joystick!
- The Joystick Interface
- Let’s Practice!
Unit 5: Tracking the Robot! Subscribing to a topic!
- Subscribing to a topic
- Understanding how to treat the message object
- Showing data in the web page
Unit 6: Inside the Robot! Showing camera on the web page!
- Video Streaming Architecture
- Embedding images on the web page
- Let’s Practice! – Add a new camera viewer to your web page
Unit 7: Calling ROS services from the web
- Understanding how to Call a ROS Service
- Example of Calling a service
- Let’s Practice! – Create 2 buttons: Takeoff & Landing
Unit 8: Showing a map on the web page
- Understanding how it works
- Configuration for the web page
- Inserting the map element
Unit 9: Tunning your robotics algorithms! ROS Parameters!
- Understanding how ROS Parameters works
- Practical Example
- Let’s Practice! – Tune a robot speed using a web page
Unit 10: 3D Visualization for Robots on Webpages
- Understanding ros3djs
- Understanding how to set up a robot 3D Visualization on our web page
- Let’s Practice! – Show the robot you are working on a 3D canvas
Unit 11: Using ROS Action Servers from the web
- Understanding howroslib.js works
- Understanding how to use roslib.js
- Let’s Practice! – Create an action client on the web page
Unit 12: Final Project
Develop a web interface to control a robot performing mapping in a given environment.
Ready to get started?
Create an account to start learning