 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. |
Using TF with roslibjs
Description: This tutorial shows you how to use TF with roslibjs.Keywords: roslibjs, tf, Robot Web Tools
Tutorial Level: BEGINNER
Getting Started
This tutorial involves writing a single HTML file, which will contain the HTML and JavaScript needed to subscribe to TF transforms from roslibjs. To begin, create a file tf.html with your favorite text editor.
The complete code for this tutorial can be found in the roslibjs repo.
The HTML Code
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <script src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
6 <script src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
7
8 <script type="text/javascript" type="text/javascript">
9 var ros = new ROSLIB.Ros({
10 url : 'ws://localhost:9090'
11 });
12
13 var tfClient = new ROSLIB.TFClient({
14 ros : ros,
15 fixedFrame : 'world',
16 angularThres : 0.01,
17 transThres : 0.01
18 });
19
20 tfClient.subscribe('turtle1', function(tf) {
21 console.log(tf);
22 });
23
24 ros.on('connection', function() {
25 console.log('Connected to websocket server.');
26 });
27
28 ros.on('error', function(error) {
29 console.log('Error connecting to websocket server: ', error);
30 });
31
32 ros.on('close', function() {
33 console.log('Connection to websocket server closed.');
34 });
35 </script>
36 </head>
37
38 <body>
39 <h1>Simple TF Example</h1>
40 <p>Check the JavaScript console for the output.</p>
41 </body>
42 </html>
Code Explanation
Now that we have an example, let's look at each piece.
We need to create a Ros node object to communicate with a rosbridge server. In this example, the script will connect to localhost on the default port of 9090.
A ROSLIB.TFClient object is used to subscribe to TFs from ROS. The fixedFrame is the frame all requested transforms will be relative too. The thresholds are the amount a TF must change in order to be republished.
The ROSLIB.TFClient docs details the options and available functions more.
We subscribe to the TF between the fixed frame ('world') and the 'turtle1' frame. Any transforms between these two frames greater than the specified threshold will trigger the callback. The message returned is a ROS TF message.
This adds a listener for a connection event to the ros object. The following two blocks do the same for error and close events. This way, we can monitor the connection to the rosbridge server.
Running the Example
At this point we are ready to run the example. To do so, you will need to have installed the following packages:
- ros-hydro-ros-base (basic ROS installation)
ros-hydro-rosbridge-server (rosbridge_suite)
- ros-hydro-tf2-web-republisher (Responsible for throttling TF messages to the web)
To begin, we will launch ROS. To do so, run the following in a terminal:
roscore
Next, start publishing TF messages for a simulated turtle:
roslaunch turtle_tf turtle_tf_demo.launch
TFs are published at a very high rate. We need to run the tf2_web_republisher to throttle the TFs sent to the browser.
rosrun tf2_web_republisher tf2_web_republisher
Once everything 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. You can open up the file directly in the browser without running a web server. The data outputted happens in the browser's Web Console.
