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

Sebastián González Botasi <sgonzalez@bionimio.com.ar>

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

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 – 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!!!!

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

Design

Diarios interfaces

Creación de un videojuego para móviles multitáctiles - Trabajo de Investigación

Nuevas Interfaces y sus Aplicaciones en las Tecnologías de ...allman.rhon.itam.mx/~jincera/EvolHCI.pdf · Laboratorio de Redes Avanzadas ... de trabajo para las funciones convencionales

Estereotipos e Interfaces

Diagrama de Interfaces

Temario Interfaces

Dise Nio Interfaces

Disenio interfaces (1)

Interfaces avanzadas para la gestión de espacios, ALFRED BATET, SIMON

Clases abstractas interfaces

Interfaces de usuario

Principios de Interfaces

Interfaces Y Perifericos

Tarea 4 interfaces

programacion de interfaces

Interfaces visuales

Prototipos de interfaces

Introducción a las mesas multitáctiles · 11/15/11 1 Introducción a las mesas multitáctiles Pablo A. Haya Manuel García-Herranz iic– uam amilab-uam Pablo Llinás Fernando Olivera

Innovación y Colaboración en Interfaces Multitáctiles Propuesta: Yazmín Magallanes Velázquez

Interfaces digitales