Taller de Realidad aumentada con Metaio Creator y Layar/Porpoise

1. Taller de Realidad Aumentada
con dispositivos móviles.
Pamplona 29 de Mayo 2015
Manuel Alonso Rosa
malonsorosa@gmail.com
@malonsorosa

2. 7.100 millones de personas en el mundo
6.800 millones con móvil

3. EL CONTEXTO
La presencia de dispositivos móviles con grandes
prestaciones es una realidad en nuestras vidas y
en nuestras aulas

5. Un Smartphone es 20.000 veces mas potente que el
primer ordenador ENIAC en tan solo 110 gramos
http://ipadbooks.contrataweb.com/wp-content/uploads/2012/10/ENIAC.jpg

6. http://tecsapiens.com/wp-content/uploads/2012/09/Internet-de-las-cosas-infograf%C3%ADa-Cisco-cabecera.jpg
La evolución de internet
• El 86% de los internautas utiliza el móvil para acceder a internet.
• Cada día aparecen en el mercado nuevos dispositivos conectados a
internet, smartTV, coches, electrodomésticos, etc…
• Nos aproximamos a la web ubicua, donde todo estará conectado a internet.

7. ¿Y lo que no esté
conectado?
• Los elementos que no puedan disponer de conexión a internet serán
interactivos.
• La Realidad Aumentada hará de puente entre estos elementos e internet
gracias a los smartphone.
• Las personas, actualmente, utilizan los teléfonos inteligentes como
herramienta para tomar decisiones, con la Realidad Aumentada serán
imprescindibles.

8. http://www.abc.es/tecnologia/redes/20130310/abci-
google-glass-realidad-aumentada-201303081508.html

9. ¿cómo se usará…?

10. O mejor dicho ¿cómo se está usando…?

11. ¿cómo se está usando…?

12. ¿cómo se está usando…?

13. ¿cuándo se usará?...

14. Google Glass

16. ¿cuándo se usará?...

17. Augmented Reality Repair Guide for Industrial Pump
https://youtu.be/NYpl0PD5Le4

18. Augmented Reality Equipment Training & Maintenance App
https://youtu.be/nHfY56lHZjU

19. Programming of Industrial Robots through Gestures and Augmented Reality
https://youtu.be/RPn4EnZ4V6M

20. Industrie 4.0: Augmented Reality in der Fabrikautomatisierung
https://youtu.be/SfG33CNqq-w

21. Scenarios for Augmented Reality in 2020
https://youtu.be/1sVznK4VJMI

22. Realidad Aumentada Industrial - https://youtu.be/zYmxcOiqXuU

23. Máster en
Energías Renovables Distribuidas
Soldamatic :Realidad Aumentada aplicada a
la formación técnica

25. La realidad aumentada podría ser la
moda tecnológica dominante... en
2020

26. Augmented/Virtual Reality Report 2015
Los alumnos de FP deben conocer la
Realidad Aumentada

27. Nuestro Alumnado
"El alumno no será un receptor pasivo del mensaje, sino que interactuará con él,
lo que cambiará el rol del educador“ Marc Prensky

28. ¿Cambio metodológico?
Enriquecery mejorarla experiencia del alumno
Nuestro Alumnado
¿Por qué se aburren?
¿Están desconectados?
¿No están motivados?
¿Qué podemos cambiar?

29. Gestión del mantenimiento
Muestra en pantalla toda la información asociada al
mantenimiento de la máquina: próximos preventivos,
histórico de intervenciones, órdenes de trabajo. Emite
un aviso cuando un preventivo esté cerca de cumplir su
fecha prevista y una alarma cuando la supera.
Variables en tiempo real
Permite visualizar datos en tiempo real de los
equipos identificados a través de la comunicación
con los sistemas de control existentes. La
aplicación incluye además la opción de forzar
variables o de realizar entradas de datos desde su
propia interfaz.

30. Visualización de datos históricos
Ayuda a la supervisión y control de las variables
de proceso a través de la presentación de
gráficas de datos históricos, pudiendo
seleccionar la(s) variable(s) a representar y el
periodo deseado.
Identificación de riesgos
La detección de equipos permite señalizar
riesgos existentes, zonas de peligro,
medidas preventivas y señalización de
perímetros de seguridad, así como
programación de avisos y advertencias
personalizados para garantizar el correcto
cumplimiento de las normas.

31. Identificación a través de etiquetas,
formas o geolocalización
La identificación de los equipos se realiza
mediante etiquetas personalizadas, códigos QR,
las propias siluetas de los equipos o sistemas
de geolocalización, dependiendo de las
características del proyecto y de las
preferencias del usuario. Información completa
del equipo se muestra en pantalla.
Capturas de pantalla y vistas
favoritas
Realiza capturas de pantalla para
registrar evidencias de una situación
concreta permitiendo compartirlas o
archivarlas. Además permite fijar una
vista de equipo para seguir visualizando
su estado en tiempo real desde
cualquier lugar

