Interfaces Avanzadas: Superficies Multitáctiles, nuevos mecanismos de interacción

Sebastián González Botasi <[email protected]>

Taller de Diseño Multimedia 5 – FBA - UNLP. La Plata, Argentina.

Interfaces Avanzadas Superficies Mul6tác6les, nuevos mecanismos de interacción

c r e a t i v i d a d y t e c n o l o g í a

2 Sebastian Gonzalez Botasi || www.bionimio.com.ar

TEMARIO

•  Introducción •  Que es una superficie multitáctil?. •  Principales técnicas ópticas. •  Ejemplos de superficie multitáctil.

•  Diseño y Construcción •  Planificación. •  Diseño de Prototipo y planos. •  Elección de materiales. •  Puesta en marcha.

•  Software •  CCV y ReacTiVision. •  Protocolo TUIO. •  Errores de visión artificial.

•  Algoritmos •  Caso hipotético de superficie multitáctil. •  Modelo de Objetos. •  Reparar errores de visión artificial. •  Ejemplo de uso.

•  Conclusiones •  Referencias


INTRODUCCIÓN S u p e rfic i e M u l t i t á c t i l y M u l t i u s u a r i o s


Introducción: Qué es un superficie multitáctil?


Introducción: Rear DI (Rear Diffused Illumination)


Introducción: FTIR (Frustrated Total Internal Reflection)


Introducción: DSI (Diffused Surface Illumination)


Introducción: Front DI (Front Diffused Illumination)


Introducción: Feedback Visual


Introducción: Reactable


Introducción: Floating.Numbers – ART+COM


Introducción: Bjork + Reactable


Introducción: Deadmau5


Introducción: Interfaces inspiradoras


Introducción: Interfaces inspiradoras


DISEÑO Y CONSTRUCCIÓN E l e c c i ó n d e m a t e r i a l e s a l a h o r a d e p e n s a r l a c r e a c i ó n d e u n a S u p e rfic i e M u l t i t á c t i l


Diseño y Construcción: Fácil traslado


Diseño y Construcción: Fácil montaje


Diseño y Construcción: Pocos componentes


Diseño y Construcción: Evitar calentamiento de la mesa


Diseño y Construcción: diseño de prototipo


Diseño y Construcción: diseño de planos generales


Diseño y Construcción: detalles del armado


Diseño y Construcción: superficie de la pantalla / Resistente

Resistencia: debe ser lo suficientemente resistente para permitir apoyar objetos y posar los dedos para interactuar (a esto se suma el hecho de que la altura de la mesa invita al público a apoyarse sobre esta).


Diseño y Construcción: superficie de la pantalla

Opacidad: debe ser lo suficientemente opaca para permitir ver nítidamente (desde abajo) sólo los objetos apoyados, pero no aquellos por encima. Por ejemplos, debe poder verse los dedos apoyados, pero no la mano por encima de ellos, ni las caras de las personas.



Nitidez: también debe poder ser lo suficientemente nítida para dejar ver la imagen proyectada por detrás, pero lo suficientemente opaca como para atrapar la luz y no dejarla pasar. Por ejemplo: si es muy transparente, la proyección seguirá de largo (proyectándose en el techo, en vez de la pantalla) , si es muy opaca no podrá verse bien la imagen (hasta puede perder nitidez).



Antireflejo: la superficie debajo de la pantalla debe poseer un tratamiento anti-reflejo ya que el sistema de captura es muy sensible a los altos contrastes, principalmente si los producen los reflejos en este superficie. Cuando la superficie no es anti-reflejos, funciona como un espejo que refleja el sistema de iluminación.


Diseño y Construcción: superficie de la pantalla / Materiales

Papel Vegetal: se colocó por debajo del acrílico, lo que permi4ó cumplir con los requisitos de resistencia de superficie an4-‐ reflejo en la cara interna. Acrílico Transparente: ACRYLITE® EndLighten, el cual posee propiedades que mejoran la refracción interna de la luz


Diseño y Construcción: ubicación de la cámara y proyector


Diseño y Construcción: iluminación

LEDs Infrarrojos: los LEDs son de tipo SMD 3528 y vienen pre-ensamblados sobre un material flexible gracias al cual es posible la adaptación al bastidor de la pantalla.


Diseño y Construcción: iluminación


SOFTWARE A p l i c a c i o n e s p a r a l a c r e a c i ó n d e S u p e rfic i e s M u l t i t á c t i l e s


Software: CCV – Community Core Vision


Software: ReacTiVision


Software: Reactivision / Simulator


Software: Protocolo TUIO


Software: Protocolo TUIO


Software: Protocolo TUIO – Errores de visión artificial

“Participa en la creación de un árbol único, que llevara tu nombre, el cual

luego podrás compartir con tus amigos en las redes sociales …. Solo tienes

que presionar la pantalla con uno de tus dedos“







…DESCONCIERTO, FRUSTRACIÓN, MALA EXPERIENCIA


ALGORITMOS C o r r e c c i ó n d e e r r o r e s g e n e r a d o s p o r s o f t w a r e d e v i s i ó n a r t ific i a l

43 Sebastian Gonzalez Botasi || www.bionimio.com

Algoritmos: Aplicación para superficie multitáctil

“Realizar una superficie multitáctil donde el usuario pueda generar círculos

de colores cuando presiona la pantalla con sus dedos. Dichos círculos

dejaran su rastro a medida que el usuario desliza sus dedos sobre la

superficie.“

44 Sebastian Gonzalez Botasi || www.bionimio.com

Algoritmos: Programación en Processing


Algoritmos: Diagrama de Objetos


Algoritmos: Main/ Setup (se ejecuta una sola vez)


Algoritmos: Main/ Draw (se ejecuta en cada iteración)


Algoritmos: Clase NuevoMediador -> Constructor


Algoritmos: Clase NuevoMediador -> Métodos


















Algoritmos: corrección de errores en Pantalla Multitáctil


Algoritmos: ejemplo de programa (simulación)


CONCLUSIONES


Conclusiones

•  Un buen diseño permite una buena experiencia.

•  No dejar librado al azar detalles técnicos.

•  Idear una buena construcción, fácil de trasladar y mantener.

•  Mientras antes se tenga la interfaz final para desarrollar mejor.

•  La interfaz final decanta por si solo el desarrollo de soPware.

•  U4lizar programas de terceros para el sistema de visión ar4ficial no esta mal

visto, siempre y cuando se avise del mismo.

•  Los gestos interac4vos sobre la superficie implican un desarrollo diferente al

gesto del mouse sobre la misma superficie.


REFERENCIAS


Referencias

-  How to make a multitouch surface - http://sethsandler.com/multitouch/ -  TUIO - http://www.tuio.org/ -  Jayse Hansen - http://jayse.tv/ -  Pantalla Ugarit - http://bionimio.com.ar/index.php/pantallaugarit/8 -  Proyecto Biopus - http://www.biopus.com.ar -  Processing - http://www.processing.org -  Reactable - http://www.biopus.com.ar -  HoloDesk - http://research.microsoft.com/en-us/projects/holodesk/ -  openCV - http://www.opencv.org


PREGUNTAS….


MUCHAS GRACIAS!!!!

Design

Interfaces Avanzadas: Superficies Multitáctiles, nuevos mecanismos de interacción