Aplicao Multiplataforma da Realidade Aumentada Mvel para Geolocalizao

utilizando o PhoneGap
Gesmar de Paula Santos Jnior, Luciene Chagas de Oliveira,
Alexandre Cardoso, Edgard Afonso Lamounier Jnior
Programa de Ps Graduo em Engenharia Eltrica
Universidade Federal de Uberlndia - UFU
Uberlndia MG - Brasil
{gesmarjunior, lucienechagas}@gmail.com, {lamounier, alexandre}@ufu.br

Abstract Actually, the development of multiplatform solutions

has become a challenge. This paper aims to present an
application of Augmented Reality (AR) for mobile geolocation
using the PhoneGap framework, a framework for creating
applications for mobile platforms using HTML5 and JavaScript,
for mobile application development platform.
Keywords-mobile augmented-reality, framework PhoneGap;
Geolocation; HTML5;
ResumoAtualmente, o desenvolvimento de solues
multiplataforma tornou-se um desafio. Este trabalho tem como
propsito apresentar uma aplicao da Realidade Aumentada
(RA) para geolocalizao mvel utilizando o framework
PhoneGap, um framework para a criao de aplicativos de
plataformas mveis usando HTML5 e JavaScript, para o
desenvolvimento do aplicativo multiplataforma mvel.
Palavras-chave-realidade aumentada
PhoneGap; Geolocalizao; HTML5;

I.

mvel;

framework

INTRODUO

Com a crescente demanda por aplicaes de Realidade

Aumentada (RA) para plataformas mveis, surge a
necessidade de ferramentas para localizao especialmente
construdas levando-se em conta as caractersticas e
limitaes inerentes a tais dispositivos, como o uso de
sensores de orientao, GPS, Bssola e interfaces adaptadas
entrada por toque.
Os dispostivos mveis permitem o desenvolvimento de
aplicaes mveis de forma abrangente e dinmica. Dentre
as vantagens da mobilidade encontram-se o acesso a
informao de forma rpida, flexvel, em tempo real e de
qualquer lugar. Atualmente, a rea de pesquisa de
aplicaes mveis ainda est em sua infncia [6].
A Figura 1 apresenta uma arquitetura comum para
infraestrutura de rede utilizada para o desenvolvimento de
aplicaes mveis, onde os dados podem estar armazenados
nas nuvens.

Figure 1. Uma infraestrutura de rede para aplicaes mveis [6].

Os dispositivos mveis so ferramentas que auxiliam na

criao de experincias de aprendizagem e associados a RA
tornam-se uma poderosa ferramenta para desenvolvimento
de aplicaes em diversas reas, tais como educao e
jogos.
Atualmente, a maioria dos aplicativos mveis para RA
so desenvolvidos em uma nica plataforma ou so criadas
verses para cada plataforma. O framework PhoneGap [9],
apresentado neste trabalho, proporciona a criao de
aplicaes mveis multiplataforma, tais como, o Windows
Phone, o Android e o iOS.
O PhoneGap um projeto OpenSource sendo incubado
na Apache Software Foundation (ASF), que faz parte do
projeto Incubadora Apache. um conjunto de APIs que
permitem o desenvolvimento de aplicativos mveis que
acessam funes nativas do hardware do dispositivo, como a
cmera ou o acelermetro via JavaScript. Isso permite que
um aplicativo de smartphone possa ser desenvolvido apenas
com HTML, CSS e JavaScript.
Este trabalho tem como finalidade apresentar o
PhoneGap, um framework para a criao de aplicativos de
plataformas mveis usando HTML5 e JavaScript, e seus
componentes, bem como desenvolver uma aplicao como
estudo de caso para realizar a localizao geogrfica usando
elementos de RA executando sobre um dispositivo mvel
suportando diferentes plataformas. O aplicativo far uso das
classes fornecidas pela API em um software de auxilio a
localizao em um espao aberto, definido como outdoor.
Espera-se com isso verificar a eficcia e a abrangncia
oferecida pelo PhoneGap e referendar sua utilizao em
projetos mais complexos de Realidade Aumentada Mvel.

Exemplos de software dessa natureza so apresentados em

[5].
II.

necessidade de um servidor HTTP remoto para hospedar o

