Realidad aumentada con Wikitude. API de ARchitect

1. Accesibilidad y Realidad
Aumentada
ARchitect
Vicente García Díaz – garciavicente@uniovi.es
Universidad de Oviedo, 2012

2. 2
Tabla de contenidos
Wikitude – ARchitect
1. Conceptos básicos
2. ¡Hola Mundo!
3. Aplication Programming Interface (API)
4. Casos prácticos

4. 4
Conceptos básicos
Wikitude SDK
• Conjunto de herramientas para crear mundos AR
• Componentes principales:
▫ ARchitect Tools
▫ Componentes Android
▫ Componentes iOS
▫ Documentación
▫ Términos de servicio

5. 5
Conceptos básicos ARchitect Tools
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

6. 6
Conceptos básicos ARchitect Tools
ARchitect Library (API)
ARchitectToolsLibrary Reference

7. 7
Conceptos básicos ARchitect Tools
ARchitect Mobile Viewer (AMV)

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

9. 9
Conceptos básicos Publicación de mundos
Formas de desarrollo con Wikitude

10. 10
Conceptos básicos Publicación de mundos
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

11. 11
Conceptos básicos Publicación de mundos
Límites geográficos
• No todos los contenidos están geotiquetados

13. 13
¡Hola Mundo!
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)

14. 14
¡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)

15. 15
¡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

17. 17
Application Programming Interface Ejemplo. Insertar elementos flotantes en la cámara
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
ElementosFlotantes

18. 18
Application Programming Interface Ejemplo. Insertar elementos flotantes en la cámara
Código (I)
index.html

19. 19
Application Programming Interface Ejemplo. Insertar elementos flotantes en la cámara
Código (II)
estilos.css
funciones.js

20. 20
Application Programming Interface Ejemplo. Insertar elementos flotantes en la cámara
Resultado ADE

21. 21
Application Programming Interface Ejemplo. Uso de AR.context
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
AR.context

22. 22
Application Programming Interface Ejemplo. Uso de AR.context
Código
index.html
estilos.css
funciones.js

23. 23
Application Programming Interface Ejemplo. Uso de AR.context
Resultado ADE

24. 24
Application Programming Interface Ejemplo. Crear un círculo superpuesto en la cámara
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
Circulo

25. 25
Application Programming Interface Ejemplo. Crear un círculo superpuesto en la cámara
Código (I)
index.html
estilos.css

26. 26
Application Programming Interface Ejemplo. Crear un círculo superpuesto en la cámara
Código (II)
funciones.js

27. 27
Application Programming Interface Ejemplo. Crear un círculo superpuesto en la cámara
Resultado ADE

28. 28
Application Programming Interface Ejemplo. Añadir y reaccionar ante eventos
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
Eventos

29. 29
Application Programming Interface Ejemplo. Añadir y reaccionar ante eventos
Código
funciones.js

30. 30
Application Programming Interface Ejemplo. Añadir y reaccionar ante eventos
Resultado ADE

31. 31
Application Programming Interface Ejemplo. Añadir y reaccionar ante eventos II
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)
Eventos2

32. 32
Application Programming Interface Ejemplo. Añadir y reaccionar ante eventos II
Código
index.html
estilos.css
funciones.js

33. 33
Application Programming Interface Ejemplo. Añadir y reaccionar ante eventos II
Resultado ADE

34. 34
Application Programming Interface Ejemplo. Insertar imágenes a partir de ficheros
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
Imagenes

35. 35
Application Programming Interface Ejemplo. Insertar imágenes a partir de ficheros
Código (I)
funciones.js

36. 36
Application Programming Interface Ejemplo. Insertar imágenes a partir de ficheros
Código (II)
funciones.js

37. 37
Application Programming Interface Ejemplo. Insertar imágenes a partir de ficheros
Código (III)
funciones.js

38. 38
Application Programming Interface Ejemplo. Insertar imágenes a partir de ficheros
Resultado ADE

40. 40
Casos prácticos
HtmlDrawables
HtmlDrawables

41. 41
Casos prácticos
3dTransformations
3dTransformations

42. 42
Casos prácticos
DirectionIndicator
DirectionIndicator

43. 43
Casos prácticos
AnimatedImageDrawables
AnimatedImageDrawables

44. 44
Casos prácticos
AnimationGroup
AnimationGroup

45. 45
Casos prácticos
Radar
Radar

46. 46
Casos prácticos
RelativaLocations
RelativeLocations

47. 47
Casos prácticos
SimpleImageRecognition
SimpleImageRecognition

48. 48
Casos prácticos
IrAndGeo
IrAndGeo

49. 49
Bibliografía