wikitude. archiect
DESCRIPTION
Realidad aumentada con Wikitude. API de ARchitectTRANSCRIPT
![Page 1: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/1.jpg)
Accesibilidad y Realidad Aumentada
Vicente García Díaz – [email protected]
Universidad de Oviedo, 2012
ARchitect
![Page 2: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/2.jpg)
Tabla de contenidos
1. Conceptos básicos
2. ¡Hola Mundo!
3. Aplication Programming Interface (API)
4. Casos prácticos
2
Wikitude – ARchitect
![Page 3: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/3.jpg)
![Page 4: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/4.jpg)
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
![Page 5: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/5.jpg)
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
![Page 6: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/6.jpg)
ARchitect Library (API)
6
Conceptos básicos ARchitect Tools
\ARchitectTools\Library Reference
![Page 7: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/7.jpg)
ARchitect Mobile Viewer (AMV)
7
Conceptos básicos ARchitect Tools
![Page 8: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/8.jpg)
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
![Page 9: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/9.jpg)
Formas de desarrollo con Wikitude
9
Publicación de mundos Conceptos básicos
![Page 10: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/10.jpg)
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
![Page 11: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/11.jpg)
Límites geográficos
• No todos los contenidos están geotiquetados
11
Conceptos básicos Publicación de mundos
![Page 12: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/12.jpg)
![Page 13: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/13.jpg)
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!
![Page 14: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/14.jpg)
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!
![Page 15: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/15.jpg)
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!
![Page 16: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/16.jpg)
![Page 17: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/17.jpg)
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
![Page 18: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/18.jpg)
index.html
Código (I)
18
Application Programming Interface Ejemplo. Insertar elementos flotantes en la cámara
![Page 19: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/19.jpg)
Código (II)
19
Application Programming Interface
funciones.js
estilos.css
Ejemplo. Insertar elementos flotantes en la cámara
![Page 20: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/20.jpg)
Resultado ADE
20
Application Programming Interface Ejemplo. Insertar elementos flotantes en la cámara
![Page 21: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/21.jpg)
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
![Page 22: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/22.jpg)
Código
22
Application Programming Interface
index.html
estilos.css
Ejemplo. Uso de AR.context
funciones.js
![Page 23: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/23.jpg)
Resultado ADE
23
Application Programming Interface Ejemplo. Uso de AR.context
![Page 24: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/24.jpg)
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
![Page 25: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/25.jpg)
Código (I)
25
Application Programming Interface
index.html
estilos.css
Ejemplo. Crear un círculo superpuesto en la cámara
![Page 26: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/26.jpg)
Código (II)
26
Application Programming Interface
funciones.js
Ejemplo. Crear un círculo superpuesto en la cámara
![Page 27: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/27.jpg)
Resultado ADE
27
Application Programming Interface Ejemplo. Crear un círculo superpuesto en la cámara
![Page 28: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/28.jpg)
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
![Page 29: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/29.jpg)
Código
29
Application Programming Interface Ejemplo. Añadir y reaccionar ante eventos
funciones.js
![Page 30: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/30.jpg)
Resultado ADE
30
Application Programming Interface Ejemplo. Añadir y reaccionar ante eventos
![Page 31: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/31.jpg)
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
![Page 32: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/32.jpg)
Código
32
Application Programming Interface Ejemplo. Añadir y reaccionar ante eventos II
index.html
estilos.css
funciones.js
![Page 33: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/33.jpg)
Resultado ADE
33
Application Programming Interface Ejemplo. Añadir y reaccionar ante eventos II
![Page 34: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/34.jpg)
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
![Page 35: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/35.jpg)
Código (I)
35
Application Programming Interface Ejemplo. Insertar imágenes a partir de ficheros
funciones.js
![Page 36: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/36.jpg)
Código (II)
36
Application Programming Interface Ejemplo. Insertar imágenes a partir de ficheros
funciones.js
![Page 37: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/37.jpg)
Código (III)
37
Application Programming Interface Ejemplo. Insertar imágenes a partir de ficheros
funciones.js
![Page 38: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/38.jpg)
Resultado ADE
38
Application Programming Interface Ejemplo. Insertar imágenes a partir de ficheros
![Page 39: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/39.jpg)
![Page 40: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/40.jpg)
HtmlDrawables
40
Casos prácticos
HtmlDrawables
![Page 41: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/41.jpg)
3dTransformations
41
Casos prácticos
3dTransformations
![Page 42: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/42.jpg)
DirectionIndicator
42
Casos prácticos
DirectionIndicator
![Page 43: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/43.jpg)
AnimatedImageDrawables
43
Casos prácticos
AnimatedImageDrawables
![Page 44: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/44.jpg)
AnimationGroup
44
Casos prácticos
AnimationGroup
![Page 45: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/45.jpg)
Radar
45
Casos prácticos
Radar
![Page 46: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/46.jpg)
RelativaLocations
46
Casos prácticos
RelativeLocations
![Page 47: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/47.jpg)
SimpleImageRecognition
47
Casos prácticos
SimpleImageRecognition
![Page 48: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/48.jpg)
IrAndGeo
48
Casos prácticos
IrAndGeo
![Page 49: Wikitude. ARchiect](https://reader034.vdocumento.com/reader034/viewer/2022052323/55900d411a28abd03d8b471f/html5/thumbnails/49.jpg)
Bibliografía
49