Tag Archives: Multi-Touch

Next Generation User Interfaces How-To: Bildverarbeitung

image 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--;
}

image 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.

image 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);
        }
 
    }
}

Next Generation User Interfaces How-To

Kommandozeile und grafische Benutzeroberflächen waren gestern: Jetzt geht es um möglichst natürliche Schnittstellen. Egal ob für den Desktop oder das Web, beinahe jede Art der Kommunikation zwischen Nutzer und System ist denkbar. Interaktionsformen auf der Basis von AIR, Flash und Silverlight reichen von der normalen Tastatureingabe bis hin zur Lego Mindstorms Sensorik.

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:

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!

Multi-Touch Kurztest: Dell Latitude XT2

Gestern kam mein neues Gadget in Form einens Dell Latitude XT2 bei mir an. Dieser Convertible (also Tablet PC, den man so klappen kann, dass die Tastatur verschwindet) ist sehr chick und die Verarbeitung gut – für den durchaus stolzen Preis kann man das auch erwarten. Einzig das Display ist eher bescheiden: Das liegt zum einen daran, dass ich die stromsparende Variante mit LED-Hintergrundbeleuchtung gewählt habe (das besser ausgeleuchtete Display hat laut Dell Röhren für die Beleuchtung, die zum einen verschleißen und zum anderen einfach mehr Strom verbrauchen und dann auch noch den Display-Deckel dicker machen sollen). Zum anderen liegt das aber auch an der DuoSense-Oberfläche, die für Mutli-Touch und Stiftbedienung notwendig ist. Die Struktur dieser berührungsempfindlichen Oberfläche ist leider auch je nach Lichteinfall zu sehen, bei normalen Lichtverhältnissen aber nicht störend. Sowohl unter Vista als auch unter Windows 7 funktioniert die Bedienung mit Stift und Fingern gut, ist aber nicht so intuitiv wie z. B. beim iPhone. Klar, denn das iPhone ist ja ausschließlich darauf ausgelegt, bei Windows ist das ja eher eine zusätzliche Option. Somit nutze ich Stift und Finger bisher eher beim Lesen von Dokumenten und bei Präsentationen. Bei der normalen Arbeit verwende ich das Gerät eher wie einen normalen Laptop mit Maus. Als nächstes werde ich nun verschiedene Technologien wie WPF und Silverlight probieren, um Multi-Touch taugliche Anwendungen zu erstellen uund über die Ergebnisse hier berichten…

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.