cdigo web.

TRABALHOS RELACIONADOS

Trabalhos relacionados com aplicaes que propem

metodologias para interao com ambientes de RA
consistem em uma rea de pesquisa bastante explorada [2].
O projeto AndAR uma biblioteca de software baseada
em Java que implementa realidade aumentada com
ARToolkit na plataforma Android [3]. Este projeto utiliza
marcadores de RA para a projeo de objetos virtuais.
Outra biblioteca que utiliza marcadores de RA o
NyARToolkit que foi desenvolvida utilizando a linguagem
Java, C# e Android baseada na biblioteca ARToolkit, porm
possui pouca documentao e a maioria deles em idioma
japons [7].
Alguns frameworks e bibliotecas para o desenvolvimento
de aplicaes de sistemas de Realidade Aumentada Mvel,
tais como o AndAR, NyARToolkit e o DroidAR,
inicialmente concebidos para ambiente desktop.
Como o ARToolkit, j possuem implementaes para
plataformas mveis, mas ainda so escassas as opes de
desenvolvimento que auxiliem na criao de aplicaes de
RA em dispositivos mveis da maneira que so concebidas
atualmente: utilizando informaes geolocalizadas, modelos
tridimensionais, imagens e animaes sobrepostas viso
da cmera, proporcionando ao usurio uma nova e
revolucionria experincia de uso da RA no lugar dos
marcadores utilizados em implementaes mais tradicionais
voltadas a computadores de mesa.
Ao contrrio das demais bibliotecas que reconhecem
marcadores no padro do ARToolkit, o framework
ElipseAR permite o reconhecimento e rastreamento imagens
coloridas, sendo esta uma de suas vantagens.
No desenvolvimento desta pesquisa, no foram
encontrados artigos que utilizassem o framework PhoneGap
para RA mvel.
III.

A API PHONEGAP

O PhoneGap, com codenome Apache Cordova [10] um

