ROS host computer interface-nav2djs navigation component

The nav2djs navigation component is to control the machine through the web page. Specifically, we run the navigation algorithm on the robot side, and then use the browser to view the robot map on the other device side under the LAN, and set it by clicking on the web page. given target point to guide the robot to move to a position, if it has doubts about the function of this component can check out the official demo video: [2] or an official video

1. Official tutorial demo

The nav2djs navigation component official also gives a detailed tutorial (address [1]), but if we run the html file in the tutorial directly, an error will occur, the effect of the author’s video display will not be obtained, and the picture cannot be displayed.

This is Due to our domestic network environment, we cannot access the address of cdn.robotwebtools.org, so we need to change the cdn to static, and the address and link of the dependency to:

<script src="http://static.robotwebtools.org/EaselJS/current/easeljs.min.js"></script>
<script src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script src="http://static.robotwebtools.org/roslibjs/current/roslib.js"></script>
<script src="http://static.robotwebtools.org/ros2djs/current/ros2d.js"></script>

And add the js script under the src folder.

<script src="../src/nav2d.js"></script>
<script src="../src/navigator/ImageMapClientNav.js"></script>
<script src="../src/navigator/Navigator.js"></script>
<script src="../src/navigator/OccupancyGridClientNav.js"></script>

Finally, modify the IP address of the host running the ROS service. If you are running on this machine, keep the default. Otherwise, change it to the IP of the computer running ROS like me. After modifying the

html file, we start to run the ros command in the tutorial
Note : On the kinetic version, the map under the path /opt/ros/groovy/stacks/wg_common/willow_maps/willow-sans-whitelab-2010-02-18-0.025.pgm should be modified to: /opt/ros/kinetic /share/willow_maps/willow_maps/willow-sans-whitelab-2010-02-18-0.025.pgm, the rest remain unchanged

roslaunch pr2_gazebo pr2_empty_world.launch

rosrun map_server map_server /opt/ros/kinetic/share/willow_maps/willow_maps/willow-sans-whitelab-2010-02-18-0.025.pgm 0.025

export ROBOT=sim
roslaunch pr2_2dnav pr2_2dnav.launch

roslaunch pr2_tuckarm tuck_arms.launch

rosrun robot_pose_publisher robot_pose_publisher

roslaunch rosbridge_server rosbridge_websocket.launch

Next, run the occupancygrid.html file to see the effect in the tutorial,

and then click twice and the red triangle in the tutorial will appear. The

yellow triangle represents the current position of the robot on the map, and the red represents the target point. coordinate of. At this time, when we check the pr2_move_base/goal topic, the coordinate position of the clicked target point will appear

2 turtlebot simulation experiment

Due to the Pr2 robot used in the official tutorial, many nodes need to be started to navigate the robot, and some nodes will run wrong on the kinetic version, so we use turtlebot instead. We run the simulation of turtlebot 2D navigation on the Ubuntu computer, and then run the web control program on another computer, display a point on the map displayed on the web page, and set the changed point as the target point and send it to move_base.

2.1 Installation environment

In ros comes the simulation package of TurtleBot in Gazebo. Can be demonstrated by installing the simulation package of turtlebot

sudo apt-get install ros-kinetic-turtlebot-gazebo
sudo apt-get install ros-kinetic-turtlebot-simulator

Use commands

roslaunch turtlebot_stage turtlebot_in_stage.launch 

Start the map navigation car simulation package to realize the map navigation function.

First of all, we test whether the simulation environment of turtlebot navigation is configured correctly. We click "2D Nav Goal" on the interface of RVIZ to give turtlebot a target position to verify whether turtlebot can navigate correctly. Below is a test video ( HD video link )

2.2 nav2djs navigation component control

First modify the occupancygrid.html file in the nav2djs-develop\examples directory to ensure that the dependencies and host addresses are correctly configured. At the same time, modify the serverName parameter in line 36 of the source file to:'/move_base', and the rest can remain unchanged. The following is my revised content:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<script src="http://static.robotwebtools.org/EaselJS/current/easeljs.min.js"></script>
<script src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script src="http://static.robotwebtools.org/roslibjs/current/roslib.js"></script>
<script src="http://static.robotwebtools.org/ros2djs/current/ros2d.js"></script>
<script src="../src/nav2d.js"></script>
<script src="../src/navigator/ImageMapClientNav.js"></script>
<script src="../src/navigator/Navigator.js"></script>
<script src="../src/navigator/OccupancyGridClientNav.js"></script>
<script>
  /**
   * Setup all visualization elements when the page is loaded. 
   */
  function init() {
    // Connect to ROS.
    var ros = new ROSLIB.Ros({
      url : 'ws://10.5.3.11:9090'
    });

    // Create the main viewer.
    var viewer = new ROS2D.Viewer({
      divID : 'nav',
      width : 350,
      height : 400
    });

    // Setup the nav client.
    var nav = NAV2D.OccupancyGridClientNav({
      ros : ros,
      rootObject : viewer.scene,
      viewer : viewer,
      serverName : '/move_base'
    });
  }
</script>
</head>

<body onload="init()">
  <h1>Simple Map Example</h1>
  <p>Run the following commands in the terminal then refresh this page.</p>
  <ol>
    <li><tt>roslaunch pr2_gazebo pr2_empty_world.launch</tt>
    </li>
    <li>Place the Willow Garage model over the robot by selecting <tt>Willow Garage</tt> from
      the models list in the <tt>Insert</tt> tab.</li>
    <li><tt>rosrun map_server map_server
        /opt/ros/groovy/stacks/wg_common/willow_maps/willow-sans-whitelab-2010-02-18-0.025.pgm 0.025</tt>
    </li>
    <li><tt>export ROBOT=sim</tt></li>
    <li><tt>roslaunch pr2_2dnav pr2_2dnav.launch</tt></li>
    <li><tt>roslaunch pr2_tuckarm tuck_arms.launch</tt></li>
    <li><tt>rosrun robot_pose_publisher robot_pose_publisher</tt></li>
    <li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt>
    </li>
  </ol>
  <div id="nav"></div>
</body>
</html>

After modifying the html file, we start the turtlebot navigation emulation and rosbridge on the Ubuntu computer ( note: please make sure that the two computers are connected under the same WIFI )
run on the Ubuntu computer:

export TURTLEBOT_STAGE_WORLD_FILE="/opt/ros/kinetic/share/turtlebot_stage/maps/stage/maze.world"
export TURTLEBOT_STAGE_MAP_FILE="/opt/ros/kinetic/share/turtlebot_stage/maps/maze.yaml"
roslaunch turtlebot_stage turtlebot_in_stage.launch

Open a new terminal:

roslaunch rosbridge_server rosbridge_websocket.launch 

Finally, we click a point on the map on the web page, and then a red arrow will be displayed in the same place in RVIZ on the Ubuntu computer (this is because the topic sent by the web page is move_base/goal), and then the car will itself The development movement has reached the designated target position, (HD video link)

参考：
【1】：https://github.com/GT-RAIL/nav2djs
【2】：https://wiki.ros.org/nav2djs/Tutorials/CreatingABasicNav2DWidget