Author: Sebastian Jung

Unterstützt das Institut für Softwaretechnologie in Forschung und Lehre durch Performance-Evaluation und Dokumentation verschiedener Natural User Interfaces und Entwicklungsframeworks.

Windows 8 im Überblick

[toc]Der vorliegende Artikel stellt Windows 8, insbesondere die Neuerungen im Touch-Bereich vor. Windows 8 ist der Nachfolger von Windows 7 und wird derzeit von Microsoft entwickelt. Besonderes Merkmal des neuen Betriebssystems ist die Fokussierung auf eine Bedienung mit Touchscreens. Dazu wurde eigens die neue Oberfläche „Metro“ gestaltet. Weiterhin wurde auch die Technologie für das Ansprechen von Touchscreens optimiert und viele weitere Verbesserungen eingeführt. Im Folgenden werden die wichtigsten Neuerungen vorgestellt.

Demo

Das folgende Video demonstriert sehr gut die Neuerungen von Windows 8 und gibt einen guten Einblick in die Bedienbarkeit:

http://www.youtube.com/watch?v=p92QfWOw88I&feature=player_embedded

Metro-Oberfläche

Die Metro-Oberfläche wurde für Windows 8 neu entwickelt und soll eine komfortable Bedienung per Touchscreen ermöglichen. Sie ist an die von Windows Phone bekannte Oberfläche angelehnt. Alle Menüs sind über Gesten aufrufbar, Programme können über sogenannte Kacheln („Tiles“) gestartet werden. Zu der neuen Oberfläche gehören auch erneuerte Anmelde- und Sperrbildschirme. Viele Menüs, wie beispielsweise die Anzeige für WLAN-Netzwerke, wurden an das neue Design angepasst. Besonders auffällig ist die „Lebendigkeit“ der Oberfläche, erzeugt durch die vielfältigen Animationen. So aktualisieren beispielsweise die Kacheln für Wetter, Nachrichten und Börse in regelmäßigen Abständen ihre Inhalte. Auch die Interaktion mit den Schaltflächen ist ansprechend animiert. Die Oberfläche ist vornehmlich auf die Touch-Bedienung ausgelegt, kann aber auch per Maus gesteuert werden. Hierzu werden zusätzliche Schaltflächen eingeblendet. Microsoft legt großen Wert darauf, dass Programme, die für die Metro-Oberfläche gestaltet werden, bestimmten Richtlinien erfüllen. Hierzu sind viele Tutorials verfügbar.

Ein weiteres Merkmal von Metro ist , dass keine Taskleiste mehr existiert. Multitasking ist natürlich dennoch möglich, denn Applikationen werden nicht mehr geschlossen, sondern laufen im Hintergrund weiter. Per Geste kann zwischen den geöffneten Applikationen gewechselt werden. Diese Funktionalität ist jedoch noch nicht ausgereift, da der Nutzer normalerweise nicht genau weiß, in welcher Reihenfolge sich die Applikationen im Hintergrund befinden. Gleichzeitig ist es möglich, den Bildschirm beliebig aufzuteilen, um mehrere Anwendungen gleichzeitig im Vordergrund zu haben. Der klassische Desktop ist wie alle anderen Anwendungen nur noch eine Kachel, also quasi eine Applikation von Windows. In Metro wurde auf das Startmenü verzichtet und einige Menüs neu gestaltet. Windows 7 Nutzer finden sich hier dennoch schnell zurecht. [ref]Quelle: http://www.istartedsomething.com/20110914/an-analysis-of-metro-on-windows-8-developer-preview/.[/ref]

[singlepic id=1134 w=618 float=none]

Windows Store Konzept

Ähnlich zum Mac App Store von Apple soll Windows eine einheitlichen Plattform für die elektronische Software-Distribution erhalten. Über diese zentrale Applikationen können Metro-Programme für den PC gesucht, installiert und auf dem aktuellen Stand gehalten werden. Es wird mehrere Kategorien geben, die jeweils beliebtesten Programme werden an präsenter Stelle angezeigt. Nutzer können Programme mit dem bekannten 5-Sterne-Prinzip bewerten. Für Entwickler ist der Windows Store eine wichtige Vertriebs- und Marketingplattform, wobei Microsoft große Flexibilität bei den unterstützten Geschäftsmodellen verspricht. So können sowohl Testversionen und verschiedene Sprachpakete als auch andere „Einkaufsmöglichkeiten“ innerhalb einer Applikation angeboten werden. Der Entwickler kann festlegen, unter welchen rechtlichen Bedingungen das Programm genutzt werden darf. Ähnlich wie bei Apple, will auch Microsoft die Applikationen vor der Veröffentlichung überprüfen. Dazu stellt Microsoft Akzeptanzrichtlinien und das „App Certification Kit“ zur Verfügung. [ref]Quelle: http://www.golem.de/1112/88245.html.[/ref]

