Einfache Maus-Interaktionen wie Drücken, Bewegen und Loslassen der Maus ergeben in Kombination nicht nur Benutzereingaben wie „Drag and Drop“ sondern können auch als Geste für das Durchschneiden eines Objektes am Bildschirm dienen. Für die Flash-Welt liefert der Düsseldorfer David Ochmann unter http://davidochmann.de/#/info?p=462 eine Bibliothek namens DoGestures für ActionScript 2 und 3, die das Verwenden von Mausgesten erleichtert.

Zur Nutzung von DoGesture in Flash muss dessen Klassenpfad erst einmal verfügbar gemacht werden. Dies geschieht über das Menü „Datei -> Einstellungen für das Veröffentlichen“, dann im Register Flash über die Einstellungen für ActionScript. Dort wird der Quellpfad hinzugefügt.

Als nächstes wird nur noch der folgende Code benötigt, um die Klassen per Import bekannt zu machen, die Geste zu erzeugen und auf deren Ereignis zu warten sowie eine passende Ereignisbehandlung durchzuführen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// Mache Klassen verfügbar
import de.davidochmann.utilities.dogesture.DoGesture;
import de.davidochmann.utilities.dogesture.events.GestureEvent;
 
// Erzeuge Geste (der ausführliche Weg)
var movedown:DoGesture = new DoGesture(stage);
 
// Lausche dem Ereignis, dass die Geste stattfand
movedown.addEventListener(GestureEvent.GESTURE_COMPLETE, movedownCompleteHandler);
// Wie lange darf das Ausführen der Geste dauern
movedown.setTimeout(1000); 
// Definiere die notwendigen Bewegungen für die Geste
movedown.add( 0, 50);
// Starte das Warten auf die Geste
movedown.start(); 
 
// Ereignismethode
function movedownCompleteHandler(e:GestureEvent):void
{
	// Was soll nun passieren...
	trace("Geste wurde durchgeführt!");
}

Microsoft Surface ist ein Tisch aus dem Jahre 2007. Er zeichnet sich durch eine berührungsempfindliche Oberfläche aus, der u. a. per Mulit-Touch und durch mehrere Nutzer gleichzeitig bedient werden kann.

Der Maus droht seit ihrer Erfindung 1 963 durch Douglas C. Engelbart und William English Konkurrenz durch die Eingabe mit dem Finger oder anderen Körperteilen. Im Falle von Single-Touch, dient der eine Finger in der Tat auch meist eher als Mausersatz und das sogar mit ganz massiven Nachteilen: Der Finger verdeckt die Informationen am Bildschirm und führt bei der Arbeit an senkrechten Flächen zu schnell ermüdenden Armen – ähnlich wie bei der Arbeit an einer Schultafel führt.

Sobald mehrere Berührungspunkte möglich sind, lassen sich neue intuitive Gesten jenseits der Mausbedienung formulieren. Bekannt sind das Drehen und Skalieren von Inhalten mit zwei Fingern.

Silverlight bietet bereits seit Version 3 Multi-Touch. Dabei beschränkt sich Silverlight abhängig von der Abspielplattform auf die einzelnen Berührungspunkte. Gesten müssen selber erkannt und verarbeitet werden. Ein Beispiel inkl. Quellcode findet sich unter http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=4b281bde-9b01-4890-b3d4-b3b45ca2c2e4.

Für eine einfache Touch-Anwednung in Silverlight benötigen wir ein beliebiges sichtbares Objekt, dass in diesem Beispiel mit monster benannt ist. Alles Weitere geschieht dann in der Code-Behind-Datei. Als erstes wird dort ein Transofrmations-Objekt für die Verschiebung des Monsters angelegt und das Ereignis für Berührungen angemeldet (Touch.FrameReported). In der Ereignismethode wird ab nun bei jedem Touch-Ereignis das Monster genau zu der Position der Berührung bewegt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
 
namespace SilverTouch
{
    public partial class MainPage : UserControl
    {
 
        public MainPage()
        {
            // Required to initialize variables
            InitializeComponent();
 
            Loaded += new System.Windows.RoutedEventHandler(MainPage_Loaded);
        }
 
        private void MainPage_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {
            // Erzeuge Transformationsobjekt für Verschiebung
            CompositeTransform transform = new CompositeTransform();
            monster.RenderTransform = transform;
 
            // Lausche auf Touch-Ereignis
            Touch.FrameReported += new System.Windows.Input.TouchFrameEventHandler(Touch_FrameReported);
        }
 
        private void Touch_FrameReported(object sender, System.Windows.Input.TouchFrameEventArgs e)
        {
            // Ermittle Tranformationsobjekt 
            CompositeTransform transform = monster.RenderTransform as CompositeTransform;
            // Ermittle primären Berührungspunkt
            TouchPoint tp = e.GetPrimaryTouchPoint(monster);
            // Verschiebe Objekt zum Berührungspunkt
            transform.TranslateX += tp.Position.X - (monster.ActualWidth / 2);
            transform.TranslateY += tp.Position.Y - (monster.ActualHeight / 2);
        }
    }
}

Auf dem Windows Phone Series 7 nutzt Silverlight für die Oberflächenelemente Manipulationsereignisse (u. a. ManipulationDelta). Diese teilen mit, inwiefern Skaliert oder Verschoben wurde. Um das Ereignis zu erhalten, kann in Expression Blend 4 oder Visual Studio 2010 bei einem Windows Phone Projekt ein Oberflächenelement mit einem Manipulationsereignis versehen werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<phoneNavigation:PhoneApplicationPage 
    x:Class="SilverPhone.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}">
 
    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 
        <!--TitleGrid is the name of the application and page title-->
        <Grid x:Name="TitleGrid" Grid.Row="0">
            <TextBlock x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"><Run Text="MY "/><Run Text="TOUCH "/><Run Text="APPLICATION"/></TextBlock>
            <TextBlock Text="touch me" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/>
        </Grid>
 
        <Grid x:Name="ContentGrid" Grid.Row="1">
            <Image x:Name="monster" ManipulationDelta="Main_ManipulationDelta" Source="Assets/monster.png" HorizontalAlignment="Center" VerticalAlignment="Center" Width="240" Height="342"/>
        </Grid>
 
    </Grid>
 
</phoneNavigation:PhoneApplicationPage>

In der zugehörigen Code-Behind-Datei muss dann zum einen ein Tranformationsobjekt für eine Skalierung oder Verschiebung angelegt und in der Ereignismethode für das Manipulationsereignis eine Transformation durchgeführt werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

using System.Windows.Input;
using System.Windows.Media;
using Microsoft.Phone.Controls;
 
namespace SilverPhone
{
    public partial class MainPage : PhoneApplicationPage
    {
 
        public MainPage()
        {
            // Required to initialize variables
            InitializeComponent();
 
            Loaded += new System.Windows.RoutedEventHandler(MainPage_Loaded);
        }
 
        private void MainPage_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {
            // Erzeuge Transformationsobjekt für Verschiebung
            CompositeTransform transform = new CompositeTransform();
            monster.RenderTransform = transform;
        }
 
        // Ereignismethode
        private void Main_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {
            // Ermittle Tranformationsobjekt 
            CompositeTransform transform = monster.RenderTransform as CompositeTransform;
 
            // Verschiebe Objekt bzgl. der durchgeführten Manipulation
            transform.TranslateX += e.DeltaManipulation.Translation.X;
            transform.TranslateY += e.DeltaManipulation.Translation.Y;
        }
    }
}

Für Flash griff man bisher auf Zusatzprogramme zurück, die die notwendigen Daten – meist per TUIO (http://www.tuio.org/) – direkt an Flash übermittelten. Mit Flash Player 10.1 und AIR 2 hält Multi-Touch nun aber auch Einzug in die Flash-Welt. Abhängig von der Abspielplattform verstehen Flash und AIR einzelne Berührungspunkte und Gesten (gerade unter Mac OS ist das noch recht eingeschränkt, siehe auch http://www.adobe.com/devnet/flash/articles/multitouch_gestures.html).

1
2
3
4
5
6

if (!Multitouch.supportsGestureEvents) {
	Alert.show("Gesten werden nicht unterstützt", "Hinweis");
} else {
	// Stelle sicher, Gesten zu nutzen
	Multitouch.inputMode = MultitouchInputMode.GESTURE;
}

Je nach Plattform werden unterschiedliche Gesten unterstützt (Multitouch.supportedGestures). Diese müssten sonst selbst aus den Berührungspunkten ermittelt werden.

Mit dem Flex 4 SDK und AIR 2 kann jedes interaktive Oberflächenelement Gesten nutzen. In den zugehörigen Ereignismethoden werden dann abschließend die Werte der Gesten verwendet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
			 xmlns:s="library://ns.adobe.com/flex/spark" 
			 xmlns:mx="library://ns.adobe.com/flex/mx"
			 creationComplete="windowedapplication_creationCompleteHandler(event)">
 
	<fx:Script>
		<![CDATA[
 
			import mx.controls.Alert;
			import mx.events.FlexEvent;
 
			protected function windowedapplication_creationCompleteHandler(event:FlexEvent):void
			{
				if (!Multitouch.supportsGestureEvents) {
					Alert.show("Gesten werden nicht unterstützt!", "Hinweis");
				} else {
					// Stelle sicher, Gesten zu nutzen
					Multitouch.inputMode = MultitouchInputMode.GESTURE;
				}
			}
 
			protected function image_gestureZoomHandler(event:TransformGestureEvent):void
			{
				// Skaliere Objekt
				(event.currentTarget as InteractiveObject).scaleX *= event.scaleX;
				(event.currentTarget as InteractiveObject).scaleY *= event.scaleY;
			}
 
			protected function image_gesturePanHandler(event:TransformGestureEvent):void
			{
				// Verschiebe Objekt
				(event.currentTarget as InteractiveObject).x += event.offsetX;
				(event.currentTarget as InteractiveObject).y += event.offsetY;
			}
 
			protected function image_gestureRotateHandler(event:TransformGestureEvent):void
			{
				// Drehe Objekt
				(event.currentTarget as InteractiveObject).rotation += event.rotation;
			}
 
		]]>
	</fx:Script>
 
	<mx:Image x="20" y="20" source="assets/monster.png" 
			  gesturePan="image_gesturePanHandler(event)"
			  gestureZoom="image_gestureZoomHandler(event)"
			  gestureRotate="image_gestureRotateHandler(event)"
			  />
 
</s:WindowedApplication>

Silverlight bietet seit Version 2 mit dem InkPresenter eine weitere Eingabemöglichkeit: Diesmal mit dem Stift. Der InkPresenter zeichnet die einzelnen Punkte der Stift- oder Mausbewegung auf. Sofern verfügbar sogar drucksensitiv.

In Expression Blend (oder auch mit Visual Studio) fügen Sie das Steuerlement InkPresenter ein und geben diesem einen Hintergrund (Background) hinzu, da andernfalls keine Eingaben erkannt werden. Klar, dass natürlich auch die Größen- und Positionsangaben passen müssen – in diesem Beispiel sind keine expliziten Angaben vorgenommen worden, da auf diese Weise die komplette Fläche ausgefüllt wird. Für die eigentliche Aufzeichnung der Stifteingabe nutzen wir das Drücken der linken Maustaste (MouseLeftButtonDown), das Bewegen der Maus (MouseMove) und die Nachricht, wenn der Bezug zur Maus wieder verloren wird (LostMouseCapture). Die zugehörigen Ereignismethoden landen in der zugehörigen Code-Behind-Datei:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace SilverPen
{
	public partial class MainPage : UserControl
	{
 
		private Stroke currentStroke;
 
		public MainPage()
		{
			// Required to initialize variables
			InitializeComponent();			
		}
 
		private void inkPresenter_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
		{
            // Starte mit der Aufzeichnung
			inkPresenter.CaptureMouse();
            // Merke die Punkte
			StylusPointCollection stylusPointCollection = new StylusPointCollection();
            // Füge die ersten Punkte hinzu
            stylusPointCollection.Add(e.StylusDevice.GetStylusPoints(inkPresenter));
            // Erstelle aus den Punkten einen Strich
			currentStroke = new Stroke(stylusPointCollection);
            // Zeichne den Strich (dieser wird später weiter aktualisiert)
			inkPresenter.Strokes.Add(currentStroke);
		}
 
		private void inkPresenter_LostMouseCapture(object sender, System.Windows.Input.MouseEventArgs e)
		{
            // Beende die Aufzeichnung
			currentStroke = null;
			inkPresenter.ReleaseMouseCapture();
		}
 
		private void inkPresenter_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
		{
			// Füge dem aktuellen Strich neue Punkte hinzu
    		if (currentStroke != null) {
        		currentStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkPresenter));
			}
		}
 
	}
}

