Escape from Boelter

Inspiration

Boelter Hall is known among UCLA students for its non-intuitive layout and its difficult navigation. Some floors are simply not fully connected to each other, while others have secret alleyways. Some elevators go to the first floor while others don't, and the entire place becomes a different floor on a different building in some areas. To assist new or lost visitors in navigating the building, our app streamlines the process of getting around Boelter Hall.

What it does

This app takes two inputs: a start location and a destination location. The start location is within Boelter Hall. The valid starting locations are mostly rooms, but the building also has a few landmarks that users can enter as well, such as its rooftop or its cafe. The destination can be chosen from a list of known landmarks on the UCLA campus, such as The Hill or Powell Library. The app will then display the optimal route from that part of Boelter Hall to the destination.

How we built it

We used a Flask backend, and a HTML/CSS frontend. Locations inside Boelter hall and throughout UCLA's campus are stored as nodes in an undirected graph. We use Djikstra's algorithm to determine the optimal path between the start and endpoints. This path is then transformed into user-friendly, readable directions that are displayed on our webpage. These directions are accompanied with a graphical visualization of the path, showing nearby rooms and landmarks along the suggested route, which we created utilizing the D3.js library.

Challenges we ran into

A big challenge was mapping the entirety of Boelter Hall, where every floor has a unique character. We had to physically survey the entire building to understand its layout. The first and second floors, especially, are very disconnected and hard to navigate, and they took the longest time to survey and integrate with the rest of the floors. Another challenge was that nodes stored in our graph were different to directly convert into an easy to understand set of directions. We had to run through a lot of casework with these nodes to convert them into clear directions. Furthermore, integrating a visual representation that is neither too simple nor too overwhelming was quite challenging as well.

Accomplishments that we're proud of

We are all fairly new to web development, so we are very proud to create an interactive website that functions the way we envisioned it. We're also proud of our pathfinding algorithm; it is very accurate and easy to fine-tune if a certain path needs higher priority than another.

What we learned

We learned about the basics of web development using Flask and HTML/CSS. We learned how to take in form input, process it, and put an output onto the screen. We also learned how to host webpages, make use of relevant libraries, and design intuitive UI all while working in a collaborative environment.

What's next for Escape from Boelter

As we continue to expand on our project, we plan to extend the selection of input locations to more notable locations and buildings across UCLA. In particular, the mathematical sciences building is equally as confusing as Boelter Hall, and it would make sense to expand our app to have starting locations in that building as well. Additionally, we could integrate more visuals to show the user exactly where to go in Boelter hall to escape it. A technology we were looking at was D3.js, a javascript library that excels at manipulating data, creating scalable graphics and visualizations, and integrating them into web applications. Currently, we are using the library is used to generate a simple not-to-scale visualization of a suggested route, but given more time, we hope to use D3.js to create a to-scale map that can be used to more accurately traverse Boelter.