1 of 39

2 of 39

Team Mapster

Valdyn Hunt

David Sergio

Naji Kaddoura

Jason Campbell

5

3 of 39

4 of 39

5 of 39

6 of 39

Indoor Navigation

Find the shortest path to x

Where is the nearest coffee shop?

Where are the vending machines?

Where is the nearest cafe?

Where is the restroom?

Fire extinguishers?

Recycling bin?

Defibrillator?

Etc.

7 of 39

iNavig8

indoor navigation system

8 of 39

Architecture + Terminology

9 of 39

System Architecture

10 of 39

11 of 39

David Sergio

12 of 39

Coordinate System

We can convert from latitude and longitude to an xy-plane, which works well for small areas.
Two objects are used to calibrate the map using latitude and longitude.
Now, we can calculate the scale of our map.

13 of 39

Image file + xy-plane scaling factors

Armed with this global scale, we can then create a map with pixel coordinates that can be converted to real (e.g. feet, meters) coordinates.

We use floorplan style images which are calibrated to geographical coordinates. Then objects can be created and drawn on the floorplans. Objects are anything that have an object type, and can be a path, or a door, or a gateway (e.g stairs) that connects to another location.

Objects are connected to each other with a bidirectional graph data structure. Using such a data structure allows us to create paths that are totally customizable for the user.

Challenges: with multiple apps (both an admin and an Android) that draw maps, it is very difficult to get the exact scale correct, because of differences in drawable area in different applications (react web app canvas vs android canvas)

14 of 39

Shortest Path Algorithms

We implemented Dijkstra’s algorithm to calculate shortest path using bi-directional graph edges representing connections between points on a map.

Challenges

Dijkstra’s algorithm with Directed Cyclic Graphs can generate paths which are not necessarily the shortest. A continuation of this project would be adjust the data type or algorithm to better deal with cycles.

An interesting continuation of this project would be to implement additional algorithms. Other path-finding and related algorithms include A*, Bellman-Ford, Floyd–Warshall, and more...

15 of 39

Back-end Architecture

We created a Serverless backend RESTful API, written in Java and deployed using AWS Lambda and API Gateway. These are known as “Platform-as-a-service”

Features:

Part of the back-end code was reused as a library in the Android App
Cloud-based API Gateway
Scalable, export/import, deploy to different environments
Access management and usage plans, using API key and/or authentication

Challenges:

Much of the official documentation is in Python

16 of 39

User Management

We used a cloud-based user management system for login and register: Amazon Web Services - Cognito

Features

Easy-to-use JavaScript API
Triggers for additional functionality, such as analytics
Security

17 of 39

Naji Kaddoura

18 of 39

Naji

Database

Design

API

CRUD

Shortest Path
Front-End

Import & Export
Design

19 of 39

Challenges

Features

Services

Amazon Web Services

React

Learning

Search Bar For Destination
Text-to-Speech
Auto-Generate Connections

20 of 39

Jason Campbell

21 of 39

Design

Code

Document

Database Architecture
Flowsheets
Wireframes
Mockups
Coding
Debugging

22 of 39

Wireframes and Mockups

23 of 39

Demo: Admin User & Web Application

· After the design process, I went to work on creating the front-end system from the mock-ups.

· Since we had ultimately decided on using ReactJS, it took some extra time to learn more about it

· The login section, such as forgot password, register or create account and the actual login page, were done first

· I created the dashboard which allowed the admin users to get a quick look of the location by title and image, as well as the ability to go to the mapping portion of the application

· The User section which allowed the admin user to view the other admin users who were attached to that location or sub-locations.

· The next feature of this would be the ability to add, or remove permission of another user. Sometimes when there is a large location, having 1 admin would be too much.

· So our thinking was that different sections of a location could be assigned to different users instead of a business relying on just 1 person to handle all of it.

· Then I added a locations tab where the admin user could get some more information (if needed), and have the ability to add a sub-location or delete the location.

· I thought having multiple links to the mapping section, which is the real meat of the application, would be a necessary redundancy.

· Since the admin would have the ability to delete a location, we implemented a backup feature in our options tab that allowed the admin to export a text file containing all the locations, and all objects assigned to each location.

· As I said though, the most important part of this application was the mapping section, where I had collaborated with Valdyn on. The mapping section would give the admin user the tools to add objects and connections to the location.

24 of 39

Challenges

Features

Performance

Frameworks NextJS

Third-party Applications:

Konva

Android:

Re-learning

Beacons

real-time tracking

Map

adding a 3rd dimension

Augmented Reality (AR)

· There are 3 Challenges come to mind when I look back on this project

· The first would be when we wanted to improve the performance of the web application.

· We attempted to use an additional framework which would have increased performance, but it didn't work out. Learning those two frameworks at the same time plus a drawing library wasn’t feasible

· That library was called Konva. It did not play well with others, and lacked documentation. However, Valdyn took it head on, and figured it all out.

· The last challenge was Android or Android Studio.

· I hadn't touched Android Studio since it was first released (2014?), so whatever knowledge I had before was obviously gone and obsolete

· The next features that I would like to see for the iNavig8 application would be real-time tracking using the bluetooth beacons.

· We had gotten really close to finishing it, to the point we could see the devices as well as get an approximate distance between the phone and beacon

· Another feature would be for our mapping.

· We currently are display two-dimensional, and having a 3rd dimension would open up so many more possibilities and features for the application

· Finally, and I understand that Stu does not like AR, but I think that would be a cool feature to have

25 of 39

Valdyn Hunt

26 of 39

Valdyn

Front-End App architecture, libraries, frameworks
React App Design

Design/Implement map design screen
Drag and Drop object creation
Data sidebar
Icons and Toolbar

Beacon Theory and research

How to find the user position without going into unneeded complexity
Reference Android app with Jason

Shows our beacons
Displays distance from each one

27 of 39

Early Javascript version, mobile design

28 of 39

29 of 39

BLE Beacons

30 of 39

Getting the GPS Coordinates

47.490157, -117.585002

(latitude, longitude)

31 of 39

32 of 39

Challenges

Features

Frameworks and libraries

NextJS, React, React-Konva, React-Bootstrap, Font-Awesome

Android

A little iPhone development experience, but no Android.

Android integration of Beacons
Custom icon sets, custom shapes
Multi-location connections, path
iPhone app
User Street View - Augmented Reality

33 of 39

Connections

Need for shortest path calcs

Note to self:

I cannot walk through walls.

34 of 39

Demo

35 of 39

If it is the first time designing at that location you need to set it up.

We click on a location to go into design mode.

You are reminded….so drag the primary and secondary points into place, refresh

(tiny pause)

Now enter the corresponding GPS coordinates of those points

(quicker)

This will scale everything you do from now on.

Now we can create new objects by just drag one where you want it to go.

(quickly)

...this calls the API and adds the object to our location. It shows on the screen only after the response has been received back.

Now we can click on an element to update its name or description or to delete it.

We can also unhide the data in the sidebar to see all elements in that location, and clicking over there will also allow editing or deleting.

We are shown the object info as we hover our mouse on the map

(slower)

To modify our display we can zoom in and out as well as pan the map.

We also click an a map element to add or delete connections between objects, to find the shortest path between objects, or just show all the connections in that location.

For adding and deleting connections and for getting the shortest path we select one end…..perform the action, then select the other end and perform the action, since a path or connection has a beginning and an end.

Naji is now going to take us through the app registration process and talk a bit more on the connections and the shortest path.

36 of 39

Demo: Register

37 of 39

Demo: Design-mode

38 of 39

Demo: Shortest Path

39 of 39

Demo: Android App