Zweihändige Interaktion,

Multi-Touch und

Stift-basierte Anwendungen

Intelligente Mensch-Maschine-Interaktion - IMMI

SS 2011

Markus Weber

Prof. Didier Stricker

Didier.Stricker@dfki.de

Was ist “Multitouch”

„Multitouch“ ist ein System zur Mensch-Maschine-

Interaktion. Es vereint Ein- und Ausgabegerät und

kommt dadurch ohne herkömmliche Eingabegeräte

wie Maus, Tastatur oder Stylus aus.

Applikationen können direkt auf der Multitouchfläche

mit einem oder mehreren Fingern manipuliert

werden.

Erlaubt eine intuitivere Interaktion für bestimmte

Aufgaben.

Multitouch

Multitouch ist über 25 alt!

1982: Erstes Multitouch System wurde beschrieben

in : Mehta, Nimish, A Flexible Machine Interface,

M.A.Sc. Thesis, University of Toronto

1984: Erster Multi-Touch Screen, Bob Boie, Bell

Labs, Murray Hill NJ

...

2005: Jeff Han (NYU)

2007: Apple iPhone

2007: Microsoft Surface Computing

2008: N-trig Touch Screens

2010: Apple iPad

Multitouch Geschichte

http://www.billbuxton.com/multitouchOverview.html

iPhone / iPod / iPad

MS Surface

Dell Latitude XT2 / HP touchSmart

Windows 7

Multitouch Beispiele

Was ist zweihändige Interaktion?

Theoretische Grundlagen von Buxton & Myers (1986)

und Guiard (1987)

Aktuelle Arbeiten im Bereich HCI von Zhai, Kabbash,

Hinckley, Balakrishnan, etc.

Idee:

Gleichzeitige Nutzung beider Hände

zum Lösen einer Aufgabe

Arten:

Asymmetrisch

Symmetrisch

Zweihändige Interaktion

Hände führen unterschiedliche Teilaufgaben aus

(asymmetrisch)

Unterscheidung in dominante und nicht-dominante

Hand

Nicht-dominante Hand

Führt die dominante Hand

Definiert das Bezugssystem

Bearbeitet “größere” / grobere Aufgaben

Dominante Hand

Folgt der nicht-dominanten Hand

Arbeitet innerhalb des von der Nicht-dominanten

Hand definierten Bezugssystems

Bearbeitet “kleinere” / detaillierte Aufgaben

Asymmetrische zweihändige Interaktion

(Guiard)

Asymmetrisches Beispiel:

Ein weiteres klassisches Beispiel für eine Aufgabe

die an die nicht-dominanten Hand deligiert werden

kann ist “Scrolling”

Task Eigenschaften

“Scrolling” •Wird vor oder parallel zu anderen Tasks ausgeführt,

•Legt das Bezugssystem fest,

•Kann unpräzise sein.

Auswahl,

Bearbeiten,

Zeichnen,

etc.

•Wird nach oder parallel zum “Scrollen” ausgeführt,

•Ausführung innerhalb des Bezugssystems,

•Erfordert präzises Arbeiten.

Scrolling

Auswahl/Bearbeiten

Spezielle Tasten für

“cut, copy & paste”

sowie “Scrollen” auf der

linken Seite der Tastatur.

Xerox Star, circa 1981

Microsoft Office Keyboard

Hände führen identische Teilaufgaben aus

(symmetrisch)

Beispiele:

Größenänderung eines Rechtecks

Zoom in/out

Symmetrische zweihändige Interaktion

2006: Jeff Han NYU2005: Tactiva 2007: ThinSight, MS Research

kapazitive Oberflächen (kondensatorgesteuerte)

Mit Metalloxid beschichtetes Glassubstrat

An Ecken angelegte Spannung erzeugt ein

gleichmäßiges elektrisches Feld

Bei Berührung erfolgt ein Ladungstransport der an

den Rändern gemessen wird und in direktem

Verhältnis zur Position der Berührung steht

Anwendungsbeispiele:

iPhone / iPod Touch / iPad, Prada (LG), HTC-G1

Tablet PC (N-trig)

Touch Techniken

Resistive (widerstandgesteuerte) Systeme

Zwei Schichten mit konstanter Spannung durch

Abstandshalter voneinander getrennt

Bei Berührung mit dem Finger/Stift entsteht ein

elektrischer Kontakt -> Änderung des Widerstandes

Unterschiedliche Spannung an jeder Stelle ->

Bestimmung der x und y Position des Kontaktes

möglich

Anwendungsbeispiele:

Tablet-, Industrie-PCs

Home-Entertainment (z.B. Nintendo DS)

PDAs, Smartphones

Touch Techniken contd.

SAW (Surface Acoustic Wave) – „(schall)wellen-

gesteuerte Systeme“

