HI I´M AN IDEA
WANNA PLAY
WITH ME?
 

Desarrollo de aplicaciones de Realidad Aumentada para Android

Cada día son más las aplicaciones que hacen uso de la nueva tecnología de realidad aumentada.

Esta tecnología, que consiste en combinar elementos virtuales sobre una visión real del entorno físico, parece que ha llegado para quedarse y probablemente, dentro un plazo corto de tiempo, será algo más que habitual verla integrada en multitud de aplicaciones.

Las compañías tecnológicas conocen bien sus posibilidades y ya podemos ver ejemplos como Google GoogglesNokia Point & Find.

Su implantación en los dispositivos móviles se está viendo acelerada por la rápida evolución de estos ya que la presencia de una cámara, un GPS y una brújula en combinación con una conexión de datos permite crear aplicaciones bastantes completas.

Si nos queremos lanzar a crear nuestra propia aplicación de realidad aumentada en Android hemos de saber que no tenemos porque empezar desde cero. La empresa austriaca Mobilizy ha creado una API que, junto con su ya conocida aplicación Wikitude, nos permite desarrollar aplicaciones de realidad aumentada para nuestro terminal.

Vamos a ver cómo dar los primeros pasos para crear nuestra aplicación de realidad aumentada en Android. Para el ejemplo se utilizará el entorno de desarrollo Eclipse.

Descargar la aplicación Wikitude

Uno de los requisitos para poder usar la vista de cámara de realidad aumentada es tener instalada y arrancada la aplicación Wikitude dentro de nuestro dispositivo. Si vais a probar sobre un terminal podéis descargarla desde el Android Market. Si en cambio queréis hacer las pruebas desde el emulador tendréis que conseguir el APK de modo extraoficial e instalarlo. Para esto último y una vez tengáis el paquete desde la consola debéis teclear:

adb install com.wikitude.apk

Además el AVD sobre el que vayáis a probar deberá tener simulado una tarjeta SD.
Una vez instalada es importante que arranquemos la aplicación para que cuando empecemos a desarrollar nuestra aplicación pueda acceder a la vista de la cámara. Para iniciar la aplicación esta ha de detectar una ubicación por lo que si vamos a probar desde el emulador tendremos que utilizar la simulación de GPS. Para ello mientras la aplicación se encuentra en la pantalla de “Loading” debéis lanzar coordenadas al emulador. Esto se puede hacer de dos formas:

  • A través del Eclipse: En la perspectiva DDMS de Eclipse, en la pestaña Emulator Control, encontraremos una sección llamada “Location Controls” donde podemos lanzar las coordenadas que deseemos.
  • A través de la consola: conéctate al emulador y lanza el comando geo fix. Por ejmplo:
telnet localhost 5554
geo fix -82.411629 28.054553

Es conveniente que lances repetidas veces las coordenadas hasta que la aplicación recoja alguna y arranque con ese posicionamiento.
Una vez hecho esto ya podremos probar nuestros desarrollos con la API de Wikitude. Vamos a ver ahora como hacer un ejemplo sencillo.

Descargar la API

Podemos descargarnos un Zip con los archivos necesarios aquí http://www.wikitude.org/en/developers Dentro de este ZIP vamos a encontrar:

  • wikitudearintent.jar (jar que contiene el API que vamos a utilizar)
  • documentación
  • ejemplos

Lo que vamos a necesitar para utilizar el API será el jar que habrá que incluir en el build path de nuestro proyecto.

Mi primera aplicación de AR

Para empezar creamos un nuevo proyecto Android.

Añadimos el jar con el API de Wikitude, wikitudearintent.jar. Para ello

Project-> Properties->Java Build Path -> Libraries -> Add external Jars.

Una vez hecho esto podemos empezar a escribir las primeras líneas. Para el ejemplo hemos creado una actividad (MiRealidadAumentada).