[singlepic id=1151 w=618 float=none]

Cloud-Sync mit SkyDrive

SkyDrive ist ein Dienst von Microsoft Windows Live, der es ermöglicht, Dateien online zu speichern. Er ist integraler Bestandteil von Windows 8 und als virtuelle Festplatte erreichbar. Die Synchronisation erfolgt automatisch, die virtuelle Festplatte kann zum Beispiel mit dem Windows Explorer wie gewohnt genutzt werden. Der Zugriff kann zusätzlich auch über einen Browser oder diverse Apps, wie beispielsweise für Windows Phone, erfolgen. Somit hat der Nutzer seine Daten, wie Fotos und Dokumente auch auf Fremdrechnern immer verfügbar und kann diese auch anderen Nutzern freigeben. Die Dateien können wahlweise auch direkt online bearbeitet werden (zum Beispiel mit Office ab Version 2010). Weitere Funktionen werden über die Verknüpfung zu anderen Diensten, wie E-Mail, Adressbuch, Kalender und Messenger, realisiert. [ref]Quelle: http://www.golem.de/news/windows-8-skydrive-im-dateiexplorer-und-in-metro-1202-89907.html.[/ref]

Verbesserung der Touch-Interaktion

Wie bereits erwähnt, fokussiert das neue Betriebssystem von Microsoft stärker als seine Vorgänger auf Touch-Bedienung. Hierzu wurden eine Vielzahl kleinerer Verbesserungen durchgeführt. So verspricht Microsoft in einem Blog-Beitrag flüssige und leichtgängige Bedienung sowie eine ausgereifte Touch-Visualisierung. Auch die Korrektur von Fehleingaben wurde wesentlich verbessert. Dafür müssen Geräte, welche für Windows 8 zertifiziert werden, allerdings mindestens fünf Finger gleichzeitig verarbeiten können. Windows 8 selbst kann bis zu zehn Finger separat verarbeiten. Im übrigen wird bei Windows 8 strikt zwischen dem Touch-Modus und dem Maus-Modus unterschieden, wobei hieraus eine jeweils leicht andere Bedienung resultiert.

[singlepic id=1262 w=618 float=none]

Wesentliche Verbesserungen werden im Folgenden vorgestellt.

„Design for Comfort“-Studie

Um mit Windows 8 ein herausragendes Touch-Erlebnis zu ermöglichen, hat Microsoft eine umfangreiche Studie mit einer frühen Version (BUILD 2011) des Betriebssystems durchgeführt. Der Grundgedanke dabei war, dass nicht jeder Nutzer den Touchscreen vollkommen gleich verwendet. Es wurde eine Versuchsgruppe mit unterschiedlichen repräsentativen Personen erstellt, bei der die Touchscreen-Nutzung in verschiedenen Umgebungen aufgezeichnet wurde. So konnte schon bei der Handhabung der Hardware herausgefunden werden, dass die Nutzer das Gerät sehr unterschiedlich halten und somit einen anderen „Komfortbereich“ haben. Dieser sog. Komfortbereich beschreibt die für die Finger gut erreichbaren Positionen auf den Bildschirm. Hieraus wurden drei Areale für eine günstige Nutzung festgelegt: Die Iconbar links und rechts sowie die aufsplittetete Tastatur am unteren Bildschirmrand. [ref]Quelle: http://www.istartedsomething.com/20110914/the-comfort-science-behind-windows-8/.[/ref]

Touch Target Locking

Die Korrektur von „Fehleingaben“ auf dem Touchscreen ist in Windows 8 wesentlich besser als in den Vorgängerversionen. Hierzu analysiert Windows einen bestimmten Bereich um die erkannte Fingerposition herum nach vorhandenen Touch-Elementen. So können Funktionen ausgeführt werden, ohne das der Benutzer den entsprechenden Punkt auf dem Touchscreen exakt treffen muss. Im unten gezeigten Beispiel möchte der Nutzer die Größe des Fensters ändern, tippt den Touchscreen aber einige Millimeter vom Fenster entfernt an. Windows 8 erkennt in dem angezeigten Oval das entsprechende Touch-Element und verbindet es mit der eigentlichen Fingerposition. [ref]Quelle: http://www.istartedsomething.com/20110915/windows-8-adds-touch-target-locking/.[/ref]

