MTouch

Aus toolbox_interaktion
Wechseln zu: Navigation, Suche

mTouch Logo


Fingermalen mit mTouch
Das Team entschiet sich nach internen Abstimmungen und der Beratung durch Professor Brünig einstimmig für das Thema Multitouch. Ziel ist hierbei die Entwicklung eines Multi-Touchscreens dessen interaktive Anwendungen der Benutzer mit mehreren Fingern bedienen kann. Sämtliche Anwendungen sollen zum Ausprobieren animieren und die Bedienung soll Spaß machen. Es soll unter Anderem ein „Bilderviewer“ realisiert werden. Mit diesem Programm ist es möglich die Bilder mit mindestens 2 Fingern zu drehen, zu skalieren und zu verschieben.

Gemeinsamer Wunsch ist etwas Kompaktes zu entwickeln. Das „Multi-Touch-Panel“ steht am Ende ohne aufwendige Aufbauarbeiten zu Demo- und Präsentationszwecken zur Verfügung.

Das Besondere am Projekt mTouch soll die Multitouchfunktionalität des Bildschirmes sein. Der Touchscreen reagiert gleichzeitig auf die Position mehrerer Finger und deren Bewegung. Das System kann mehrere Eingaben gleichzeitig verarbeiten. Dadurch wird die Bedienung intuitiver und komfortabler als bei der Steuerung mit der Maus, weil der Benutzer beispielsweise wie im realen Leben beidhändig arbeiten kann. Des Weiteren ermöglicht ein Multitouchscreen, dass mehrere Personen gleichzeitig eine Anwendung bedienen können.


Konstruktion

Die Konstruktion setzt sich im Wesentlichen aus 3 Teilbereichen zusammen, dem Panel, dem Unterbau und der Spezifikationen, wie Beamerhalterung und IRKamerahalterung.

Konstruktionsplan


Panel

Das Panel - sozusagen das Herzstück des Kastens - ist quasi eine Art Touchscreen. Hier kann der Benutzer, durch Berührung der Oberfläche verschiedene Anwendungen steuern.

Konstrukionsplan Panel


Funktionsweise

Frustrated Total Internal Reflection (FTIR) basiert auf dem Prinzip der Lichtbrechung bzw. -reflektion an der Grenze zwischen zwei Medien, die einen unterschiedlichen Brechungsindex aufweisen. Tritt ein Lichtstrahl auf diese Grenze und hat das Medium, in das dieser eintreten will, einen geringeren Brechungsindex als das Medium, aus dem er kommt, so wird er gebrochen. Tritt er nun unter dem sogenannten kritischen Winkel auf die Grenze zwischen zwei Medien, so wird er sogar komplett reflektiert und bleibt in dem ursprünglichen Medium.

Plexiglas hat beispielsweise einen höheren Brechungsindex als Luft, sodass das Prinzip auch hier Anwendung findet. Berührt nun aber eine menschliche Hand die Plexiglas-Oberfläche, in der der Lichtstrahl auf die Grenze des Mediums tritt, so wird dieser anders gebrochen und tritt zur Rückseite der Glasfläche aus:

Prinzip der Fingerspitzenerkennung

Das austretende Licht wird nun von dem darunterliegenden Spiegel reflektiert und von einer IR-Kamera aufgenommen.


Umsetzung

Um eine flächendeckende Ausleuchtung der Plexiglas-Platte zu erreichen, müssen an den einzelnen Seiten der Platte IR – Dioden, in einem Abstand von 2,5cm angebracht werden. Die Schaltung setzt sich aus 6 parallelgeschalteten Strängen á 14 Dioden zusammen – also 84 Dioden. Um einen Kurzschluss zu vermeiden, wird vor jeden Strang ein Vorwiderstand von 68 Ohm geschaltet, da die einzelnen Dioden für eine maximal Leistung von 100mA ausgelegt sind. Die komplette Schaltung läuft dann in einem 24V Betrieb.

Schaltung der IR-DiodenAluminiumhalterung und Plexiglasplatten

Die 4 Aluminium Stangen sind an der jeweiligen Seite der Plexiglas-Platte angebracht

Um nun die Funktionalität eines Touchscreens zu erhalten, muss das ganze noch zu einer Art Mattscheibe werden. Dies wurde erreicht indem unter der Hauptplatte eine zweite Plexiglas-Platte angebracht wurde, zwischen die ein Diffuserpapier geklemmt ist. Das Papier dient somit als eine Art Leinwand, die das projizierte Bild des Beamers auf dem Panel wiedergibt.


Gerüst

Das fertig gestellte Panel wurde von einem Holzrahmen umschlossen, der einerseits Platz für den Beamer schaffte und andererseits die Größe des Gerüsts vorgab. Das resultierende Gesamtpanel wurde so konstruiert, dass die Oberkante des Aluminiums und die Oberkante des äußeren Holzrahmens auf gleicher Höhe sind, damit die obere Verkleidung plan aufliegt.

Komplettes Panel Unterbau und Panels

Das Gerüst besteht im Wesentlichen aus den vier Außenbalken und an jeder Seite aus zwei versetzt angebrachten Querlatten, die einerseits der Stabilisierung aber auch der Anbringung der Beamer- und Kamerahalterung dienen. Weitere 16, im 45° Winkel angebrachte, Stützbalken gewährleisten eine noch bessere Stabilisierung.


Beamerhalterung

Die Beamerhalterung besteht aus einer Grundfläche und einem mit Metallwinkel im 90° Winkel angebrachte Auflagefläche, in der ein Teil für die Linse des Beamers raus gesägt wurde. Zum Schutz vor Kratzern wurde darauf ein weicher Filz angebracht. Da der Beamer auf einer Seite eine Krümmung besitzt, die ein eventuelles Abrutschen nicht ausschließt, befestigten wir zusätzlich Moosgummi, das dies verhindern soll. Die endgültige Fixierung des Beamers erfolgte durch einen Spanngurt, der den Beamer mit der Grundfläche fest umschnürt. Er geht durch zwei passende Schlitze in der Grundfläche und wird mit einer Plastikmanschette zusammengehalten.

Beamerhalterung