Los dos primeros objetos que vamos a utilizar y que nos proporciona la API son:

  • WikitudeARIntent: nos permitirá lanzar la vista de la cámara de realidad aumentada. En este objeto podemos almacenar todos los puntos de interés (POIs) que deseemos mostrar.
  • WikitudePOI: este objeto describe un POI que queramos mostrar.

Para comenzar crearemos un WikitudeARIntent que se lanzará al pulsar sobre el botón.

public class MiRealidadAumentada extends Activity {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

Button b = (Button) findViewById(R.id.button1);

b.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

launchARView();

}

});

public void launchARView() {

WikitudeARIntent intent = new WikitudeARIntent(this.getApplication(), null, null, true);

addPois(intent);

try {

intent.startIntent(this);

} catch (ActivityNotFoundException e) {

AbstractWikitudeARIntent.handleWikitudeNotFound(this);

}

}

private void addPois(WikitudeARIntent intent) {

// Añadir puntos de interés

}

}

Los parámetros necesarios para el constructor serían:

WikitudeARIntent (Application application, String applicationKey, String developerName, boolean debugMode)

Los argumentos applicationKey y developerName se utilizan cuando has registrado vuestra aplicación a través de la página Mobilizy. Si rellenáis el formulario de registro te enviarán por correo una API Key que podréis usar en vuestra aplicación y que os permitirá eliminar la marca de agua de la vista de cámara.

Para obtener esta API key lo podéis hacer a través de la siguiente páginahttp://w4client.mobilizy.mobi/w4/jsp/keyGenerator.jsp

Como véis al objeto WikitudeARIntent se le han de añadir los Puntos de Interés que se van a querer mostrar. Para ello vamos a hacer uso del objeto WikitudePOI del que antes hablámos:

private void addPois(WikitudeARIntent intent) {

Resources res = getResources();

WikitudePOI poi = new WikitudePOI(40.441346, -3.785702,636, "INSDOUT", "HI I AM AN IDEA WANNA PLAY WITH ME?");

poi1.setLink("http://www.insdout.com.com/");

poi1.setIconresource(getResources.getResourceName(R.drawable.icon));

intent.addPOI(poi);

}

Con esto ya podremos probar nuestra primera aplicación en un dispositivo real o en el emulador. Si vais a probar sobre este último podéis simular el movimiento del dispositivo con las teclas 1-6 del teclado numérico y para poner la vista horizantal recordad que podéis hacerlo con Ctrl+F11. De todas maneras os adelanto que depurar con el emulador es bastante incómodo ya que la simulación no funciona todo lo fluido que nos gustaría.

Cuando arranquemos la aplicación se mostrará nuestra primera pantalla con el botón que arrancará la vista de AR.

Al pulsar sobre el icono del POI que hemos agregado se desplegará debajo una ventana con la información que hemos incorpora objeto.

poi1.setDetailAction("wikitudeapi.mycallbackactivity");

y configurar en el Manifest la actividad que se lanzará

<activity android:name=".MiCallbackActivity"

android:theme="@*android:style/Theme.Translucent.NoTitleBar" >

<intent-filter>

<action android:name="wikitudeapi.mycallbackactivity" />

<category android:name="android.intent.category.DEFAULT" />

</intent-filter>

</activity>

Un ejemplo de implementación de una actividad puede ser un diálogo que muestre información extra asociada al POI.

En ella recuperamos el ID del POI seleccionado gracias al Extra que te proporciona el API de wikitude

this.getIntent().getIntExtra(WikitudeARIntentHelper.EXTRA_INDEX_SELECTED_POI, -1);

En el ejemplo hemos hecho la lista con los POI accesible desde cualquier punto de la aplicación incluyéndolo en una clase que herede de Application pero siempre se pueden utilizar otros métodos para recuperarlos.

Os dejo abajo el código de ejemplo para la actividad que muestra el siguiente diálogo cuando pulsemos sobre el botón “Details”.

public class MiCallbackActivity extends Activity {

private static final int POI_CLICKED = 1;

private static final int NO_POI = 2;

private int poiId;

private List<WikitudePOI> pois;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

pois = ((MiAplicacion) this.getApplication()).getPois();

poiId = this.getIntent().getIntExtra(WikitudeARIntentHelper.EXTRA_INDEX_SELECTED_POI, -1);

if (pois != null && poiId != -1) {

this.showDialog(POI_CLICKED);

} else {

this.showDialog(NO_POI);

}

}

@Override

protected Dialog onCreateDialog(int id) {

AlertDialog.Builder builder = new AlertDialog.Builder(this);

switch (id) {

case POI_CLICKED:

String title = pois.get(poiId).getName();

builder.setTitle("Información sobre: " + title);

builder.setMessage(pois.get(poiId).getIconuri());

builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog, int whichButton) {

}

});

break;

case NO_POI:

builder.setTitle("No existe POI asociado");

builder.setMessage("Pulse sobre un icono en la vista de cámara para obtener más información");

builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog, int whichButton) {

}

});

break;

}

return builder.create();

}

Espero este API sirva de revulsivo para aquellas personas que quieran profundizar un poco más en la programación en Android y la Realidad Aumentada. Si alguno lo había pensado alguna vez pero veía complicado empezar con la vista de cámara y la implementación de las capas este API salvará ese primer escalón.

About the author

Jaime Mulero Hola! Me llamo Jaime Mulero, soy programador desde hace años, apasionado por la informática prácticamente desde que tengo uso de razón. Jquery Ninja, Codeigniter Trooper, database juggler and Android engineer! Jaime Mulero

VN:F [1.9.20_1166]
Rating: 10.0/10 (2 votes cast)
Desarrollo de aplicaciones de Realidad Aumentada para Android, 10.0 out of 10 based on 2 ratings
Difunde la palabra
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • Meneame

5 Comments on "Desarrollo de aplicaciones de Realidad Aumentada para Android"

  1. Marisol dice:

    Hola! Excelente tutorial!

    Me gustaría saber si sabes cómo personalizar los botones que aparecen en la vista principal. En estos momentos al presionar el botón de opciones me aparece un boton que dice “Ignore Altitude” Cómo puedo modificar ese boton y/o agregar otros botones al menu?

    Gracias!

    VA:F [1.9.20_1166]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.20_1166]
    Rating: 0 (from 0 votes)
    • Edgar Guzman dice:

      Hola Marisol, te pregunto si lograste poner a funcionar las indicaciones que se dieron en el tutorial. No logro entenderlo muy bien y me gustaria aprender mas. Espero una respuesta, te dejo mi correo natulos@gmail.com

      VA:F [1.9.20_1166]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.20_1166]
      Rating: 0 (from 0 votes)
  2. gian dice:

    ola amigo muy bien explicado necesito de tu ayuda quisiera hacer esto pero sin tener instalado el wikitude es decir…no habra una libreria para poner implementarla a mi proyecto y adherir puntos como lo haces en el tutorial..algo parecido al zxing donde puedas agregar la libreria y trabajar por favor necesito que me ayudes con esto es un proyecto de universidad…gracias

    nota:me descarge el wikitude sdk pero solo me trae 3 arhivos que no abren y no me tra el codigo de la libreria en si.

    VA:F [1.9.20_1166]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.20_1166]
    Rating: 0 (from 0 votes)
  3. Myriam dice:

    Hola hice todo paso a paso pero no funciona alguien si ya le salio porfa q aclaren el tema

    VA:F [1.9.20_1166]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.20_1166]
    Rating: 0 (from 0 votes)
  4. andres dice:

    Ya la API de Wikitude ha evolucionado mucho desde esconces; aquí más recursos: http://desarrollolibre.net/blog/temas/13/android

    VA:F [1.9.20_1166]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.20_1166]
    Rating: 0 (from 0 votes)

¿Algo que opinar? Deja tu comentario!