Design of an Augmented Reality-based Application

for Quito’s Historic Center

Betsabe Simbaña1, Darwin Alulema1, Christian Vega1, Derlin Morocho1

1
Universidad de las Fuerzas Armadas - ESPE, Sangolquí, Ecuador
{bisimbana, doalulema, cnvega, dmorocho}@espe.edu.ec

Abstract. This paper presents an application for Android devices which in-
volves Augmented Reality. This application shows the user data and information
regarding heritage buildings of Quito’s Historic Center, which can be useful to
tourists that visit the city. Moreover, the application is compatible with Android
devices running 3.0 Honeycomb version or later, and it was developed on the
programming languages JAVA and HTML. The information is collected
through a database using a web service. To work with Augmented Reality the
SDK Wikitude was used, because it allows the development of applications
based on geolocation and benefits such as student licenses. The interfaces were
developed using the programming languages JavaScript and HTML. Finally, a
series of tests were done to validate the application’s functions like memory,
mobile data consumption and Wi-Fi.

Keywords. Augmented Reality, Web Services, Java, MySQL, Android.

1 Introduction

Been Quito, the capital of Ecuador, where the classic and traditional is mixed with
modernity and innovation, Quito seeks to become a Smart City which increasingly
focuses on technology. The use of geolocation and augmented reality applications
will enable people to interact in real time with their physical environment. The ap-
plication helps tourists that are in Quito, by means of the presentation of the most
relevant information of historic center’s buildings in augmented reality, which is
available for Android devices from version 3.0 and later.

1.1 Augmented Reality

Augmented Reality (AR) is a new way of interacting with the physical (or real)
world. This creates a modified version of the reality that is observed, which is en-
riched with digital (virtual) information on the screen of a desktop computer or a
mobile phone. [1]
The main difference with virtual reality, in an extended concept, is that it does not
replace the physical reality, but it superimposes digital information in real time to
the real world. Thus, augmented reality extracts information from the environment
converting it from digital to real. [2]
 It can be considered as augmented reality when it meets three main characteristics:
• Combines the real world with the virtual world.
• Interacts in real time.
• Registered in 3D

The differences between augmented reality and virtual reality are presented in Table
1:

Table 1. Differences between Augmented Reality and Virtual Reality

Virtual Reality Augmented Reality

Differences
Completely substitutes It does not replace physical reality,
physical reality instead prints vitual information
over it.
System generated in real System generates a direct or indirect
time vision of a physical environment in
the real world.
Introduces the user to a dig- It does not remove the user from re-
ital environment ality and integrates it with the digital
reality.

Two types of augmented reality are established, the one based on markers or images
and the one based on positioning or geolocation.
The details of each type are described in Table 2:

Table 2. Types of Augmented Reality

A. R. Based on markers A. R. Based on positioning

Uses printed symbols known as
markers
The markers are characterized
by its color (black with white)
The marker design is related to
the virtual information
The virtual information can be
3D images or videos.
The mobile device camera fo-
cuses on the markers and over-
lays the virtual information.
Uses the mobile device camera, compass
and accelerometer.
Locates the position, height and direction
of the mobile device by using its
With the coordinates, the application
shows the virtual reality.
The virtual information can be 3D im-
ages or videos.
The device must necessarily be con-
nected to the Internet

1.2 WIKITUDE
The Development Kit (SDK) is used to develope augmented reality applications,
with which it is possible to do Geo-AR, image recognition, tracking and 3D model-
ing. [3]
 Wikitude is a paid SDK which offers 5 license types: Trial, Lite, Pro, Pro+ and Stu-
dent. Furthermore, Wikitude allows the download of a .jar library that contains the
API, ARchitect, which is used in the application development. Table 3 shows the
main objects offered by the API:

Table 3. API WIKITUDE

Object Description
ArchitectObject It is the base class for each object created
through the ARchitect.
ArchitectView It allows the camera encapsulation, and
shows the surface and Web View.
Drawable It is the base class for any graphic repre-
sentation of a GeoObject.
GeoLocation Represents a location in Earth’s tridimen-
sional space.
GeoObject Represents a location in Earth’s tridimen-
sional space.
ImageDrawable Encapsulates an image that will be used as
a visual representation of a ARObject.
Location It describes a general location of a land-
mark in the augmented scene.

1.3 Application Design

1) Use Cases
The application is designed to work in open areas that have Internet connection using
mobile data or Wi-Fi. Table 4 shows an overview of the 6 functions performed by
the application:

Table 4. Application Functions