Natürlich könnte das Aussehen des gezeichneten Striches (Stroke) über dessen Attribute variiert und zum Beispiel mit dem Druck des Stiftes kombiniert werden:

1

currentStroke.DrawingAttributes.Height = e.StylusDevice.GetStylusPoints(inkPresenter)[0].PressureFactor * 100;

Wenn man das wie im Beispiel unter http://msdn.microsoft.com/en-us/magazine/cc721604.aspx#id0090072 weitertreibt, dann ist sogar eine Handschriftenerkennung im Browser möglich.

Ein eindrucksvolles Beispiel für die Verarbeitung von Videodaten ist Eywriter (http://www.eyewriter.org). Hier war es das Ziel, zu möglichst geringen Kosten ein Eyetracking-System zu schaffen, dass es gelähmten Personen erlaubt, einen Computer mit den Augen zu Bedienen und so beispielsweise Texte zu verfassen oder Bilder zu malen.

Sowohl Flash als auch Silverlight erlauben die Nutzung einer Videokamera. Das gestaltet sich dabei sehr ähnlich zu dem Einsatz eines Mikrofons. Im Falle von Flash erhält man sogar wie beim Sound einen Wert zur Aktivität. Dieser beschreibt hier aber nicht die Lautstärke sondern die Veränderungen im Bild. Sprich: Je mehr man sich vor der Kamera bewegt, desto höher ist der Wert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var cam:Camera;
var video:Video;
// Ermittle die Standardkamera
cam=Camera.getCamera();
// Erzwinge die Verarbeitung durch den Flash Player
video = new Video();
video.attachCamera(cam);
// Überprüfe bei jedem "Redraw" des Bildschirms...
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
 
// ...die Aktivität vor der Kamera...
function enterFrameHandler(event:Event):void {
	trace(cam.activityLevel);
	// ...und zeichne eine Linie abhängig vom Wert!
	graphics.lineStyle(0);
	graphics.lineTo(500-x,500-cam.activityLevel*4);
	x--;
}

Natürlich kann man noch einen Schritt weitergehen und die Bildinformationen auswerten. Ähnlich wie bei Sonys EyeToy (http://www.eyetoy.com/) aus dem Jahr 2003 lässt sich so ermitteln, welche Gesten jemand vor der Kamera durchführt. Am einfachsten geht dies, indem die Anwendung auf spezielle Farbwerte – beispielsweise dem Farbton der Hand – reagiert.

Einen Schritt weiter geht Microsoft bei dem Project Natal, indem dort auch Tiefenmessung per Infrarot zum Einsatz kommen soll (http://www.xbox.com/en-US/live/projectnatal/). Project Natal befindet sich aktuell noch in der Entwicklung und soll zu Weihnachten 2010 verfügbar sein. Speziell für dieses Projekt hat Microsoft übrigens Johnny Chung Lee eingestellt, der durch seine Experimente mit der Wii bekannt geworden ist (http://johnnylee.net/projects/wii/), darunter ein preiswert umsetzbares Finger- und Headtracking sowie ein Multi-Touch Whiteboard.

Eine einfachere Art der Bilderkennung kommt häufig bei Augmented Reality zum Einsatz (http://saqoosha.net/en/flartoolkit/start-up-guide/ ). Hier wird ein in der Regel aus rechteckigen Blöcken aufgebautes Symbol in die Kamera gehalten und dessen Lage im Raum dient dann zur Steuerung eines Gegenstandes im Computer. Diese Form der erweiterten Realität basiert ursprünglich auf dem ARToolKit von Hirokazu Kato aus dem Jahre 1999 (http://sourceforge.net/projects/artoolkit/). Die Portierung für ActionScript 3 nennt sich FLARToolKit (http://www.libspark.org/wiki/saqoosha/FLARToolKit/en), die für Silverlight SLARToolkit (http://slartoolkit.codeplex.com/).

Für das Lesen eines Barcodes gibt es ebenfalls bereits fertige Bibliotheken wie die von Bernd Engelbrecht unter http://www.codeproject.com/KB/graphics/BarcodeImaging3.aspx. Für einen eigenen Barcode-Scanner ist eine Schaltfläche zum Start der Videoaufzeichnung notwendig.

1
2
3
4
5
6
7
8
9

<UserControl x:Class="SilverScanner.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
 
    <Grid x:Name="LayoutRoot" >
        <Button Content="Scan" Name="scanCapturingBtn" HorizontalAlignment="Left" VerticalAlignment="Top" Click="scanCapturingBtn_Click" />
    </Grid>
 
</UserControl>

Die Vorschau des Videobildes wird in der Code-Behind-Datei per CaptureSource erledigt und im Hintegrund dargestellt. Diese CaptureSource dient ebenfalls für das Ermitteln des Barcodes mit Hilfe der Klassen BarcodeImaging und BarcodeCapture aus dem Beispielprojekt für Silverlight unter http://www.silverlight.net/community/samples/silverlight-4/barcode-scanner/.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
 
namespace SilverScanner
{
    public partial class MainPage : UserControl
    {
 
        CaptureSource captureSource;
        BarcodeCapture barcodeCapture;
 
        public MainPage()
        {
            InitializeComponent();
        }
 
        protected void activateCamera()
        {
            if (captureSource == null)
            {
                // Zeige Vorschau des Videobildes
                captureSource = new CaptureSource();
                captureSource.VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();
                VideoBrush previewBrush = new VideoBrush();
                previewBrush.Stretch = Stretch.Uniform;
                previewBrush.SetSource(captureSource);
                LayoutRoot.Background = previewBrush;
                // Wähle möglichst gutes Videoformat für bessere Scan-Ergebnisse
                VideoFormat desiredFormat = new VideoFormat(PixelFormatType.Format32bppArgb, 640, 480, 12);
                captureSource.VideoCaptureDevice.DesiredFormat = desiredFormat;
                if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())
                {
                    captureSource.Start();
                }
 
            }
        }
 
        private void scanCapturingBtn_Click(object sender, RoutedEventArgs e)
        {
            activateCamera();
 
            if (barcodeCapture == null)
            {
                // Starte das Erkennen des Barcodes
                barcodeCapture = new BarcodeCapture();
                barcodeCapture.BarcodeDetected += new EventHandler<barcodeeventargs>(onBarcodeDetected);
                barcodeCapture.CaptureSource = captureSource;
            }
        }
 
        private void onBarcodeDetected(object sender, BarcodeEventArgs e)
        {
            // Zeige gefundenen Barcode
            System.Diagnostics.Debug.WriteLine(e.Barcode);
        }
 
    }
}

Der möglichst natürlichen Nutzung von Benutzungsschnittstellen (Natural User Interfaces) wird dank Apple und Microsoft wieder verstärkte Aufmerksamkeit geschenkt. Dabei sind viele der Ideen alles andere als neu: Ein Multi-Touch-Display ist beispielsweise bereits 1982 durch Nimish Mehta an der Universität Toronto entwickelt worden, auch wenn es erst im Februar 2006 durch Jefferson Han auf der TED-Konferenz populär gemacht wurde.

Auch wird oft vergessen, dass das Benutzererlebnis und die Ergonomie nicht nur von der Natürlichkeit sondern auch vom Kontext abhängen. Das iPhone beispielsweise versagt im Winter, da es sich nicht mit Handschuhen bedienen lässt. Desshalb nutzen Koreaner ein Würstchen zur Eingabe, wie der südkoreanische Nachrichtendienst inews24.com meldet.

Eine weitere Herausforderung: Anwendungen müssen heutzutage oft auf unterschiedlichen und uneinheitlichen Geräten laufen. Teilweise stehen Interaktionsformen bereits zur Verfügung, etwa Multi-Touch. Aber wenn die Abspielumgebung das einmal nicht hergibt, dann muss eben nachgeholfen werden. Dank zahlreicher Schnittstellen zur Außenwelt ist das mit modernen Technologien kein größeres Problem.

Fast jede Form der Mensch-Maschine-Interaktion ist, genügend Kreativität vorausgesetzt, umsetzbar. Plattformen wie AIR, Flash und Silverlight erlauben viele Interaktionsformen bereits nativ. Und sollten dann doch einmal Beschränkungen existieren, kommt entweder eine Technologie mit Hardwarezugriff wie z. B. WPF zum Einsatz oder es wird eben mit einem Hilfsprogramm beispielsweise über eine Socket-Verbindung kommuniziert. Aber gehen tut es schlussendlich so gut wie immer. Ob es dann auch sinnvoll ist, das ist eine andere Frage…

Demnächst möchte ich hier Beispiele für ungewöhnliche Interaktionsformen oder für gewöhnliche Interaktionsformen in ungewöhnlichen Szenarien anhand kleiner Code-Snippets vorstellen. Dazu zählen Themen wie:

• Tastatureingabe
• Kommandozeile
• Spracheingabe
• Bildverarbeitung
• Gesten
• Interoperabilität (Lego Mindstorms und Wii Remote)

Im Rahmen meines Vortrags “Next Generation User Interfaces How-To” sind bereits Beispiele entstanden, die es hier für Flash und hier für Silverlight als ZIP zum Download gibt. Über weitere Anregungen für neue Beispiele freue ich mich sehr, nur her damit!

Leider habe ich gleich eine schlechte Nachricht für alle Gestalter nachzuschieben: Drucksensitivität funktioniert zwar, wird aber nicht von den aktuellen Adobe Produkten unterstützt. Adobe implementiert bisher nur eine Schnittstelle namens WinTab, die zwar von Wacom aber nicht von N-Trig versorgt wird. N-Trig wiederum unterstützt die von Microsoft angebotene Schnittstelle, die auch in Office und einer Vielzahl anderer Produkte genutzt wird.

Wenn man den Diskussionen im Web folgt, scheint hier der Schwarze Peter nun hin und her gereicht zu werden, ob nun Adobe die Standardschnittstelle von Microsoft oder N-Trig den quasi Standard WinTab nachliefern sollte. Gut für Wacom, deren Multi-Touch Geräte ja noch nicht auf dem Markt verfügbar sind: Dennn sollten diese dann wie gewohnt WinTab unterstützen, wäre das sicher ein Kaufanreiz für Gestalter – natürlich nur, wenn umgekehrt andere Produkte dann nicht ignoriert werden. Übrigens scheint Druckempfindlichkeit bei N-Trig ohnehin nur im Stiftmodus und nicht bei der Fingereingabe zu gehen.

Es gibt eine Reihe von Bauanleitungen für Geräte, die meist ähnlich der Lösung des wohl bekanntesten Multi-Touch Experten Jeff Han funktionieren.

Doch selbst bauen ist nicht jedermanns Sache: Dem einen fehlt einfach die Zeit, dem anderen geht das Geschick dafür ab. Und viele Entwickler und Gestalter wollen sich letztendlich auf die Erstellung neuer Anwendungen konzentrieren und weniger mit Lötkolben jonglieren. Es gibt zwar auch Anbieter, die fertige Lösungen in den verschiedensten Formen anbieten, doch diese sind durch die Bank recht teuer und außerdem auf Grund von Größe und Gewicht eher schwierig zu transportieren. Und einfach transportabel soll es für die Demonstration bei Konferenzen und Kunden schon sei – mal ganz davon abgesehen, dass die meisten Tüftler über eher beengte Raumverhältnisse im Homeoffice verfügen.

Eine andere Einschränkung ist der Mangel an Treibern für Betriebssysteme wie Windows 7. Und alternative Kommunikationswege wie beispielsweise TUIO werden auch nicht immer geboten. Deshalb profitieren normale Anwendungen oder Technologien wie Flash und Silverlight nicht oder nur mit zusätzlichem Aufwand davon:

Wer dagegen nur Single-Touch benötigt, der findet eine große Anzahl an Geräten zu erschwinglichen Preisen auf dem Markt.

Die recht neue Gattung der Küchen-Rechner – auch „All-in-One-PC“ genannt – von Dell namens Dell Studio One und der auf NextWindow Optical Touch basierende HP namens TouchSmart Desktop-PC kommen nicht in Frage, da beide maximal zwei Finger (Dual-Touch) gleichzeitig verarbeiten (siehe auch http://www.touch-base.com/documentation/Documents/nextwindow_multitouch.pdf).

Auf Seiten der Laptops mit Multi-Touch erscheinen bisher ebenfalls nur Dell und HP als Anbieter auf dem Markt. Der Dell Latitude XT, dessen Nachfolger XT2 und der HP TouchSmart TX2 basieren auf der DuoSense Technologie von N-Trig, die sowohl die Arbeit mit einem Stift als auch die Eingabe von Gesten mit mehreren Finger erlaubt. Das neue Dell-Gerät hat schon einen stolzen Preis und bietet dafür eine recht schwache Performance. Der HP-Tablett-PC unterscheidet sich davon in erster Linie dadurch, dass er – auch dank spiegelndem Display und fleißigem Lüfter – offensichtlich eher auf Consumer zugeschnitten und deutlich günstiger ist. Für Entwickler- und Vorführzwecke sind beide somit nur eingeschränkt geeignet. Es gibt zwar noch weitere Anbieter, die Multi-Touch versprechen, doch bezieht sich das meist auf das verbaute Trackpad und nicht den Bildschirm.

Eigentlich würde es ja auch ein Display mit Mulit-Touch tun. Das wäre einigermaßen transportable und die Hardware und deren Performance dann frei wählbar. Die Versuche, entsprechende Entwicklergeräte bei 3M oder N-Trig zu bestellen, sind leider gescheitert. 3M schien nicht in der Lage, nach Deutschland zu liefern. N-Trig hat auf Anfragen gar nicht erst geantwortet.

Ach ja, es geht natürlich auch nur per Webcam, wie Microsoft recht Eindrucksvoll im Project Natal zeigt – auch wenn böse Zungen behaupten, dass das an Logitechs EyeToy für die PlayStation 2 erinnere. Und mit „Touch“ hat es mangels Berührung eines Gerätes eigentlich auch nichts zu tun, was sich laut Jeff Han als Nachteil erweist. Grant Skinner hat eine einfache Objekterkennungen mit Flash und WebCam bereits 2005 präsentiert, den Quellcode bisher aber offensichtlich nicht veröffentlicht. Eine als Open Source verfügbare Variante der Kamera basierten „Objektverfolgung“ in C# nennt sich Touchless – als Hardware braucht man auch hier nur eine einfache Kamera. Noch integriert sich Touchless aber nicht in das Betriebssystem und wird als SDK geliefert, so dass einiges Programmiergeschick in C# praktisch wäre. Schon länger bekannt sind die Wiimote Projekte von Johnny Chung Lee, die sich die Wii Controller (Wii Remote) und deren Infrarotverarbeitung zunutze machen.

Wer sich in das Thema Multi-Touch einarbeiten möchte, findet beispielsweise unter den folgenden Adressen einen Einstieg: