DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
12-03-2014

Un último detalle que olvide explicar en la entrega anterior: Desarrollando aplicaciones de Realidad Aumentada con Wikitude (parte 3), es el uso del atributo HTML dentro de la clase HtmlDrawable, en este artículo realizaremos una aplicación para Android con las mismas características de la aplicación creada en el artículo pasado: Desarrollando aplicaciones de Realidad Aumentada con Wikitude (parte 3), pero esta vez, usaremos el atributo HTML en vez del atributo URI.

Diferencias entre este entrega y la entrega anterior

¿Cuál vendría siendo la diferencia entre crear un cuadro informativo con el atributo HTML en vez del atributo URI? la diferencia consiste en que todo el contenido (HTML) estará dentro del "ra.js" en vez de estar en un archivo aparte, y digo archivo aparte en vez de un archivo alojado en Internet porque URI puede referenciar tantos elementos dentro de la apk:

uri:"<NuestroProyecto>/assets/base/WIkitudeParte3DescripcionLibroComoProgramarEnJavaDeitel.html"

Como fuera de ella:

uri:"http://www.desarrollolibre.net/public/page/wikitude/WIkitudeParte3DescripcionLibroComoProgramarEnJavaDeitel.html"

Nuestro archivo "ra.js" quedará así:

<html>
var World = {
    loaded: false,

    init: function initFn() {
        this.createOverlays();
    },

    createOverlays: function createOverlaysFn() {

	// creamos un objeto de la clase HtmlDrawable
	htmlDrawable = new AR.HtmlDrawable({
	   html:"<div style='font-size:42px;color:#FFF;background: #068;border: 10px solid #059;border-radius: 5px;padding: 5px;height: auto;'><pre>Este libro presenta las tecnologías </pre><pre>de vanguardia para estudiantes, </pre><pre>profesores y desarrolladores de </pre><pre>software.</pre></div>"
	}, 1,{offsetX : -1,rotation:90,opacity : 0.8,scale : 2});

        // inicializamos el Tracker con el Target collection (nuestra caratula del libro Deitel)
        this.tracker = new AR.Tracker("assets/targetcollection.wtc", {
            onLoaded: this.worldLoaded
        });

	// indicamos el nombre del Target en el Tracker, basicamente al momento de que el Target sea rastreado por el Tracker el objeto htmlDrawable sera renderizado en la pantalla del dispositivo
        var javaLibro = new AR.Trackable2DObject(this.tracker, "javaLibro", {
            drawables: {
                cam: htmlDrawable
            }
        });
    }
};

// principal
World.init();

Como podemos ver, tanto el HTML como el CSS están contenidos dentro del div:

html:"<div style='font-size:42px;color:#FFF;background: #068;border: 10px solid #059;border-radius: 5px;padding: 5px;height: auto;'><pre>Este libro presenta las tecnologías </pre><pre>de vanguardia para estudiantes, </pre><pre>profesores y desarrolladores de </pre><pre>software.</pre></div>"

Esto resulta en algo bastante molesto y poco práctico, podríamos pensar que es posible colocar el CSS en un archivo aparte, como por ejemplo dentro de un .css:

/WikitudeParteTresDos/assets/base/css/style.css

o en el index.html:

/WikitudeParteTresDos/assets/base/index.html

Pero si haces esto, Wikitude no busca los estilos en estos sitios y por lo tanto los elementos no tomaran el estilo.

Conclusiones

Entonces, ¿cuál de los dos atributos usamos el HTML o el URI?; depende de lo que queramos hacer, si vamos a tener un contenido estático que no vamos a actualizar y es bastante pequeño tal vez consideres usar el HTML, podría resultar bastante útil si no queremos tener tantos .html; pero si hay mucho contenido y estilos que deseamos actualizarlos con frecuencia el URI podría resultarnos una mejor opción.

Podrás encontrar la aplicación completa en nuestro repositorio de github Android/WikitudeParteTresDos o haciendo clic aquí.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Paleta de colores para el Material Design

Paleta de colores para el Material Design

Templates para Android y iOS

Templates para Android y iOS

Creando increibles Drawer en Android con MaterialDrawer

Creando increibles Drawer en Android con MaterialDrawer

Algunos artículos que te pueden interesar

Las medidas SDUs en Wikitude

Las medidas SDUs en Wikitude

Las SDUs definen la relación entre el tamaño del objeto real y la distancia en la que se observa.

Andrés Cruz 06-03-2014

¿Qué son y cómo se configuran los Adaptadores (Adapters) para mostrar Listas y Grids en Android? (parte 1)

¿Qué son y cómo se configuran los Adaptadores (Adapters) para mostrar Listas y Grids en Android? (parte 1)

Los Adapters consisten en mostrar un conjunto de información a través de listas o grids (personalizables a nivel de definición, estilo y eventos).

Andrés Cruz 02-09-2014

Cómo crear un Target collection en Wikitude

Cómo crear un Target collection en Wikitude

En esta sección explicaremos como crear un Target collection en Wikitude; un Target collection no es más que una colección de Target; un Target es la imagen destino que será utilizada por el Tracker para reconocer una imagen.

Andrés Cruz 20-10-2013