So oder so hoffe ich, mich wie schon im vergangenen Jahr weiter viel mit der Entwicklung von geräteübergreifenden Anwendungen in der Praxis beschäftigen zu können – ganz egal ob es sich um Haushaltsgeräte, Smartphones, Spielekonsolen, Tablets oder was auch ummer handelt. Mein persönlicher Vorsatz für das neue Jahr ist deshalb auch wieder, neue Technologien zu lernen und bekannte weiter zu vertiefen. Kurzfristig habe ich mir vorgenommen, mehr mit .Net Gadgeteer zu machen, um noch besser zu verstehen, wie einfach man eigene Hardware-Prototypen umsetzen kann. Außerdem werde ich mich weiter in Unity3D einarbeiten, da ich diese Plattform für vielversprechend halte und ich eh mit JavaScript und C# zwei der wesentlichen Programmiersprachen dafür in Petto habe. Apropos JavaScript: Meine bereits ausgearbeiteten Trainingsinhalte zu ECMAScript würde ich gerne auf den neusten Stand bringen – noch bin ich aber nicht sicher, ob ich das im Zusammenhang mit Windows 8 oder doch eher hinsichtlich HTML oder einer anderen Welt (wie dem oben erwähnten Unity3D) machen sollte…

Wer sich schon immer mit dem Internet der Dinge und Pervasive Computing beschäftigen wollte, Interesse an Next Generation Media in Hard- und Software hat und sich für die interdisziplinäre Kombination von Design und Development begeistert, sollte diese Chance nutzen. Und wer sich darüber hinaus mit dem Gedanken beschäftigt, diese Themen zu studieren, dem stehe ich als Dozent der FH Pforzheim Rede und Antwort. Denn das Sommersemester ist nicht mehr lange hin…

Sydney ist eine großartige Stadt die selbst im Winter (im Juli ist dort halt Winter mit nur 15 bis 20 Grad) viel zu bieten hat. Die Stadt ist eine eindrucksvolle Metropole mit vielen abwechslungsreichen Stadtteilen und Vororten, traumhaften Stränden und atemberaubenden Nationalparks. Selbst in der Innenstadt sieht man exotische Pflanzen und Tiere wie bunte Papageien – tödliche Spinnen und Schlangen sind mir glücklicherweise erspart geblieben und laut meiner Bekannten vor Ort auch deutlich weniger Gefährlich als zum Beispiel Autofahren.

Innerhalb der Woche habe ich mich um geschäftliches Bemüht und habe dabei die australische Art sehr genossen – ich bin selbst ein wenig überrascht. Das liegt vermutlich daran, dass mir auf der einen Seite ein wenig mehr Gelassenheit durchaus gut tut und dass es auf der anderen Seite durchaus ein Vorteil ist, mit den (sorry, jetzt wird es abgedroschen) deutschen Tugenden zu glänzen. Außerdem hat mir das hohe Maß an Eigenverantwortung der Entwickler und Designer gefallen. Und es stimmt nicht, dass die Australier nur nebenbei arbeiten gehen würden und sonst surfen: Die Arbeitszeiten unterscheiden sich nicht von den deutschen Gepflogenheiten und es gibt sogar weniger Urlaubstage.

Die Menschen in Sydney sind sehr angenehm und freundlich – vielleicht ein wenig unverbindlich aber mir kamen sie niemals oberflächlich vor (aber was kann man da schon nach drei Wochen sagen). Außerdem sprechen die Eingeborenen ein sehr eigenes australisches Englisch und haben einen ausgeprägten Nationalstolz. In der kurzen Zeit habe ich schon erste Freunde gefunden und viele schöne Abende mit den Einheimischen erlebt.

Die typischen Sehenswürdigkeiten habe ich mir natürlich auch angeschaut. Kurz: Das ist einfach der Wahnsinn, was dort geboten wird. Aber leider ist das alles auch ganz schön teuer zumal der aktuelle Umrechnungskurs da zusätzlich übel mitspielt. Ein Zoobesuch mit Snack und Cappuccino kostet schnell umgerechnet 50 Euro. Aber wer sich mit dem Gedanken plagt dorthin auszuwandern, der sei beruhigt: Die Gehälter entsprechen den höheren Lebenshaltungskosten. Wer jedoch Kinder hat, der sei gewarnt: Ohne dauerhafte Aufenthaltsgenehmigung kommen für die Schule schnell fünfstellige Summen zusammen…

Es dauerte nicht lange, bis das Forum zu dem größten Nachschlagewerk der deutschsprachigen Flash-Szene wurde. Auch dank zahlreicher herausragender Helfer und ehrenamtlichen Moderatoren. Aber das Forum war der Community nicht genug und so gibt es seit 2001 zusätzlich regelmäßige Treffen und Konferenzen.

