How to connect Turtlebot in Gazebo to a Web Interface

edit

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 
 cmdVel.publish(command);

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