Befestigt ist die Halterung mit zwei Scharnieren, die an der oberen Seite der Grundfläche und an der Querlatte des Gerüsts angebracht sind. Durch die Scharniere ist die Halterung neigbar. Auf der unteren Seite der Grundfläche sind Metallwinkel mit Langlöchern angeschraubt, die eine Neigung und zugleich eine separat vornehmbare Fixierung zulassen.


Spiegel

Für den verwendeten Spiegel wurde ein Holzrahmen gebaut, in dem eine 2 mm Vertiefung gefräst wurde, um ein Verrutschen des Spiegels auszuschließen. Getragen wird der Spiegel durch zwei Holzlatten die sich in der Mitte des Gerüsts befinden. Es gab die Überlegung, den Spiegel fest auf diese Latten zu schrauben, damit jedes Bauteil fest in das Gerüst integriert ist. Wir haben uns jedoch dagegen entschieden, denn der Spiegel sollte von Zeit zu Zeit gesäubert werden und es ist recht praktisch, wenn er sich immer fest in diesem Holzrahmen befindet, der einfach raus genommen und gereinigt werden kann.


IR-Kamerahalterung

Kamerahalterung

Nun musste noch die IR-Kamera befestigt werden. Sie sollte natürlich auch das Schwenken und Neigen der Kamera möglich machen, um eine präzise Einstellung vorzunehmen. Anfangs wurde geplant, die Kamera auch auf der Seite des Beamers zu positionieren, ja sie sogar auf der gleichen Halterung anzubringen. So ist es auch auf dem Konstruktionsplan (mit Vorbehalt) eingezeichnet.

Die Begründung dafür war Folgende: Wenn sich die Kamera nahe dem Beamer befindet, ist es wahrscheinlich, dass Abweichungen vermieden werden, da das projizierte und das aufgenommene Bild den gleichen bzw. ähnlichen Weg zurücklegen. Diese These erwies sich aber als falsch, denn das Beamer- und das Kameraobjektiv waren unterschiedlich und somit auch der Bildausschnitt. Eine Anbringung auf der gegenüberliegenden Seite sollte die Lösung werden. So kann die Kamera in einer anderen, erforderlichen Höhe angebracht und separat eingestellt werden. Aus dieser Entscheidung resultierend wurde ein größerer Spiegel benötigt, der für beide Medien (Kamer und Beamer) Platz lies, um eine Übertragung der beiden zu ermöglichen. Der kleine Spiegel wurde daraufhin von einem ausreichend großen ersetzt.

Die Halterung ist eine handelsübliche Kamerahalterung, die ein Kugelgelenk besitzt, das diese Einstellung vereinfacht. Fixiert wird sie dann mit einer Drehschraube.


Verkleidung

Die Verkleidung hat hauptsächlichen einen gestalterischen Aspekt. Sie dient zwar auch zum Schutz des integrierten Equipments, aber vor allem soll es dem Ganzen ein kompaktes und wahrlich abgeschlossenes Aussehen verleihen.

Die Verkleidung besteht aus 8 mm dicken MDF-Holzplatten. Die zwei längeren und größeren Seitenteile sind fest angeschraubt, was zusätzlich die Stabilität fördert. Sie sind aber zugleich auch der Rahmen des aufzusetzenden Panels, zumindest auf zwei Seiten. Die kleineren abnehmbaren Seitenteile werden von diesen beiden umschlossen. Sie sind abnehmbar, um das Einstellen und Einbauen des Equipments zu erleichtern und das Panel überhaupt abnehmen zu können.

Holzverkleidung (unlackiert)
Komplettsystem (lackiert)


Uns gingen verschiedene Lösungsansätze für die Halterungen der Seitenteile durch den Kopf, wie beispielsweise Magnete, Klettverschlüsse oder anderes. Die einfachste und damit auch beste Lösung war ein Einhäng-Mechanismus: An den Seitenteilen sind jeweils zwei Winkel in U-Form (Haken) befestigt. Auf den Innenseiten der vier großen Stützbalken oder „Standbeine“ des Gerüsts sind dazu passende Winkel angebracht, an denen diese Metallhaken eingehängt werden können.

Der aus diesem Mechanismus entstehende Spalt zwischen Oberverkleidung und Seitenverkleidung wird mit einem schwarz lackierten Schaumstoff ausgefüllt. Dieser kann ganz leicht herausgenommen werden, wenn man ein Seitenteil abnehmen will und natürlich auch wieder ganz leicht eingesetzt werden.

Aber nicht nur der Schaumstoff ist schwarz lackiert, sondern selbstverständlich auch die gesamte Verkleidung. Die Entscheidung viel auf die Farbe Schwarz, weil sie recht edel ist und Schmutz nicht so leicht erkennen lässt. Außerdem „wirkt“ es auch, wenn in einem dunklen Raum nur noch das Panel, durch das projizierte Beamerbild, leuchtet und es rundherum schwarz ist.

Der letzte Teil, der zur Verkleidung gehört, sind die Absenkleisten. Sie dienen auch hauptsächlich dem Design. Sie sollen einen fließenden Übergang von Oberverkleidung zum 10 mm tieferen Panel bzw. Plexiglas schaffen. Dieser Höhenunterschied ergibt sich ganz einfach aus der Höhe der Verkleidung (8 mm) und der des Aluminiums (2 mm). Sie sind auch aus Holz und ebenfalls schwarz lackiert. Sie wurden natürlich vorher noch passend zu recht gesägt und abgeschliffen. Befestigt sind sie mit „Ponal“ und zusätzliches Überlackieren schloss noch offene Lücken. Ein zusätzlicher und nicht ganz unwichtiger Nutzen dieser Absenkleisten ist das Schließen der Lücke zwischen Oberverkleidung und Plexiglas (ca. 2 mm) – Verhindert das Eindringen von Schmutz und Staub.


Bildverarbeitung

Das Team für die Bildverarbeitung war dafür verantwortlich, die Schnittstelle zwischen dem Touchscreen und der damit gesteuerten Anwendung zu konfigurieren und für das korrekte Zusammenspiel von Input und Output zu sorgen.

Zusammenarbeit mit dem Team Konstruktion

