I was inspired to build this project because my friend who I teamed with at a previous KleinHacks suggested that we make a program that could give you directions to your classes if you entered the room number. Unfortunately at the time both of us lacked the experience and resources to build such a thing but now after continuing to grow my skills and get more projects under my belt I felt I was ready to tackle this issue.

What it does

This website will let you input any room number at Klein and give you the shortest path that you should take to get there. The map can give you directions to any room from any room regardless of whether they are on different floors because it understands how to navigate up and down flights of stairs. Unfortunately due to time limitations only the academic building of the highschool has support for directions but thanks to the system I designed to build the schematics of the rooms and paths it wouldn't take more than a few hours to add all the other rooms in the building.

How I built it

The website is built using HTML for the layout, JavaScript for drawing and calculating the directions and Bootstrap as well as some of my own CSS for styling the floor picker and navigation bar.

Challenges I ran into

When I first started brainstorming how I would implement the systems needed to provide indoor navigation I was stuck at how I would define what paths the navigation would take from going from class to class because I can't exactly walk through walls even though it might be the shortest way to get class. My first idea was having lines that would run through the hallways and would act like a road that you could get on or off at any point but in my head it seemed to confusing so I went with another system instead. The final system uses points that are either a destination (a classroom) or a travel point that defines how you can move around the map. The destinations have their room number and position stored so when you enter a room number the website knows what position to start at and the travel points store their position, and a list of other possible travel points that it is connected to. When you want to get from one place to another it's almost like you're solving a maze because you have to try out every possible combination of moves to find the shortest path.

Accomplishments that I'm proud of

I'm proud of how I was able to adapt my pathfinding algorithm and teach it how to use the stairs. When I was first designing it there were many bugs where it would tell you to go up one staircase then when you went to the next floor up it would give you directions as if you went up a different staircase. There were also bugs with the pathfinding where when it came to a junction it would just choose one direction and not even check the other path.

What I learned

I learned how to use a Canvas element to dynamically draw to a webpage and how to style elements using the Bootstrap library. I also learned and implemented dijkstra's algorithm to determine the shortest possible path between a system of points.

What's next for KleinMaps

I think it would be cool if you could see an estimated time it would take for you to walk from one class to another. In the future this could be expanded to be an indoor streetview or through the use of augmented reality you could project directions over the real world.

Share this project: