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 Nav2D Widget

Description: This tutorial shows you how to create a simple 2D navigation widget.

Keywords: nav2djs, web interface, teleoperation, Robot Web Tools

Tutorial Level: BEGINNER

Contents

Nav2D Example
Support

Nav2D Example

In this tutorial, we show how to create and make use of a Nav2D 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 <script type="text/javascript" src="http://cdn.robotwebtools.org/EaselJS/current/easeljs.min.js"></script>
   7 <script type="text/javascript" src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
   8 <script type="text/javascript" src="http://cdn.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
   9 <script type="text/javascript" src="http://cdn.robotwebtools.org/ros2djs/current/ros2d.min.js"></script>
  10 <script type="text/javascript" src="http://cdn.robotwebtools.org/nav2djs/current/nav2d.min.js"></script>
  11 
  12 <script type="text/javascript">
  13   /**
  14    * Setup all GUI elements when the page is loaded.
  15    */
  16   function init() {
  17     // Connect to ROS.
  18     var ros = new ROSLIB.Ros({
  19       url : 'ws://localhost:9090'
  20     });
  21 
  22     // Create the main viewer.
  23     var viewer = new ROS2D.Viewer({
  24       divID : 'nav',
  25       width : 750,
  26       height : 800
  27     });
  28 
  29     // Setup the nav client.
  30     var nav = NAV2D.OccupancyGridClientNav({
  31       ros : ros,
  32       rootObject : viewer.scene,
  33       viewer : viewer,
  34       serverName : '/pr2_move_base'
  35     });
  36   }
  37 </script>
  38 </head>
  39 
  40 <body onload="init()">
  41   <h1>Simple Navigation Example</h1>
  42   <div id="nav"></div>
  43 </body>
  44 </html>

Code Explanation

Now that we have an example, let's look at each piece.

   6 <script type="text/javascript" src="http://cdn.robotwebtools.org/EaselJS/current/easeljs.min.js"></script>
   7 <script type="text/javascript" src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
   8 <script type="text/javascript" src="http://cdn.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
   9 <script type="text/javascript" src="http://cdn.robotwebtools.org/ros2djs/current/ros2d.min.js"></script>
  10 <script type="text/javascript" src="http://cdn.robotwebtools.org/nav2djs/current/nav2d.min.js"></script>

We first need to import all of the required JavaScript files for nav2d.js. Here, we use the Robot Web Tools CDN.

  18     var ros = new ROSLIB.Ros({
  19       url : 'ws://localhost:9090'
  20     });

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.

  23     var viewer = new ROS2D.Viewer({
  24       divID : 'nav',
  25       width : 750,
  26       height : 800
  27     });

We then need to create a 2D viewer for the navigation widget. We provide the dimensions as well as the HTML div where the viewer will be placed.

  30     var nav = NAV2D.OccupancyGridClientNav({
  31       ros : ros,
  32       rootObject : viewer.scene,
  33       viewer : viewer,
  34       serverName : '/pr2_move_base'
  35     });

This section of code creates the actual OccupancyGridClientNav object. Here we provide the Ros node object created above, the viewer to render to, and the name of the action server to send navigation commands to.

  40 <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.

  42   <div id="nav"></div>

Within the HTML <body> we create a div with a matching ID for the viewer. This is where the widget will be shown.

Running the Example

At this point we are ready to run the example. To do so, you will need to have pr2_simulator, rosbridge_server, pr2_2dnav, willow_maps, and robot_pose_publisher 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_wg_world.launch

Next, start the navigation packages (note that the location of your Willow map may be different):

   1 export ROBOT=sim
   2 rosrun map_server map_server /opt/ros/groovy/stacks/wg_common/willow_maps/willow-sans-whitelab-2010-02-18-0.025.pgm 0.025
   3 roslaunch pr2_2dnav pr2_2dnav.launch

Next, be sure and localize the robot using a program such as rviz. Instructions on doing so can be found on the pr2_2dnav page. Furthermore, we should tuck the robots arms with the following:

```
roslaunch pr2_tuckarm tuck_arms.launch
```

We now have to publish the robot's pose correctly. To do so, run the following:

rosrun robot_pose_publisher robot_pose_publisher

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. To navigate with the robot, double click a desired position on the map. 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.

Russell Toris
- rctoris@wpi.edu
- Academic Website

ROS 2 Documentation

Wiki

Page

User