Spike: indoor maps

[mohanadarafe]

General information

• SVG files have a <path> tag which is used to draw lines.

• We can use the following component to make our indoor map zoom-able

• We will need to draw all possible walking paths, identify classrooms, water fountains & bathrooms in the SVG file h8.svg provided

• I found this SVG selector that allows us to modify the file

The plan

1. Upon zooming in, the <MapView> should become the inside map. @csbduzi @badred123 were working on this.
2. Add theh8.svg file inside the Zoomablecomponent we found.
3. Add correct markers inside the floor map by modifying the XML file.
4. Mark up all classes, bathrooms, water fountains, escalators & more using this drawer. This basically is step 3, using an online editor!
5. Draw walkable paths (opacity 0 to not show them)
6. Using python, we will modify the XML to up the opacity to 1 if the path is needed to be displayed (through a path finding algorithm)

The algorithm

When I was on leet code, I did an interesting problem called Long Island. This problems solution is fairly similar to what our algorithm for inside maps will look like.

Assume that 0's are walkable paths & 1's are points of interest.

1 1 1 1 1
1 0 0 0 1 
1 0 E 0 1
S 0 0 0 1
1 1 1 1 1

S (start) is a classroom, E (end) is the staircase.

The algorithm starts at S & asks if it can go up, left, down or right. It can if you are within the map & the neighbor is a 0 (walk-able).

If it can, it sets its departing place to a 1, marking this as "visited" and traverses, making this a DFS algorithm. We can do this using python! Finally, when a path is found, we set its path tags to opacity: 1

[csbduzi]

Does the algorithm have to be written in the python? It may seem excessive in a react-native project...could it be written in JavaScript?

[AlainJobs]

In the Plan subsection, your first point : Upon zooming in, the should become the inside map (...). Do you have any idea how? Because this is quite vague... Will it be a second screen or everything is on the ?

[csbduzi]

For the zooming in, I had open a spike issue #109 , to see how we would display another "screen" after a specific zoom level...so are we still going with that idea?

[bkenza]

When you say "The algorithm starts at S & asks if it can go up, left, down or right" does this mean that we are tracking the user location? And if so, will it be accurate enough indoors?

[mohanadarafe]

Does the algorithm have to be written in the python? It may seem excessive in a react-native project...could it be written in JavaScript?

@csbduzi Not per say, but parsing the XML & modifying it would require python (as we did in 345). But, we can do it using JS as well with xmldom

In the Plan subsection, your first point : Upon zooming in, the should become the inside map (...). Do you have any idea how? Because this is quite vague... Will it be a second screen or everything is on the ?

@AlainJobs As Chris said, once the MapView delta is under value x, we switch to inside screen display

When you say "The algorithm starts at S & asks if it can go up, left, down or right" does this mean that we are tracking the user location? And if so, will it be accurate enough indoors?

@bkenza No, S can be a classroom and E can be a bathroom. We do not need the user location (since we can't do it inside a map). This is a situation where a user selects his starting and ending location.

[mohanadarafe]

Update!

Shortest Path Algorithm

I decided to go with Dijkstra's shortest path algorithm. It's widely known & easy to implement. Our graph consists of a data file which has all classrooms listed & their neighbour. So, for example, classroom H855 would have H853 & H857 as neighbours in the graph.

Where to Go Algorithm

I also saw the need to implement a where to go algorithm. This contains three scenarios: 1) Same floor directions 2) Different floor directions 3) Leave building directions