framework que permite o desenvolvimento de aplicativos
mveis utilizando as linguagens de desenvolvimento Web
HTML, CSS e Javascript. Ele fornece um conjunto de APIs
para acesso a funes nativas do Sistema Operacional e do
hardware do dispositivo, utilizando Javascript.
Aplicativos que usam o PhoneGap se tornam aplicativos
compatvel com a plataforma e SDKs desejada, e pode ser
disponibilizado para instalao de loja de cada smartphone.
Ao usar as APIs do PhoneGap, um aplicativo pode ser
construido sem qualquer cdigo nativo (Java, Objective-C,
C#, entre outros) da plataforma a ser disponibilizado o
software. Em vez disso, tecnologias Web so utilizadas, e
eles so hospedados no prprio dispositivo localmente, o
cdigo compilado junto ao cdigo nativo, dispensando a

Figure 2. Arvore de arquivos do projeto que utiliza o PhoneGap.

A Figura 2 mostra o projeto sendo desenvolvido na

plataforma Windows Phone. Independente da plataforma,
todos os arquivos HTML, CSS e Javascript que estiverem
dentro da pasta www, quando for desenvolver para uma
nova plataforma, basta copiar o contedo desta pasta e o
projeto funcionar para a nova plataforma.
Essas APIs JavaScript so consistentes em vrias
plataformas de dispositivos e construdas sobre padres web
[11], com isso o aplicativo pode ser portvel para outras
plataformas de dispositivos com o mnimo de alteraes. O
framework est disponvel para as seguintes plataformas:
iOS, Android, Blackberry, Windows Phone, Palm WebOS,
Bada e Symbian.
Esse conjunto de APIs foram criadas para acessar as
funcionalidades que so comuns em diferentes
smartphones. Algumas destas funcionalidades incluem:
Eventos de ciclo de vida do aplicativo
Armazenamento (armazenamento local do HTML5
e bancos de dados)
Contatos
Cmera
Geolocalizao
Bssola
Acelermetro
A Figura 3 mostra quais APIs esto disponveis para cada
dispositivo.

IV.

APLICAO PARA LOCALIZAO DENTRO DO CAMPUS

DA UNIVERSIDADE

Esta seo apresenta uma viso geral das funcionalidades

da aplicao desenvolvida, como prova de conceito, para
utilizao do PhoneGap e como o framework foi utilizado
para o seu desenvolvimento.
O objetivo da aplicao apresentar a geolocalizao
dentro de um Campus em uma Universidade. Esta aplicao
utiliza a tecnologia Realidade Aumentada acrescentando ao
mundo real, a informao virtual da seta indicando o sentido
do caminho para localizar a direo de destino em relao
ao ponto onde o usurio est.
Figure 3. Funcionalidades Suportadas [12].

Cada uma das funcionalidades exposta como uma API

Javascript, que voc usar em seu cdigo. O framework faz
todo o trabalho envolvido em fornecer a necessria
implementao nativa, garantindo trabalhar com as mesmas
APIs JavaScript, independentemente do
Sistema
Operacional do dispositivo que o cdigo esteja sendo
executado, conforme ilustrado na Figura 4.

Figure 4. PhoneGap permite que o aplicativo em HTML5 execute em

uma gama de Sistemas Operacionais Mobile.

Embora o PhoneGap seja uma tecnologia de plataforma

cruzada, normalmente se desenvolve usando um editor ou
IDE de escolha, nessa aplicao foi desenvolvida na
ferramenta Microsoft Visual Studio.
O PhoneGap tambm oferece um servio de compilao
baseados em nuvem chamado Build [16], onde se pode
enviar o contedo em HTML5 e Javascript. Aps um curto
perodo de tempo este framework permite gerar
distribuies para a maioria das plataformas suportadas. Isso
torna possvel ter um nico projeto e construir o aplicativo
para uma variedade de plataformas de uma nica vez. O
servio de compilao propriedade da empresa Adobe, o
servio gratuito para projetos open source.

A. Obter a Posio do Usurio

O recurso de Geolocalizao fornece informaes sobre
a localizao do dispositivo, tais como latitude e longitude.
As fontes comuns de informao de localizao incluem
Sistema de Posicionamento Global (GPS) e localizao
inferida a partir de sinais de rede, como endereo IP, RFID,
WiFi e Bluetooth endereos MAC, e IDs de GSM / CDMA
celulares. Esta API baseada na W3C [11] Geolocation API
Specification.
A definio encontrada na documentao referente a
classe geolocation a seguinte: O objeto geolocation
fornece acesso para o sensor GPS do dispositivo.
Foi utilizado o mtodo geolocation.getCurrentPosition()
para pegar a posio atual do dispositivo, essa uma funo
assncrona, ela retorna a posio atual do dispositivo ao
parmetro geolocationSuccess. Foi atribudo a uma varivel
esse valor para clculo da distncia entre o ponto no qual o
usurio est e o ponto de destino do mesmo.
Como o usurio estar em movimento, o mtodo
geolocation.watchPosition, que tambm uma funo
assncrona ir retorna a posio atual do dispositivo quando
qualquer mudana de posio foi detectada.
B. Carregar a camada com informaes de pontos de
interesse
Aps obter os dados da posio em que o dispositivo
est, a segunda etapa foi obter os pontos onde o usurio
deseja visitar, onde dever ser calculada a distncia entre o
ponto inicial e final, que foram definidos em uma lista de
latitude e longitude em um arquivo no Javascript, chamado
locais.js, que permite serem trabalhados dentro da aplicao.
A ideia inicial era exibir um mapa, com coordenadas
reais de cada ponto de interesse, mas como trata-se da
distncia em linha reta entre os pontos, dispensando a
necessidade de um mapa, bastando fazer um clculo
matemtico segundo o teorema de Pitagoras, para isso
considera-se que os dois pontos estejam no mesmo plano de
fundo, visto que a aplicao feita para uma mesma cidade,
o que faz com que seja mnima a diferena caso fosse
considerado tambm a altitude, o que pode ser incorporado
em um verso posterior.

Essa camada locais.js contm as informaes de todos os

pontos de interesse criados para a realizao dos testes.
C. Clculo da Distncia entre Pontos
Tendo em mos a localizao do usurio e os pontos de
interesse, a terceira etapa foi realizar o clculo da distncia
entre o ponto em que o dispositivo est e um determinado
ponto cadastrado.
Para encontrar o clculo da distncia entre dois pontos,
considerando que a Terra uma esfera perfeita, o cculo
dado por raiz quadrada de x2+y2, onde x latitudePonto1latitudePonto2 e y longitudePonto1-longitudePonto2.
Foi criada o arquivo calculos.js que contm uma classe
para o clculo da distncia que recebe os parametros
latitudePonto1,
longitudePonto1,
latitudePonto2,
longitudePonto2 e retorna a varivel distancia. Desta forma,
foi encontrada a distncia entre o ponto inicial e o ponto que
se deseja chegar.
D. Clculo da azimute
Para obter a direo de destino em relao ao ponto onde
o usurio est, deve ser feito o clculo da azimute, ou seja, o
ngulo entre os dois pontos geogrficos.
O termo azimute, de acordo com [14], de origem rabe
origem rabe, de as-sumut, que significa: caminho ou
direo. Por definio, o azimute de um objeto, segundo
[14] o ngulo numa posio determinada, entre um arco de
crculo mximo e o meridiano que passa nessa posio ou
como definiu [15] , " a forma mais usada para indicar uma
direo geogrfica. O azimute o ngulo formado entre e a
direo Norte (meridiano ou azimute zero) e uma direo
terrestre considerada". O azimute que vamos obter no
aplicativo o cartogrfico, que medido a partir do Norte
Cartogrfico (direo das linhas verticais das quadrculas
cartogrficas).
Para obter a azimute, no arquivo calculos.js foi criado a
classe azimute, que a partir da diferena entre as latitudes e
as longitudes dos dois pontos, realizado o seguinte calculo
azimute = (Math.PI * 0.5) - Math.atan(diferencaLatitudinal
/ diferencaLongitudinal);
Desta forma , foi calculada a azimute de cada ponto.
E. Bssola e azimute
Com as coordenadas do GPS e tambm os campos
calculados de distncia e azimute, tambm foi necessrio o
valor da bssola para que todas as informaes para criao
da rosa dos ventos de direo estejam presentes na
aplicao.
Para obter o ngulo da bussola, no caso do dispositivo
mvel o que se encontra um Magnetrometro, que utiliza o
mesmo princpio da bussola, de magnetismo em relao ao
polo magnetico da Terra, e faz parte do hardware de alguns
modelos de smartphones.
O Azimute retornado atravs do objeto
compass.getCurrentHeading, que informa o angulo, que
mede o cabealho em graus, entre 0 e 359,99. O mtodo
compass.watchHeading recebe o valor atual da bssola do

dispositivo em um intervalo regular. Cada vez que esse

valor alterado, a funo headingSuccess de retorno
executada.
F. Rosa dos ventos e distncia do destino
Para fornecer as informaes de distncia e direo,
foram criados dois componentes na interface, criada em
HTML5, um label e uma imagem. Em Javascript foi feita a
chamada ao metodo de calculo da distncia e atribuido ao
elemento HTML "distancia" o valor retornado da funo
document.getElementById('distancia').innerHTML
=
distancia(coords.latitudeOrigem, coords.longitudeOrigem,
coords.latitudeDestino, coords.longitudeDestino);. Desta
forma, exibida na tela a distncia do ponto de interesse.
Alm do clculo da azimute, para a seta de direo
dever ser subtrado o valor da azimute, que o angulo do
ponto onde eu estou em relao ao ponto onde quero chegar,
e o angulo da bssola. A funo angulo =
(GetAzimuteGraus(coords.latitudeOrigem,
coords.latitudeDestino,
coords.longitudeOrigem,
coords.longitudeDestino) - valorBussola); realiza esse
clculo e retorna o valor que deve ser atribuido ao angulo da
imagem, a funo img.stop().animate({ transform: "r" +
angulo }, 1, "<>"); direciona a direo que a imagem deve
estar apontando.
Um clculo deve ser feito para o caso da subtrao do
angulo da bssola e a azimute entre os dois pontos seja um
resultado menor que zero, necessrio acertar para um valor
entre 360, para esses casos, somado a varivel angulo o
360.
Na tela inicial da aplicao so apresentados os botes
para ativar o GPS e a bssola, conforme exibido na Figura
5.

Figure 5. Tela inicial da aplicao, mostrando os botes de ativar o GPS e

Bssola.

AGRADECIMENTOS

Ao pressionar o boto Ativar bssola, ser exibida

uma tela de visualizao da seta direcional. O usurio
dever, ento utilizar a seta para se guiar em direo ao
ponto de destino. De acordo com a movimentao do
usurio a direo e distncia alterada em relao ao novo
ponto, conforme mostra a Figura 6.

Os autores agradecem a CAPES (Coordenao de

Aperfeioamento de Pessoal de Nvel Superior), pelo apoio
financeiro que possibilitou a realizao deste trabalho, e o
apoio do Grupo de Realidade Virtual e Aumentada da
Universidade Federal de Uberlndia (GRVA UFU).
REFERNCIAS
[1]
[2]

[3]
[4]
[5]

[6]

[7]
[8]

[9]
Figure 6. informaes de distncia , do GPS e seta apontando para destino
atualizadas em tempo real.

[10]
[11]

V.

CONCLUSES E TRABALHOS FUTUROS

O framework PhoneGap mostrou-se bastante promissor,

fornecendo uma plataforma simples e eficiente para o
desenvolvimento de aplicaes de Realidade Aumentada
avanadas em ambiente mvel que suporta multiplas
plataformas e dispositivos.
Em verses futuras da aplicao ser integrada a camera
do dispositivo, bem como ser executada uma anlise da
utilizao do aplicativo com mais pontos de interesse, bem
como avaliaes no que tange usabilidade do sistema por
usurios de smartphones.

[12]
[13]
[14]
[15]

[16]

EclipseAR, ElipseAR Web Site Oficial, Ago 2011. [Online].

Available: http://elipsear.com/.
F. Zhou, H. B.-L. Duh, and M. Billinghurst, Trends in augmented
reality tracking, interaction and display: A review of ten years of
ISMAR, in ISMAR 08: Proceedings of the 7th IEEE/ACM
International Symposium on Mixed and Augmented Reality.
Washington, DC, USA: IEEE Computer Society, 2008, pp. 193
202.
G. Project, Andar - android augmented reality, Ago 2011.
[Online]. Available: http://code.google.com/p/andar/
DroidAR, DroidAR Augmented Reality Framework, Ago 2011.
[Online]. Available: http://code.google.com/p/droidar/.
L. Marlon. Realidade Aumentada em dispositivos mveis. In
Anais do Workshop de Realidade Virtual e Aumentada 2008.
Baur. SBC. 2008. 243p. p 74-80.
G. Woodill, The Mobile Learning Edge: Tools and Technologies
for Developing Your Teams, 1st ed., McGraw-Hill, Ed., 2010.
[Online]. Available: http://www.mobilelearningedge.com.
NyARToolkit..NyARToolkit project. Dez 2011. [Online].
Available: http://nyatla.jp/nyartoolkit/.
C. Kamii, A Criana e o nmero: Implicaes educacionais da
teoria de Piaget para a atuao com escolares de 4 a 6 anos,
Campinas, Papirus, 1990, 129p.
PhoneGap. About the project. Set 2012. [Online]. Available:
http://phonegap.com/about/.
Apache Cordova. Apache Cordova, learn more about the project.
Set 2012. [Online]. Available: http://incubator.apache.org/cordova/.
Web Standards. W3C standards. Set 2012. [Online]. Available:
http://www.w3c.org/standards/.
Funcionalidades Suportadas. Supported Features. Set 2012.
[Online]. Available: http://phonegap.com/about/feature.
API References. Apache Cordova Documentao. Set 2012.
[Online]. Available: http://docs.phonegap.com
GASPAR, Joaquim Alves - Cartas e projeces cartogrficas. 3 ed.
Lisboa: Lidel, 2005. 331p. ISBN 972-757-371-1.
TIMB ELMIRO, Marcos Antnio - Curso de fundamentos de
cartografia, matemtica e geodsica. Departamento de Cartografia.
Instituto de Geocincias UFMG. Set 2012. Avaliable:
http://xa.yimg.com/kq/groups/17314041/600726175/name/Cartogra
fia-Matem%C3%A1tica-Geodesica.pdf
PhoneGap Build. PhoneGap Build. Set 2012. [Online].
Available: http://build.phonegap.com.