32. Gestión de la documentación
Permite identificar todos los elementos de
un equipo y mostrar la documentación de
cada uno de ellos. En el caso de
esquemas eléctricos, permite seguir los
circuitos entre las diferentes páginas sólo
con pulsar los nodos de conexión entre
ellas.
Avisos y alarmas
Registra las alarmas y eventos de
los diferentes equipos en forma de
lista y avisa de aquellos
actualmente activos. Programación
personalizada del envío de avisos
vía email o sms al móvil. Permite la
función de escaneo y listado
dinámico a tiempo real, muy útil
para revisiones rutinarias.

39. ¿Qué es la Realidad aumentada?
Conexión directa e insitu con toda la información
relevante disponible sobre instalaciones

40. Visores de RA

41. Layar
Fácil de manejar .
Plataforma abierta, API flexible.
Disponible para iOS y Android.
RA para nuestras propias APP.
Zona de chequeo.
Sistema de reconocimiento de imagen.
Soporta modelos 3D.

42. Junaio
• interfaz sencilla e intuitiva
• Metaio Creator
• Gran comunidad de desarrolladores

46. https://my.metaio.com/
Creación de una cuenta en
METAIO

47. Descargar METAIO CREATOR

48. Creación de una capa de realidad aumentada con METAIO
Crear AR trackable

49. Donde conseguir modelos 3D

50. http://www.123dapp.com/catch
Crear modelos 3D

51. Edificios en 3D
Creación de una capa de realidad aumentada con Junaio
Export to .obj

52. Edificios en 3D
Creación de una capa de realidad aumentada con Junaio
Motor trifásico 3D en AR

53. Añadir Texto AR

54. Creación de una capa de realidad aumentada con Junaio
Sube tu escena a metaio cloud
1
2
3

55. My channels
https://my.metaio.com/

58. Creación de una capa de realidad aumentada con Junaio
AR 3D INSTALACIÓN INDUSTRIAL

59. Profundizando en Junaio

60. ¿Y SI LOCALIZAMOS UNA BOMBA DE
CALOR EN 3D Y LA AÑADIMOS EN AR?

61. AR WORKFLOW

62. AR WORKFLOW

63. AR WORKFLOW PREVIEW

65. ¿PROBAMOS EL AR WORKFLOW?

67. POI Geolocalizado

70. Creando Capas
• Las capas se construyen utilizando tecnología web
en Layar, junaio, Hoppala …
• Se pueden programar con lenguajes como PHP +
Mysql, XML, Java, etc…
http://www.google.com/glass/start/

71. Aplicaciones de RA
Visor de RA Servidor RA Servidor propio

72. Proceso
1. creación de una capa
• https://www.layar.com/my-layers/
• Título, descripción, logo, nombre, …
• API url, gráficos, filtros …
2. Almacenamiento POIS
• Interfaz entre POIs y layar APP
• Porpoise https://code.google.com/p/porpoise/downloads/list
• PHP adaptable
3. Filtros
4. Test y publicación

73. Proceso
1. El usuario se conecta a Layar en su móvil, busca la capa “Rabanales”.
2. Seleccionará el rango máximo donde quiere que aparezcan los POI en el
mapa.
3. Layar busca en su Base de Datos y detecta que ésta capa existe.
4. Layar redirige la petición a la URL del servidor de POIs (Porpoise) en el que se
encuentra la BD (fichero XML) con los datos de los POI y el servidor web hace la
consulta.
5. El servidor de POIs envía la respuesta a Layar en formato JSON con los datos
que cumplan con los parámetros recibidos en la petición Layar.
6. Layar mostrará al usuario aquellos POIs que estén dentro de la distancia
seleccionada anteriormente por el usuario.
7. Si el usuario pulsa sobre el enlace de cómo llegar, el servidor Layar conectará
a través de la API de Google Map con la aplicación para mostrar en el mapa el
camino hasta llegar al POI.
8. Si el usuario pulsa encima del enlace a más información, el servidor Layar
conectará a través de HTTP con la página web que contenga la información.

74. Gestión de POIS: Porpoise
• Portable Point-of-Interest Server for Layar.
• Licencia libre.
• Se ejecuta bajo cualquier servidor PHP estándar.
• Permite servir POI a clientes Layar.
• Soporta archivos XML y BD como almacenes de datos.
• Tres tipos de POI: puntos, objetos 2D, objetos 3D.
• Soporta el estándar de autoidentificación oAuth.
• Su desarrollo pasó a Layar.

75. Instalando Porpoise

76. Instalando Porpoise
Descargamos Porpoise
→http://code.google.com/p/porpoise
Lo descomprimimos y lo subimos al
servidor 260mb a través de FTP.