[singlepic id=1150 w=618 float=none]

Touch-Feedback

Die Visualisierung von Touch-Eingaben wurde unter Windows 8 erheblich verbessert. Alle erkannten Finger werden durch schwarze Punkte mit weißer Umrandung dargestellt. Diese Funktion kann zusätzlich erweitert werden, um auch Touch-Eingaben auf externen Monitoren sichtbar zu machen (siehe Systemsteuerung -> Pen und Touch -> Touch -> Visuelles Feedback auch an externen Monitoren) [ref]Quelle: http://www.istartedsomething.com/20110917/windows-8-tip-enabling-demo-like-touch-feedback/.[/ref].

[singlepic id=1178 w=618 float=none]

Internet Explorer 10

Der neue Internet Explorer 10 ist bei Windows 8 in zwei Versionen unterteilt. Zum einen gibt es die klassische Desktop-Version, welche über die bekannten Funktionen und Schaltflächen verfügt. Hinzu kommt eine neu gestaltete Metro-Version. Diese ist vor allem auf die Bedienung per Touch-Screen ausgerichtet und bietet eine entsprechend überarbeitete Bedienbarkeit. Doch vor allem in einem Aspekt unterscheiden sich die beiden Varianten: Die Metro-Version wird keine Plugins unterstützen. Somit wird auch kein Adobe Flash im Browser laufen, stattdessen setzt Microsoft vor allem auf HTML5 in Verbindung mit CSS3 und JavaScript. Dafür bietet der neue Internet Explorer einen erweiterten HTML5 Support, wie beispielsweise Drag&Drop, eine File-API, eine eigene Sandbox und eine integrierte Input-Validation. [ref]Quelle: http://t3n.de/news/windows-8-internet-explorer-10-viel-html5-metro-browser-330683/.[/ref]

[singlepic id=1179 w=618 float=none]

Windows Explorer mit Ribbon

Die bei Office 2007 neu eingeführte Menügliederung mit „Ribbons“[ref]Weitere Informationen zum Ribbon-Konzept von Office 2007 und neueren Versionen finden sich u.a. auf http://office.microsoft.com/de-de/support/erste-schritte-mit-microsoft-office-2007-FX010105508.aspx.[/ref] wird fester Bestandteil in allen Windows-Programmen. Auch der Explorer wird in Windows 8 über ein Ribbon-Userinterface verfügen. Diese Multifunktionsleiste verbindet die Elemente Menüsteuerung und Symbolleiste miteinander und gliedert zusammengehörige Funktionen in logische Einheiten. Kontextabhängig werden weitere Aufgaben und Informationen angezeigt, beispielsweise wenn ein Bild oder eine Festplatte im Explorerfenster markiert wurde. Darüber hinaus wurde eine überarbeite Dokumentenvorschau integriert. Um die Dateiverwaltung zu optimieren, wurden durch ein in Windows 7 integriertes Feedback-Programm[ref]Auch bekannt als Windows Customer Experience Improvement Program (CEIP); weitere Informationen finden sich u.a. in http://blogs.msdn.com/b/e7/archive/2008/09/10/the-windows-feedback-program.aspx.[/ref] die meist genutzten Funktionen ermittelt. Entsprechend der Auswertung der Studio können 85% aller Aktionen nun durch die primäre UI ausgeführt werden, ohne dass sie durch einen Rechtklick oder die Befehlsleiste eingeleitet werden müssen. [ref]Quelle: http://www.golem.de/1108/86061.html.[/ref]

[singlepic id=1180 w=618 float=none]

Near Field Communication Integration

NFC (zu deutsch etwa „Nahfeld-Kommunikation“) ist eine international standardisierte Technologie zur kabel- und kontaktlosen Datenübertragung über kurze Entfernungen. Sie wird neben dem reinen Datenaustausch beispielsweise auch zum bargeldlosen Bezahlen oder für eine Zugangskontrolle eingesetzt. Hauptsächlich kommt die Technik heute in Chip-Karten, wie zum Beispiel Kredit- oder Bahnkarten, vereinzelt aber auch schon in Mobiltelefonen[ref]Eine Liste aktueller Mobiltelefone mit NFC findet sich beispielsweise auf http://www.nfc-handy.eu/nfc-handys/liste-nfc-handys-uebersicht/.[/ref], zum Einsatz. Der größte Vorteil gegenüber Wifi oder Bluetooth ist, dass auch passive Geräte / Karten angesprochen werden können. Des Weiteren wird keine Konfiguration benötigt. Durch die physische Nähe der Geräte ist nur ein Tap notwendig, um zwei Geräte miteinander zu verbinden. Windows 8 wird eine API anbieten, welche es erlaubt, URLs aufzurufen, Applikationen zu starten, Links und Fotos zu teilen und Programme miteinander zu verbinden. [ref]Quelle: http://www.istartedsomething.com/20110917/nfc-windows-8s-hidden-connection-to-tags-and-devices/.[/ref]