Für die Konstruktion unserer Multi-Touch-Box bedurfte es vieler detaillierter Überlegungen zur

  1. Verwendung der für die Positionserkennung der Finger richtigen IRKamera
  2. Positionierung des Beamers und der Kamera, um eine möglichst perfekte aufeinander abgestimmte Funktionsweise der beiden zu ermöglichen
  3. Verwendung und Größe des einzubauenden Spiegels, um eine möglichst genaue Fingererkennung einerseits und eine in der Größe und Schärfe passende Darstellung des Anwendungs-SteuerungsBereiches ("Spielfeld“) auf unserem Multi-Touch-Display andererseits herzustellen

Bei diesen Punkten war es für die Gruppe der Bildverarbeitung wichtig mit dem Konstruktionsteam eng zusammenzuarbeiten. Es wurden wöchentlich gemeinsame Tests durchgeführt. Zunächst erprobten wir die Funktion unterschiedlicher Kameras wie die der Webcam, der IR-Kamera aus dem Interaktionsfundus und der kleinen handlicheren IR-Kamera mit einem Weitwinkelobjektiv von Frieder Weiss, die uns zum Ausprobieren bereitgestellt wurde.

Im Zusammenspiel mit Touchlib, nahmen wir IR-Dioden mit EyesWeb auf, um das entstandene Video anschließend zum Test der Positionserkennung über Touchlib zu verwenden. Dies geschah als das Konstruktionsteam das Konzipieren und Aufbauen des später für Tests zur Verfügung stehenden Displays noch nicht abgeschlossen hatte.


Konstruktion der Kamera

Nach der Entscheidung für die Verwendung der IR-Kamera aufgrund der besten Ergebnisse bei der Erkennung und Kompatibilität mit Touchlib, legten wir in den darauffolgenden Tests, in Zusammenarbeit mit der Konstruktionsgruppe die Kameraposition innerhalb der Konstruktion fest. Es standen drei Einbaumöglichkeiten zur Entscheidung:

  • Kamera neben Beamer
    Bei dieser Möglichkeit würde die Kamera seitlich vom Beamer angebracht.
    Dabei träten folgende Schwierigkeiten auf:
    • Versatz des Bildes
    • Verzerrung des Bildes
    • Keine optimale Position für die Spiegelung
  • Kamera über Beamer
    Hierbei würde die Kamera oben am Beamer befestigt werden, was zu folgenden Erschwernissen geführt hätte:
    • Behinderung der Beamerbedienung durch die Kamera
    • Kamera ragt zu weit in die Mitte der Box hinein, somit Störung des Bildes durch den Kameraschatten
  • Kamera gegenüber Beamer
    Dabei handelt es sich um eine Anbringung von Kamera und Beamer auf den beiden gegenüberliegenden langen Korpusseiten der Multi-Touch-Box.
    Bei dieser Positionierung stachen vor allem folgende zwei Vorteile hervor:
    • Kamera und Beamer konnten unabhängig voneinander angebracht und eingestellt werden
    • Kamera und Beamer waren gleichzeitig auf einer gemittelten Position, somit waren keine entzerrenden, bildangleichenden Zwischenschritte mehr nötig
    Als Schwierigkeit trat das nun von der Kamera aufgenommene gespiegelte Bild auf, was jedoch durch die Kalibrierung in Touchlib behoben werden kann.


Konstruktion und Spiegel

Durch die von dem Bearbeitungsteam, angestrebte Positionierung der Kamera in der Box gegenüber des Beamers war nun der Einsatz eines größeren Spiegels erforderlich. Den ursprüngluchen Spiegel (35x35 cm) hatte uns Herr Frieder Weiss zur Verfügung gestellt. Es handelte sich dabei um einen Folienspiegel, der für eine Positionserkennung über eine Spiegelung besonders gut geeignet war.

Die Aufgabe bestand nun darin einen Spiegel mit den Abmessungen von nun 35 x 70 cm zu besorgen. Das erste Ziel war es entsprechend einen Folienspiegel in der von uns erforderlichen Größe zu bekommen.

Die meisten Glasereien konnten wenig mit dem Begriff „Folienspiegel“ anfangen. Am Anfang des Projektes wies uns Frieder Weiss darauf hin, dass er seinen Folienspiegel nicht aus Deutschland habe. Anfang Januar erklärte uns ein Glaser, dass solche Spiegel in Deutschland nicht mehr hergestellt werden würden und sagte zu einen Spiegel aus Altbeständen seiner Glashändler zu einem verbindlichen Termin zu beschaffen.

Gleichzeitig sorgte man aber mit der Bestellung eines möglichst dünnen Spiegels vor. Nach unseren Überlegungen sollte ein zwei bis maximal drei Millimeter dünner Spiegel nur sehr wenig Lichtstreuung im gespiegelten Bild verursachen. Als der probeweise bestellte Spiegel eintraf, wurde er sofort auf Tauglichkeit getestet. Der verbindliche Termin zur Lieferung eines Folienspiegels klappte nicht. Der gelieferte Spiegel funktionierte für unsere Zwecke einwandfrei!


Recherche

Die weitere Aufgabe der Bildverarbeitungsgruppe bestand daraus, sich darüber zu informieren, welche Software für das zu bearbeitende Projekt am besten geeignet war. Hierzu recherchierten wir vorwiegend im Internet über Software, die für Multi-Touch-Erkennung geeignet sein könnte, und suchten nach vergleichbaren bereits durchgeführten Projekten zur Ideensammlung. Die Ergebnisse dieser Recherche werden im Folgenden aufgelistet.


EyesWeb

Da wir die EyesWeb-Anwendung bereits kennen gelernt hatten und damit im letzten Projekt arbeiteten forschten wir auch nach den Möglichkeiten zur Erkennung mittels EyesWeb mehrerer Finger gleichzeitig. Dennoch mussten wir feststellen, dass diese Software für Multi-Touch-Erkennung nicht optimal geeignet war und zudem bei hoher Belastung, sprich vielen gleichzeitig ablaufenden Prozessen, nicht stabil war und regelmäßig abstürzte.


VVVV

VVVV ist ein für nicht kommerzielle Zwecke freigegebenes multifunktionales Toolkit, mit welchem auch Anwendungen mit Multi-Touch-Erkennung in Zusammenarbeit mit unterschiedlichsten Medien realisierbar sind. Die vertiefende Einarbeitung in die Erstellung von Programmen zur Multi-Touch-Erkennung wäre jedoch sehr umfangreich gewesen und würde womöglich unseren Zeitrahmen sprengen. Hinzu kam eine Entdeckung der vielseitig in mehreren interaktiven Projekten verwendeten Bibliothek Touchlib.


Touchlib

Touchlib ist eine Bibliothek zum Erstellen von Multi-Touch-Interactive Anwendungen. TouchLib wurde von David Wallin mit C++ programmiert. Es ist eine umfassende Bibliothek und Software Lösung um Multi-Touch Anwendungen für FTIR oder Diffused Illuminaton Techniken zu nutzen. Sie ermöglicht es, Infrarotpunkte zu verfolgen und dem Anwendungsprogramm Flash so genannte Multi-Touch Ereignisse wie ‚finger down’, ‚finger moved’ und ‚finger released’ zu übergeben.

Touchlib ist zu den meisten Webkameras und Aufnahmegeräten kompatibel. Unter Windows läuft es stabil und es wird daran gearbeitet, es auch auf anderen Plattformen funktionsfähig laufen zu lassen.

Entscheidung

Nach der Ideenfindung stand die Entscheidung über die Verwendung eines geeigneten Systems für die Positionserkennung in unserer Multi-Touch- Anwendung an. Touchlib bedeutete sowohl für uns Studenten, als auch für unsere Dozenten Neuland. Dennoch fiel die Entscheidung der Software sehr schnell auf Touchlib. Es ist darauf ausgerichtet, Berührungsereignisse zu übergeben, und zwar von einer oder mehreren Berührungen, was bedeutet, dass es genau auf unsere Bedürfnisse zugeschnitten ist. Das Übergeben mehrerer ‚touch events’ beispielsweise in EyesWeb zu realisieren, wäre sehr viel ineffizienter gewesen, da es nicht darauf ausgerichtet ist, solche Ereignisse weiterzuleiten.

Außerdem verwendet Touchlib das TUIO Protokoll um die Ereignisse zu übertragen. Das macht es kompatibel zu Anwendungen, die ebenfalls das OSC Protokoll benutzen. Da die Anwendung in Flash wird, war es wichtig, eine Software zu verwenden, die OSC Nachrichten verschickt. Flash unterstützt OSC zwar nicht direkt, doch es ist möglich auf dem Server zudem eine FLOSC (Flashto- OSC) Software laufen zu lassen. Diese Software übersetzt die OSC-Befehle dann in für Flash interpretierbare XML-Dateien (Vergleiche hierzu auch Kapitel.

Unsere Wahl fiel auf Touchlib, da es uns eine umfangreiche Bibliothek zum Erstellen von interaktiven Multi-Touch-Anwendungen bot. Dabei konnten wir für die Positionserkennung Videos sowie Live-Bilder aus unterschiedlichen Kameras einspeisen.


Touchlib

Die Bibliothek enthält eine Konfigurationsdatei, in der man die Einstellungen an seine Anwendung anpassen kann und einige Beispielapplikationen um zu testen, ob die Einstellung korrekt vorgenommen worden sind. Zur Erweiterung der Touchlib Funktionen kann man OpenCV nutzen da man hier den Source Code in C++ erweitern kann. In dieser Version können die Events im TUIO Protokoll übertragen werden. Das macht Touchlib kompatibel mit verschiedenen anderen Anwendungen die das Protokoll unterstützen z.B.: VVVV.

Es besteht auch die Möglichkeit die Architektur zu teilen, dabei wird an einem Computer die Infraroterkennung und Verfolgung durchgeführt und auf einem zweiten Computer läuft eine Flash-Anwendung, welche über OSC und den FLOSC-Servers angebunden ist.

Vorgehensweise bei Touchlib

Bei der Positionserkennung wurden die Infrarotpunkte der Finger auf der Plexiglasscheibe unseres Multi-Touch-Panels von der IR-Kamera erfasst und Touchlib sendete im Anschluss Multi-Touch-Ereignisse im Format des TUIOProtokolls über die OSC-Schnittstelle an Flash, was unsere Anwendung darstellte.


Datentransfer

Für den Datentransfer stand in der Bibliothek des Touchlib Beta 1.0 ein FLOSC-Server, der vor der Anwendung zur Fingererkennung (vision.bat) gestartet wurde. Das TUIO-Protokoll11 ist auf dem OSC-Protokoll zur Formatierung der gelieferten Daten als von Flash interpretierbare Multi-Touch-Ereignisse aufgesetzt und sendet die Daten an die Anwendungsschicht über den FLOSC-Server.

Voraussetzungen

Um Touchlib verwenden zu können, sind folgende Punkte notwendig.

Installation / Deinstallation

Zur Installation muss die Touchlib Bibliothek unter http://nuigroup.com/touchlib/downloads/ heruntergeladen und das zip-File in ein gewünschtes Verzeichnis entpackt werden. Zur Deinstallation muss das Verzeichnis wieder gelöscht werden. Weitere Infos sind im internen Bereich zu finden.

Systemanforderung

Damit Touchlib benutzt werden kann, muss das PC–System folgende Voraussetzungen erfüllen:

  • Hardware: Pentium 4 mit 2 Ghz
  • Betriebssystem: Windows Versionen ab WinXP
  • Arbeitsspeicher: empfohlen ab 1 GB

Einstellen / Starten / Beenden

Konfiguration

Zur optimalen Positionserkennung nutzten wir die Möglichkeiten zur Vornahme von Einstellungen am Eingangsbild. Wir veränderten die Einstellungen zu Bildhelligkeit und –kontrast und zu der geforderten Bildauflösung, führten eine Hintergrundsubtraktion durch um Störungen auszumerzen, kalibrierten die Bildpunkte über eine Matrix um eine durch die Positionierung der IR-Kamera entstandene Spiegelung zu beheben. Nach der Konfigurationsvornahme konnten die Einstellungen in der config.xml gespeichert werden und standen beim Start der eigentlichen Anwendung zur Verfügung.


config.xml

Die config.xml enthält die wichtigsten Konfigurationen von Touchlib. Über einen Editor kann die Kameraeinstellung und die Größe der Bildschirmauflösung geändert werden. Die Konfiguration der Filter wird über die Fenster der config.bat gesteuert :


<cvcapture label="capture1">

<source value="cam" />

</cvcapture>


Hier wird die von Windows als erstes erkannte Kamera genutzt und automatisch die Einstellung (z.B.: Auflösung) übernommen. Man kann auch Videos als Quelle nutzen indem man statt “cam“ den Pfad angibt wo sich das Video befindet.


<vwcapture label="capture1">

<source value="pgr: 0 320 60 grey8 1 rgb" />

</vwcapture>"

"pgr: 0 320 60 grey8 1 rgb",

"pgr: 0 640 30 grey8 1 rgb",

"pgr: 0 640 30 yuv 1 rgb",

// VidCapture (DirectShow)

"vc: 1 640 30 I420 0",

"vc: 0 640 15 rgb 0",

"vc: 0 320 10 rgb 0",

"vc: 0 320 30 yuv 0",

// DCAM

"dcam: 0 320 30 rgb 2",

"dcam: 0 640 30 rgb 2",

// Canon EOS

"eos: 0",

// replay string

"replay: c:\\savedVideo\\"


Bei <source value> wird eingestellt welche Kamera , welche Auflösung, welche Bildrate und welches Farbformat genutzt werden soll.

<dsvlcapture label="capture1" />


DSVL steht für Direct Show Video Libary, und steht nur unter Windows zur Verfügung.


<screen scale="1.000000">

<point X="0.000000" Y="240.000000"/>

<point X="80.000000" Y="240.000000"/>

<point X="160.000000" Y="240.000000"/>

<point X="240.000000" Y="240.000000"/>

<point X="320.000000" Y="240.000000"/>

<point X="0.000000" Y="160.000000"/>

<point X="80.000000" Y="160.000000"/>

<point X="160.000000" Y="160.000000"/>

<point X="240.000000" Y="160.000000"/>

<point X="320.000000" Y="160.000000"/>

<point X="0.000000" Y="80.000000"/>

<point X="80.000000" Y="80.000000"/>

<point X="160.000000" Y="80.000000"/>

<point X="240.000000" Y="80.000000"/>

<point X="320.000000" Y="80.000000"/>

<point X="0.000000" Y="0.000000"/>

<point X="80.000000" Y="0.000000"/>

<point X="160.000000" Y="0.000000"/>

<point X="240.000000" Y="0.000000"/>

<point X="320.000000" Y="0.000000"/>

</screen>


<point X> sind die Punkte die bei der Kalibrierung detektiert und hier gespeichert wurden und unter <screen scale> kann die Auflösung noch mal genau an den Touchscreen angepasst werden.

config.bat

cmd.exe
Um die Kalibrierung von Kamera und Projektor für Touchlib durchzuführen muss die config.bat gestartet werden. Am Anfang muss der Projektor als erster Bildschirm eingestellt werden. Danach startet man die config.bat. Nun werden alle Fenster die Touchlib zu Verfügung stellt geöffnet. In der cmd.exe sieht welche Auflösung eingestellt ist (640x480). Recap bedeutet dass schon einmal der Hintergrund vom Kamerabild subtrahiert wurde.
capture window
mono window
smooth window
background window










Das "capture window" zeigt das originale, unbearbeitete Eingangsbild der Kamera. Im „mono window“ wird das Farbbild in ein Grauwertbild umgewandelt.

Im „smooth window“ wird eine Rauschminderung durchgeführt. Das "background window" zeigt dass man vom aktuellen Bild den Hintergrund subtrahieren kann.


Das Fenster "brightnes-contrast window" dient zum Einstellen der Helligkeit und des Kontrastes Im „rectify window kann man den Schwellwert einstellen, es werden alle Pixel unterhalb einer bestimmten Helligkeit entfernt und mit dem Parameter (level) kann man die Pixelmenge des Grenzwert bestimmen.

brightness-contrast window
rectify window











Es gibt noch zwei weitere Filter: highpass, invert.

Invert: Dieser kehrt die Farben um aus schwarz wird weiß und aus weiß wird schwarz.

Highpass: Der Filter entfernt die unscharfen Punkte und zeigt nur die Scharfen, er nutzt einen Pseudo-Hochpass Algorithmus ähnlich wie der bei Photoshop. Drücken der Taste „B“: Ein Schnappschuss vom Kamerabild wird erstellt und dann wird diese vom Hintergrund subtrahiert. In zukünftigen Versionen so dies als eigener variabler Filter vorhanden sein. Drücken der Taste „Enter“: Startet den Kalibrierungsvorgang von Touchlib. Drücken der Taste „ESC“: Beendet alle Aktionen und speichert die Einstellung in der config.xml Kalibrierung der Kamera: Nachdem „Enter“ gedrückt wurde erscheint das Kalibrierungs-Fenster.

Kalibrierung-Fenster











Zum Starten der Kalibrierung drückt man die Taste „C“ dadurch ändert sich die Farbe des ersten Kreuzes, oben Links, von grün auf rot. Nun muss auf dieses Kreuz auf dem Touchscreen drücken, sobald ein weißes Quadrat aufblinkt gilt dies als Bestätigung dafür das dieser Punkt erkannt wurde. Dann drückt man die Leertaste um zum nächsten Kreuz zu gelangen. Wenn man alle Kreuze gedrückt hat und das letzte rot ist muss man „ESC“ drücken um die kalibrierten Punkte in der config.xml zu speichern. Jetzt ist Touchlib konfiguriert und startbereit!


Starten

Nach dem Touchlib konfiguriert hat führt man die server.bat und vision.bat aus.

server.batvision.bat

Hier werden die Server gestartet die zur Übertragung der Daten genutzt werden. Der OSC Server beinhaltet das TUIO-Protokoll mit den Informationen über die Ereignisse der Finger. Der TCP Server wird benötigt um Daten im Ethernet zu übertragen.

In der vision.bat sieht man ob ein Finger Ereignis detektiert wurde. Es werden auch wieder alle Fenster wie in der config.bat geöffnet. Hier sollte man aber keine Änderung mehr vornehmen da diese nur zu dem Zeitpunkt aktuell sind und auch nicht in der config.xml gespeichert werden. Da jetzt die Verbindung aufgebaut ist kann man nun zum Beispiel mit einer Flashanwendung testen ob alle Finger richtig erkannt werden und ob die Kalibrierung auch genau war.

Beenden

Zum Beenden sollte man beachten das man die Anwendung in umgekehrter Reihe schließt als sie geöffnet wurden.

Anwendung

Die Recherchen des Bildverarbeitungsteams haben Touchlib als präferiertes Tool hervorgebracht. Es wurde speziell für die Erkennung und Verfolgung von Fingern auf Multitouch-Panels entwickelt und verwendet zudem als Standardausgabe der erhaltenen Daten die OSC-Schnittstelle, die uns schon aus dem vergangenen Projekt bestens bekannt ist.

Der einzige Unterschied zu letztem Semester bestand darin, dass das Bildverarbeitungsteam nicht selbst in Abstimmung mit dem Anwendungsteam bestimmen konnte, welche OSC-Meldungen zu welchen Zeitpunkten gesendet werden, sondern das durch das auf OSC aufgesetzte TUIO-Protokoll definiert wird.


Datentransfer zur Anwendung

Wie schon erwähnt, werden von Touchlib gemäß den Richtlinien des TUIOProtokolls OSC-Meldungen aufgrund der erfassten Daten gesendet. An dieser Stelle soll nicht näher darauf eingegangen werden, wann welche Pakete versendet werden, da das sehr anschaulich in der offiziellen TUIO-Definition erklärt ist. Zusammenfassend kann man sagen, dass die zwei Nachrichtentypen „set“ und „alive“ die wichtigsten sind. „set“ wird gesendet, sobald sich die Position eines Fingers ändert, mit „alive“ wird mitgeteilt, welche Finger noch aufgesetzt sind und – indirekt – welche Finger das Panel nicht mehr berühren. Erkannte Finger werden von Touchlib als zweidimensionaler Cursor gesendet.

Ebenfalls wie im vergangenen Projekt ist uns der frei erhältliche, auf Java basierende FLOSC-Server - eigentlich ist es ein OSC-Client und gleichzeitig ein XML-Server – beim Transfer der Daten der Bildverarbeitung zur Anwendung eine große Hilfe. Das Programm nimmt über einen festgelegten Netzwerkport OSCDaten entgegen, formatiert sie in’s XML-Format und speist sie an einem anderen Port wieder in’s Netzwerk ein. Flash kann über eine XML-Socket-Verbindung die Daten vom FLOSC-Server entgegennehmen. Den FLOSC-Server sollte man immer zuerst starten, also noch vor Touchlib und der Flash-Anwendung.

Zur Veranschaulichung des Datenflusses soll folgendes Flussdiagramm dienen:

Flussdiagramm

Menü

Icons der Anwendung

Das Flash-Projekt menu.fla bzw. menu.swf ist im internen Bereich zum Downlod abgelegt.

Gestaltung der Icons

Beim Entwurf der Icons versuchten wir nicht nur auf ein modernes Design zu achten, sondern gleichzeitig die Bedeutung des jeweiligen Icons in Bezug auf die dahinter stehende Anwendung durch eine passend gewählte Symbolik zu verdeutlichen. So wählten wir für die Malfunktion, ein Symbol, bei welchem man die Möglichkeit des Malens mit mehreren Finger erkennen kann, für das Pong-Spiel ein sofort zuordenbares Pong-Spielfeld und für den Bilderviewer zwei Hände, die mit einem Bild operieren.

Neben den Icons für die verschiedenen Anwendungen, entwarfen wir auch Buttons für die Navigation durch das Menüs. Zum einen den Beenden-Button zum Beenden einer Anwendung, einen Info-Button für den Aufruf der Hilfefunktion und einen OK-Button zum Bestätigen der Hilfe um so wieder zur Anwendung zurück zu kehren.

Buttons zur Navigation

Die Icons wurden alle ausschließlich mit Adobe Photoshop erstellt, wobei der Grundaufbau bei allen Icons der Selbe war: Man erstellt einen Hintergrund in der Form die das Icon haben soll, wobei man für den späteren 3D-Effekt einen dünnen Rand in einer etwas dunkleren Farbe ziehen sollte. Nun platziert man das Symbol auf dem Hintergrund, hier die Hände und das „i“ für Info (vorher auch in Photoshop erstellt bzw. bearbeitet). Mit ein paar Effekten wie „Inner Glow“ und „Gradient Overlay“ und einigen Lichteffekten bringt man das Icon quasi zum Glänzen und Leuchten. Die runden Buttons haben wir zusätzlich durch das Zusammenspiel von Licht und Schatten etwas Tiefe gegeben. Abschließend vereinigt man alle Layer um das Ergebnis vertikal nach unten spiegeln zu können um dann mit einer Verlaufsmaske den Großteil der Spiegelung wieder zu verbergen. Hinterlegt man das Resultat mit einem schwarzen Hintergrund, scheint es, als würde der Button auf einer Glasfläche stehen und sich dabei auf diesem spiegeln.

Entstehungsverlauf der Icons

Menünavigation

Nachdem wir entschieden haben, welche Anwendungen wir zusätzlich umsetzen wollen und wir zu jeder Anwendung ein Icon entworfen haben, begannen wir uns erste Gedanken zur Menüführung zu machen. Wir entwarfen ein Konzept, bei dem bereits die Navigation zwischen den verschiedenen Screens enthalten war.

Navigation zwischen den Screens

Um die Anwenderfreundlichkeit dieser Navigation zu testen, bildeten wir das Menü in PowerPoint nach, wo bereits durch Klick auf die Buttons zur entsprechenden Seite gesprungen wurde.

Nachdem die Menügestaltung und –navigation vom Gesamtteam akzeptiert wurde, begann das Anwenderteam das Menü in Flash umzusetzen. Hierfür importierten wir alle zuvor erstellten Icons in Flash und konvertierten sie zur weiteren Bearbeitung in Movieclips. Die Navigation zwischen den unterschiedlichen Screens geschah durch die Überlagerung des jeweiligen Frames mit ActionScript.

Anwendungen

Zu Beginn des Semesters beschäftigte sich das Anwendungsteam damit auszuprobieren, wie das Bilderschieben unter Verwendung von Multitouch-Daten funktionieren könnte.


Erster Prototyp Bilderschieben

Da wir noch keine Testdaten zur Verfügung hatten, mussten wir eine Art Dummy programmieren und legten zwei Punkte fest, die uns als Finger dienen sollten. Diese waren zwar die ganze Zeit sichtbar, was in der Realität bedeuten würde, dass beide Finger ohne Unterbrechung das Panel berühren würden, doch sollte uns das für den Prototyp nicht weiter stören.

Zunächst wollten wir versuchen ein Bild zoomen zu können. Dabei mussten wir zuerst ein Bild auf die Bühne ziehen und dieses dann, damit wir es verändern konnten, in einen so genannten Movieclip umwandeln. Um die beiden Finger zu simulieren verwendeten wir zwei Punkte die wir ebenfalls auf der Bühne platzierten und in Movieclips umwandelten.

Nun schrieben wir ein ActionScript, das zunächst möglich machte die beiden Punkte mit der Maus zu bewegen. Dafür wurde eine einfache Funktion erstellt, die kontrolliert ob die Maus gedrückt wird und sich dabei auf einem der beiden Punkte befindet. Ist dies der Fall so lässt sich der jeweilige Punkt entsprechend mit der Maus verschieben. Um das Bild nun zu skalieren benötigt man den jeweiligen Abstand der beiden Punkte. Verkleinert sich dieser, so wird auch das Bild verkleinert, durch einen größeren Abstand entsteht analog ein Zoomeffekt.

Dafür wurde eine neue Funktion angelegt, die den Abstand der beiden Punkte mit Hilfe von Pythagoras über die Differenzen der aktuellen x und y-Werte der beiden Punkte berechnet. Schließlich mussten wir noch dafür sorgen, dass diese Funktion andauernd aufgerufen wird um das Bild zur Laufzeit anzupassen und zu skalieren. Während des Erstellens des Programms kam uns die Idee, das Gruppieren von mehreren Bildern zu ermöglichen, was wir uns als späteres Feature offen lassen wollten. Mit dem Programm ließ sich nun bereits ein Bild skalieren. Allerdings geschah dies momentan immer nur dadurch, dass die linke obere Ecke des Bildes an der gleichen Stelle blieb und die rechte untere Ecke sich entsprechend veränderte. Die Frage des Skaliermittelpunkts blieb somit zunächst offen. Ein weiteres Problem war dass die Lage der Punkte auf der Bühne noch nicht berücksichtigt wurde. Die Bewegung der Punkte, also die Simulationen der Finger, verursachte immer eine Skalierung des Bildes, auch wenn sie sich gar nicht auf dem Bild sondern an einer anderen Stelle auf der Bühne befanden. Außerdem fehlten natürlich noch die anderen Funktionen, allen voran das Rotieren des Bildes.

Einfaches Skalieren

In einer zweiten Version unseres Prototypen wollten wir diese Probleme beheben und zusätzliche Funktionen einbauen. Dabei sollte zuerst der Skaliermittelpunkt geändert werden. Sind beide Finger auf dem Bild und einer entfernt sich von dem anderen, der dabei auf der Stelle bleibt, so soll dieser zweite, ruhende Finger zum Zoommittelpunkt werden. Bewegen sich beide Finger gleichzeitig von einander weg, so sollte der Zoommittelpunkt in der Mitte zwischen beiden Fingern liegen. Da wir nach wie vor nur mit zwei Punkten als Simulation für die Finger arbeiten konnten, die sich mit der Maus bewegen ließen, war es in unserer Anwendung natürlich nur möglich jeweils einen Punkt einzeln zu verschieben.

Zunächst legten wir Variablen an um die Anfangsposition der Finger beziehungsweise Punkte in Relation zum Bild festzulegen. Ebenfalls notwendig waren Variablen um die Anfangsposition der Punkte bezüglich der Lage auf der Bühne festzuhalten. Dabei verwendeten wir jeweils Arrays um die Positionen mehrerer Punkte und später Finger speichern zu können.

Die Funktion um das Verschieben der Punkte mit der Maus zu ermöglichen wurde von unserem ersten Prototypen übernommen.

Ändert sich nun der Abstand der Punkte so sollte zunächst ein Skalierungsfaktor aus der Division von neuem und altem Abstand ausgerechnet werden. Anschließend wurde das Bild entsprechend skaliert und die neue Position des Bildes so verschoben, dass der ruhende Punkt als Skaliermittelpunkt auftrat.

Skalieren mit korrigiertem Skaliermittelpunkt

Als nächsten Schritt sollte das Rotieren des Bildes mit eingebaut werden. Ändern die Punkte nicht ihren Abstand sondern nur ihre Position zueinander, das heißt dreht sich ein Finger um den anderen im gleichen Radius, so sollte sich das Bild entsprechend mitdrehen. Zunächst legten wir den Anfangsdrehwinkel zur Horizontalen der Bühne fest. In einer Funktion wurde dann der neue Winkel mit Hilfe von vorgefertigten mathematischen Funktionen von Flash ausgerechnet.

Beim Rotieren des Bildes wurde dieses aber nun immer um den linken oberen Bildmittelpunkt gedreht. Um nun den Drehmittelpunkt des Bildes ebenfalls auf den ruhenden Finger zu legen. Beim Lösen dieses Problems wurde uns klar, dass man eigentlich nur dafür sorgen müsste, beide Punkte sowohl bei der Drehung als auch bei der Skalierung immer über den gleichen Bildpunkten zu lassen. Das heißt, die Bildpunkte unter den Anfangspositionen der Finger mussten immer unter den Fingern bleiben, egal ob diese das Bild skalieren oder drehen.

Die Lösung des Problems war letztendlich das Verwenden von in sich verschachtelten Movieclips, mit denen man den Fehler beim Drehen des Bildes durch das ständige neue Setzen des Rotationsmittelpunktes ausgleichen konnte.

Skalieren und Rotieren

Das Flash-Projekt multitouchsimulator.fla bzw. multitouchsimulator.swf ist im internen Bereich zum Download abgelegt.

Bilderviewer

Wie schon erwähnt ist das der Klassiker unter den Multitouch-Anwendungen. Entsprechend war eine Implementierung eines Bilderviewers unter den Beispielanwendungen von Touchlib zu finden. Diese Anwendung lud sich zunächst eine Liste der zuletzt hinzugefügten Bilder von der bekannten Fotocommunity „Flickr“, um anschließend auch die Bilder in die Anwendung zu laden. Der Nachteil für unsere Zwecke lag auf der Hand: Um die Anwendung so wie sie war nutzen zu können musste man immer online sein. Spätestens bei der Abschlusspräsentation wäre dieser Umstand aber nicht mehr gegeben.

Deshalb wurde die „Flickr“-Funktionalität von der Anwendung entfernt und dem Programm stattdessen Bilder eines Unterverzeichnisses der Flash-Anwendung zum Anzeigen gegeben, was sich auch – trotz ActionScript 3 - als keine größere Herausforderung darstellte.

Das Flash-Projekt mtouch_FlickrPhoto.fla bzw. mtouch_FlickrPhoto.swf ist im internen Bereich zum Downlod abgelegt.

Pong

Eine andere Anwendung, die im Menü ihren Platz finden soll, ist das Pong-Spiel. Zum Steuern der Schläger oder Schiffchen sollte es möglichst erforderlich sein, den Finger immer aufgesetzt zu lassen, denn sonst könnten die Schiffchen ja springend bewegt werden und das Spiel somit schnell langweilig werden. Doch wie bringt man den Spieler dazu, den Finger immer auf dem Panel zu lassen? Die Lösung lag auf der Hand: Mit dem Aufsetzen des Fingers wächst das Schiffchen nach und nach zu voller Größe an, mit dem Absetzen des Fingers verschwindet es und der Gegner hat ein offenes Tor vor sich.

Die Zuordnung der Finger zu den Schlägern war ebenso logisch: Das Spielfeld wird in zwei gedachte Hälften geteilt. Finger, die auf der einen Hälfte aufgesetzt werden steuern das Schiffchen des Spielers dieser Seite, Finger auf der anderen Hälfte steuern das des anderen Spielers.

Auch zu klären war die Frage, was passiert, wenn mehrere Finger auf einer Seite erkannt werden: Der erste aufgesetzte Finger zählt, alle danach erkannten Finger werden ignoriert.

Zudem soll ja das Spiel im Laufe der Zeit immer schneller werden. Üblicherweise wird das erreicht, indem der Spielball nur an Geschwindigkeit zunehmen kann, nie aber abgebremst wird. Auch wir haben uns für so eine Lösung entschieden: Je weiter der Aufprallpunkt des Balls von der Mitte des Schlägers entfernt ist, desto schneller und in steilerem Winkel wird er Reflektiert. Wenn die Spieler den Ball also nicht immer genau mit der Schlägermitte treffen wird das Spiel mit vier oder fünf Ballwechseln in der Regel so schnell, dass danach nur noch Zufallstreffer gelingen.

Einen Sieger im eigentlichen Sinne gibt es nicht, da das Spiel kein Ende nimmt. Es ist also kein Höchststand an Punkten vorgesehen, nach dem das Spiel abbricht oder ähnliches. Es läuft solange weiter, bis der Info- oder Abbrechen- Button in der Mitte des Spielfeldes gedrückt wird.

Das Flash-Projekt tuio_pong.fla bzw. tuio_pong.swf ist im internen Bereich zum Downlod abgelegt.

Intro

Schließlich wurde das System noch mit einem Intro versehen, bei dem sich Bilder durch den Raum bewegen.

Das zugehörige Flash-Projekt intro.fla bzw. intro.swf sowie das Verzeichnis mit den dargestellten Bildern (intro_img.zip) ist im internen Bereich zum Downlod abgelegt.


Zusammenfassung - Flash-Anwendungen

Alle Flash-Projekte sind im zip-Archiv (mtouch_flash_komplett.zip) im internen Bereich zum Downlod abgelegt.

Stabilität und Leistung der Anwendungen

Die Flash-Anwendungen laufen eigentlich recht stabil – eigentlich. Hin und wieder kommt es vor, dass – aus uns unbekannten Gründen – im Menü Info- und Abbrechen-Buttons stehen bleiben und die Anwendung somit nicht mehr bedienbar ist. Ein Neustart der Applikation ist dann erforderlich. Auch eine kleine Herausforderung ist sicher die richtige Skalierung der in das Menü geladenen Spiele und Beispielprogramme. Bei der Pong-Anwendung beispielsweise stimmen die Aufsetzpunkte der Finger nicht mit den Koordinaten überein, die das Spiel für die weitere Verarbeitung verwendet. Das liegt schlichtweg an folgendem Umstand: Die Menüanwendung ist für eine bestimmte Bildschirmauflösung optimiert. In das Menü-Flash geladene Spiele können andere Auflösungen und – schlimmer noch – andere Seitenverhältnisse aufweisen. Momentan wird die geladene Anwendung so gut es geht mit einem festen Faktor auf die volle Bildschirmgröße skaliert. In Abhängigkeit von der Position des geladenen Movieclips und dessen Seitenverhältnis klappt das aber nur bedingt gut. Hier könnte man versuchen, die genaue Position und Größe des geladenen Clips zu ermitteln und den Skalierungsfaktor entsprechend zu berechnen.

Des Weiteren hat sich gezeigt, dass bei der Bilderviewer-Anwendung die optisch sehr gut wirkenden Schatten und die große Anzahl der hoch aufgelösten Bilder die Performance negativ beeinflussen. Besonders auch bei der Intro-Animation ruckelt die Darstellung doch sehr. Ein stärkerer Rechner mit weniger Effekthascherei und eventuell eine andere, hardwarenähere Entwicklungsumgebung könnten Abhilfe schaffen.

Softwarestabilität

Neben einem merkwürdigen Verhalten innerhalb der Flash-Anwendung macht besonders der FLOSC-Server manchmal schlapp. Zu unvorhersehbaren Zeitpunkten gibt er mal mit, mal ohne Fehlermeldung einfach keine Kommandos an Flash weiter. Verbessern kann man das vermutlich nur dadurch, indem man den Server neu programmiert beziehungsweise den Source-Code revidiert. Eventuell macht es auch hier Sinn, auf eine andere Programmierumgebung als Java zu wechseln. Zum einen ist Java „nur“ eine Interpreter-Sprache und entsprechend nicht hochperformant, zum andern will man vielleicht nicht immer die Java-Runtime-Umgebung installieren und am laufen haben, allein schon wegen der Ressourcenausnutzung.