 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. |
Visualizing a Marker Topic
Description: This tutorial shows you how to visualize a marker topic using ros3djs.Keywords: ros3djs, web interface, javascript, markers, Robot Web Tools
Tutorial Level: BEGINNER
Marker Example
In this tutorial, we show how to visualize a marker topic in the browser. 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 <script type="text/javascript" src="http://static.robotwebtools.org/threejs/current/three.min.js"></script>
7 <script type="text/javascript" src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
8 <script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
9 <script type="text/javascript" src="http://static.robotwebtools.org/ros3djs/current/ros3d.min.js"></script>
10
11 <script type="text/javascript" type="text/javascript">
12 /**
13 * Setup all visualization elements when the page is loaded.
14 */
15 function init() {
16 // Connect to ROS.
17 var ros = new ROSLIB.Ros({
18 url : 'ws://localhost:9090'
19 });
20
21 // Create the main viewer.
22 var viewer = new ROS3D.Viewer({
23 divID : 'markers',
24 width : 800,
25 height : 600,
26 antialias : true
27 });
28
29 // Setup a client to listen to TFs.
30 var tfClient = new ROSLIB.TFClient({
31 ros : ros,
32 angularThres : 0.01,
33 transThres : 0.01,
34 rate : 10.0,
35 fixedFrame : '/my_frame'
36 });
37
38 // Setup the marker client.
39 var markerClient = new ROS3D.MarkerClient({
40 ros : ros,
41 tfClient : tfClient,
42 topic : '/visualization_marker',
43 rootObject : viewer.scene
44 });
45 }
46 </script>
47 </head>
48
49 <body onload="init()">
50 <h1>Simple Marker Example</h1>
51 <div id="markers"></div>
52 </body>
53 </html>
Code Explanation
Now that we have an example, let's look at each piece.
Error: No code_block found We first need to import all of the required JavaScript files. Here, we use the Robot Web Tools CDN.
Error: No code_block found Next, we need to 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.
Error: No code_block found We then need to create a 3D viewer. We provide the dimensions as well as the HTML div where the viewer will be placed.
Error: No code_block found We then create a TF client. This client will subscribe to changes in the TF tree and update the scene appropriately. In this case, we will consider /my_frame to be the fixed frame. We also set change thresholds to throttle the rate at which changes are published.
Error: No code_block found This section of code creates the actual MarkerClient object. Here we provide the Ros node object and TF client created above, the viewer's scene to render to, and the name of the marker topic to render.
Error: No code_block found It is important to remember to call the init() function when this page is loaded. This will call the JavaScript code discussed above.
Error: No code_block found Within the HTML <body> we create a div with a matching ID for the viewer. This is where the markers will be shown.
Running the Example
At this point we are ready to run the example. To do so, you will need to have visualization_marker_tutorials, rosbridge_server, and tf2_web_republisher installed. Refer to their respective Wiki pages for installation instructions, or simply install their latest builds from the Ubuntu repositories.
Simply launch the necessary nodes with the following:
Finally, you are now ready to bring up your HTML page in a web browser. 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 us at any point with questions and comments.
