Hands-on Project

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!

Project Overview


Would you like to control and monitor robots with ROS using just your web browser?

The “Developing Web Interfaces for ROS” is the right course for you! We dive, step-by-step, into many different widgets that communicate directly to ROS using only HTML and JavaScript code. You will learn the essential and be able to develop more using the knowledge acquired.


Learning Objectives

  • 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







Programming Languages



Basics ROS

What you’ll create

[ROS Q&A] 168 - What are the differences between global and local costmap

Setup the Development Environment

Web Development,  Bootstrap and Javascript

ROS Mini Challenge #2 - RViz

Move the Robot

Configure your JavaScript code to connect from a Vue.js application

Tracking the Robot

Subscribe to an odometry topic, which will provide us with real-time data on the robot’s moving position

3D Visualization

Create powerful interfaces that show: 3D models, maps and camera images

What you will learn

Project Syllabus

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.

3 hrs.

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.

3 hrs.

Unit 2: Setting up our development environment (Part 2)
  • Understanding what JavaScript is
  • Setting Up a JavaScript Framework
  • Define a Standard to Debug the Code

4 hrs. 

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

4 hrs.

Unit 4: Move the Robot! Using a Joystick!
  • The Joystick Interface
  • Let’s Practice!

2 hrs.

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
  • Let’s Practice! – Control a Robot using JavaScript

5 hrs.

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

4 hrs.

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

4 hrs.

Unit 8: Showing a map on the web page
  • Understanding how it works
  • Configuration for the web page
  • Inserting the map element

4 hrs.

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

5 hrs.

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

4 hrs.

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

5 hrs.

Unit 12: Final Project

Develop a web interface to control a robot performing mapping in a given environment.

12 hrs.

Ready to get started?

Start learning ROS & Robotics online quickly and easily

Top universities choose The Construct for Campus to teach ROS & Robotics.

Pin It on Pinterest