Bei Berührung werden Ultraschallwellen auf der

Oberfläche absorbiert.

Aus der Änderung der empfangenen Schallwellen

kann die Position bestimmt werden

Touch Techniken contd.

Optische Systeme (Infrarot)

In der Regel Infrarotlicht-Gitter vor dem Monitor

(2 Seiten mit IR-LEDs, 2 Seiten mit Fotosensoren)

Bei Berührung wird ein Schatten im Bild der

gegenüberliegenden Kamera erzeugt.

Durch Triangulation kann die Position der Berührung

berechnet werden.

Anwendungsbeispiele:

Bankterminals

HP-150

Touch Techniken contd.

Touchscreen des HP-150

Computer Vision

Von den Fingerkuppen reflektiertes Infrarotlicht wird von

einer Kamera hinter der Displayfläche aufgenommen

Mittels Blobtracking (Bildverarbeitung) wird die Position

der Berührung berechnet

Anwendungsbeispiele:

Jeff Han

MS Surface

Community Multitouch Tables

Touch Techniken contd.

Genereller Aufbau

Multitouch Table

1. Infrarotkamera

2. Tracking +

3. Visualisierungs PC

4. Projektor

5. Spiegel

6. Touchoberfläche

Aufgenommenes (Infrarot) Bild

Bildverarbeitung (Blobtracking)

Applikation

Berühren der Touchoberfläche

Projektion

Eingabe- sowie Ausgabemedium

Durch Berühren der Fläche wird Infrarotlicht in

Richtung der Kamera gelenkt

Das Bild wird von unten auf die Touchfläche

projeziert

Verschiedene Techniken für Berührungserkennung

FTIR

DI

LLP

DSI

Touchfläche

FTIR (Frustrated Total Internal Reflection )

Multitouch Table - Techniken

• “unterbrochene” Totalreflexion, das in der Acrylscheibe

totalreflektierte IR-Licht wird am Berührungspunkt zur

Kamera gebrochen

nuigroup.com

FTIR

Vorteile:

• Es wird keine geschlossene Box benötigt

• “Blobs” haben einen starken Kontrast

• Erlaubt das Erkennen von Druckunterschieden

Nachteile:

• Benötigt eine besondere Beschichtung

• Nutzung von Markern ist nicht möglich

• Glasoberfläche nicht möglich

DI (Diffused Illumination)

Multitouch Table - Techniken

• Die Touchfläche wird von hinten mit IR-Licht angestrahlt.

Bei Berührung der Diffusorschicht wird IR-Licht zur Kamera

reflektiert.

nuigroup.com

DI

Vorteile:

• Keine spezielle Beschichtung nötig

• beliebiges transparentes Material als Oberfläche (auch Glas)

• Einfaches Setup (kein LED Rahmen benötigt)

• Marker können verwendet werden

Nachteile:

• “Blobs” haben niedrigeren Kontrast

• Geschlossene Box wird benötigt

• Gleichmäßige Ausleuchtung schwer zu erreichen

LLP (Laser Light Plane)

Multitouch Table - Techniken

Über der Touchfläche wird mit IR Lasern eine Ebene aus IR

Licht erzeugt. Bei Berührung wird diese unterbrochen und

das IR Licht zur Kamera gelenkt.

nuigroup.com

LLP

Vorteile:

• Keine spezielle Beschichtung nötig

• beliebiges transparentes Material als Oberfläche (auch Glas)

• Einfachstes Setup

• Geschlossene Box nicht benötigt

Nachteile:

• Marker nicht möglich

• Verdeckung kann auftreten

DSI (Diffused Surface Illumination)

Multitouch Table - Techniken

Durch spezielle Mikropartikel im Plexiglas (Endlighten)

erfolgt eine gleichmäßige Verteilung und Abstrahlung des IR

Lichts.

nuigroup.com

DSI

Vorteile:

• Einfacher Wechsel zwischen DI (DSI) und FTIR

• Marker verwendbar

• Drucksensitiv

• Gleichmäßige Finger- / Objektbeleuchtung auf der ganzen Fläche

Nachteile:

• Endlighten wesentlich teurer als normales Acrylglas / Plexiglas

• “Blobs” haben niedrigen Kontrast

Eine Infrarotkamera nimmt das reflektierte Licht auf

Zur Erkennung der Berührungspunkte werden

Algorithmen der Bildverarbeitung benutzt

Subtraktion des Hintergrundes

Glättung

Filterung

etc.

Das resultierende S/W Bild beinhaltet nur noch die

Berührungspunkte (Blobs)

Verfügbare OpenSource Bibliotheken

Touchlib, tbeta, ccv (www.nuigroup.org)

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

BBTouch (http://benbritten.com/blog/bbtouch-

quick-start/)

Blobtracking (CCV)

