Post on 07-Aug-2020
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)