DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
06-03-2014

Siguiendo con los artículos sobre el desarrollo de aplicaciones basadas en la Realidad Aumentada y Reconocimiento de Imágenes con Android y Wikitude SDK; en este artículo veremos cómo agregar capas de información cuando los Targets (Objetivos) sean reconocidos por el Tracker (Rastreador), si no reconoces estos dos términos (Targets y Tracker) le recomendamos leer el artículo pasado: Desarrollando aplicaciones de realidad aumentada con Wikitude (parte 2).

¿Qué es lo que queremos decir exactamente con "capas de información"?

Simplemente un cuadro (más bien un rectángulo) informativo sobre algún Ítem en particular, esta capa de información no será más que una página web que referenciamos desde el ARchitect World (JavaScript); algo como esto nos servirá como cuadro informativo:

<html>
    <head>
        <meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'/>
        <style>

            pre {
                font-size:42px;
                color:#FFF;
                text-align: justify;
            }
            .descripcion{
                background: #068;
                border: 10px solid #059;
                border-radius: 5px;
                padding: 5px;
                height: auto;

            }
        </style>
    </head>

    <body>
        <div class="descripcion">
            <pre>Este libro presenta las tecnologías </pre>
            <pre>de vanguardia para estudiantes, </pre> 
            <pre>profesores y desarrolladores de </pre>
            <pre>software.</pre>
            
        </div>
    </body>
</html> 

Cambios en el proyecto

El resto de la estructura del proyecto...

...Será exactamente la que utilizamos en la entrega anterior, lo único que modificaremos será nuestro ARchitect World (JavaScript), cuyo contenido que lo compone se encuentra en la carpeta assets de nuestro proyecto:

<NuestroProyecto>/assets/base/

El JavaScript llamado "ra.js" está ubicado en:

<NuestroProyecto>/assets/base/js

Definiendo el nuevo ARchitect worlds (JavaScript)

Modificaremos el contenido del JavaScript "ra.js" por el siguiente:

var World = {
    loaded: false,

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

    createOverlays: function createOverlaysFn() {

	// creamos un objeto de la clase HtmlDrawable
	htmlDrawable = new AR.HtmlDrawable({
	   uri:"http://www.desarrollolibre.net/public/page/wikitude/WIkitudeParte3DescripcionLibroComoProgramarEnJavaDeitel.html"
	}, 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();

Explicando el nuevo JavaScript

La clase HtmlDrawable sirve para representar objetos a través de la Realidad Aumentada, con objetos nos referimos a elementos HTML, tales como div, textos, imágenes, etc.

La clase HtmlDrawable recibe los siguientes parámetros:

HtmlDrawable( contenido , width , opciones )

Probando nuestra aplicación

Ahora proyecta la aplicación hacia esta imagen:

caratula java libro

Imagen 1: Carátula del Libro Cómo programar en Java Deitel.

Y veras algo en la pantalla de tu dispositivo parecido a las siguientes imágenes:

capas de información con Realidad Aumentada y Reconocimiento de Imágenes

Imagen 2: Screenshot de la capa de información superpuesta al Target.

capas de información con Realidad Aumentada y Reconocimiento de Imágenes

Imagen 3: Screenshot de la capa de información superpuesta al Target.

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


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Generador de launcher para Android sin padding

Generador de launcher para Android sin padding

Templates para Android y iOS

Templates para Android y iOS

Paleta de colores para el Material Design

Paleta de colores para el Material Design

Algunos artículos que te pueden interesar

Puntos de Interés (POI) con Realidad Aumentada en Wikitude

Puntos de Interés (POI) con Realidad Aumentada en Wikitude

En este artículo veremos cómo marcar un sitio a través de Puntos de Interés (POI); en otras palabras reconocer una zona por su posicionamiento geográfico.

Andrés Cruz 16-04-2014

Desarrollando aplicaciones de Realidad Aumentada con Wikitude (parte 3)

Desarrollando aplicaciones de Realidad Aumentada con Wikitude (parte 3)

En este artículo veremos cómo agregar capas de información cuando los Targets son reconocidos por el Tracker.

Andrés Cruz 06-03-2014

Cómo hacer una simple nube en CSS

Cómo hacer una simple nube en CSS

En este artículo veremos como crear una simple nube en CSS; la nube estará compuesta de un div, dentro tendrá un span para representar una sombra generada por la misma.

Andrés Cruz 18-03-2014