wikitude. archiect
DESCRIPTION
Realidad aumentada con Wikitude. API de ARchitectTRANSCRIPT
Accesibilidad y Realidad Aumentada
Vicente García Díaz – [email protected]
Universidad de Oviedo, 2012
ARchitect
Tabla de contenidos
1. Conceptos básicos
2. ¡Hola Mundo!
3. Aplication Programming Interface (API)
4. Casos prácticos
2
Wikitude – ARchitect
Wikitude SDK
• Conjunto de herramientas para crear mundos AR
• Componentes principales:
▫ ARchitect Tools
▫ Componentes Android
▫ Componentes iOS
▫ Documentación
▫ Términos de servicio
4
Conceptos básicos
ARchitect Tools
• Herramientas para crear mundos AR utilizando HTML, CSS y JavaScript
• Componentes principales: ▫ ARchitect Library (API)
▫ ARchitect Mobile Viewer (AMV)
▫ ARchitect Desktop Engine (ADE)
▫ Documentación
5
Conceptos básicos ARchitect Tools
ARchitect Library (API)
6
Conceptos básicos ARchitect Tools
\ARchitectTools\Library Reference
ARchitect Mobile Viewer (AMV)
7
Conceptos básicos ARchitect Tools
ARchitect Desktop Engine (ADE)
• Permite:
▫ Simular el comportamiento de los mundos en un navegador (p.e., Chrome, Explorer, …)
▫ Observar las propiedades de los objetos AR
▫ Simular la interacción con los usuarios y los eventos surgidos
8
Conceptos básicos ARchitect Tools
Formas de desarrollo con Wikitude
9
Publicación de mundos Conceptos básicos
Información necesaria para crear el mundo
• Versión mínima Versión mínima para trabajar con ARchitect Engine
• Nombre Título del mundo que aparece en el cliente de Wikitude
• Nombre corto Título con un máximo de 30 caracteres
• Descripción Información que se da a los potenciales usuarios del mundo
• Idioma Idioma del mundo
• Categoría Categoría/s a las que pertenece el mundo
• Límites geográficos Área geográfica para la que el mundo está activo
• Icono Icono que se muestra en la cámara AR del navegador
• Gráfico de promoción Gráfico mostrado para mundos que se están publicitando
10
Conceptos básicos Publicación de mundos
Límites geográficos
• No todos los contenidos están geotiquetados
11
Conceptos básicos Publicación de mundos
Creación del primer mundo con el SDK
• Se puede realizar un Hola Mundo simplemente utilizando HTML estándar
• El contenido se muestra encima de lo mostrado por la cámara dando lugar a Head-up Display (HUD)
13
¡Hola Mundo!
Formas de visualización de los mundos
• ¿Cómo se puede visualizar el mundo?
1. Guardarlo en un servidor (000webhost, directorio público de Dropbox, Google Sites, …)
2. Después se puede visualizar mediante 3 opciones:
Cliente Wikitude (Emulado o no)
ARchitect Mobile Viewer (AMV)
ARchitect Desktop Environment (ADE)
14
¡Hola Mundo!
Cliente Wikitude
• Únicamente hay que proporcionar la URL en la que se encuentra el archivo HTML (p.e., https://dl.dropbox.com/u/6858569/holaMundo.html)
• Al introducirla se visualiza la cámara y el mensaje superpuesto
15
¡Hola Mundo!
Insertar elementos flotantes en la cámara
• Se quiere superponer a la imagen captada por la cámara, un componente centrado con un texto, que al hacer clic sobre él, modifique su texto
17
Application Programming Interface Ejemplo. Insertar elementos flotantes en la cámara
ElementosFlotantes
index.html
Código (I)
18
Application Programming Interface Ejemplo. Insertar elementos flotantes en la cámara
Código (II)
19
Application Programming Interface
funciones.js
estilos.css
Ejemplo. Insertar elementos flotantes en la cámara
Resultado ADE
20
Application Programming Interface Ejemplo. Insertar elementos flotantes en la cámara
Uso de AR.context
• Se quiere que cada vez que se detecte una ubicación distinta, el dispositivo muestre un HUD con información de longitud, latitud, altura y precisión de la captura
21
Application Programming Interface Ejemplo. Uso de AR.context
AR.context
Código
22
Application Programming Interface
index.html
estilos.css
Ejemplo. Uso de AR.context
funciones.js
Resultado ADE
23
Application Programming Interface Ejemplo. Uso de AR.context
Crear un círculo superpuesto en la cámara
• Se quiere mostrar un mensaje de texto hasta el momento en el que se detecte que el usuario ha cambiado su posición. En dicho momento se cambiará el mensaje de texto por un círculo de color
24
Application Programming Interface Ejemplo. Crear un círculo superpuesto en la cámara
Circulo
Código (I)
25
Application Programming Interface
index.html
estilos.css
Ejemplo. Crear un círculo superpuesto en la cámara
Código (II)
26
Application Programming Interface
funciones.js
Ejemplo. Crear un círculo superpuesto en la cámara
Resultado ADE
27
Application Programming Interface Ejemplo. Crear un círculo superpuesto en la cámara
Lanzamiento de eventos
• Se quiere que cuando el usuario, pulse sobre el círculo creado en el paso previo, éste aumente su tamaño en 1 SDU
28
Application Programming Interface Ejemplo. Añadir y reaccionar ante eventos
Eventos
Código
29
Application Programming Interface Ejemplo. Añadir y reaccionar ante eventos
funciones.js
Resultado ADE
30
Application Programming Interface Ejemplo. Añadir y reaccionar ante eventos
Lanzamiento de eventos II
• Se quiere que cuando el círculo se encuentre en el campo de visión para el usuario, se muestre un texto indicativo en la parte superior de la pantalla (se debe eliminar cuando el objeto deja de estar visible)
31
Application Programming Interface Ejemplo. Añadir y reaccionar ante eventos II
Eventos2
Código
32
Application Programming Interface Ejemplo. Añadir y reaccionar ante eventos II
index.html
estilos.css
funciones.js
Resultado ADE
33
Application Programming Interface Ejemplo. Añadir y reaccionar ante eventos II
Insertar imágenes a partir de ficheros
• Se quiere que cuando el usuario haga clic sobre el círculo, éste se cambie mostrando un texto y cuando se pulse sobre el texto, éste se cambie mostrando una imagen cargada a partir de un archivo .png
34
Application Programming Interface Ejemplo. Insertar imágenes a partir de ficheros
Imagenes
Código (I)
35
Application Programming Interface Ejemplo. Insertar imágenes a partir de ficheros
funciones.js
Código (II)
36
Application Programming Interface Ejemplo. Insertar imágenes a partir de ficheros
funciones.js
Código (III)
37
Application Programming Interface Ejemplo. Insertar imágenes a partir de ficheros
funciones.js
Resultado ADE
38
Application Programming Interface Ejemplo. Insertar imágenes a partir de ficheros
HtmlDrawables
40
Casos prácticos
HtmlDrawables
3dTransformations
41
Casos prácticos
3dTransformations
DirectionIndicator
42
Casos prácticos
DirectionIndicator
AnimatedImageDrawables
43
Casos prácticos
AnimatedImageDrawables
AnimationGroup
44
Casos prácticos
AnimationGroup
Radar
45
Casos prácticos
Radar
RelativaLocations
46
Casos prácticos
RelativeLocations
SimpleImageRecognition
47
Casos prácticos
SimpleImageRecognition
IrAndGeo
48
Casos prácticos
IrAndGeo
Bibliografía
49