complex – Visual Event Feedback

complex - laptophalter 1

complex – die moderne Art, Informationen und Events vom Computer zu visualisieren. Tauchen auch Sie ein, in eine neue Welt voller Farben…

Fabian Kuhn und Michael Fretz entwickelten eine Art Ambilight mit Echtzeitfeedback von Ereignissen welche gerade auf dem Computer des Anwenders passieren. Ob Skypenachrichten, Musik oder Emails, wenn irgendwas passiert wird dies Farblich dargestellt.
Erster Laserprototyp
Nach den ersten Versuchen mit Karton und Papier haben wir eine Version in Plexiglas gelasert. Mit dem Epilog Laserschneider konnten wir ohne grossen Aufwand die gewünschte Form aus einer Illustrator Datei ausschneiden. Anschliessend haben wir den ausgeschnittenen Umriss noch in die gewünschte Form gebogen. Nun war es uns möglich, mit diesem ersten Modell des Laptophalters konkretere Versuche zu unternehmen. So konnten wir offene Fragen und Probleme klären, zum Beispiel, wie lange der Halter sein sollte, um die gewünschte Lichtmischung zu erzielen  oder wie die Leuchten platziert sein müssen, damit diese einen möglichst schönen und farblich gut durchmischten Hintergrund erzeugen.
Unter Berücksichtigung dieser Erkenntnisse erstellten wir nochmals einen Kartonprototyp, welcher eine schönere und leichtere Form hatte.

complex - laptophalter 2

Schwarzer Laserprototyp
Tags darauf kauften wir im PerPlex Shop schwarzes Plexiglas in der von uns bevorzugten Dicke. Der nun finale Grundriss wurde wiederum ausgelasert und anschliessend in die gewünschte Form gebogen. Mit dem neuen Objekt aus schwarzen Plexiglas sind wir sehr zufrieden. Die Form funktioniert sowohl als eigenständiges Objekt wie auch als Halter für ein Notebook.

complex - laptophalter 3

Programmierung Teil 1
Nachdem der Laptopständer fertig war, mussten wir uns an die Programmierung machen. Zuerst entschieden wir uns, die Software Growl, welche für Apple verfügbar ist, zu verwenden. Diese fängt verschiedene Events des Computers ab und zeigt diese als Meldung auf dem Bildschirm an. Da Growl keine API zur Verfügung stellt, entschieden wir uns, alle Growl Meldungen an eine e-mail Adresse zu senden und diese anschliessend regelmässig zu überprüfen. Wir verwendeten dazu ein Java Programm, welches Philipp Läubli für uns programmierte. Das Programm prüfte alle 10 Sekunden, ob ein neues Email in der Mailbox vorhanden war. War dies der Fall, so sendeten wir den Inhalt des Mails an ein Processing Programm, mit welchem wir den Inhalt des jeweiligen Mails auslesen konnten und dem Inhalt entsprechend verschiedene Stadien an das Arduino sendeten. Wir stellten jedoch fest, dass dieses Vorgehen eine Verzögerung erzeugte und waren deshalb nicht zufrieden. Kurz vor Feierabend kam die Idee auf, nicht über Growl zu arbeiten, sondern die einzelnen Programme direkt anzusprechen.

Über das Skype Python API konnten wir schnell und einfach die Events von Skype abfangen. Vom Python Programm war es dann ein Leichtes, eine Verbindung zu Arduino herzustellen. Nun konnten wir die Skypenachrichten direkt nach dem absenden visuell darstellen.

complex - laptophalter 4
Programmierung Teil 2
Nach der Entscheidung, die einzelnen Programme mit Python direkt anzusprechen, schauten wir verschiedene APIs diverser Programmhersteller genauer an. So kamen zu den Programmen, welche Events auslösen, noch Last.FM und E-mail dazu. Bei Last.FM entschieden wir uns, den Wechsel zwischen verschiedenen Musiktracks zu visualisieren. Ausserdem überprüften wir in der Mailbox, ob ein neues Mail eingetroffen war. War dies der Fall, so sendeten wir ein Signal an das Arduino.

Downloads

Dokumentation
Projektwebseite

LichtON – Lichtsteuerungssoftware

Der Hintergrund
Dieses Projekt hat in Zusammenarbeit mit der Nimbus-Group in Stuttgart stattgefunden. Dort befindet sich auch das Nimbus Mock-Up, ein Simulationsbereich, auf welchem auf über 1500m2 die Produkte von Nimbus präsentiert werden. In Zusammenarbeit mit GIRA wurde für das Mock-Up ein Gebäudesteuerungssystem installiert, über welches primär das Licht der gesamten Ausstellungsfläche geregelt werden kann. Diese Steuerung wird mittels eines Touchscreens bedient, welchem unser Interesse galt.
Das Ziel
Das Ziel des Projekts war die Entwicklung eines Navigationskonzepts und die Gestaltung eines entsprechenden GUI‘s für den Touchscreen. Damit sollte vor allem sämtliches Licht im ganzen Mock-Up gesteuert werden können. Das heisst, vom ganzen Stockwerk über einzelne Räume bis hin zu einzelnen Leuchten sollte die Lichtstimmung detailliert regelbar sein. Optional war auch die Steuerung weiterer Komponenten wie Audioquellen, Jalousien etc. denkbar. Das GUI sollte zudem an das CorporateDesign von Nimbus angepasst werden und sich gut ins Mock-Up einfügen. Und zu guter letzt gilt es auch noch zu erwähnen, dass die beste Arbeit prämiert wurde: für jeden Gewinner gab es eine Nimbus Leuchte “Line Z”.
Projekt
Das Projekt LichtOn baut auf eine simple Bedienung, auf die Einfachheit des An/Aus eines Lichtschalters. Der Fokus unserer Arbeit liegt in der Schlichtheit und Usability des Programms. So zeigt sich beispielsweise der Startscreen auch gern schlicht, mit nichts weiter als einigen wählbaren Voreinstellungen in Form von simplen Buttons, welche mit einem einzigen Klick das ganze Mock-Up auf die gewünschte Helligkeit einstellen.

Die Hauptnavigation befindet sich diskret am unteren Bildschirmrand. Das Konzept sieht ausserdem als wichtigen Punkt vor, dass bei jedem Schritt nur die Interaktionselemente sichtbar sind, welche gerade benutzt werden können oder sonst von Bedeutung sind, indem sie beispielsweise auf etwas hinweisen. So werden die Elemente im Bild auf ein Minimum reduziert und die Übersichtlichkeit und Bedienbarkeit auf ein Maximum angehoben.

Grafisch ist unser Design den von der Firma Nimbus vermittelten sinnlichen Erfahrungen angepasst. Die verschiedenen Elemente sind in ihrer milchglasig/metallischen Erscheinung der Konnotation der beiden meist genutzten Materialien von Nimbus angepasst.

LichtOn Startscreen

Startscreen

LichtON Kartenübersicht

Kartenübersicht

LichtOn Dokumentation (PDF 2.3MB)

SourceCode auf Google Code http://code.google.com/p/hs08-nimbus/

Vorlesungsverzeichnis XML AS3

Im Modul: Digitaler Modulbau 3 lernten wir die Grundlagen des XML Handlings. Dazu haben wir das Vorlesungsverzeichnis der Zürcher Hochschule der Künste neu visualisiert. Die Unterschiedlichen XML Dateien werden dynamisch vom Server der ZHdK in das Projekt geladen.

Vorlesungsverzeichnis XML Visualisierung Übersicht Departemente

Vorlesungsverzeichnis nachdem das Departement XML geladen ist.

Vorlesungsverzeichnis XML Visualisierung Modulanzeige

Übersicht der Module welche in einer Vertiefung angeboten werden. Durch dir Pfeile kann durch die Module durchgeblättert werden.

Vorlesungsverzeichnis XML Visualisierung Modul Details

Anzeige eines Moduls.

Zur Programmierung:

Die Dokumentklasse fungiert als Viewer und Controller. Alle Elemente werden hier plaziert. Je nach dem was geklickt wird, entscheidet die Dokumentklasse welches XML geladen werden soll.

Die XML Loaderklasse kann jedes beliebige XML laden. Sind die Daten geladen wird ein Dispatch Event ausgeschossen. Über get Methoden werden Name und Daten zurück geliefert.

XML Loader

Auszug aus der XML Loaderklasse

Die XML Manager Klasse bekommt die Daten aus der XML Loaderklasse. Die erhaltenen Daten werden in einen Array gespeichert und anschliessend wird ein Dispatch Event ausgeschossen.

XML Manager

Auszug aus der XML Manager Klasse

URL zur Demo: http://vorlesungsverzeichnis.michaelfretz.com

Download Flex Projekt des Vorlesungsverzeichnis (104 KB)

Advanced Interfaces

Advanced Interfaces Plakat

Advanced Interfaces Plakat

Zusammen mit Nino Cometti und Philippe Meier habe ich am Ende des zweiten Semesters einen MP3 Player gestaltet. Der ganze Player soll aus einem elastischen Display bestehen, Lyrics anzeigen und einfach zu bedienen sein.

Plakat als PDF (1.8MB)

Präsentation als PDF (5.8MB)