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 amilab-uam amilab-uam

Fecha última actualización:15 noviembre 2011

http://pablohaya.com http://mherranz.wordpress.com/

Créditos

Este obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 Unported. (Texto en castellano)

Parte de los contenidos que se han utilizado en esta obra han sido obtenidos de las siguientes fuentes, las cuales retienen los derechos de autor:

•! ActuatedWorkbench •! Bill Buxton

•! Diamond Touch from MERL •! GL Barret and R. Omote •! Illuminate Clay

•! Jeff Han •! Kinect XBOX

•! Microsoft Surface •! Nintendo WII •! Perceptive Pixel

•! PixelSense (Microsoft y Samsung) •! Reactable from UPC •! Samnsung Galaxy

•! SandScape •! Star System from Xerox Star

•! TED •! Touchlib •! Urp

•! amilab •! iPhone y iPad from Apple

•! metaDESK •! nuigroup El resto de texto e imágenes se rige por la siguiente licencia:

11/15/11

2

AGENDA

Introducción

Hardware

Ópticas DI

FTIR

LLP

PixelSense

Capacitivas

Detección de dedos

TUIO

Reconocimiento de dedos

Frameworks libres y

comerciales

FLING

Otros Temas

Consideraciones de diseño

Tangibles/Fiduciales

Referencias

INTRODUCCIÓN

11/15/11

3

WIMP: SISTEMA STAR (1981)

!! “Window, Icon, Menus and Pointer”.

!!Una interfaz visual basada en la oficina física.

!! Estaba orientado a trabajadores que no estaban interesados en la computación per se.

src: [Johnson, J. and Roberts, T. L, 1999]

!! Bitmaps, GUI, iconos, carpetas, ratón, Ethernet, servidor de fichero,

impresión y correo-e..

!! Lisa de Apple, Mac (1983)

MANIPULACIÓN DIRECTA [Shneiderman, 1983]

Objetos digitales se diseñan de manera que la interacción sea análoga a como se manipulan los objetos físicos.

Usuario siente que controla directamente el objeto digital

Principios: Representación continua de los objectos y acciones de interés.

Acciones físicas (ej. pulsar botón, seleccionar, arrastar…) en vez de comandos

Acciones reversibles con retroalimentación inmediata de los objetos de interes

Ejemplos:

Herramientas de diseño gráfico

WYSIWYG

11/15/11

4

POST-WIMP (aka NUI): YA ESTÁN AQUI

7

Apple iphone Samsung Galaxy Apple ipad

Nintendo WII Kinect XBOX Microsoft Surface

src: Wikipedia

ALGO DE HISTORIA (BILL BUXTON)

1982 Multi-Touch Input: Nimish Mehta University of Toronto.

1983 Rich Gesture Recognition, Myron Krueger. http://www.youtube.com/watch?v=dmmxVA5xhuo

1984 ! Multi-Touch Screen (Bob Boie, Bell Labs, Murray Hill NJ)

1985 Multi-Touch Tablet

(Input Research Group, University of Toronto)

1991 Digital Desk, Pierre Wellner

(Rank Xerox EuroPARC, Cambridge)

src: billbuxton.com/myronOval.jpg

src: billbuxton.com/DGPtouch.jpg

src: billbuxton.com/MultitouchAssets/ubicomp11sm.gif

11/15/11

5

JEFF HAN (2006)

src:TED:http://www.ted.com/talks/jeff_han_demos_his_breakthrough_touchscreen.html

EJEMPLOS SUPERFICIES MULTI-CONTACTO

12

src: Jeff Han,

http://cs.nyu.edu/~jhan/ftirsense src: Wikipedia, Reactable

src: amilab, http://amilab.ii.uam.es

src: amilab, http://amilab.ii.uam.es

src: Wikipedia

11/15/11

6

CARACTERÍSTICAS BÁSICAS

Pantalla/Panel

Manipulación Directa

Interacción intuitiva

Dedos tocan los

objetos visuales

Arrastar, tocar,

pellizcar

Doble

Funcionalidad

MÚLTIPLES USUARIOS

Collaboración

Interacción concurrente

Reconocimiento de Personas

Fragmentación de

tareas

Sensores extras

Varios usuarios en

la misma tarea

11/15/11

7

DETECCIÓN DE OBJETOS: FIDUCIALES

src: amilab, PolyTags.

src: amilab, PolyTags.

src: reactable, fiducials.

TECNOLOGÍAS MULTICONTACTO

11/15/11

8

OPTICAS

Tecnologías Multicontacto

DI: Diffused Illumination

Diffused Illumination (DI)

•! Funciona por detección de sombras

•! Iluminación trasera o delantera

