Desarrollando aplicaciones de Realidad Aumentada con Wikitude (parte 3.2)

12-03-2014 - Andrés Cruz

In english

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 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í.


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

!Cursos a!

10$

En Udemy

Quedan 3 días!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!