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:

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!

Installation Schritt 1

Installation Schritt 2

Installation Schritt 3

Installation Schritt 4

Installation Schritt 5

Installationsverzeichnis von GestureWorks

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.

Einstellungen für Veröffentlichungen

ActionScript-Einstellungen 1

ActionScript-Einstellungen 2

Klassendefinition bearbeiten

Adobe Flash Professional CS5+

Neues Adobe AIR Projekt

Neue ActionScript Klasse

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.

Flick (Swipe)

Drag

Zoom

Move, Rotate, Scale

Tap

Rotate

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.

Google Maps App

Multitouch Flint App

StandingWave2 App

Twitter Touch App

Away3D Touch App

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

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:

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

Import Schritt 2

Import Schritt 3

Import Schritt 1

Eclispe mit MT4j

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

css

helloworld

javagui

mtgestures

scenes

svgexample

Advanced-Anwendungen

drawing

flickrmt

fluidsimulator

models3d

modestmapsmt

mtShell

physics

puzzle

simpleparticles

space3d

touchtail

water

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