Hyper-V: Die neue Virtualisierung für Windows 8

Unter Virtualisierung versteht man Methoden, die es erlauben, Ressourcen eines Computers für die Ausführung mehrerer Systeme zu nutzen. Micrsosfts Hyper-V Technologie wurde bisher nur für die Server-Varianten von Windows angeboten[ref]Entsprechende Anleitungen und Ressourcen stellt Microsoft u.a. auf http://technet.microsoft.com/de-de/library/cc753637(v=WS.10).aspx oder http://www.microsoft.com/de-de/server/hyper-v-server/default.aspx zur Verfügung.[/ref]. Nun findet das Programm auch Einzug in Windows 8 und kann bereits in der Developer Preview lediglich durch das Hinzufügen von Windows-Funktionen installiert werden. Hyper-V besteht im Wesentlichen aus zwei Bestandteilen: Eine Konsole, in der virtuelle Maschinen konfiguriert werden können und einer Verwaltungsmöglichkeit, um eine Verbindung zu einer (entfernten) Hyper-V-Maschine herzustellen. Theoretisch können so bis zu 384 virtuelle Betriebssysteme gestartet werden. Diese sind voneinander abgeschirmt und können nicht auf die Ressourcen des jeweils anderen Systems zugreifen. Unterstützt werden alle Windowssysteme sowie diverse Linux-Distributionen. Der Nutzer kann beispielsweise parallel mit Linux arbeiten oder eine Test-Instanz von Windows starten. [ref]Quelle: http://www.netzwelt.de/news/88465-hyper-v-neue-virtualisierung-windows-8.html.[/ref]

Multitouch-Entwicklung mit GestureWorks

[toc]Der vorliegende Artikel ist der zweite Bericht aus der Einführungs-Serie für Multitouch-Entwicklungsumgebungen und stellt die kommerzielle Software GestureWorks vor. Mit diesem Framework können Adobe Flash Applikationen mit Multitouch-Unterstützung erstellt werden, wobei eine breite Palette von Multitouch-Hardware unterstützt wird. Das Spektrum an unterstützten Gesten ist enorm, was sich u.a. auch in der von GestureWorks eingeführten Gesture Markup Language widerspiegelt. Im Folgenden wird eine kurze Einführung in die Plattform gegeben, einige vorgefertigte Beispiele gezeigt sowie ein kleine Anwendung selbst implementiert.

Einführung

  • Framework zur Erstellung von Multitouch-Anwendungen mit Adobe Flash
  • Unterstützung aller Adobe Flash-Komponenten
  • Verwendung der Adobe Flash Rendering Engine
  • Implementierung basiert auf Adobe ActionScript
  • Anbindung beliebiger Hardware mit Windows 7 oder dem TUIO-Protokoll
  • Über 100 verfügbare Gesten, assoziiert mit der Gesture Markup Language

Demo

Um vor der Vorstellung der technischen Details einen ersten Eindruck zu schaffen, demonstriert das folgende Beispielvideo die Funktionalität einer Applikation mit Flickr und Google Maps Integration:

Historie

Das Framework wird seit 2008 von dem US-Unternehmen Ideum Inc. entwickelt und steht derzeit in der Version 3.1 zur Verfügung. Es werden zwei Versionen vertrieben. Zum einen als Standard-Version für $149, welche auf fünf Gesten beschränkt ist und in jeder Anwendung ein Logo enthält, und die unbeschränkte Professional-Version für $349. Außerdem wird eine Demo-Version bereitgestellt, bei der jede Anwendung auf 30 Minuten Laufzeit eingeschränkt ist. Die Version 2 des Frameworks ist als über das Projekt Open Exhibits als Open-Source verfügbar.

Komponenten und Aufbau

Die nachfolgende Tabelle gibt einen Überblick über die technischen Eigenschaften sowie bereitgestellten Gesten und Komponenten des Frameworks:

