How to control Turtlebot3 in Gazebo using a web interface?

Question

If I have a simulated Turtlebot3 robot in Gazebo, how could I link it and control its movement using a self-made HTML/Bootstrap web interface (website?) I have tried many tutorials but none of them have worked (may be because they are all from a few years ago). Would appreciate any recent links or tutorials!

Answer 1

you can do so by installing gazebo, gzweb, turtlebot3 package. What is gzweb?

GzWeb is usually installed on an Ubuntu server. Gzweb is a client for Gazebo which runs on a web browser. Once the server is set up and running, clients can interact with the simulation simply by accessing the server's URL on a web browser.

For gazebo and gzweb installation follow: http://gazebosim.org/tutorials?tut=gzweb_install&cat=gzweb

After creating a package using catkin create a python file turtlebot3_move_gz.py and add the following code to the python script:

#!/usr/bin/env python3

import rospy
from geometry_msgs.msg import Twist    

def talker():
  rospy.init_node('vel_publisher')
  pub = rospy.Publisher('/cmd_vel', Twist, queue_size=10)
  rate = rospy.Rate(2)
  move = Twist() # defining the way we can allocate the values
  move.linear.x = 0.5 # allocating the values in x direction - linear
  move.angular.z = 0.0  # allocating the values in z direction - angular

while not rospy.is_shutdown():
  pub.publish(move)
  rate.sleep()

if __name__ == '__main__':
  try:
      talker()
  except rospy.ROSInterruptException:
      pass

Save the file

Next steps

In terminal:

1. Launch Gazebo simulator turtlebot3: roslaunch turtlebot3_gazebo turtlebot3_world.launch

2. Start gzwebserver in a new terminal. On the server machine, start gazebo or gzserver first, it's recommended to run in verbose mode so you see debug messages:

   gzserver --verbose

3. Fire up another terminal to start npm:

   npm start

4. run your python turtlebot3 file in catkin_ws directory:

   rosrun name_of_the_package turtlebot3_move_gz.py

5. Open a browser that has WebGL and websocket support (i.e. most modern browsers) and point it to the IP address and port where the HTTP server is started, for example:

   http://localhost:8080

6. To stop gzserver or the GzWeb servers, just press Ctrl+C in their terminals.

Answer 2

This is not something I have done before, but with a quick search I found some useful information.

You need to use rosbridge_suite and in specific rosbridge_server. The latter provides a low-latency bidirectional communication layer between a web browser and servers. This allows a website to talk to ROS using the rosbridge protocol.

Therefore, you need to have this suite installed and then what you can do is to use it to publish a Twist message from the website (based on the website UI controls) to Turtlebot's command topic.

Don't think of Gazebo in this equation. Gazebo is the simulator and is using under-the-hood ROS topics and services to simulate the robot. What you really need to focus on is how to make your website talk with ROS and publish a Twist message to the appropriate ROS topic.

I also found a JavaScript library from ROS called roslibjs that implements the rosbridge protocol specification. You can, therefore, use JavaScript to communicate with ROS and publish robot velocities to the TurtleBot.

An example excerpt from this tutorial (not tested):

<script type="text/javascript" type="text/javascript">
  var cmdVel = new ROSLIB.Topic({
    ros : ros,
    name : '/cmd_vel',
    messageType : 'geometry_msgs/Twist'
  });

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

  cmdVel.publish(twist);
</script>

As you can see above the JavaScript code creates an instance of the Twist message with the linear and angular robot velocities and then publishes this message to ROS's /cmd_vel topic. What you need to do is to integrate this into your website, make the velocities in this code to be dynamic based on the website UI controls and start the rosbridge server.