•! Permite el uso de objetos tangibles

•! Sensible a la luminosidad

Ejemplo

•! Microsoft Surface 1.0

src: nuigroup, http://wiki.nuigroup.com/Diffused_Illumination

11/15/11

9

FTIR: FRUSTRATED TOTAL INTERNAL REFLECTION

Frustrated Total Internal Reflection (FTIR) •! [Hans 2005] •! Luz confinada •! Funcióna por presión •! Excelente detección de dedos •! No detecta objetos

Ejemplos •! Perceptive Pixel, Inc •! Multi-touch Collaboration Wall (CNN, 2008) •! TED:

http://www.ted.com/talks/jeff_han_demos_his_breakthrough_touchscreen.html

src: nuigroup, http://wiki.nuigroup.com/FTIR

LLP: LASER LIGHT PLANE ILLUMINATION

Laser Light Plan Illumination

•! LASER IR montado sobre la superficie

•! 1mm grosor

•! Muy sensible

•! Cierto cuidado al instalar

src: nuigroup, http://wiki.nuigroup.com/Llp

11/15/11

10

LCD+IR

Tecnologías Multicontacto

PIXELSENSETM

Microsoft Surface 2.0 Samsung SRU40 (January 6, 2011, Microsoft previewed the latest version of Microsoft Surface at Consumer Electronics Show (CES) 2011)

Características

•! Iluminación IR trasera

•! LCD + fotoreceptores integrados

src: Microsoft Surface 2.0

11/15/11

11

CAPACITIVAS +

MICROANTENAS

Tecnologías Multicontacto

PROJECTED- CAPACITIVE TOUCH

Ventajas

•! Larga duración

•! Rendimiento excelente

•! Sin límite de puntos

Desventajas

•! Dificultad de intergración (sensible a interferencias electromágneticas)

•! Precio elevado (82’’ pixel

perceptive)

•! Sólo dedos

Ej: iphone

(src: Barret, GL and Omote, R.)

11/15/11

12

DIAMOND TOUCH

Microantenas

Detección de usuario

src: Dietz, P.; Leigh, D. (2001).

src: http://www.merl.com/areas/images/DiamondTouch.jpg

DETECCIÓN DEDOS

Tecnologías Multicontacto

11/15/11

13

Sesiones dedos

PROCESAR DEDOS INDIVIDUALMENTE

Seguimiento trayectoria

Posición y acelareación

Historia

movimiento

Física mejorada

Persistente

mientras aprieta

DETECCIÓN DE DEDOS/MANOS

Video que recibe la cámara se procesa en blob/objetos

Datos de seguimiento

•! Identificador, posición, tamaño, aceleración, rotación

Eventos

•! Dedos posicionad, levantado, moviéndose

Ejemplo

•! CCV: Community Core Vision (tbeta)

•! reacTIVision (permite Fiducials)

•! Touchlib: Windows

•! Touchè: Mac OS X: http://gkaindl.com/software/touche

11/15/11

14

DETECCIÓN DE DEDOS/MANOS

src: Touchlib

TUIO A PROTOCOL FOR TABLE BASED TANGIBLE USER INTERFACES

TUIO Protocol - Semantic types of set messages

s sessionID, temporary object ID, int32

i classID (e.g. marker ID), int32

x, y, z position, float32, range 0...1

a, b, c angle, float32, range 0..2PI

X, Y ,Z movement vector (motion speed & direction), float32

A, B, C rotation vector (rotation speed & direction), float32

m motion acceleration, float32

r rotation acceleration, float32

P free parameter, type defined by OSC packet header

Extracted from: http://www.tuio.org/?specification

11/15/11

15

PROCESAR DEDOS INDIVIDUALMENTE

Cliente TUIO (Oficiales)

•! Processing

•! C++:

•! Java •! C#:

•! Pure Data

•! Max/MSP •! Quartz Composer

•! Flash AS3

Otros •! VVVV

•! Python

•! Squeak

•! Ruby

•! JavaScript

•! Matlab

•! …

RECONOCIMIENTO DE GESTOS

Tecnologías Multicontacto

11/15/11

16

COMBINACIÓN DE DEDOS

Reconocimento gestos

Reconocimiento mano

Correspondencia Acciones

Asociación dedos

por proximidad

Gestos

específicos

Tocar, Rotar,

Pellizcar…

EJEMPLOS DE GESTOS

11/15/11

17

CORRESPONDENCIA GESTO -ACCIÓN

36

MÁS SOBRE GESTOS

GESTO ACCIÓN

Doble toque Menú circular

Tick Correcto

Dedo fijo y otro se mueve en esquina

Hojear

