Wednesday, 18 May 2011

Augmented Reality Development Sprint #layar #AugmentedReality #Aurasma #Hoppala

Well it's half way through our augmented reality sprint week and we have a proof of concept AR Layar ready and working.

Utilising the Layar application for both IOS and Android, and using Hoppala we have so far created an interactive overlay for the Layar application. As a proof of concept, we decided to use UCS' buildings along the Waterfront in Ipswich as placeholders for various snippets of information.

From a user perspective this would mean a user can hold their mobile device (while in the Layar app) and see various 'augments'  or 'Points of Interest' across the waterfront, detailing those snippets of information, such as library opening times, department info, contact details and some audio.

Below you can see how this would look using an iPhone.. (we did of course test with an Android-based Motorola Atrix as well, thanks Dan!)
AT View along the Waterfront
iPhone view using Layar

And here we can see what each of the elements do. (Click to enlarge image)

One thing we did have to think about when developing the assets was to make sure each asset was mobile friendly, some of the information we wanted to provide was web based but not mobile friendly, and the last thing we wanted users doing was having to zoom around a large website just to see the latest news. Therefore we added a small but worthwhile stepping stone to the information, setting up a Joomla installation on our webserver and using a mobile friendly template, we were then able to pull in the relevant information from their sources (live dynamic feed) and display them in a fashion which would make users feel as if the information is right there in the Layar application and not just redirecting them to a website.

There are a couple of additions we would like to have added, but currently they wouldn't work at all on a mobile device, we will be speaking with our Marketing department to suggest the virtual tours and photo galleries are made mobile friendly in future.

Here you can see what the mobile friendly stepping stone looks like in the Layar application. (Image on the left being the mobile friendly version)

Points of Interest and associated assets:

OrangeInfozoneInfozone FAQs
Infozone Email
Opening Times
BlueUCSWelcome Audio
UCS News
UCS Events
UCS News Feed
* Photo Gallery
Email login
* Virtual Tour
GreyElevateElevate Blog
Elevate Twitter
Elevate FAQs
Wolsey login
MagentaJames HehirBuilding Voice Audio
Building Opening Times 
PurpleStudents’ UnionKai Menu
GreenLibraryLibrary Catalogue
Library Opening Times
Library News - Twitter* = unable to use due to not being mobile friendly

We also created a couple of pages that were viewable from this stepping stone, you can see the button in the top right of the screen shot of the mobile friendly screen above, this is a small menu that allows users to view a few extra pages, these pages were:

  • Contact Us

  • Who are we?

  • What are we doing with AR?

The screenshot below shows how mobile friendly we were able to make these pages, they also stay inside of the Layar app when accessed.

[caption id="attachment_722" align="alignnone" width="269" caption="Extra menu"][/caption]

We created all of this using the Hoppala online tool.

Hoppala allows you to pin point a marker on a very familiar google maps api and associate information to it, as you can see below in the image to the right, we have some of our augments displayed ready to edit. Hoppala is incredibly straight forward to use, albeit the usability of the site could do with tidying up!

[caption id="attachment_720" align="alignnone" width="491" caption="Click to enlarge"][/caption]

Once you have set where you would like your augment to appear, you can then add your various assets to it, we noted that Hoppala allows 6 assets before showing a 'More' button.

Adding assets is pretty self explanatory, you will notice an 'Auto trigger range' element, we used this in our proof of concept with a piece of audio welcoming users to the UCS Waterfront building. We simply set the auto trigger range to 20 meters, sure enough in testing when we were in range of the building the audio started to play.

The main thing to think about when assigning your assets is how it will look to your user, is the resource mobile friendly? Are you linking to a site which may be problematic for mobile users, flash based information is a no no for iOS users :( and is the information relevant to what the user is looking at?

The next stage of the development sprint is to research current educational uses of augmented reality and how we might be able to use these within UCS.


We came across a very interesting app late on the first day of the sprint, this app allows something very interesting, something that we would be very keen on developing for UCS.  The app "Aurasma" allows the overlaying of images/video in realtime, the materials are authored directly on the phone.  The app itself is currently in proof of concept stage, the developers are looking for feedback on how it can be improved for future release.

We are very keen to see that happen, we've had a quick play with the app and we are very impressed.  A video from the app developers is below:

This is a technology that we are very keen on and will use it as a proof of concept to bring a poster to life for our Teaching & Learning day later in the year.


  1. Hey David,

    i really like your article! Check out "junaio", it's an AR-Browser, similar to layar, including image recognition.
    Check out our latest project for a german book publisher:
    Scan the QR marker once to install junaio. Scan it twice with a QR reader to start junaio and get forwarded to the "Ayla" channel. Hold the smartphone above the image.