Tutorial Geolocalización con Wikitude

Hola a todos, hemos decidido hacer un pequeño tutorial del funcionamiento de Realidad

Aumentada en el campo de la Geolocalización para la cual utilizaremos la herramienta Wikitude.

Para más conceptos e información visiten: www.wikitude.com

Para empezar con el desarrollo de este pequeño proyecto en Android debes tener previamente

configurado tu entorno de desarrollo, en el siguiente link encuentras una buena documentación

de cómo hacerlo: http://www.sgoliver.net/blog/?page_id=3011

Primer paso:

Descargar SDK wikitude

Desde la página principal de wikitude debes acceder a la pestaña 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

electrónico.

Una vez descargado tendrás un archivo .zip el cual al descomprimir este archivo obtendrás 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: Documentación sobre el SDK.

- Tools: Herramientas que nos brinda wikitude para el desarrollo de Realidad Aumentada

con imágenes 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

automáticamente una carpeta llamada “appcompat_v7” la cual se añade como librería en el

proyecto. Esta nos sirve para dar soporte del ActionBar para versiones anteriores.

Tercer paso (opcional):

Para este caso trataremos se simplificar el código para tener un proyecto limpio y sin código vago;

dejamos nuestro MainActivity.java con la menor cantidad de código, reemplazando nuestro

activity_main.xml por fragment_main.xml; y eliminamos el activity_main.xml

Nota: Simplificamos y eliminamos la mayoría de código (generado automáticamente por eclipse)

únicamente para este proyecto.

Cuarto paso:

Procedemos a configurar nuestro proyecto:

1. Agregamos la librería 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

opción “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 creación de código.

Primeramente modificamos el layout “fragment_main.xml” que nos servirá como interfaz

principal, algo sencillo solo agregaremos un botón.

5. Hecho esto, procedemos a crear la segunda interfaz que contendrá lo que sería la

Geolocalización.

5.1 Creamos la segunda interfaz que contendrá la geolocalización al pulsar el botón “Punto de

Interés”.

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 código.

Ubicamos el botón, lo hacemos que escuche en esta actividad y le damos una acción al pulsarlo

que seria que se dirige al segundo layout.

Ahora procedemos a añadir la arquitectura de wikitude llamado “Mundo Arquitecto” dentro del

layout “punto_interes.xml”, y le asignamos un id que sería 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 métodos 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 métodos necesarios para el ciclo de vida de la actividad: que

son: OnResume (), OnPause (), OnStop (), OnDestroy (), OnLowMemory (), OnPostCreate.

Dentro del método OnPostCreate (), cargamos la ruta de acceso al archivo html que va a contener

todo componentes para la visualización 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 están 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 imágenes 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 imágenes cargando dentro del

architect la dirección “samples/imagen/index.html” procedemos a ejecutar nuestra app y ya

tendremos nuestro primer ejemplo con reconocimiento de imágenes con Realidad Aumentada je.

GEOLOCALIZACIÓN

Ahora por fin haremos geolocalización con realidad aumentada.

Primeramente procedemos a crear la clase java “LocationProvider” que la que servirá para darnos

nuestra ubicación, dentro de la misma empezamos creando algunas variables que están dentro del

API de wikitude, entre ellas tenemos por ejemplo el tiempo de respuesta de ubicación, que tipo de

red se va a utilizar, el tiempo que le daremos para que se actualicen los lugares, entre otros,

pueden ver una explicación mejor en código que dejaremos al final.

Ahora procedemos a ir a nuestra clase “PuntoInteres.java” y dentro del método “OnPostCreate”

le damos la dirección del index.html de la carpeta “assets/samples/geolocalización/index.html” y

procedemos a ejecutar y ya hemos logrado realizar la “GEOLOCALIZACÓN”

Nos saldrá un pequeño cuadro azul a nuestro alrededor ya que está aleatoriamente porque no

hemos fijado una latitud ni longitud exacta, ahora vamos a la carpeta de “geolocalización” 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 líneas de código a modificar que son para cambiar icono, la latitud y

longitud….

1ra. Cambiamos el icono a mostrar en la línea

“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 líneas de código

"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 ubicación cada vez que ejecutemos la aplicación.

"latitude": (-3.996646), "longitude": (-79.201794),

Y con esto hemos terminado la geolocalización con wikitude en Android, aquí les dejamos una

captura con lo que hicimos.

Fin