Trotz oder gerade wegen des großen Erfolges ist nach fast 13 Jahren die Zeit gekommen loszulassen. Und ich bin sehr froh, dass mit Marc jemand das Forum übernimmt, der über die vielen Jahre nicht nur immer mehr Verantwortung übernahm, sondern in letzter Zeit auch maßgeblich die Richtung des Forums beeinflusste. Ich wünsche Marc auch als Freund viel Erfolg damit.

Für mich geht es nun auf die Suche nach neuen Herausforderungen. Die gewonnene Zeit möchte ich nutzen, um spannende Projekte umzusetzen und meine Erfahrungen in Trainings und an Hochschulen zu vermitteln. Dem Forum bleibe ich natürlich erhalten, denn mein Kind lasse ich ganz bestimmt nicht aus den Augen – auch wenn ich es in guten Händen weiß.

Das zügige Tempo wird bis zum Ende durchgehalten. So gut wie alle wichtigen Themen werden behandelt, darunter MVVM (Model-View-ViewModel), Erstellung von LoB-Anwendungen (Line of Business), Multitouch sowie MEF (Managed Extensibility Framework). Am meisten hat mich bei dem Buch aber begeistert, dass trotz der eher technischen Ausrichtung auch endlich mal die Vorteile von Expression Blend eindrucksvoll erklärt werden. Allein deshalb ist das Buch ein Muss für jeden Entwickler, der Silverlight nicht nur erlernen, sondern das nötige Wissen für realistische Anwendungen vermittelt bekommen möchte.

„Silverlight 4 Unleashed“
Autor: Laurent Bugnion
Preis: ca. Euro 40,-
ISBN: 0672333368
Erscheinungsdatum: Sams Publishing, 21. Oktober 2010
Link: http://www.amazon.de/exec/obidos/ASIN/0672333368/wolter-21

Das ergänzende Vorgängerbuch ist bei Amazon für ca. 45,- Euro erhältlich.

Es sind – neben den eh laufenden Projekten, Trainings und Beratungsterminen – außerdem einige spannende größere Projekte im Gespräch. Überraschenderweise nicht so sehr als Experte für Silverlight oder Flash/Flex, sondern es kommen vermehrt übergreifende Anfragen, die auch Kompetenz im Bereich Interaction Design, User Experience und Prototyping fordern; das freut mich, da ich mich dafür sehr begeistere. Ganz abgesehen davon, dass dieses Wissen mir schon in vielen Projekten geholfen hat und ich in unregelmäßigen Abständen immer wieder Lehraufträge rund um diese Themen halte. Damit aber nicht genug: Auch die Anfragen für plattformübergreifende Technologien hinsichtlich Desktop und mobiler Plattformen nehmen zu. Das alles passt gut zu meinen beiden technischen Jahreszielen: Denn jedes Jahr nehme ich mir vor, mindestens eine Technologie zu vertiefen und ein neues Gimmick in meiner Freizeit auszuprobieren. Dieses Jahr steht auf der Technologieseite das Paket aus JavaScript, HTML/HTML5 und jQuery bzw. jQuery Mobile. Bei den Gimmicks habe ich leider schon meinen Spaß gehabt und Anfang Januar meine Xbox Kinect Experimente durchgespielt (da muss ich mir dann noch was Neues für den Rest des Jahres überlegen). Bei meinem dritten Jahresziel bin ich noch ein wenig ratlos: Denn bisher ist es mir jedes Jahr gelungen, ein Projekt an einem eher „ungewöhnlichen“ Ort auf der Welt zu machen. Das hätte fast noch im Januar geklappt! Das Projekt in Sydney ist aber dann leider aus organisatorischen Gründen gescheitert. Aber das Jahr ist lang und mal sehen, was nun an Projekten und Reisen letztendlich noch kommt…