Eigenschaft Ausprägung bei GestureWorks
Programmiersprache
  • Adobe Flash
  • Adobe Flex
Rendering
  • Adobe Flash Rendering Engine (Geräteabhängig)
Hardware-Anbindung
  • Unterstützt jede Hardware, auf der Windows 7 ausgeführt oder welche mit dem TUIO-Protokoll genutzt werden kann
Multitouch-Gesten
  • Über 100 vorhandene Gesten, assoziiert mit der GestureML, einer Markup-Sprache für Multitouch-Gesten
    • Drag
    • Rotate
    • Anchor Rotate
    • Scale
    • Anchor Scale
    • Tap
    • Anchor Tap
    • Double Tap
    • Anchor Double Tap
    • Triple Tap
    • Tap and Hold
    • Flick
    • Anchor Flick
    • Scroll
    • Split
    • Gesture Draw
  • Vorhandene Gesten können erweitert werden
Bereitgestellte Komponenten
  • Verwendung aller in Adobe Flash verfügbaren Komponenten möglich
  • Keine zusätzliche Bereitstellung von vorgefertigten Objekten
  • Unterstützung aller Formate, welche durch Adobe Flash verwendet werden können
    • Bilder und Grafiken
    • Audio
    • Video

Installation

Bevor die Installation starten kann, muss zunächst auf der Homepage eine Version gekauft werden. Alternativ steht auf der gleichen Seite auch eine Evaluationsversion zur Verfügung.

  1. Die Adobe Air Laufzeitumgebung herunterladen und installieren
  2. Die heruntergeladene Setup-Datei für GestureWorks ausführen
  3. Den Installationsschritten folgen
  4. Zum Ende der Installation die Lizenznummer eingeben und bestätigen
  5. Nach der Installation öffnet sich der Windows Explorer und zeigt den Installationsordner. In diesem sind die Programm-Bibliotheken enthalten, die benötigt werden, um Multitouch-fähige Anwendungen mit Adobe Flash zu kompilieren. Es ist keine ausführbare Anwendung enthalten!

[nggtags gallery=GestureWorks+Installation]

Einrichtung von Adobe Flash

Um Anwendungen auf Basis von Adobe Flash und GestureWorks entwickeln zu können, wird die Entwicklungsumgebung Adobe Flash Professional CS5+ benötigt. Im Folgenden wird erklärt, wie diese Anwendung eingerichtet werden muss, damit Applikationen mit GestureWorks erstellt werden können.

  1. Dieses vorbereitete Template herunterladen und entpacken. Es enthält die Ordnerstruktur, welche für jedes neue Projekt benötigt wird.
  2. Anlegen eines neuen Adobe AIR Projekts unter „Datei“ -> „Neu“ (Adobe AIR Projekt auswählen)
  3. Abspeichern des Projekts unter beliebigem Namen in dem Template-Ordner
  4. Neue Adobe ActionScript Klasse anlegen unter „Datei“ -> „Neu“ (ActionScript 3.0 auswählen)
  5. Die neue Klasse im „src“-Ordner abspeichern unter dem Name „Main“
  6. ActionScript Einstellungen festlegen unter „Datei“ -> „ActionScript Einstellungen
    1. Als Klassenname „Main“ angeben
    2. Neuen Quellpfad „.\src“ erstellen
    3. Bibliothekspfade hinzufügen. Alle GestureWorks-Projekte müssen mit den Bibliotheken „GestureWorksCML.swc“ und „GestureWorksGML.swc“ verknüpft werden. Diese Dateien befinden sich im „lib“-Ordner im Verzeichnis von GestureWorks und müssen mit dem Icon „SWC-Datei hinzufügen“ je als neue Bibliothek eingefügt und aus dem GestureWorks-Ordner (C:\Users\“Name“\GestureWorks3\lib) ausgewählt werden.
  7. Veröffentlichungseinstellungen festlegen unter „Datei“ -> „Einstellungen für Veröffentlichungen“
    1. Der Pfad für die Ausgabedatei (.swf) ist „.\bin\Main.swf“
  8. Nun kann der eigentliche Inhalt der Applikation implementiert werden. Dazu wird mit „Klassendefinition bearbeiten“ von „Main“ eine neue Klasse für ActionScript erstellt.

[nggtags gallery=GestureWorks+Flasheinrichtung]

Mitgelieferte Beispiele

