Investig. Innov. Ing. 2(2) pp. 29-34. Enero-junio 2015.Universidad Simón Bolívar. Barranquilla, Colombia. ISSN: 2344-8652 29
APPLICATION MOBILE PROTOTYPE WHIT AUGMENTED REALITY
TO SHOW LOCATION AND INFORMATION POINTS USING
JUNAIO MOBILE BROWSER.
PROTOTIPO DE UNA APLICACIÓN MÓVIL CON REALIDAD
AUMENTADA PARA MOSTRAR PUNTOS DE INFORMACIÓN Y
UBICACIÓN MEDIANTE EL USO DEL NAVEGADOR MÓVIL
JUNAIO.
Recibido: 25 de enero 2014- aceptado: 10 de mayo 2014
Enrique Martelo.
1
Universidad Simón Bolívar
Marcos Manotas.
2
Universidad Simón Bolívar
Bryam Vallejo.
3
Universidad Simón Bolívar
Keywords:
Browser of
Augmented
Reality (AR),
Junaio,
Augmented
Reality.
Abstract
This paper shows each steps necessary to realize a augmented reality world through Junaio browser, in
order to provide a simple system based in augmented reality technologies for mobile devices, that allow
to the academic community of the Simon Bolivar University get a simple and fast location service,
showing information of the highlight places and those who are visited by major frequency in each of the
headquarters of the University. It´s necessary to annotated that to realize the test of the prototype a
mobile device was in use with operating android system.
Palabras
clave:
Navegador de
Realidad
Aumentada,
Junaio,
Realidad
Aumentada
(RA).
Resumen
El presente artículo muestra cada uno de los pasos necesarios para realizar un mundo de Realidad
Aumentada (RA) a través del navegador Junaio , con el fin de fin de proporcionar un sistema sencillo
basado en tecnologías de Realidad Aumentada para dispositivos móviles, que permitirá a la comunidad
académica de la Universidad Simón Bolívar obtener un servicio de ubicación sencillo y rápido, mostrando
información de los lugares más destacados y los que se visitan con mayor frecuencia en cada una de las
sedes de la Universidad. Cabe anotar que para realizar las pruebas del prototipo se utilizó un dispositivo
móvil con sistema operativo Android.
1. Magister en Administración de Empresas e Innovación, Universidad Simón bolívar, Barranquilla, Atlántico. E-mail:
emartelo@unisimonbolivar.edu.co.
2. Ingeniero de Ingeniería de Sistemas, Universidad Simón Bolívar, Barranquilla, Atlántico, E-mail: manotassm@unisimon.edu.co.
3. Ingeniero de Ingeniería de Sistemas, Universidad Simón Bolívar, Barranquilla, Atlántico, E-mail: bvallejo@unisimon.edu.co.
*este artículo es asociado al proyecto de investigación: prototipo de una aplicación móvil con realidad aumentada para mostrar puntos de información de ubicación de la
universidad simón bolívar en barranquilla colombia mediante el uso del navegador móvil junaio.
Investig. Innov. Ing. 2(2) pp. 29-34. Enero-junio 2015.Universidad Simón Bolívar. Barranquilla, Colombia. ISSN: 2344-8652 30
I. Introducción
Los dispositivos móviles de hoy en día tienen una serie de
características que los hacen muchos más funcionales, la
cámara, el acceso a Internet, el acelerómetro y otro tipo
de sensores permiten que se desarrollen aplicaciones
móviles que utilicen cada vez más estos recursos, en este
sentido se han masificado las aplicaciones que utilizan el
GPS asistido de los dispositivos con el objetivo de ofrecer
una mejor experiencia, por ejemplo, las de mapas,
transporte o rutinas de ejercicios, sin embargo existen
otras que ofrecen información alrededor de nuestra
ubicación mediante la utilización de los navegadores de
Realidad Aumentada.
Para entender el uso de los navegadores primero
definiremos el concepto de Realidad Aumentada, en[1]se
define como una combinación del mundo real con la
computación gráfica que proporciona interacción y
rastrea objetos, proporciona reconocimiento de imágenes
y provee datos del contexto todo en tiempo real.Otra
definición es la integración de la información digital con
video en vivo o el medio ambiente del usuario en tiempo
real.[2]
Un navegador de Realidad Aumentada funciona utilizando
el GPS asistido del dispositivo móvil el cual detecta la
ubicación actual de la persona y un Compás que detecta la
dirección hacia donde está ubicado, en ese momento se
identifica la cercanía a los puntos de información, los
cuales son desplegados en la vista del navegador
utilizando la cámara del dispositivo. Cuando agrupamos
información de varios puntos en común a través del
navegador de Realidad Aumentada son conocidos como
mundos [3].
A continuación, en la sección 2 se muestran los trabajos
relacionados, en la sección 3 la metodología que muestra
las consideraciones preliminares, en donde se relaciona en
forma breve el inventario de puntos de información y la
evaluación de la selección del navegador de realidad
aumentada a utilizar para el prototipo. Posteriormente se
darán a conocer cada uno de los pasos que se
desarrollaron para la elaboración del prototipo del mundo
de Realidad Aumentada en el Navegador Junaio hasta la
etapa de las pruebas de funcionamiento. Por último se
presentan los resultados de la investigación.
Relatedwork
Actualmente los mundos realizados se han desarrollado
para v isualizar información del mundo exterior [4]; en
Colombia existen algunas implementaciones, por ejemplo,
el Grupo Bancolombia desarrolló las capas que permiten a
través del navegador Layar [5] visualizar los puntos de
interés como cajeros automáticos, sucursales,
corresponsales no bancarios y centros de pago. [6]; otro
ejemplo es DC Real creada por Santoto Torres la cual
muestra lugares interesantes de Colombia relacionados
con turismo, cultura, entretenimiento y muchos más.
Wikitude[7], otro navegador de Realidad Aumentada,
permite visualizar puntos de información desde cualquier
lugar, sean entornos abiertos o cerrados, utilizando la
información de Google Maps para poder desplegar los
sitios que se encuentran registrados.
Metodología
Consideraciones Preliminares
Luego de haber realizado una evaluación del estado del
arte sobre la aplicación de la Realidad Aumentada para
ofrecer puntos de información a través de dispositivos
móviles, se procedió a realizar un inventario de las
distintas sedes de la Universidad, de la cual se seleccionó
la sede tres por ser la que tiene más oficinas
administrativas, para posteriormente realizar el listado de
los puntos de interés de la misma.
Para continuar con la investigación nos centramos en
analizar las ventajas que ofrece los diferentes
navegadores de Realidad Aumentada, cuyo finalidad es el
de incursionar y mirar el potencial que proporcionan con
fines académicos, para lograr llevar a cabo este objetivo
fue necesario investigar a fondo las distintas herramientas
que existen para implementar un mundo de Realidad
Aumentada para los navegadores disponibles, en las
tiendas de aplicaciones móv iles los más utilizados son
Layar, Junaio y Wikitude.
El primero en analizar fue el navegador Layar el cual ha
avanzado en la plataforma de desarrollo, para poder
trabajar con este se hace necesario adquirir mediante
pago el SDK, por lo cual lo descartamos, teniendo en
cuenta los aspectos académicos de la investigación.
El segundo en la lista fue Wikitude, en la cual no
presentaba ninguna dificultad de cualquier índole al
momento de publicar el prototipo, dicho browser en ese
momento es la competencia directa de Layar, con un
marco de trabajo nuevo e innovador la cual le brinda al
desarrollador la posibilidad de dejar volar su imaginación.
Pero no fue posible implementar el prototipo en ella por
la poca información en este marco de trabajo nuevo en el
mercado.
Investig. Innov. Ing. 2(2) pp. 29-34. Enero-junio 2015.Universidad Simón Bolívar. Barranquilla, Colombia. ISSN: 2344-8652 31
Como tercera opción para implementar el prototipo se
encuentra Junaio. Una herramienta recientemente
lanzada para competir con Layar y Wikitude por el
mercado de los navegadores de Realidad Aumentada, la
cual se ha logrado consolidar como un potente y robusto
navegador para el desarrollo. A pesar de ser lanzado por
Metaio [9] empresa creadora del mismo y con experiencia
en la elaboración de Realidad Aumentada, tiene un vasto
y completo repositorio de información que ayudan a
desarrollar fácilmente.
Elaboración del Prototipo
Luego de haber procedido a consultar la información
suministrada por el sitio web oficial de Junaio, se
desarrollaron los siguientes pasos para la elaboración del
prototipo:
A. Registrarse como desarrollador
B. Crear un canal
C. Selección de los puntos relevantes para el prototipo
D. Desarrollo del prototipo.
E. Cargado del prototipo al Dominio
F. Pruebas
A. Registrarse como desarrollador
Para el desarrollo de la aplicación debemos como primer
paso debemos solicitar una cuenta en Junaio accediendo
al sitio web oficial, el cual nos proporciona un formulario
donde registrar nuestros datos básicos, entre los
obligatorios se encuentran, un nombre de usuario, una
clave, una dirección de correo, el nombre, la ciudad y el
país; también aceptar los términos del servicio y políticas
de privacidad.
B. Crear un canal
Como segundo paso para el desarrollo del prototipo, es
necesario, la creación de un canal, teniendo previamente
creada nuestra cuenta, mediante un formulario
registraremos tanto datos básicos como datos
sumamente relevantes para el funcionamiento de nuestro
prototipo como lo es el de definir entre qué tipo de API
deseamos utilizar ya sea un API básico o un API con
contenido para desarrolladores más experimentados en
este caso se utilizó la API básica la cual es llamada en el
entorno Junaio como Arel.
Debemos resaltar que aunque sea un API básico la que se
escogió para desarrollar no deja de ser un API robusto, la
cual es recomendada para los nuevos desarrolladores que
se están familiarizando con el navegador.
C. Selección de los puntos relevantes para el prototipo
En esta sección del artículo es donde se seleccionan los
puntos más relevantes para el prototipo, pero dicha
sección ya se había realizado con anterioridad, de los
cuales los puntos que se escogieron fueron los siguientes.
Entrada de Acceso a la Sede Tres
Sala de profesores
Instituto de Idiomas
Departamento de Ciencias Básicas
Sala de Estudio
Vicerrectoría Administrativa
Teatro Jorge Artel
Decanatura de Ingeniería de Sistemas
Sala de Profesores de Ingeniería
Baños Sede Tres.
Teatro José Consuegra Higgins.
Como finalidad fueron escogidos los puntos más
solicitados, pero con un punto adicional el cual no está
directamente en la sede 3, pero sin embargo se decidió
incluir ya que este punto es bastante solicitado y es la
localidad del Teatro José Consuegra Higgins.
D. Desarrollo del prototipo
Toda aplicación en Junaio tiene una nomenclatura fija la
cual está comprendida por tres carpetas principales, están
son HTML, Library y SRC, las cuales contienen una serie de
archivos para el funcionamiento de la aplicación.
En la carpeta HTML se encuentran los siguientes archivos:
Arel.xml
Resources
HttAccess
Index.php
En la carpeta Library se encuentran las siguientes clases
desarrolladas en php:
arel_object.class
arel_object_model3D.class
arel_object_poi.class
arel_popup.class
arel_rotation.class
arel_xmlhelper.class
junaio.class
SimpleXMLExtended.php
En la carpeta SRC únicamente se encuentra el archivo
search.php, este es el más importante y que se debe
modificar ya que se encuentran la referencia de todos los
Investig. Innov. Ing. 2(2) pp. 29-34. Enero-junio 2015.Universidad Simón Bolívar. Barranquilla, Colombia. ISSN: 2344-8652 32
datos del punto de información a desplegar en el
navegador.
A continuación veremos un fragmento de código en el cual
se detalla cómo se implementa un punto de información
que se desease proyectar en el navegador de Realidad
Aumentada Junaio.
1] $oObject = ArelXMLHelper::createLocationBasedPOI(
2] "1", //id
3] "EntradaSede 3", //title
4] array (10.995137,-74.792584,0), //location
5] WWW_ROOT . "/resources/miniatura.png", //thumb
6] WWW_ROOT . "/resources/icono.png", //icon
7] "! Bienvenido ¡ a la universidad simón bolívar sede 3, sede de todas
la ingenierías y carreras técnicas del alma mater.", //description
8]array(array("VerImagen.","imageButton","http://usbfile.net46.net/
html/resources/sede_3.jpg"))
9]//buttons
10] ); //salidadelpunto 1
12] ArelXMLHelper::outputObject ($oO bject);
Código 1 Fragmento del Archivo search.php
Podemos encontrar en el fragmento una serie de atributos
fundamentales para lograr proyectar nuestro punto de
interés, de los cuales sobresalen el identificador (id) que
se encuentra en la línea 2 de código y que debe ser único
para cada punto, las coordenadas de la ubicación del lugar
línea 4, la cual es fundamental para el punto porque, sin
ella no se lograría proyectar la información.
Los otros atributos son el nombre que se proyectará en la
pantalla ubicado en la línea 3, una imagen a desplegar
como icono en la línea 6, una miniatura para la vista en
detalle línea 5, información descriptiva línea 7, dicha
información será proyectada junto a la miniatura luego de
pulsar en el botón ver detalle que se verá en pantalla y un
último atributo línea 9, el cual se deja a criterio si se
desease adicionar y se puede incluir desde un video,
música, un sitio web hasta una imagen, donde esta última
se proyectara para ofrecer una vista más exacta del lugar
que se desea hallar.
E. Cargado del Prototipo al Dominio
Luego del respectivo desarrollo de la aplicación se ha de
dar paso al cargado del prototipo al dominio que hemos
de haber registrado en uno de los campos al momento de
registrar nuestro canal, para la elaboración del mismo se
utilizó un servidor de Hosting.
Cabe aclarar que esta etapa de cargado del prototipo se
puede realizar durante la implementación del código ya
que desde el canal podemos hacer pruebas de validación
previa a nuestro código.
F. Pruebas
Luego de una serie de pruebas de validación del código
con la opción que nos brinda Junaio en su plataforma y la
respectiva corrección a los errores encontrados, se pudo
tener en completa ejecución nuestro canal para las
respectivas pruebas ya de cómo se ve y como proyecta los
puntos y su información.
Ejecutamos el navegador previamente instalado ya sea en
un dispositivo móvil con sistema operativo Android o iOs,
y observaremos una interfaz con el logo de la aplicación,
ver figura No.1.
Figura 1 Interfaz de inicio de la Aplicación Junaio en un Dispositivo
Móvil con Sistema Operativo Android
Luego de acceder nos presenta una interfaz con un
espacio para escribir la información que deseemos buscar,
un menú con las opciones popular, nuevo, historial y
favoritos, y en la siguiente un listado con los diferentes
mundos creados en el sistema del navegador. Procedemos
a buscar campo para buscar información y un listado esto
buscamos el canal de nombre “USB Aumentada”,
generando un listado como se ve en la Figura No.2.
Figura 2 Listado de la Búsqueda del Mundo USB Aumentada en el
Navegador Junaio
Investig. Innov. Ing. 2(2) pp. 29-34. Enero-junio 2015.Universidad Simón Bolívar. Barranquilla, Colombia. ISSN: 2344-8652 33
Al acceder al mundo USB Aumentada, se activa la cámara
del dispositivo y muestra una interfaz como la de la figura
No.3, que consta de radar en la parte superior derecha,
donde se visualizan unos puntos amarillos que identifican
los puntos de información, al mover el dispositivo hacia los
puntos amarillos, nos permite visualizar el nombre de los
diferentes puntos que se encuentran a nuestro alrededor.
Figura 3 Vista de un Punto de Interés del Mundo USB Aumentada
Se puede ver claramente como el punto de interés se
proyecta en un cuadro de información con su nombre e
icono que registramos en el código y con un pequeño
panel de la distancia próxima al punto. Adicionalmente a
eso el usuario al momento de pulsar en el punto
seleccionado en este caso “sala de profesores”, se le
desplegara una ventana de descripción como se ve en la
figura No.4.
Figura 4 Descripción del Punto de Interés "Sala de Profesores de
Ingeniería" del Mundo USB Aumentada
En la interfaz se proyecta el título, la distancia aproximada
y la descripción del punto que se seleccionó esto con el
objetivo de darle mayor información de lo que se puede
encontrar en este punto de interés. Adicionalmente a esto
esta ventana de descripción cuenta con dos botones uno
para visualizar una imagen como la de la figura No.5, que
puede ser remplazada por un video o un enlace a un sitio
web, el segundo botón se utiliza para cerrar la ventana.
Figura 5 Imagen desplegada al presionar el Botón de
Imagen en la descripción del Punto de Información "Sala
de Profesores de Ingeniería"
La plataforma Junaio tiene una serie de opciones
disponible para el usuario que la desean utilizar, una en
particular es la vista de un mapa de Google con la
ubicación de los puntos de información del canal que
estemos ejecutando como se ve en la figura No. 6, siendo
esta una opción de mucha utilidad para el programador,
porque permite verificar las respectivas coordenadas de
las localizaciones ya que en algunos casos tiende a no
precisar a no ser precisa.
Investig. Innov. Ing. 2(2) pp. 29-34. Enero-junio 2015.Universidad Simón Bolívar. Barranquilla, Colombia. ISSN: 2344-8652 34
Figura 6 Mapa con Puntos de Información de Interés de la Sede
3 de la Universidad Simón Bolívar Sede Barranquilla
II. Resultados
Como resultado principal de la investigación se obtuvo la
implementación de un mundo para el navegador Junaio, a
través del cual utilizando la Realidad Aumentada permite
proporcionar información sobre la ubicación de
dependencias u oficinas de la sede tres de la Universidad
Simón Bolívar ubicada en la ciudad de Barranquilla.
De igual forma se creó un borrador de un tutorial en
formato texto, en donde se evidencia de forma gráfica
como utilizar Junaio para acceder al mundo creado.
La experiencia de desarrollo del prototipo no fue compleja
teniendo en cuenta que los lenguajes utilizados para la
creación específicamente de los puntos de interés fueron
mediante PHP y XML, ya conocidos por los investigadores.
Podemos dar como concluido y ver visto claramente el
potencial que tiene la Realidad Aumentada y sus
Navegadores, como medio para la creación de
aplicaciones centradas en la ubicación para ofrecer a las
personas cada vez mayor información.
Por otra parte este proyecto sirve como base sólida para
futura investigaciones, inclusive podríamos llegar a pensar
en fomentar grupos de trabajo con fines académicos en
esta área, o pensar en crear una asignatura electiva que
profundice en los conceptos y la aplicabilidad que puede
tener en otras áreas.
Conclusiones
En pocas palbras podemos concluir que son escasas las
aplicaciones móviles que utilizan este tipo de tecnología
para mostrar información e n entornos cerrados, esto
debido a la misma filosofía de los navegadores de Realidad
Aumentada, e s por ello que la implementación de un
prototipo de Realidad Aumentada para proporcionar
información sobre la ubicación de dependencias u oficinas
de las distintas sedes de la Universidad Simón Bolívar
ubicadas en Barranquilla, mediante el uso del Navegador
de Realidad Aumentada Junaio[8] es un punto de partida
para aprovechar este tipo de soluciones. De esta forma es
posible, dar solución a los problemas de ubicación cuando
se desconocen los lugares o cuando no se tiene la
señalización adecuada para informar a las personas sobre
los sitios que estos buscan dentro de una región
determinada.
Por otro lado, para el desarrollo del mundo o canal como
se denomina en Junaio con los puntos de acceso, no es
necesario el aprendizaje de un nuevo lenguaje de
programación, ya que se utiliza HTML y PHP, que son
lenguaje comúnmente conocidos en el ámbito del
desarrollo web.
III. Referencias
[1] M. Lester, Profesional Augmented Reality Browser for
Smartphones. United Kingdom: John Wiley & Son,
2011.
[2]Total Inmersion. 2012. Obtenido de Total Inmersion:
http://www.t-immersion.com/augmented-
reality/what-augmented-reality
[3] S.Lim, H. jee, J. youn, & J. lee, An Immersive Authoring
Tool for Augmented Reality-based E-learning, 2011.
[4] C. E. Ortiz, 2012. Tecnomovilidad. Obtenido de
Tecnomovilidad:
http://tecnomovilidad.com/index.Php?option=com_c
ontent&view=article&id=392:proyecto-realidad-
aumentada-en-tecnomovilidad&catid=22:relidad-
aumentada&Itemid=37
[5] Layar, 2012. Obtenido de Layar: http://www.layar.com
[6]Grupo Bancolombia. 2012. Obtenido de Grupo
Bancolombia:
http://www.grupobancolombia.com/home/sucursalVi
rtualEnTuCelular/novedades.asp
[7]Wikitude. 2012. Obtenido de Wikitude:
http://www.wikitude.com
[8]Junaio. Junaio, 2012.. Obtenido de Junaio:
http://www.juanio.com
[9]Metaio. 2012. Obtenido de Metaio:
http://www.metaio.com