Es gibt viele Elektronik- oder Robotorbaukästen mit denen ähnliches erreicht werden kann, etwa Lego Mindstorms (http://mindstorms.lego.com/). Die einfache Steuerung eines Lego Roboters gelingt dank der Nxt#-Bibliothek des Niederländers Bram Fokke, die er unter http://nxtsharp.fokke.net inklusive Quellcode zum Download anbietet. Diese Bibliothek kommuniziert direkt per Bluetooth mit dem Roboter. Per WCF (Windows Communication Foundation) kann dann mit Hilfe dieser Bibliothek ein Dienst zum Senden von Nachrichten an den Roboter angeboten 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
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.ServiceModel;
using System.ServiceModel.Activation;
using Bram.NxtSharp;
 
namespace SilverNXT.Web
{
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class MindstormsService
    {
 
        // Statisch, da es nur einen Robotor für alle gibt
        static private NxtBrick brick;
        static private NxtTankDrive tankDrive;
 
        public MindstormsService()
        {
 
            if (brick == null)
            {
                // Erzeuge Stellvertreter des NXT-Steins, der im Roboter verbaut ist
                brick = new NxtBrick();
 
                // Wichtig: Setze den Namen der Kommunikationsschnittstelle
                brick.COMPortName = "Com11";
 
                // Konfiguriere NXT-Stein mit Motoren und ggf. Sensoren
                NxtMotor motorB = new NxtMotor();
                NxtMotor motorC = new NxtMotor();
                motorB.Brick = brick;
                brick.AttachMotor(NxtMotorPort.PortB, motorB);
                motorC.Brick = brick;
                brick.AttachMotor(NxtMotorPort.PortC, motorC);
 
                // Erzeuge Hilfsobjekt zur Steuerung des Robotors ähnlich einem Panzer
                tankDrive = new NxtTankDrive();
                tankDrive.Brick = brick;
                tankDrive.Motor1 = motorB;
                tankDrive.Motor2 = motorC;
 
                // Stelle Verbindung mit dem NXT-Stein des Robotors her
                brick.Connect();
 
            }
 
        }
 
        [OperationContract]
        public void Run(SByte power, ushort distance, SByte turnRation)
        {
            tankDrive.Move(power, distance);
        }
 
        [OperationContract]
        public void Coast()
        {
            tankDrive.Coast();
        }
    }
}

Für die Nutzung in Silverlight sollte dieser Dienst im Silverlight Projekt als Service Reference hinzugefügt werden. Visual Studio erzeugt den notwendigen Code automatisch, so dass der Dienst mit den folgenden Zeilen konsumiert werden kann.

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

using System;
using System.Windows;
using System.Windows.Controls;
using SilverNXT.MindstormsServiceReference;
 
namespace SilverNXT
{
    public partial class MainPage : UserControl
    {
        MindstormsServiceClient client = new MindstormsServiceClient();
 
        public MainPage()
        {
            InitializeComponent();
        }
 
        private void runButton_Click(object sender, RoutedEventArgs e)
        {
            client.RunCompleted += new EventHandler<system.componentmodel.asynccompletedeventargs>(client_AsyncCompleted);
            client.RunAsync(50, 0, 100);
        }
 
        private void coastButton_Click(object sender, RoutedEventArgs e)
        {
            client.CoastCompleted += new EventHandler<system.componentmodel.asynccompletedeventargs>(client_AsyncCompleted);
            client.CoastAsync();
        }
 
        void client_AsyncCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)
        {
            // nothing
        }
    }
}

Bierzapfen am Computer“Wii Draught Masters” für Stella Artois.

Verschiedene Quellen datieren den Joystick auf ca. 1940. Dort wird dieser erstmalig im Zusammenhang mit der Raketensteuerung erwähnt. Der Joystick sowie dessen Nachfolger wie Gamepad und die Wii Remote lassen sich ebenfalls für Benutzerinteraktionen verwenden. Dabei erfreuen sich gerade die Eingabegeräte der seit 2006 vertriebenen Wii großer Beliebtheit: Darunter seit ca. 2008 das Balance Board und seit ca. 2009 das Guitar Hero Schlagzeug. Und da diese per Bluetooth arbeiten, ist die Kombination mit anderen Technologien durchaus möglich. Die größte Herausforderung ist, dass nicht jede Bluetooth-Umgebung harmoniert; Gute Erfahrungen haben wir übrigens mit den Bluetooth-Treiber von BlueSoleil (http://www.bluesoleil.com/) gemacht.

Ähnlich wie schon bei dem Lego Mindstorms Robotor gibt es auch hier eine Bibliothek zur Nutzung in eigenen Projekten namens WiiMoteLib (http://wiimotelib.codeplex.com/) in .NET basierten Projekten, etwa mit WPF.

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;
using System.Windows;
using WiimoteLib;
 
namespace WiiWPF
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
 
            Loaded += new RoutedEventHandler(MainWindow_Loaded);
        }
 
        void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            WiimoteCollection mWC = new WiimoteCollection();
 
            try
            {
                // Finde alle angeschlossenen Wii Remotes
                mWC.FindAllWiimotes();
                // Verbinde mit der ersten gefundenen Wii Remote
                Wiimote wm = mWC[0];
                wm.Connect();
                // Schalte die Vibration an der Wii Remote ein
                wm.SetRumble(false);
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message, &quot;Wiimote error&quot;, MessageBoxButton.OK);
            }
        }
    }
}

Kombiniert mit einem Socket-Server können so die Eingabegeräte der Wii Technologien wie Flash und Silverlight angeboten werden – genau das übernimmt im Falle von Flash das Projekt WiiFlash von Joa Ebert und Thibault Imbert (http://code.google.com/p/wiiflash/).

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