Beispiel - AG Stricker University of Kaiserslautern

Zweihändige Interaktion,
Multi-Touch und
Stift-basierte Anwendungen
Intelligente Mensch-Maschine-Interaktion - IMMI
SS 2011
Markus Weber
Prof. Didier Stricker
[email protected]
Multitouch
Was ist “Multitouch”
„Multitouch“ ist ein System zur Mensch-MaschineInteraktion. 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 Geschichte
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:
2007:
2007:
2008:
2010:
Jeff Han (NYU)
Apple iPhone
Microsoft Surface Computing
N-trig Touch Screens
Apple iPad
http://www.billbuxton.com/multitouchOverview.html
Multitouch Beispiele
iPhone / iPod / iPad
MS Surface
Dell Latitude XT2 / HP touchSmart
Windows 7
Zweihändige Interaktion
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
Asymmetrische zweihändige Interaktion
(Guiard)
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
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
Symmetrische zweihändige Interaktion
Hände führen identische Teilaufgaben aus
(symmetrisch)
Beispiele:
Größenänderung eines Rechtecks
Zoom in/out
2005: Tactiva
2006: Jeff Han NYU
2007: ThinSight, MS Research
Touch Techniken
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 contd.
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)wellengesteuerte 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
Touchscreen des HP-150
Touch Techniken contd.
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
Multitouch Table
Genereller Aufbau
1.
2.
3.
4.
5.
6.
Infrarotkamera
Tracking +
Visualisierungs PC
Projektor
Spiegel
Touchoberfläche
Berühren der Touchoberfläche
Aufgenommenes (Infrarot) Bild
Bildverarbeitung (Blobtracking)
Applikation
Projektion
Touchfläche
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
Multitouch Table - Techniken
FTIR (Frustrated Total Internal Reflection )
nuigroup.com
• “unterbrochene” Totalreflexion, das in der Acrylscheibe
totalreflektierte IR-Licht wird am Berührungspunkt zur
Kamera gebrochen
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
Multitouch Table - Techniken
DI (Diffused Illumination)
nuigroup.com
• Die Touchfläche wird von hinten mit IR-Licht angestrahlt.
Bei Berührung der Diffusorschicht wird IR-Licht zur Kamera
reflektiert.
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
Multitouch Table - Techniken
LLP (Laser Light Plane)
nuigroup.com
Ü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.
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
Multitouch Table - Techniken
DSI (Diffused Surface Illumination)
nuigroup.com
Durch spezielle Mikropartikel im Plexiglas (Endlighten)
erfolgt eine gleichmäßige Verteilung und Abstrahlung des IR
Lichts.
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/bbtouchquick-start/)
Blobtracking (CCV)
Community Core Vision (http://ccv.nuigroup.com)
Applikation
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
Gesten (Beispiele)
Auswahl/Aktivierung
“Mausklick (links)”
Menüaufruf
“Mausklick (rechts)”
http://www.kickerstudio.com/blog/2008/12/touchscreen-stencils/
Gesten (Beispiele)
Verschieben (z.B. Hintergrund) / Markieren (z.B.
Text) / Scrollen
Objekt verschieben (z.B. Bild)
Mausbutton gedrückt halten
Gesten (Beispiele)
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.
Marker
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.
reactiVision
Circular markers (DFKI)
Projektionsfläche
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
Links
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/
Stiftbasierte Interaktion
Stift als natürliches Eingabemedium in
verschiedene Domänen (Design, Medizin, …).
Möglichkeiten der Eingabe:
Handschrift,
Zeichnungen,
Gesten.
Touch&Write Projekt
Multi-Touch Tisch mit Stiftunterstützung
Link: http://www.touchandwrite.de/
Schichten
Anoto Pattern und Stift
Handschrifterkennung
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
Formalismen
Sample:
Stroke:
Sequence:
Handschrifterkennung Verarbeitungsschritte
Handschrift
Pre-Processing
Aufbereitete Daten
Feature Extraktion
Features
<0.44, 23.5, …, 1>
Klassifikation
Alternativen
[(„a“, 0.75), („0“, 0.25)]
Post-Processing
Text
„a“
Pre-Processing
Skew correction:
Slant correction:
Pre-Processing
Equidistant resampling – Online Daten sind zeitlich
konstant und werden räumlich normalisiert.
Feature Extraktion
Online Features:
Geschwindigkeit / Beschleunigung
Normalisierte (x, y) Koordinaten
Differenz (∆ x, ∆ y) zwischen Samples
Feature Extraktion
Features:
• length
• area
• angle
Feature Extraktion
Features:
• curvature
• circular variance
• closure
• number of strokes
Klassifikation
k-Nearest Neighbor
Post-Processing
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.
Applikationen
a.SCatch – Visuelle Suche von Grundrissen in
Datenbank
Stiftbasierte Applikation für Raumplanung
Applikationen
VideoTouch – Multi-User Video Annotation
RoDes – Raumdesigner