 Please ask about problems and questions regarding this tutorial on answers.ros.org. Don't forget to include in your question the link to this page, the versions of your OS & ROS, and also add appropriate tags. |
Creating a Basic Teleop Widget with Speed Control
Description: This tutorial shows you how to create a simple teleop widget where the speed can be controlled via a JQuery UI slider.Keywords: keyboardteleopjs, web interface, teleoperation, Robot Web Tools
Tutorial Level: BEGINNER
Keyboard Teleop Example
In this tutorial, we show how to create and make use of a keyboard teleop widget. To run the demo, it is easiest to use the pr2_simulator. To begin, create a new HTML document and copy the follow code sample into it.
The HTML Code
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5
6 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
7
8 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
9 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
10
11 <script type="text/javascript" src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
12 <script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
13 <script type="text/javascript" src="http://static.robotwebtools.org/keyboardteleopjs/current/keyboardteleop.min.js"></script>
14
15 <script type="text/javascript">
16 /**
17 * Setup all GUI elements when the page is loaded.
18 */
19 function init() {
20 // Connecting to ROS.
21 var ros = new ROSLIB.Ros({
22 url : 'ws://localhost:9090'
23 });
24
25 // Initialize the teleop.
26 var teleop = new KEYBOARDTELEOP.Teleop({
27 ros : ros,
28 topic : '/turtle1/cmd_vel'
29 });
30
31 // Create a UI slider using JQuery UI.
32 $('#speed-slider').slider({
33 range : 'min',
34 min : 0,
35 max : 100,
36 value : 90,
37 slide : function(event, ui) {
38 // Change the speed label.
39 $('#speed-label').html('Speed: ' + ui.value + '%');
40 // Scale the speed.
41 teleop.scale = (ui.value / 100.0);
42 }
43 });
44
45 // Set the initial speed .
46 $('#speed-label').html('Speed: ' + ($('#speed-slider').slider('value')) + '%');
47 teleop.scale = ($('#speed-slider').slider('value') / 100.0);
48 }
49 </script>
50 </head>
51
52 <body onload="init()">
53 <div id="speed-label"></div>
54 <div id="speed-slider"></div>
55 </body>
56 </html>
Code Explanation
Now that we have an example, let's look at each piece.
6 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
For this example, we will use a standard CSS style file for our UI slider.
We first need to import all of the required JavaScript files for JQuery. Here, we use the Google CDN.
11 <script type="text/javascript" src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
12 <script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
13 <script type="text/javascript" src="http://static.robotwebtools.org/keyboardteleopjs/current/keyboardteleop.min.js"></script>
We next need to import all of the required JavaScript files for keyboardteleop.js. Here, we use the Robot Web Tools CDN.
Next, we need to do is create a Ros node object to communicate with a rosbridge v2.0 server. In this example, the script will connect to localhost on the default port of 9090.
This section of code creates the actual Teleop object. Here we provide the Ros node object created above and the topic name that the simulated PR2 is listening on.
Here we create the UI slider using JQuery. Within the construction of this object, we specify that the slider will have a lower bound value of 0 and upper bound value of 100. We will start the slider with an initial value of 90. Additionally, we must provide a function as the slide argument. This function is called each time the value of the slider is changed. Within this function, we change two things: the text label in our HTML document and the scale variable of the Teleop object.
We make two more additional calls to set the initial values of the HTML text label and scale value.
52 <body onload="init()">
It is important to remember to call the init() function when this page is loaded. This will call the JavaScript code discussed above.
Within the HTML <body> we create two div sections. The first will be our speed label. This is will display to the user the current value of the UI slider. The next div section is where the actual UI slider will be rendered.
Running the Example
At this point we are ready to run the example. To do so, you will need to have both pr2_simulator and rosbridge_server installed. Refer to their respective Wiki pages for installation instructions, or simply install their latest builds from the Ubuntu repositories.
To begin, we will launch the simulator. To do so, run the following in a terminal:
roslaunch pr2_gazebo pr2_empty_world.launch
Once the simulator is running, we can launch the rosbridge v2.0 server with the following:
roslaunch rosbridge_server rosbridge_websocket.launch
Finally, you are now ready to bring up your HTML page in a web browser. Using the W, A, S, and D keys, you can move the robot forwards, rotate left, backwards, and rotate right respectively. Additionally, you can use the Q and E keys to strafe left and right respectively. The result should be a page that looks similar to the following:
Support
Please send bug reports to the GitHub Issue Tracker. Feel free to contact me at any point with questions and comments.
|
|
|