Die Beispielanwendungen für GestureWorks sind nicht in der Installation enthalten, sondern als Tutorial und Download auf der Webseite verfügbar. Die Applikationen sind allesamt einfach gehalten und lassen sich mit der Anleitung auf der Webseite einfach nachvollziehen. Für die weitere Betrachtung werden die Applikationen in zwei Kategorien eingeteilt. Zum einen die Beispiele, welche die grundlegenden Touch-Gesten demonstrieren, und zum anderen erweiterte Anwendungen. Letztere haben einen größeren Funktionsumfang und geben einen Einblick in die reale Entwicklung.

Die derzeit auf der Homepage befindlichen Beispiele sind für die Version 2 von GestureWorks ausgelegt.

Grundlegende Beispiele

Diese Beispielanwendungen dienen vor allem zum Erlernen der grundlegenden Touchgesten. Es werden jeweils nur wenige Geste mit einfachen Objekt kombiniert, um die Funktionalität zu erlernen.

[nggtags gallery=GestureWorks+Beispielanwendung+basic]

Erweiterte Beispiele

Anwendungen in dieser Kategorie sind für fortgeschrittene Entwickler geeignet und zeigen wie man gewöhnliche Flash-Inhalte wie beispielsweise Karten oder 3D-Objekte mit Multitouch-Gesten versehen kann.

[nggtags gallery=GestureWorks+Beispielanwendung+advanced]

Minimalimplementierung

Eine Anwendung mit GestureWorks zu implementieren ist sehr einfach. Es werden nur zwei Dateien und etwas Quellcode (Adobe ActionScript 3) benötigt. Wie bei den anderen Beispielanwendungen für Multitouch-Frameworks dieser Seite soll die Beispielanwendung Bilder darstellen und mit entsprechenden Gesten (Drag, Scale, Rotate) manipulieren können. Für die Applikation wird zunächst ein neues Flash-Projekt benötigt. Dieses muss, wie bereits oben gezeigt, konfiguriert und mit dem GestureWorks-Framework verknüpft werden. Das Minimal-Beispiel steht ebenfalls als fertiger Download zur Verfügung.

Den eigentlichen Quellcode beinhaltet die „Main.as“-Datei. Diese besteht, wie bei objektorientierten Programmiersprachen üblich aus verschiedenen Bestandteilen. Zunächst werden die Grundfunktionen per Import-Anweisung eingebunden. Im Anschluss wird die Klasse von „Application“ abgeleitet und die benötigten Methoden implementiert. Die Methode „initialize“ enthält den Hauptbestandteil der Anwendung. Im Folgenden der vollständige Code für das Minimal Beispiel:

package{
import com.gestureworks.core.GestureWorks;
import com.gestureworks.core.TouchSprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;

public class Main extends GestureWorks{
	private var loader:Loader;
	private var myDisplay:TouchSprite;

	public function Main():void{
		super();
		key = "KEY HIER EINFUEGEN";
	}

	override protected function gestureworksInit():void{
		trace("GestureWorks has initialized");

		myDisplay = new TouchSprite();
		loader = new Loader();
		myDisplay.x = (stage.stageWidth) / 2;
		myDisplay.y = (stage.stageHeight) / 2;
		myDisplay.scaleX = 0.2;
		myDisplay.scaleY = 0.2;

		myDisplay.gestureTouchInertia = true;
		myDisplay.gestureReleaseInertia = true;
		myDisplay.clusterEvents = true;
		myDisplay.gestureEvents = true;
		myDisplay.transformEvents = true;
		myDisplay.disableNativeTransform = false;

		var gList:Object = new Object;
		gList["pivot"] = true;
		gList["n-drag"] = true;
		gList["n-rotate"] = true;
		gList["n-scale"] = true;
		myDisplay.gestureList = gList;

		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);
		loader.load(new URLRequest("library/assets/pic.jpg"));

		myDisplay.addChild(loader);
		addChild(myDisplay);
	}

	private function loaderComplete(event:Event):void{
		loader.x = 0 - (loader.width / 2);
		loader.y = 0 - (loader.height / 2);
	}
}}

Multitouch-Entwicklung mit MT4j

[toc]Dieser Artikel stellt den Auftakt einer Serie weiterer Berichte zu „ersten Schritten“ mit aktuell verfügbaren Multitouch-Entwicklungsumgebungen dar. Innerhalb dieser Serie liefert der vorliegene Bericht einen Überblick über die Entwicklung von Multitouch-Anwendungen mit Multitouch for Java (MT4j). Das Framework bietet umfangreiche Funktionalität für das Arbeiten mit Multitouch-Hardware und einfach adaptierbare Konzepte zur Entwicklung eigener Anwendungen. Im Folgenden wird nach einer kurzen Einführung die Einrichtung mit Eclipse erläutert, einige Beispielanwendungen vorgestellt sowie ein Minimal-Beispiel implementiert.