Encerrar con el dedo Seleccionar

Cinco dedos que se cierran Borrar

¿? ¿?

!! Mismo gestos distintas acciones. Ej. Separar para agrandar y copiar.

!! Anclas especiales para realizar gestos. Ej. Hojear.

!! Usar los bordes de la superficie.

!! El reverso de las ventanas se puede emplear.

11/15/11

18

PROCESAR GESTOS Código abierto •! MT4j •! Kivi y PyMT

•! SparshUI •! libTISCH

•! Squidy

•! Grafiti •! Midas

•! FLING

Comerciales

•! Surface SDK

•! DiamondTouch SDK

•! Gestureworks (Flash y Flex)

http://amilab.ii.uam.es/fling

Main Developer MTUI Researcher MTUI Researcher MTUI Researcher Head of Lab Graphic Designer

Pablo.Llinas@uam.es German.Montoro@uam.es

Manuel.GarciaHerranz@uam.es Pablo.Haya@uam.es

Xavier.Alaman@uam.es Gemma.DeCastro@uam.es

Descargars manuales, videos, fotos…

11/15/11

19

Video Feed

Atomic Events

Visual Application

Gesture

Interpretation

RESUMEN DE FLING

Virtual Working Area

Multiple Input Devices with

Different

Protocols

Events Captured by

Workspace

Listeners

Tree Structured

Objects

Event Target Search FLING

Object Detail Raw Event Unification

Advanced Gesture

Interpretation

Functions Triggered by

Gestures

FLING EN DETALLE

11/15/11

20

VIDEO

http://www.youtube.com/pebs74

EJEMPLOS

OTROS

11/15/11

21

Consideraciones de diseño

Se emplean las manos y los dedos

•! Diseñar controles tamaños adecuado (1cm diámetro ó

1x1cm2)

•! PPI (Pixels per Inch): medida de densidad. PPI=pixels/

inch (se suele utilizar la diagonal)

•! 1 cm (0.4 inch)

•! Nokia N800 4.1'', 800x480, PPI 225, 1cm => 90p

•! Touchscreen 15'', 1024x768, PPI 85, 1cm => 34p

•! Icerberg tips y adaptive targets

•! Las manos pueden cubrir la pantalla

•! Diestros vs. Zurdos

TANGIBLES + MESAS MULTICONTACTO Superficies de Interacción

Superficies en las que se puede interactuar mediante elementos tangibles.

Adecuada para trabajo colaborativo.

Urp (1999) metaDesk (1997)

ActuatedWorkbench (2002)

11/15/11

22

TANGIBLES + MESAS MULTICONTACTO

Interfaces que al contrario que la mayoría de las TUI pueden cambiar su forma.

Illuminate Clay (2002) SandScape (2004)

CONCLUSIONES

Interacción natural

Integración con tangibles

Aplicaciones

•! Trabajo colaborativo

•! Hospitales

•! GIS (Geographic Information System)

•! Gestión de crisis

•! Producción musical

•! Hostelería

11/15/11

23

REFERENCIAS http://delicious.com/phaya/multitouch

PÁGINAS WEB

Historicas

•! Bill Buxton