Function Description
Main Menu Shows two options to choose from: Aug-
mented Reality View or Help.
Generate Augmented Reality Generates the view of the virtual information
on the user’s mobile device screen.
Show Virtual Information It shows the information in a HTML panel of a
selected POI.
ScreenShot Takes a picture of the camera’s focus and
shows an option to share it on the social net-
works, via email or other device.
Range Limits the POI visibility according to a range
in meters.
Access a list of places to visit, addresses for
Help GPS activation and a brief description of the
application.
Figure 1 shows the use cases’ diagram obtained after the analysis of the different
functions.
The classes used in the application development are JAVA and every one of them
carry out a specific function, for example, camera management, license acquisition,
use of designs, welcome screen, location, markers management, Web service con-
nection, creation of the information panel and range, etc.
Table 5 shows the details of each class:

Table 5. Classes Description

Class Description
AbstractArchitectCamActivity It loads the ArchitectView, calibrate the com-
pass and manages the life cycles of the events.
LocationProvider Handles GPS and Internet Provider.
CamaraGeneral Activity Android activity that shows the camera focus.
Content FromNative Establishes the Web service connection to ob-
tain POI information.
Licencia Contains the license provided by Wikitude.
Ayuda Shows the user the three help options in a lay-
out.
MainActivity Shows the main menu.
Lugares Disponibles This activity shows a layout of the different
places.
ActivarGPS This activity leads the device settings in one at-
tempt.
Sobre This activity show the layout with its descrip-
tion.
SplashScreen Shows the welcome screen during 3 seconds.

Acceso a Settings

Lugares Disponibles Activar GPS

Consulta de
Información Base de Datos
Servicio Web
Sobre la Aplicación

Ayuda Mostrar POIs

Administración
QuitoWS
Aplicación Quito
Menú Inicio Mostrar Detalles
Visión+ Panel de
Descripción

Vista en Realidad Sistema

Aumentada

Selector de Rango Cerrar Panel

Barra Selectora de
Usuario Información POIs Distancia
Captura de Pantalla
Cargados

Panel de Rango
Cerrar Panel

Guardar Captura Compartir Captura

PopUp
Información
Distancia

Fig. 1. Uses Cases Diagrams

 Figure 2 shows a summarized diagram of the classes and their relationships, which
was obtained once the application was finished.

1.4 Architecture
The application architecture was designed to reduce the number of process and the
device memory load, a description of the elements used in the design are shown
below:

Fig. 2. Classes Diagram

1) Server
The server is integrated by a Web Service and a database that is hosted in a web
hosting.
• Web Service: it is implemented in PHP, connects and queries the database. It
sends the answer to the application using a JSONArray with the JSONObject number
according to the table records.
• Database: Using MySQL the database was created. It contains a table with the
following fields: id, name, description, latitude, longitude and altitude.
• Web Hosting: It hosts the Web service and database.
2) Client
The application is the client and its components are the following:
• Business Layer: it features each activity presented to the user.
• Presentation Layer: it features the application layouts where the user can in-
teract.
It can be observed in Figure 3 the elements of the application’s physical architecture.
These elements are: database, web service and client. The mobile devices use GPS
and an Internet connection either using Wi-Fi or Mobile Data.
 Base de Datos POI Servicio Web
Quito Visión
Datos Móviles
INTERNET
GPS

WI-FI
Dispositivos Móviles

Fig. 3. Classes Diagram

2 Application Implementation

2.1 Main Menu

The interface was design with a white layout and two buttons: the first one for the
augmented reality option, which includes text and is located in the bottom of the
screen, and the second one is a small button used for the Help option which includes
an image with the question mark. Also an ImageView is included which is located
in the upper part of the screen, where the application logo is located. Figure 4 shows
the interface presented to the user:

Fig. 4. Main Menu

2.2 Augmented Reality View

The interface shows the augmented reality view with a detailed panel of each land-
mark, a visibility range panel and a botton to execute a screenshot. It was developed
using HTML and its elements are: an information button which is centered on the
bottom of the screen and at the top is a bar with options Capture and Range, which
are represented with two buttons. Figure 7 shows the interface design:
 Fig. 5. Augmented Reality View

Details: This panel was developed in HTML with the information of each POI ob-
tained from the database. The following figure shows the panel:

Fig. 6. Detail Panel

2.3 Help
This function offers three options which are: available places, activate GPS and a
description of the application.
The interface is implemented using Android and it has three buttons for each option
as shown in figure 7.

Fig. 7. Help Interface

 Available Places: it is formed by the TextView with the names of the available build-
ings.
Quito Vision+: it has an ImageView where the description of the application is
shown.
Activate GPS: redirects to the phone settings.

3 Results

The tests were performed in the historic center of Quito with different devices: Sam-
sung S3 Mini, Samsung S5 y Xperia Play.
The main differences for each devices are: Android version, screen dimensions, main
camera resolution, memory and processor. Table 6 shows the characteristics for each
device:

Table 6. Device Features

Device SAMSUNG S3 MINI SAMSUNG S5 XPERIA PLAY

Android Version Android V4.1.2 Jelly Android V4.4.2 Android V2.3.3
Bean KitKat Gingerbread
Camera Resolution 5MP 16MP 5MP
Screen 4’’ 5” 4”
RAM Processor 1GHz 2.5GHz 1GHz

Table 7 shows the results for each function in the different mobile devices used:

Table 7. Results of Functions according to the used device

SAMSUNG SAMSUNG XPERIA

S3 MINI S5 PLAY
Main Menu   
Augmented Reality View   
Details   
Capture   
Range   
3 Help Options   

According to the results presented in Table 7, the device Sony Xperia Play does
allow to show the details of each POI, because the application performs an Internet
connection with AsyncTask class.
The use of class AsynTask is mandatory from version 3.0 of Android and later. For
this reason, phones with versions earlier than 3.0 cannot use the application. This
happens because they do not know how to handle Internet connections with Async-
Task.
3.1 Memory
In order to know the values of RAM memory usage, the application was left running
for 3 minutes and using the application 3C Toolbox, the mean value of memory
usage was found. Figure 8 shows the comparative bars of RAM usage in the test
devices.

Use of Memory
200 124.96
100 68.75
25.54
0
Samsung S5 Samsung S3 Mini Xperia Play

Fig. 8. RAM Memory Usage

The actual use of the application, in the Samsung S5 is 124,96, in the Samsung S3
mini the actual use is 68,75 and in the Xperia Play the actual use is 25,54 in one day.
The value obtained on the Xperia Play is just of the use of the Help function and not
of the augmented reality view because the device does not support AsyncTask. In
the remaining devices the obtained values are due to the use of the camera and the
different types of Internet connections, as well as the use of sensors.

3.2 Mobile Data Consumption

To test the use of data, the application was left running during 10 minutes, in an open
area and using all its functions.
The test was done using the option Use of data available in Android, and using the
application “My Data Manager”, that provide insight into consumption data and Wi-
Fi per application.
Figure 9 shows the results’ comparative bars of the different data consumption val-
ues in the three testing devices.

Use of Mobile Data

200
109 111
100
0
0
Samsung S5 Samsung S3 Mini Xperia Play

Fig. 9. Mobile Data Usage

 The obtained data from the application mobile data consumption in the foreground
in the Samsung S3 Mini is 111Kb, the data used in Samsung S5 is 109Kb and the
device Xperia Play does not use mobile data, because it cannot establish an Internet
connection using AsyncTask class.

4 Conclusions

The function, Augmented Reality View, does not have a 100% accuracy because
there is an offset while placing the POI- Markers. This is caused by reasons such
as: devices manufacturing, type of Internet connection or weather conditions.
In the market there are several SDKs for augmented reality. After an analysis, Wik-
itude was the chosen option to develop the application, because it is multiplatform,
it has markers and GPS tracking, uses JAVA programming language and also it
can develop “worlds” using HTML and Javascript.
The application uses the class AsyncTask, which creates a second thread to manage
the Internet connection, therefore the minimum version to use the application is
3.0 Honeycomb. It should be taken into account the minimum version for devel-
oping applications with Wikitude is Gingerbread 2.3.3 because this version does
not support the AsyncTask class.
There is a delay when uploading information, due to weather conditions and the
characteristics of each device. This is why the application should be used in open
areas.

References
1. J. Grubert y R. Dr Grasset, Augmented Reality for Android Application Development, Bir-
mingham, UK: Packt Publishing Ltd, 2013.
2. Minetur, «Chaval.es,» Secretarí¬a de Estado de Telecomunicaciones y para la Sociedad de
la Información, 17 Noviembre 2013. [En línea]. Available: http://www.chaval.es/chava-
les/enterate/nuevos-usos/%C2%BFque-es-la-realidad-aumentada. [Último acceso: 24 Abril
2014].
3. Wikitude, «Wikitude,» 9 Juilio 2014. [En línea]. Available: http://www.wiki-
tude.com/about/jobs-career/. [Último acceso: 9 Julio 2014].
4. Universidad Carlos III De Madrid, «Software de Comunicaciones,» 2012. [En línea]. Avai-
lable: https://sites.google.com/site/swcuc3m/home/android/generalidades/dalvikvm-1. [Úl-
timo acceso: 19 Junio 2014].
5. Business Wire, «Wikitude and Optinvent Show True Augmented Reality Glasses Experi-
ence» 18 Septiembre 2013. [En línea]. Available: http://www.busi-
nesswire.com/news/home/20130918005578/en/Wikitude-Optinvent-Show-True-Augmen-
ted-Reality-Glasses#.VFu4STSG9qU.