Einführung

  • Java-Framework zur Entwicklung von Multitouch-Anwendungen
  • Verwendung verschiedener Komponenten (Bilder, Videos, 3D-Objekte)
  • Anbindung unterschiedlicher Hardware und Protokolle
  • 10 vorhandene Multitouch-Gesten sowie Möglichkeit zur Erstellung von eigenen Gesten
  • Performante Darstellung durch OpenGL

Demo

Um vor der Vorstellung der technischen Details einen ersten Eindruck zu schaffen, demonstriert das folgende Beispielvideo die Funktionalität der mitgelieferten Kartenapplikation:

Historie

Das MT4j-Framework wird vom Fraunhofer-Institut für Arbeitswirtschaft und Organisation (IAO) entwickelt und basiert (wie der Name schon sagt) auf der weit verbreiteten objektorientierten Programmiersprache Java. Im Herbst 2009 wurde das Framework unter Open Source-Lizenz veröffentlicht und wird seitdem durch die OpenSource-Gemeinde weiterentwickelt. Die Multitouch-Plattform übernimmt alle benötigten Aufgaben, wie beispielsweise die Erkennung von Multitouch-Gesten, deren Umsetzung in Events sowie die erforderliche Grafikausgabe. Es bietet eine umfangreiche Bibliothek mit vorgefertigten Grafiken, Gesten und Schriften und ist sehr generisch implementiert, sodass eigene Gesten und Grafiken problemlos hinzugefügt werden können. Das Framework ist prinzipiell kompatibel zu allen Multitouch Geräten, da es die Inputs der Hardware abstrahiert.  Als Grundlage hierfür wird die Anbindung an verschiedene APIs (z.B. TUIO) bereitgestellt, welche die Eingaben des Touchscreens interpretieren. Die Darstellung erfolgt über die Grafikschnittstelle OpenGL, sodass die Anwendungen auf entsprechender Hardware sehr performant sind.

Komponenten und Aufbau

Die nachfolgende Tabelle gibt einen Überblick über die technischen Eigenschaften sowie bereitgestellten Gesten und Komponenten des Frameworks:

Eigenschaft Ausprägung bei MT4j
Programmiersprache
  • Java
Rendering
  • OpenGL
  • Software-Rendering
Hardware-Anbindung
  • Hardwareabstraktion und Input Abstraktion
  • Es können beliebige Eingabegeräte integriert werden
  • Native Unterstützung von Windows 7 Multitouch-Features
  • Unterstützung des TUIO-Protokolls
Multitouch-Gesten
  • Drag
  • Rotate
  • Scale
  • Tap
  • Double Tap
  • Tap and Hold
  • Arcball Rotate
  • Lasso Select
  • Flick
  • Gesture Draw
  • Eigene Gesten können definiert werden
Bereitgestellte Komponenten
  • Primitive Vektorgrafiken [ref]Vierecke, Ellipsen, Polygone, etc. .[/ref]
  • Schriften [ref]Standardschriftarten (True Type) und Vektor-basierte Schriftarten.[/ref]
  • Bilder [ref]Unterstützung gängiger Formate (.jpg, .png, .bmp).[/ref]
  • 3D-Objekte [ref].3ds und .obj Dateien mit Texturen.[/ref]
  • Videos [ref]Unterstützung gängiger Formate.[/ref]

Installation

Das MT4j Framework steht als quelloffener Download, derzeit in Version 0.95 zur Verfügung und ist bereits als ein Eclipse-Projekt strukturiert.

MT4j läuft derzeit nur mit der 32bit-Variante von Java. Soll ein 64bit System eingesetzt werden, muss trotzdem der 32bit JDK installiert werden. Unter Eclipse muss entsprechend die 32bit Variante von Java zum Ausführen der MT4j Anwendungen ausgewählt werden!

  1. Java Development Kit 32bit (gekennzeichnet als x86) herunterladen und installieren
  2. Die heruntergeladene ZIP-Datei entpacken (MT4j 0.95 full release)
  3. Im Paketexplorer von Eclipse mit Rechtsklick importieren wählen
  4. In dem Importfenster ein „bereits existierendes Projekt“ auswählen
  5. Den unter 2. entpackten Ordner auswählen und importieren

