Tutorial Geolocalizacin con Wikitude

Hola a todos, hemos decidido hacer un pequeo tutorial del funcionamiento de Realidad
Aumentada en el campo de la Geolocalizacin para la cual utilizaremos la herramienta Wikitude.
Para ms conceptos e informacin visiten: www.wikitude.com
Para empezar con el desarrollo de este pequeo proyecto en Android debes tener previamente
configurado tu entorno de desarrollo, en el siguiente link encuentras una buena documentacin
de cmo hacerlo: http://www.sgoliver.net/blog/?page_id=3011
Primer paso:
Descargar SDK wikitude

Desde la pgina principal de wikitude debes acceder a la pestaa de developer y dirigirte a

downloads que te re direccionar a esta:

Y descargas el SDK para Android.

Nota: Para poder descargar el SDK te pedir que te registres en wikitude con un nombre y correo
electrnico.
Una vez descargado tendrs un archivo .zip el cual al descomprimir este archivo obtendrs varios
archivos entre ellos:
-

Example: Es un ejemplo funcional completo para probar directamente en eclipse, solo

tienes que importar y ejecutar en tu dispositivo.
Library: Contiene el SDK de wikitude.
Reference: Documentacin sobre el SDK.
Tools: Herramientas que nos brinda wikitude para el desarrollo de Realidad Aumentada
con imgenes o marcadores.

Segundo Paso:
Desarrollo
Empezaremos, creando un proyecto nuevo en eclipse con las siguientes configuraciones:

Nota: Con las ltimas actualizaciones del eclipse, al crear un proyecto se nos crea
automticamente una carpeta llamada appcompat_v7 la cual se aade como librera en el
proyecto. Esta nos sirve para dar soporte del ActionBar para versiones anteriores.

Tercer paso (opcional):

Para este caso trataremos se simplificar el cdigo para tener un proyecto limpio y sin cdigo vago;
dejamos nuestro MainActivity.java con la menor cantidad de cdigo, reemplazando nuestro
activity_main.xml por fragment_main.xml; y eliminamos el activity_main.xml

Nota: Simplificamos y eliminamos la mayora de cdigo (generado automticamente por eclipse)

nicamente para este proyecto.

Cuarto paso:
Procedemos a configurar nuestro proyecto:
1. Agregamos la librera wikitudesdk.jar que se encuentra en la carpeta que descargamos
anteriormente.

2. En eclipse ingresa a Window Preferencias Android Build y nos aseguramos que la

opcin Force error when external jars contain native libraries se encuentre desmarcada,
ya que el jar externo contiene bibliotecas nativas.

3. Ahora procedemos a configurar nuestro AndroidManifest.xml con los permisos respectivos que
son:

4. Procedemos con la creacin de cdigo.

Primeramente modificamos el layout fragment_main.xml que nos servir como interfaz
principal, algo sencillo solo agregaremos un botn.

5. Hecho esto, procedemos a crear la segunda interfaz que contendr lo que sera la
Geolocalizacin.
5.1 Creamos la segunda interfaz que contendr la geolocalizacin al pulsar el botn Punto de
Inters.
Creamos la clase (la cual hemos llamado Punto_Interes)

Creamos el layout (que lo hemos llamado punto_interes.xml)

Y creamos la navegabilidad entre estas dos interfaces; dentro de la clases principal java agregamos
el siguiente cdigo.

Ubicamos el botn, lo hacemos que escuche en esta actividad y le damos una accin al pulsarlo
que seria que se dirige al segundo layout.
Ahora procedemos a aadir la arquitectura de wikitude llamado Mundo Arquitecto dentro del
layout punto_interes.xml, y le asignamos un id que sera en nuestro caso vistara

Ahora dentro de la clase java Punto_Interes creamos una variable protegida de tipo
ArchitectView para poder crear la vista y poder utilizar los mtodos de wikitude como son
OnCreate (), OnPause (), OnDestroy ().
Luego buscamos la arquitectura del layout que la hemos llamado vistara y finalizamos con las
configuraciones necesarias, en este caso no enviamos nada porque ah va la licencia de wikitude
en caso de comprarla.

Luego procedemos a inicializar los mtodos necesarios para el ciclo de vida de la actividad: que
son: OnResume (), OnPause (), OnStop (), OnDestroy (), OnLowMemory (), OnPostCreate.

Dentro del mtodo OnPostCreate (), cargamos la ruta de acceso al archivo html que va a contener
todo componentes para la visualizacin de RA, puede ser directamente con una URL web, en este
caso vamos a cargarlo al que se encuentra dentro de nuestro proyecto
assets/samples/puntointeres/index.html ..
Para ello debemos crear una carpeta assets dentro de nuestro proyecto y en ella copiaremos
toda la carpeta samples que estn dentro del proyecto de ejemplos que nos da wikitude. Para
eso nos dirigimos a la carpeta origen de wikitude luego a Examples luego a assets y copiamos la
carpeta samples que contiene todos los archivos necesarios.

Dejamos la carpeta de reconocimiento de imgenes y la referente a Geolocalizacion que son:

-

1_Image$Recognition_1_Image$On$Target
3_Point$Of$Interest_1_Poi$At$Location

Y procedemos a cambiarles de nombre la primera por imagen y la segunda por geolocalizacion

esta ltima vamos a utilizar.
Ahora podemos cargar el index referente al reconocimiento de imgenes cargando dentro del
architect la direccin samples/imagen/index.html procedemos a ejecutar nuestra app y ya
tendremos nuestro primer ejemplo con reconocimiento de imgenes con Realidad Aumentada je.

GEOLOCALIZACIN
Ahora por fin haremos geolocalizacin con realidad aumentada.
Primeramente procedemos a crear la clase java LocationProvider que la que servir para darnos
nuestra ubicacin, dentro de la misma empezamos creando algunas variables que estn dentro del
API de wikitude, entre ellas tenemos por ejemplo el tiempo de respuesta de ubicacin, que tipo de
red se va a utilizar, el tiempo que le daremos para que se actualicen los lugares, entre otros,
pueden ver una explicacin mejor en cdigo que dejaremos al final.

Ahora procedemos a ir a nuestra clase PuntoInteres.java y dentro del mtodo OnPostCreate

le damos la direccin del index.html de la carpeta assets/samples/geolocalizacin/index.html y
procedemos a ejecutar y ya hemos logrado realizar la GEOLOCALIZACN
Nos saldr un pequeo cuadro azul a nuestro alrededor ya que est aleatoriamente porque no
hemos fijado una latitud ni longitud exacta, ahora vamos a la carpeta de geolocalizacin y vamos
a la subcarpeta js y abrimos el archivo poiatlocation.js este archivo contiene la latitud y
longitud que debemos ubicar asi mismo el icono que queremos mostrar.

Ahora nos fijaremos en 3 lneas de cdigo a modificar que son para cambiar icono, la latitud y
longitud.
1ra. Cambiamos el icono a mostrar en la lnea
World.markerDrawable_idle = new AR.ImageResource("marker_idle.png"); para hacer esto
debemos copiar la imagen que queremos mostrar dentro de la subcarpeta assets que es parte
de la carpeta geolocalizacion

En nuestro ejemplo mostraremos una iglesia.

World.markerDrawable_idle = new AR.ImageResource("iglesia_santo_domingo.png");
Ahora procedemos a ubicar la latitud y longitud correspondiente con las lneas de cdigo
"longitude": (lon + (Math.random() / 5 - 0.1)),
"latitude": (lat + (Math.random() / 5 - 0.1)),

Como podemos observar wikitude nos da un valor aleatorio referente a estos dos valores por lo
que los ubica en cualquier ubicacin cada vez que ejecutemos la aplicacin.
"latitude": (-3.996646),
"longitude": (-79.201794),

Y con esto hemos terminado la geolocalizacin con wikitude en Android, aqu les dejamos una
captura con lo que hicimos.

Fin