Wikitude. ARchiect

Accesibilidad y Realidad Aumentada

Vicente García Díaz – garciavicente@uniovi.es

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