ROS Resources: Documentation | Support | Discussion Forum | Index | Service Status | ros @ Robotics Stack Exchange
Ask Your Question

How to connect Turtlebot in Gazebo to a Web Interface

asked 2020-03-30 04:45:57 -0500

saintdere gravatar image

updated 2021-11-14 09:52:20 -0500

lucasw gravatar image

I would like to create a web interface (website) using HTML/Bootstrap to control the movement of a Turtlebot in Gazebo. I have tried many tutorials but none of them have worked (most of the tutorials are dated a few years back). Does anyone have any tips on how to do this?

I'm currently using Ubuntu 18.04 with ROS Melodic, Gazebo v9, Turtlebot3.

edit retag flag offensive close merge delete


Do you mean that you want to run only control user interface in the browser or also Gazebo user interface in the browser?

viktor.holova gravatar image viktor.holova  ( 2020-03-30 06:46:04 -0500 )edit

i want to control user interface in the browser (for example have up, down, left, right buttons on the website) that when pressed moves the robot in gazebo

saintdere gravatar image saintdere  ( 2020-03-30 07:31:10 -0500 )edit

2 Answers

Sort by » oldest newest most voted

answered 2020-03-30 08:52:29 -0500

updated 2020-04-03 08:18:33 -0500

That is quite easy - there is a standard powerful way ROS community has opened up ROS to the web technologies - roslibjs

In a nutshell you need take 3 key steps:

1) Install ros-melodic-rosbridge-server package (adopted from this tutorial ):

 $ sudo apt-get install ros-melodic-rosbridge-server

2) Includerosbridge_websocket.launch into the launch of your system along with turtlebot launch (adopted from this tutorial ): <launch> <include file="$(find rosbridge_server)/launch/rosbridge_websocket.launch" <arg="" name="port" value="8080"/> </include> </launch>

3) Include rolslib.js or rolslib.min.js into your HTML page and you will be able to easily publish/subscribe to/from topics, work with action servers as well as execute other ROS functionality like setting/getting parameters, etc. See this tutorial.

For example, publishing to a topic is as simple as following code:

 //declare reference to the topic that already exists in ROS backend
 var cmdVel = new ROSLIB.Topic({ros : ros,  
                                name : '/cmd_vel', 
                                messageType : 'geometry_msgs/Twist' });

 //create command message
 var command = new ROSLIB.Message({
     linear : {
       x : 0.1,
       y : 0.2,
       z : 0.3
     angular : {
       x : -0.1,
       y : -0.2,
       z : -0.3
     } });

 //publish the command to the topic 

EDIT: important note about 3):

Websocket server in ROS Melodic version of rosbridge-server enforces more web security then older versions. Therefore, you are not able to connect to the rosbridge-server from a HTML page that is not served from the same origin. For example, if you simply try to open your HTML page directly from a file on your local PC then websocket connection will fail because websocket server inside of rosbridge-server will refuse such connection. to

The way to solve connection issue is to have a web server serving your HTML page which you want to do eventually for your system anyway.

Here you have options. For example:

1) For simple tests running on your local Ubuntu 18.04 you can serve your HTML page(s) by running simple HTTP server provided by Python3 on your Ubuntu (see this answer)

cd /my/html/files  #directory where your HTML page is located
python3 -m http.server 8080

Then you can run your page by pointing any browser to http://localhost:8080/your_page.html (tested in both FireFox and Chrome)

2) Eventually if would like to have ROS-based system using this technology you can consider using roswww ROS package to serve your application's HTML pages. We have been successfully using it for a few years now

edit flag offensive delete link more


Hi, do you mean I have to include :

<launch> <include file="$(find rosbridge_server)/launch/rosbridge_websocket.launch" <arg="" name="port" value="8080"/> </include> </launch>

into the Turtlebot simulator launch file? Also, will the port value 8080 work with Turtlebot or do I have to change it? Thank you for the help!

saintdere gravatar image saintdere  ( 2020-03-30 21:04:04 -0500 )edit

Hi - I have tried creating a HTML page to control a ROS TurtleSim using rosbridge_websocket.launch and rolslib.js follwing this tutorial. However, I received the following errors in terminal :

[-] failing WebSocket opening handshake ('WebSocket connection denied: origin 'null' not allowed') [-] dropping connection to peer tcp4: with abort=False: WebSocket connection denied: origin 'null' not allowed

saintdere gravatar image saintdere  ( 2020-03-31 03:51:14 -0500 )edit

Answering your 3 questions:

1. Yes - if you don't want to start rosbridge manually as listed in the tutorial you found you need to include rosbridge_websocket.launch into simulator launch file or your own launch file that can start both simulator and rosbridge.

2. Any port number should work as long as it is not used by something else. For example, ports 8080 or 9090 will usually be fine

3. To resolve the error I would need to first look into at least two things - a) what port did you use on rosbridge side and in HTML - they must be the same (looks like port 9090 is default when you start rosbridge manually) b) You need to make sure you use correct host name or IP address in the URL of ROS (e.g. url : 'ws://localhost:9090') - did you run everything on a single computer or did you ...(more)

viktor.holova gravatar image viktor.holova  ( 2020-03-31 06:02:21 -0500 )edit

a) I used the default port 9090 for both rosbridge and HTML.

b) I'm running everything on the same computer, and in the URL of ROS I'm using ws://localhost:9090 exactly like the tutorial. In the Web Console in the browser it shows the error message: Firefox can’t establish a connection to the server at ws://

saintdere gravatar image saintdere  ( 2020-04-01 01:20:20 -0500 )edit

I just tested exactly how it is outlined in the tutorial you used and it worked for me except that I needed to change URL of roslibjs and EventEmitter2 scripts as specified in official ROS tutorial.

As far as localhost connection everything worked. There must be something on your PC preventing local connection. Are you following exactly tutorial exactly and running ROS on the host and not inside of Docker container for example ?

I just realized that I am running with Chrome browser on Ubuntu 16.04 though so maybe Chrome browser is stricter with more web security features running on newer Ubuntu OS...

viktor.holova gravatar image viktor.holova  ( 2020-04-02 14:50:16 -0500 )edit

Yes I'm following the tutorial exactly. I'm not sure if the issue is just on my PC as I tried it on another laptop and faced the same issue. (also Ubuntu 18.04) I am indeed running ROS on the host (directly through Terminal). What did you change the URL of roslibjs and EventEmitter2 scripts to? I didn't change anything and kept the code the same as the tutorial's.

saintdere gravatar image saintdere  ( 2020-04-03 01:41:16 -0500 )edit

I changed URLs to the roslibjs and EventEmitter2 to what current ROS tutorial is pointing too

viktor.holova gravatar image viktor.holova  ( 2020-04-03 07:59:42 -0500 )edit

This has been bothering me as we have been using this technology for years now. So I upgraded my laptop to Ubuntu 18.04 and ROS Melodic and was able to solve the issue. Please see updated answer

viktor.holova gravatar image viktor.holova  ( 2020-04-03 08:01:43 -0500 )edit

answered 2020-03-30 11:46:48 -0500

DrBot gravatar image

In addition, rosbridge can be set up to support wss as well as ws, and can be used with the google voice API for voice controlled navigation:

Once installed both RVIZ and Gazebo can be controlled by voice:

edit flag offensive delete link more

Question Tools

1 follower


Asked: 2020-03-30 04:45:57 -0500

Seen: 1,632 times

Last updated: Apr 03 '20