Upload
edgar-macas
View
241
Download
0
Embed Size (px)
Citation preview
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