The AR App for Android

Informational Files

Project Files

JAVA

JAVASCRIPT

HTML & CSS

The Process

Description

Build a virtual tour that guides visitors through the SNC campus with emphasis on augmented reality features:

Requirements

  1. Select a mobile platform.
  2. Include an interactive map of the campus.
  3. The map has a You Are Here feature.
  4. A visitor can request to see a specific feature and the guide will “show” the way.
  5. The guide describes campus features (GMS, Cofrin, Main) as a visitor approaches or points to them.
  6. Choose a layer such as Schedules, Faculty, Departments, Food, etc. Now point the camera towards a building, and the layered information for that building appears next to it.
  7. Zoom for detail.

Progression

A belated Gantt chart

​Being a visual person meant I had to physically draw out my plans and ideas to organize and understand what I was creating.

In the photography lab in the basement of the Bush Arts Center was where I did most of my work; it was deserted, quiet, and had a white board with some of the only juicy, wonderfully colored markers on campus.

Of course, I had to make sure it wasn't erased in while in the middle of my thoughts--hence the note in the corner.

​I erased and added as I went, drawing out my plans and, while drawing them out, helping my head to figure out whether they would actually work.

I also jotted down important bits to remember about the existing code, especially those bits I had a difficult time remembering or understanding exactly how they communicated with each other.

Someone was also a bit sassy that day. 



​Figuring out how the JSON file (from where I was reading all of my POI data) should be organized was a bit of a hassle, as the way it was laid out was tightly connected to how the rest of my code would function (especially Marker.js).

This is one of the final iterations of the buildings.json object, which I eventually implemented.
The final app looks a little like this. The diagram illustrates how the different pages and files communicate together and create the app's functionality.

The Final Product

I utilized Wikitude SDK's JavaScript API to implement my Augmented Reality component.

​The initial view shows each point of interest in view. The user may select a POI to be "guided" to from a select box on the upper right, and it will be colored in red.

​If a marker is selected (either because the user tapped on it or it was selected as part of Guide Mode) and the camera is turned away from it, an indicator arrow will appear, pointing to where the marker lies off-screen.

​Once the user arrives to the location, they will be notified, and Guide Mode will be exited. The user may also exit Guide Mode by selecting the "Exit Guide Mode" option from the dropdown, or by simply tapping the marker to deselect.
If a user is within the vicinity of a POI and it appears in the view, the informational popup will automatically appear, marking the POI in yellow. The user may select which type of information they would like to see from the upper left select box (with the default being the first option). In this case, it is Faculty. The user may also tap on any marker to view its information.

​If multiple POIs are both in range and in the view, the user will be notified and urged to tap the marker for which they would like to see information.

A POI will be recolored on the radar in yellow when selected.
*UPDATE* POI will now be recolored in red when in Guide Mode and yellow when selected. Photos do not reflect update.



​​Tapping the radar will take the user to the Maps screen, where they can view all POIs, indicated in green, as well as their current location, indicated in blue. If they are currently in Guide Mode, the target marker will appear in red. Tapping the Android back button will return  to the AR screen,  with Guide Mode still in place.

​Tapping on a POI marker in Maps will cause its name to appear. Tapping on the user's Current Location marker will cause "You are here" to appear. The map will detect the user's movements, and the marker will move as they do.

The Demonstration

This is the demonstration video shot an hour before presentations began. Hope you get a laugh!