Das Dokument beschreibt die Präsentation von Dr. Martin Brändle auf der FileMaker-Konferenz 2010 zur interaktiven Visualisierung von Raumdaten. Es werden Datenklassen, das verwendete Applet und die Programmierumgebung Processing erläutert, die zur Erstellung von interaktiven Anwendungen für das Web eingesetzt werden können. Zudem werden die Einsatzmöglichkeiten von Processing für verschiedene Visualisierungen und Anwendungen im Bereich Technik und Wissenschaft hervorgehoben.

1. FileMaker Konferenz2010
FileMaker und interaktive Visualisierung
Dr. Martin Brändle
ETH Zürich
Informationszentrum Chemie Biologie Pharmazie
Wolfgang-Pauli-Str. 10, HCI J 57.4
8093 Zürich
Dr. Martin Brändle
FileMaker Konferenz 2012 Salzburg
FileMaker und interaktive Visualisierung
www.filemaker-konferenz.com

2. FileMaker Konferenz2010
Ausgangspunkt:
Rauminformation
Dr. Martin Brändle
FileMaker Konferenz 2012 Salzburg
FileMaker und interaktive Visualisierung
www.filemaker-konferenz.com

3. FileMaker Konferenz2010
Was steckt dahinter?
Dr. Martin Brändle
FileMaker Konferenz 2012 Salzburg
FileMaker und interaktive Visualisierung
www.filemaker-konferenz.com

4. FileMaker Konferenz2010
DB: Datenklassen
Plan-bezogen Bibliotheks-bezogen
Views 4 Services 113
Pläne 3 Standortsignaturen 3286
Raumobjekte 1039 Themen 1605
Raum-Objekttypen 76 IP-Adressen 29
Wegknoten 550
Wegstücke 635
Beschriftungen 133
• Diverse Zuordnungstabellen: Services – Raumobjekte,
Wegknoten – Raumobjekte, …
• Ingesamt ~10K Datensätze
• Zu Raum-Objekttypen assoziierte SVG-Dateien mit
verschiedenen Zuständen (Normal, Hover, Selected)
Dr. Martin Brändle
FileMaker Konferenz 2012 Salzburg
FileMaker und interaktive Visualisierung
www.filemaker-konferenz.com

5. FileMaker Konferenz2010
Applet
• programmiert in der Open-Source-Sprache Processing
(Superset von Java)
• ca. 4000 Code-Zeilen, dokumentiert
• Zielcode (= exportierter Code): Java
• Pläne und Raumobjekte als SVG (skalierbare Vektorgraphiken)
• Graphisches Konzept: arTec GmbH, Berlin, anhand von
Originalplänen von Prof. Mario Campi für HCI-Gebäude
• Pfadalgorithmen verwenden Funktionen der Open-Source Java-
Bibliothek JGraphT (Graphentheorie)
• Dijkstra-Algorithmus für Wegsuche
als Open Source erhältlich (ohne DB und SVG-Graphiken)
Dr. Martin Brändle
FileMaker Konferenz 2012 Salzburg
FileMaker und interaktive Visualisierung
www.filemaker-konferenz.com

6. FileMaker Konferenz2010
Processing (www.processing.org)
• entwickelt am MIT Media Lab von Ben Fry und Casey Reas
• ursprünglich für rapid visual prototyping und visual (computer)
arts entworfen. Zielsetzung: einfache Erlernbarkeit
• Java als Grundlage, aber einfacher
• eigene Entwicklungsumgebung, viele Beispiele
• exportiert sofort einsetzbare Java-Applikationen und Java-Applets
für's Web (ab V2: JavaScript)
• gut dokumentiert, ausführliche Referenz
• grosse Community (Künstler, Entwickler), Forum, Wiki
• eingebaute Bibliotheken: Video, Netzwerk, serielle Schnittstelle,
PDF-Erzeugung, Sound, Robotik (Arduino)
• erweiterbar: Bibliotheken für Animationen, Typographie, Kinect,
Bild- und Gesichtserkennung, Physiksimulation, Datenprotokolle,
…
Dr. Martin Brändle
FileMaker Konferenz 2012 Salzburg
FileMaker und interaktive Visualisierung
www.filemaker-konferenz.com

7. FileMaker Konferenz2010
Processing Sprachumfang
• Objektorientiert
• Datentypen: primitive und zusammengesetzte (Arrays, Listen,
Strings, Objekte, XML, …)
• Formen: Basis- und freie Formen 2D und 3D (OpenGL, WebGL)
• Geometrische Transformationen (verschieben, drehen, scheren)
• Kamera, Licht, Materialeigenschaften
• I/O: Maus, Tastatur, Dateien, Zeit & Datum, HTTP
• Farbe: RGB alpha-Kanal, HSB
• Bilder, Texturen, Shader
• Typographie
• Mathematische Funktionen
www.processing.org/reference
Dr. Martin Brändle
FileMaker Konferenz 2012 Salzburg
FileMaker und interaktive Visualisierung
www.filemaker-konferenz.com

8. FileMaker Konferenz2010
Einsatzpotentiale
• Ab Version 2 erzeugt Processing für Web-Anwendungen nicht mehr
Java, sondern JavaScript (HTML5 Canvas)
• Flash- und Java-Problematik in iOS entfällt
• Visualisierungen im WebViewer plattformübergreifend
(FileMaker, FileMaker Go)
• Keine Plugins benötigt
• Visualisierungen möglich, die über Charts von FM hinausgehen
• Netzwerkgraphen
• Interaktive Zeitachsen
• Modelle und Schemas (Technik, Medizin, Architektur,
Naturwissenschaft)
• Schalter, Schieber und Regler
• Animationen
• Spiele
• …
Dr. Martin Brändle
FileMaker Konferenz 2012 Salzburg
FileMaker und interaktive Visualisierung
www.filemaker-konferenz.com

9. FileMaker Konferenz2010
www.infochembio.etz.ch/rauminformation.html
Fragen?
Dr. Martin Brändle
FileMaker Konferenz 2012 Salzburg
FileMaker und interaktive Visualisierung
www.filemaker-konferenz.com