## For instruction on writing tutorials ## http://www.ros.org/wiki/WritingTutorials #################################### ##FILL ME IN #################################### ## for a custom note with links: ## note = ## for the canned note of "This tutorial assumes that you have completed the previous tutorials:" just add the links ## note.0= ## descriptive title for the tutorial ## title = Visualizing a Map ## multi-line description to be displayed in search ## description = This tutorial shows you how to visualize a map using ros3djs. ## the next tutorial description (optional) ## next = ## links to next tutorial (optional) ## next.0.link= ## next.1.link= ## what level user is this tutorial for ## level= BeginnerCategory ## keywords = ros3djs, web interface, javascript, Robot Web Tools #################################### <> <> == Interactive Marker Example == In this tutorial, we show how to a map in the browser. To begin, create a new HTML document and copy the follow code sample into it. === The HTML Code === {{{ #!cplusplus block=html_example

Simple Map Example

}}} === Code Explanation === Now that we have an example, let's look at each piece. <> We first need to import all of the required `JavaScript` files. Note the addition of the Collada loader. Here, we use the [[http://robotwebtools.org|Robot Web Tools]] CDN. <> 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`. <> We then need to create a 3D viewer. We provide the dimensions as well as the HTML div where the viewer will be placed. <> This section of code creates the actual `OccupancyGridClient` object. Here we provide the `Ros` node object and the viewer's scene to render to. By default, the map will be loaded from the `/map` topic. <> It is important to remember to call the `init()` function when this page is loaded. This will call the `JavaScript` code discussed above. <> Within the HTML `` we create a div with a matching ID for the viewer. This is where the interactive 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 [[map_server]], [[rail_maps]], and [[rosbridge_server]] 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 (note that the location of your map file may be different): {{{#!shell roscore rosrun map_server map_server /opt/ros/groovy/share/rail_maps/maps/ilab.pgm 0.05 roslaunch rosbridge_server rosbridge_websocket.launch }}} 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 [[https://github.com/RobotWebTools/ros3djs/issues|GitHub Issue Tracker]]. Feel free to contact us at any point with questions and comments. * [[mailto:robot-web-tools@googlegroups.com|robot-web-tools@googlegroups.com]]