(http://billbuxton.com/multitouchOverview.html)

•! Jeff Han

(http://cs.nyu.edu/~jhan)

•! Demostración TED

(http://www.ted.com/talks/jeff_han_demos_his_breakthrough_touchscreen.html)

11/15/11

24

PÁGINAS WEB

Tecnologías

•! Do-It-Yourself

(http://nuigroup.org)

•! Microsoft Surface

(http://www.microsoft.com/surface)

•! Reactable

(http://www.reactable.com/)

•! Perceptive Pixel

(http://www.perceptivepixel.com/)

•! Projected-Capacitive

(www.walkermobile.com/March_2010_ID_Projected_Capacitive.pdf)

(

www.touchinternational.com/literature/whitepapers/

ProjectedCapacitiveTechnology.pdf)

PÁGINAS WEB Reconomiento de dedos

•! CCV: Communitiy Core Vision (aka tbeta)

(http://ccv.nuigroup.com/)

•! reacTIVision

(http://reactivision.sourceforge.net/)

•! Touchlib

(http://nuigroup.com/touchlib/)

•! TUIO

(http://tuio.org)

•! Touchè

(http://gkaindl.com/software/touche)

11/15/11

25

PÁGINAS WEB Reconomiento de gestos

•! Grafiti (Master Thesis)

(http://grafitiproject.wordpress.com/)

•! Kivy (Python, LGPL)

(http://kivy.org)

•! PyMT (Python, LGPL)

(http://pymt.eu/)

•! Squidy (Java, LGPL) (http://www.squidy-lib.de/)

•! SparshUI (LGPL, C++, Java) (http://code.google.com/p/sparsh-ui/)

•! Midas (http://groups.google.com/group/midas-framework)

•! libTISCH (C++ with bindings for C#, Java, Python, LGPL) (http://tisch.sourceforge.net/)

•! MT4j (http://www.mt4j.org)

PÁGINAS WEB

FLING

•! http://amilab.ii.uam.es/fling

•! http://www.youtube.com/pebs74

Reconomiento de gestos (Comerciales)

•! MS Surface SDK (Gratuita)

(http://www.microsoft.com/surface)

•! DiamodTouch SDK (http://www.merl.com/areas/dtsdk/)

•! Gesture Works

(http://gestureworks.com/)

11/15/11

26

LIBROS Müller-Tomfelde, C. (Ed.) (2010) Tabletops - Horizontal Interactive Displays Springer; 1st Edition. edition (May 6, 2010)

Saffer, D (2008) Designing Gestural Interfaces: Touchscreens and Interactive

Devices. O'Reilly Media; 1 edition (December 3, 2008)

Saffer, D. (2009) Designing for Interaction: Creating Innovative Applications

and Devices (2nd Edition) New Riders Press; 2 edition (August 24, 2009)

Wigdor, D. & Wixon, D. (2011) Brave NUI World: Designing Natural User

Interfaces for Touch and Gesture. Morgan Kaufmann; 1 edition (April 27, 2011)

ARTICULOS libTISCH: Echtler, F., Klinker., G.: A Multitouch Software Architecture. In 5th Nordic

Conference on Human-Computer Interaction (NordiCHI 2008), pp. 463--466 (2008)

DIAMONDTOUCH: Dietz, P.; Leigh, D. (2001). "DiamondTouch: A Multi-User Touch

Technology". Proceedings of the 14th annual ACM symposium on User interface software

and technology. f. UIST: Orlando, FL. pp. 219–226.

FTIR: Han, J. Y. 2005. Low-Cost Multi-Touch Sensing through Frustrated Total Internal

Reflection. In Proceedings of the 18th Annual ACM Symposium on User Interface Software

and Technology

PyMT: Hansen, T. E., Hourcade, J. P., Virbel, M., Patali, S., Serra, T.: PyMT: a post-WIMP

multi-touch user interface toolkit. In: ACM International Conference on Interactive Tabletops

and Surfaces (ITS '09), pp. 17--24. ACM, New York (2009)

Historical: Johnson, J. and Roberts, T. L. The Xerox "Star": A Retrospective. IEEE

Computer, September 1989

Squidy: König, W. A., Rädle, R., Reiterer, H.: Squidy: a zoomable design environment for

natural user interfaces. In: 27th international conference extended abstracts on Human

factors in computing systems (CHI EA '09), pp. 4561--4566. ACM, New York (2009)

11/15/11

27

ARTICULOS TUIO: Kaltenbrunner, M., Bovermann, T., Bencina, R., Costanza, E.: "TUIO - A Protocol for

Table Based Tangible User Interfaces". Proceedings of the 6th International Workshop on

Gesture in Human-Computer Interaction and Simulation (GW 2005), Vannes, France, 2005

MT4j: Laufs, U., Ruff, C., Zibuschka, J.: MT4j - A Cross-platform Multi-touch Development

Framework. In: Engineering Patterns for Multi-Touch Interfaces 2010, Workshop of the

ACM EICS (2010)

Historical: Nakatani, L. H. & Rohrlich, John A. (1983). Soft Machines: A Philosophy of

User-Computer Interface Design. Proceedings of the ACM Conference on Human Factors

in Computing Systems (CHI’83), 12-15.

Grafiti: De Nardi, A: Grafiti: Gesture Recognition mAnagement Framework for Interactive

Tabletop Interfaces. Diploma thesis. University of Pisa (2008)

SparshUI: Ramanahally, P., Gilbert, S., Niedzielski, T., Velázquez, D., Anagnost, C.: Sparsh UI: A Multi-Touch Framework for Collaboration and Modular Gesture Recognition. In Proc. of WINVR 2009, Conference on Innovative Virtual Reality, pp 1–-6 (2009)

Historical: Shneiderman, Ben, Direct Manipulation: A Step Beyond Programming Languages, IEEE COMPUTER, 16, 8, (August 1983), 57-69.

Midas: Scholliers, C., Hoste, L., Signer, B., De Meuter, W.: Midas: a declarative multi-touch interaction framework. In: 5th International Conference on Tangible, Embedded, and embodied Interaction (TEI '11), pp. 49--56. ACM, New York (2011)