77. Configurando Porpoise
Crear un usuario en Porpoise:
Lo primero es encriptar la contraseña ya que esta no se guarda tal cual:
http://portalfp.es/pamplona_porpoise/web/dashboard/crypt.php?pamplona=pamplona
Editamos el archivo:
http://dominio.com/porpoise/web/dashboard/users.inc.php
sustituyendo el código:
$_access["default"] = '';
por el que nos ha devuelto Porpoise, por ejemplo:
$_access["pamplona"] = '$1$32bW9Kxc$YsWK8UezG8oVTwlOXOnBD0';

78. Configurar con un editor de texto el archivo:
http://dominio.com/porpoise/config/config.xml
Conexión a capa XML
Conexión a base de datos
Configurando Porpoise

79. Configurando Porpoise
Accede al dashboard de Porpoise
http://portalfp.es/pamplona_porpoise/web/dashboard/index.php
Valídate con el nombre y usuario que aparece: pamplona - pamplona.
Aparecerán varias capas
Capa XML

80. Configurando Porpoise
Archivo XML
Accede a tu capa XML.
Los parámetros de la capa los dejaremos por defecto y pulsaremos ”New
POI”.
El parámetro ”Dimension” define en cuantas dimensiones estará representado
el POI en la pantalla de Layar:
• 1 (un punto, la habitual).
• 2 (una imagen).
• 3 (elemento en 3 dimensiones).
Escogeremos 1.

81. Configurando Porpoise
Selecciona el nuevo POI <no title> que se ha creado.
Completa los datos datos del POI:

83. Geolocalización de POIS

84. ¿PROBAMOS A AÑADIR POIS ?
• Saltoki
• Berotza
• Adisa
• Frijucar s.l.
• Humiclima Norte
SA
• Calman S.L.
• Etc…

85. Filtros en Layar
Señalar un rango de búsqueda de puntos (filters).

86. Filtros en Layar
public function passesFilter(POI $poi, Filter $filter = NULL) {
if (empty($filter)) {
return TRUE;
}
if (empty($filter->searchbox1)) {
return TRUE;
}
if (strpos($poi->title, $filter->searchbox1) !== FALSE) {
return TRUE;
}
if (strpos($poi->line2, $filter->searchbox1) !== FALSE) {
return TRUE;
}
if (strpos($poi->line3, $filter->searchbox1) !== FALSE) {
return TRUE;
}
if (strpos($poi->line4, $filter->searchbox1) !== FALSE) {
return TRUE;
}
return FALSE;
}

87. Configurar la capa en Layar
https://www.flickr.com/photos/docfuz/6880798492
CAPAS “LAYAR”

88. Crea una cuenta de desarrollador en Layar.
https://www.layar.com/my-layers/

89. Registra la capa en Layar.
Crear una capa en Layar

90. Edición de la capa en Layar

91. Edición de la capa en Layar API en Layar.
http://portalfp.es/pamplona_porpoise/web/porpoise.php

92. Edición de la capa en Layar METADATA en Layar.

93. Edición de la capa en Layar
GRAPHICS en Layar.

94. GEOPOSICIONAR EDIFICIOS EN 3D

95. Edificios en 3D
Convertidor de modelos 3D
http://public.layar.com/downloads/Layar3DMod
elConverter-3.2.0.zip
• Paso 1: Importa un modelo 3D (.obj/.mtl)
• Paso 2: Inspeccionar el modelo
• Paso 3: Editar materiales (opcional)
• Paso 4: Añade texturas a la animación (opcional)
• Paso 5: Previsualiza el modelo en 3D (opcional)
• Paso 6: Editar el modelo para fijar cualquier problema de posición o escala
(opcional)
• Paso 7: Situar el modelo Layar3D sobre el mapa
• Paso 8: Guarda el modelo como Layar3D (.l3d)

96. Edificios en 3D
EXPORTAR .OBJ

97. ABRIR EN LAYAR 3D MODEL CONVERTER

98. Edificios en 3D
Situar el modelo Layar3D sobre el mapa

99. Edificios en 3D
CREAR POI DIMENSION 3

101. Beneficios en #FP
LOS RESULTADOS
 Los estudiantes se sienten menos aislados
y notan que reciben más apoyo al hacer
prácticas y trabajar en diferentes lugares.
 Mejora de la reputación de las
instituciones y por lo tanto también mejora
su capacidad para atraer a más
estudiantes
 El uso generalizado de dispositivos
móviles podría hacer una formación
profesional más eficaz y eficiente, lo que
podría mejorar la productividad.
o La reducción del tiempo ya que permite a
los estudiantes pasar más tiempo
dedicados a la adquisición de experiencia
práctica o hacer el trabajo productivo.
o Menos estudiantes abandonan los cursos
de formación profesional y más alumnos
alcanzan mejores calificaciones.

102. 102
MANUEL ALONSO ROSA
@malonsorosa
malonsorosa@gmail.com
es.linkedin.com/in/malonsorosa