Community Core Vision (http://ccv.nuigroup.com)

Die Position der Berührungen wird an die

Applikation gesendet

Anhand der gesendeten Informationen wie Position

und ID der Berührungen können daraus Gesten

erkannt werden.

Mit Gesten können Programme gesteuert oder

spezielle Aktionen ausgeführt werden.

Beispiele für Gesten

Manche Techniken unterstützen die Verwendung

von Markern. Damit können beliebige Objekte zur

Steuerung der Applikation verwendet werden.

Beispiele für Marker

Applikation

Auswahl/Aktivierung

“Mausklick (links)”

Gesten (Beispiele)

Menüaufruf

“Mausklick (rechts)”

http://www.kickerstudio.com/blog/2008/12/touchscreen-stencils/

Verschieben (z.B. Hintergrund) / Markieren (z.B.

Text) / Scrollen

Gesten (Beispiele)

Objekt verschieben (z.B. Bild)

Mausbutton gedrückt halten

Verkleinern bzw. Vergößern

Mausrad

Gesten (Beispiele)

Es sind weitere Gesten denkbar, z.B. “anstupsen”

oder “wegschnippen” von Objekte.

Diese sind aber stehts abhängig von der

Applikation.

Gesten (Beispiele)

Die Verwendung von Markern erlaubt es damit

gekennzeichnete Objekte zur Interaktion mit

einem Multitouch Tisch zu benutzen.

Die ist nur mit einigen Techniken möglich (DI, DSI)

Anhand des Markers kann das Objekt (eindeutiges

Muster) und dessen Orientierung auf der

Oberfläche bestimmt werden.

Marker

reactiVision

Circular markers (DFKI)

Zur Darstellung der Applikationsoberfläche in der

Berührunsebene kommen zwei Techniken zum

Einsatz.

Projektion

Das Bild wird mittels eines Projektors auf eine

Diffusorfläche projeziert.

Dazu wird eine gewisse Entfernung benötigt,

welche durch die Verwendung von Spiegeln

“verkürzt” wird.

LCD Panel

Das LCD Panel eines handelsüblichen Displays

wird als zusätzliche Schicht unter der

Touchfläche angebracht

Die höhe des Tisches wird somit nur noch von

der benötigten Kameraentfernung bestimmt

Projektionsfläche

Natural User Interfaces Group

www.nuigroup.com

ReactiVision

http://reactivision.sourceforge.net/

History of Multitouch

http://www.billbuxton.com/multitouchOverview.html

Blog Multi-Touch Forschung

http://www.touchusability.com/

Links

Stift als natürliches Eingabemedium in

verschiedene Domänen (Design, Medizin, …).

Möglichkeiten der Eingabe:

Handschrift,

Zeichnungen,

Gesten.

Stiftbasierte Interaktion

Multi-Touch Tisch mit Stiftunterstützung

Touch&Write Projekt

Link: http://www.touchandwrite.de/

Schichten

Anoto Pattern und Stift

Handschriftliche Daten:

MNIST – Datenbank für Ziffern (offline)

28 x 28 Bitmap

Beispiel: Eingescannte Formulare

IAM On-Line Handwriting Database (online)

Schriftzug als Sequenz von Stiftkoordinaten

Beispiel: Tablet-PC, Anoto Pen

Handschrifterkennung

Formalismen

Sample:

Stroke:

Sequence:

Handschrifterkennung Verarbeitungsschritte

Pre-Processing

Feature Extraktion

Klassifikation

Post-Processing

Handschrift

Features <0.44, 23.5, …, 1>

Alternativen [(„a“, 0.75), („0“, 0.25)]

Text „a“

Aufbereitete Daten

Skew correction:

Slant correction:

Pre-Processing

Equidistant resampling – Online Daten sind zeitlich

konstant und werden räumlich normalisiert.

Pre-Processing

Online Features:

Geschwindigkeit / Beschleunigung

Normalisierte (x, y) Koordinaten

Differenz (∆ x, ∆ y) zwischen Samples

Feature Extraktion

Feature Extraktion

Features:

• length

• area

• angle

Feature Extraktion

Features:

• curvature

• circular variance

• closure

• number of strokes

k-Nearest Neighbor

Klassifikation

Verwenden von Kontextinformation und

Sprachmodellen.

Kollokation bezeichnet man in der Linguistik das

gehäufte benachbarte Auftreten von Wörtern, wie

auch immer gemeinsames Auftreten zunächst

begründbar sein mag (z.B.: alarm clock).

Syntaktische Analyse zeigt die Strukturierung der

Sätze und die Satzarten auf.

Post-Processing

a.SCatch – Visuelle Suche von Grundrissen in

Datenbank

Stiftbasierte Applikation für Raumplanung

Applikationen

VideoTouch – Multi-User Video Annotation

RoDes – Raumdesigner

Applikationen