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í.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter