How to control Turtlebot3 in Gazebo using a web interface? - html

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:
Launch Gazebo simulator turtlebot3:
roslaunch turtlebot3_gazebo turtlebot3_world.launch
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
Fire up another terminal to start npm:
npm start
run your python turtlebot3 file in catkin_ws directory:
rosrun name_of_the_package turtlebot3_move_gz.py
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
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.