[nggtags gallery=MT4j+Installation]

Mitgelieferte Beispiele

Das MT4j-Paket enthält 19 einfache Beispielanwendungen. Diese sind unterteilt in die Pakete „basic“ und „advanced“ und sind im Ordner „examples“ zu finden. Die Basic Examples dienen zum Verstehen und Testen der grundlegenden Techniken in sehr einfach gehaltenen Applikationen. Die Advanced Examples demonstrieren die Leistungsfähigkeit des Frameworks, indem beispielsweise 3D Modelle verwendet werden. Jede Anwendung befindet sich in einem eigenen Paket. Es ist keine weitere Konfiguration erforderlich, da das Framework alle benötigte Komponenten automatisch sucht und auswählt. Zum Starten ist jeweils eine „Start…Example.java“ Datei hinterlegt, die als „Java Application“ in Eclipse ausgeführt werden kann. Nach dem Start öffnet sich ein neues Fenster innerhalb dessen die Multitouch-Interaktion möglich ist.

Basic-Anwendungen

[nggtags gallery=MT4j+Beispielanwendung+basic]

Advanced-Anwendungen

[nggtags gallery=MT4j+Beispielanwendung+advanced]

Minimalimplementierung

Eine Multitouch-Anwendung mit MT4j zu schreiben ist denkbar einfach, da sie nur zwei Klassen (Scene und MTApplication) benötigt. Die folgenden beiden Abschnitte geben einen Überblick über die Implementierung eine einfachen Applikation zur Bildmanipulation. Die Anwendung, die zum Selbsttest ebenfalls als Download verfügbar ist, ermöglicht es, ein Bild anzuzeigen und dieses mit Standard-Multitouch-Gesten zu manipulieren.

Scene

Eine „Scene als erste benötigte Bestandteil der Anwendung muss die abstrakte Klasse „AbstractScene“ erweitern. In dieser Klasse wird festgelegt, welche Komponenten angezeigt werden. Es gibt viele vorgefertigte Elemente, die insbesondere Standard-Multitouch-Gesten bereits beherrschen. Hierzu gehören beispielsweise Grafiken, Textfelder und Rahmen für verschiedene andere Objekte. Für unser Minimalbeispiel benötigen wir folgenden Code für die Scene-Klasse:

package MinimalExample;

import org.mt4j.MTApplication;
import org.mt4j.components.TransformSpace;
import org.mt4j.components.visibleComponents.widgets.MTImage;
import org.mt4j.input.gestureAction.InertiaDragAction;
import org.mt4j.input.inputProcessors.componentProcessors.dragProcessor.DragProcessor;
import org.mt4j.sceneManagement.AbstractScene;
import org.mt4j.util.math.Vector3D;

import processing.core.PImage;

public class PictureScene extends AbstractScene
{
  private String picturePath =  "MinimalExample" + MTApplication.separator + "data" + MTApplication.separator;

  public PictureScene (MTApplication mtApplication, String name)
  {
    super(mtApplication, name);

    MTApplication app = mtApplication;
    PImage img = app.loadImage(picturePath + "pic.jpg");
    MTImage image = new MTImage(img,app);
    image.setUseDirectGL(true);
    image.setPositionGlobal(new Vector3D(400,400,0));
    image.scale(0.2f, 0.2f, 0.2f, image.getCenterPointLocal(), TransformSpace.LOCAL);
    image.addGestureListener(DragProcessor.class, new InertiaDragAction());
    this.getCanvas().addChild(image);
  }

  @Override
  public void init() {}

  @Override
  public void shutDown() {}
}

Datei ist zu beachten, dass sich das entsprechende Bild im Paket „MinimalExample.data“ (gekennzeichnet als „picturePath“) befinden muss, damit es geladen werden kann!

MTApplication

Die „Application“-Klasse dient zum Starten der Anwendung und muss die abstrakte Klasse „MTApplication“ erweitern. Die vorher beschriebene Scene wird lediglich hinzugefügt. Anschließend wird die Anwendung mit dem Methodenaufruf „initialize()“ gestartet. Dazu sind lediglich die Folgenden Codezeilen erforderlich:

package MinimalExample;

import org.mt4j.MTApplication;

public class StartMinimalExample extends MTApplication
{
  private static final long serialVersionUID = 1L;

  public static void main(String args[])
  {
    initialize();
  }

  @Override
  public void startUp()
  {
    this.addScene(new PictureScene(this, "Picture scene"));
  }
}