www/index.html

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

<script type="text/javascript" src="./js/easeljs.min.js"></script>
<script type="text/javascript" src="./js/eventemitter2.min.js"></script>
<script type="text/javascript" src="./js/roslib.min.js"></script>
<script type="text/javascript" src="./js/ros2d.js"></script>
<script type="text/javascript" src="./js/nav2d.js"></script>

<script type="text/javascript">
  /**
   * Setup all GUI elements when the page is loaded.
   */
  function init() {
    // Connect to ROS.
    var ros = new ROSLIB.Ros();
    ros.on('error', function (error) {
        document.getElementById('state').innerHTML = "<span style='color: red;'><b>Error</b></span>";
    });
    ros.on('connection', function (error) {
        document.getElementById('state').innerHTML = "<span style='color: green;'><b>Connect</b></span>";
    });
    ros.on('close', function (error) {
        document.getElementById('state').innerHTML = "Close";
    });
    ros.connect('ws://' + location.hostname + ':9090');

    //######################################################################################//
    //######################                  config                  ######################//
    //######################################################################################//
    var map_topic = '/map';
    var use_tf = true;
    var map_frame = '/map';
    var base_frame = '/base_link';
    var robot_pose = '/robot_pose';
    var topicName = '/move_base_simple/goal';
    //######################################################################################//

    // 2D map subscriber for check map size
    var Maplistener = new ROSLIB.Topic({
      ros: ros,
      name: map_topic,
      messageType: 'nav_msgs/OccupancyGrid'
    });

    Maplistener.subscribe(function (message) {
      var map_metadata = message.info;
      var map_width = map_metadata.width;
      var map_height = map_metadata.height;
      console.log(map_width, map_height);
      Maplistener.unsubscribe();

      // Create the main viewer.
      // determine size
      console.log(window.innerWidth, window.innerHeight);
      if (window.innerWidth < window.innerHeight){
        var Width = window.innerWidth
        var Height = window.innerWidth * map_height / map_width
        if (window.innerHeight < Height){
          var Height = window.innerHeight
          var Width = window.innerHeight * map_width / map_height
        }
      }
      else{
        var Height = window.innerHeight
        var Width = window.innerHeight * map_width / map_height
        if (window.innerWidth < Width){
          var Width = window.innerWidth
          var Height = window.innerWidth * map_height / map_width
        }
      }

      var viewer = new ROS2D.Viewer({
        divID : 'nav',
        width : Width,
        height : Height
      });

      // Setup the nav client.
      var nav = NAV2D.OccupancyGridClientNav({
        ros : ros,
        rootObject : viewer.scene,
        viewer : viewer,
        use_tf: use_tf,
        map_frame: map_frame,
        base_frame: base_frame,
        map_topic: map_topic,
        robot_pose: robot_pose,
        topicName : topicName
      });
    });
  }
</script>
</head>

<body onload="init()">
<div class="title">
    <p>status: <label id="state">Disconnect</label></p>
    <h1>2D Nav Goal Web Publisher</h1>
</div>
  <div id="nav"></div>
</body>
</html>