Tutorial: Using the ROB 102 Navigation Web App

The ROB 102 Navigation Web App is a web-based application that allows you to visualize the paths generated by your DFS, BFS, and A-STAR search algorithms.
Once you implement DFS, BFS, and A-STAR, you can use the nav_cli, which is included with the project 3 starter code, to generate output which the web app can visualize for you. This tutorial will show you how to generate those files on replit and use the webapp.

Visualizing a Map

Before using the path planner on a given map, you may like to visualize the map to select the start and goal cells for you plan. To do this, we need to first download the map file which we could like to visualize to our computer.

To download a map file from replit, open the data folder, which is where all the maps are stored, find the map you would like to download, then click the 3 dots that appear next to the file when you hover over it. This will give you a drop down menu where you can select the Download option to download the file to your computer.

Image: Downloading a map file from replit

Once download, navigate to robotics102.github.io/nav-app/ Once open, click Upload Map File. This will open your file explorer where you can then select the map file that you downloaded, and upload it to the nav app. Once uploaded the map will automatically display. We now have the ability to click on the map to retrieve different cell values from the map to use to generate plans.

Image: Map File uploaded to the Web App

Visualizing a plan

The main use of the web app is to visualize both the plan that your search algorithms generate along with show the order which your search algorithm visits cells. You find that the starter code provides a command line interface (cli), named nav_cli, which is used to generate the necessary data to allow the web app to visualize a search path and visited cells.

To start, first navigate to your project on replit and open a terminal in replit. In the terminal, run cd build && cmake .. to generate the Makefile. Then run make. This will generate the application nav_cli. Assuming your code compiles, you should end up with something that looks as follows:

Image: Compiled nav cli

Now that the nav_cli is compiled, we can use it to run out search algorithms. The nav_cli is used as follows: ./nav_cli [map_file] [planning_algo] [start_x] [start_y] [goal_x] [goal_y] where [map_file] is the map which we would like to use, [planning_algo] is the desired search algorithm we would like to use (one of bfs, dfs, or astar), [start_x] and [start_y] are the starting cell x and y coordinates, respectively, and [goal_x] and [goal_y] are the goal cell x and y coordinates, respectively.

Try running ./nav_cli ../data/maze1.map astar 21 88 86 18. Assuming your code works properly, you will end up with the following output:

Image: using nav_cli

nav_cli generates an output file, named out.planner located in the build folder of your project. You will be able to open the file and see its contents, which will look as follows:

Image: generated nav output

Copy all the contents of that file, and navigate back to the web app. Paste this output in the text entry box and click submit. One done, you will see the map appear and the robot will be located at the start cell. Then, click Plan! and watch the generated plan come to life!

Image: Running the nav app