In this section, we can see the basic working of this project. Imagine that a Turtlebot simulation is running on your PC. We have to control the robot from the web based teleoperation, so when we press a button from web browser, the key press is detected using JavaScript code and map each key press to ROS Twist message. This is done by using rosbridge clients. The rosbridge client sends Twist message as JSON command to the rosbridge server. The communication is happening over WebSockets as shown in the preceding image. When ROS system receives this topic, it can feed to the robot.

At the same time, the TF data and robot description are sending to the rosbridge client for visualizing the robot movement inside the browser. This is done by tf2_web_republisher.

We are using a ROS package called keyboardteleopjs (http://wiki.ros.org/keyboardteleopjs), which can send Twist messages from a web browser according to the key press. Along with that, we are using ros3djs to visualize the robot model in the browser. Upon getting the JSON Twist command, the rosbridge server will convert it into the corresponding ROS topic. You find web keyboard teleoperation application keyboardteleop.html from chapter_12_code/ros_web_ws.

Before running the application, let's discuss the code. Open keyboardteleop.html in a text editor, and let's now look at the use of each section of the code.

Basically, web applications are written in HTML/CSS and JavaScript. Similar to other programming languages, initially we have to include the CSS/JS modules that we are going to use in the HTML code. We can call the APIs of these modules and use them in our code. Let's go through the various modules we are using in this code.

The following code snippet includes a CSS file and standard jQuery (https://jquery.com/) modules into this code:

    <link rel="stylesheet" type="text/css"     
    href="http://ajax.googleapis.com/   
    ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" /><script 
    src="https://ajax.googleapis.com/   
    ajax/libs/jquery/1.8.0/jquery.min.js"></script><script 
    src="https://ajax.googleapis.com/   
    ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

The following code snippet loads JavaScript modules required for loading mesh files into the web browser. We can load mesh files such as STL and COLLADA files, primarily.

    <script src="http://cdn.robotwebtools.org/   
    threejs/current/three.js"></script><script 
    src="http://cdn.robotwebtools.org/   
    threejs/current/ColladaLoader.js"></script><script 
    src="http://cdn.robotwebtools.org/   threejs/current/STLLoader.js"> 
    </script><script src="http://cdn.robotwebtools.org/   
    ColladaAnimationCompress/current/ColladaLoader2.js"></script>

The following JS modules are importing roslibjs and ros3djs. The roslibjs and ros3djs are imported from the build folder.

    <script src="http://cdn.robotwebtools.org/   
    EventEmitter2/current/eventemitter2.min.js"></script> 
    <script src="../build/roslib.js"></script> 
    <script src="../build/ros3d.js"></script> 

We can also include this from web resources:

    <script src="http://cdn.robotwebtools.org/   
    roslibjs/current/roslib.js"></script> 
    <script src="http://cdn.robotwebtools.org/ 
     ros3djs/current/ros3d.min.js"></script> 

The following script will help you to perform keyboard teleoperation from a web browser. The script is actually got by downloading the keyboardteleop ROS package:

    <script src="../build/keyboardteleop.js"></script> 

Alternatively, we can use the following line from the web resource:

    <script src="http://cdn.robotwebtools.org/      
    keyboardteleopjs/current/keyboardteleop.js"></script>

So we are done with including necessary modules for this application. Next, we have to add JavaScript code inside this HTML code. Following are the main section of the code, which is doing tasks such as connecting to the WebSocket, creating a handler for sending Twist messages, creating a handler for keyboard teleoperation, and creating a new 3D viewer, URDF, and TF client. Let's go through each section one by one.