Ein Einblick in die Visualisierungsentwicklung

Wie entsteht eigentlich eine KNX - Visualisierung?

Mit diesem Post werden wir versuchen etwas Licht ins Dunkel der Visualisierungsentwicklung zu bringen.

Als wir zum ersten Mal mit der Visualisierungsentwicklung in Berührung kamen, standen wir sehr schnell vor der Frage, wie soll das Design sein?
Welche Kriterien müssen erfüllt werden um dem Benutzer einen schnellen, angenehmen Umgang mit seiner Visu zu verschaffen?
Wir wollten weg von den tristen "Bankautomaten", hin zu einem coolen Design. Es soll Spaß machen seine Visu anzuschauen und sein System zu steuern.

Das erste Design, welches wir Ihnen vorstellen möchte, dürfte dem ein oder anderen sicher aus der Star Trek Serie bekannt sein.
Auf der Suche nach einem passenden firmeninternen Design, kam uns irgendwann die Idee das berühmte LCARS-System zu übernehmen.
Das tolle an diesem System ist, dass es hochgradig funktional und schnell ist und ein wirklich cooles futuristisches Design bietet, das es schafft sehr viele Informationen in ein benutzerfreundliches Interface zu verpacken, ohne komplett überladen zu wirken.

Wir möchten Ihnen nun die Visu etwas näher vorstellen.

Hier befinden wir uns im Hauptbildschirm. Der Übersicht.

Rechts befindet sich der Grundriss des Erdgeschosses. Unten Links befindet sich eine knappe Übersicht über alle relevanten Umweltinformationen.
Da in jedem der Räume ein Bewegungsmelder angebracht ist, haben wir diese aktiv ins System mit einbezogen. Wird eine Bewegung gemeldet pulsiert der entsprechende Raum grün.
Zwei Minuten nachdem der Raum verlassen wurde stoppt das Pulsieren. Wählen sie einen bestimmten Raum aus dem Menü aus, wird sein Grundriss hervorgehoben.

Dann Landen wir im Raumcontroller. Da das Interface schnell und komfortabel sein sollte, lassen sich verschiedene gruppierte Befehle ausführen, wenn sie nicht sowieso schon automatisch gesteuert werden.
So befinden sich in jedem Raum auch die Optionen zum Lüften, Beschatten und Schlafen, die sie entweder auf alle Räume beziehen können, oder nur auf den gerade ausgewählten.
Natürlich lässt sich auch jeder Aktor separat ansteuern. Beachten Sie außerdem, dass in den Schnellinformationen nun die jeweilige Innentemperatur des ausgewählten Raumes angzeigt wird.

Einen Sonderfall in der Raumvisualisierung stellt unser Serverraum dar. Hier lag für uns der Fokus auf dem Überwachen der Temperatur und dem Steuern der Lüftungsanlage.
Sollte die Temperatur im Serverraum über das festgelegte Maximum steigen, erhalten wir eine Warnung.

In der Kategorie Umwelt stehen letztendlich sämtliche Umweltinformationen zur Verfügung die man sich wünschen kann.
Links der Livestream der Überwachungskamera und rechts eine Wetterübersicht. Tippt man auf das Kamerabild, gelangt man zur Vollbildansicht.
Tippt man auf die Wetterkarte, gelangt man zu folgender Übersicht.

Hier werden alle verfügbaren Temperaturen, Luxwerte, Sonnenstandsberechnungen, etc. angezeigt. Mit einem Swipe gelangt man zu einem Satellitenbild der Erde des DWD, welches alle 4 Stunden  aktualisiert wird.

Wie Sie also sehen, werden in der Visu auch Gesten unterstützt. Egal wo man sich befindet ein Doppelklick bringt einen immer zurück zum Startbildschirm. Mit einem Swipe scrollt man durch die Räume und ein Pinch bringt uns zu den Umweltdaten.
Die Optionen beinhalten letzten Endes alles was das Entwicklerherz begehrt. Zugriff auf andere Visus, Versionsnummern, Debugger, etc. Aber das dürfen Sie ruhig unsere Angelgenheit sein lassen ;)

Kommen wir nun zum zweiten Design.

Dies war ein Kundenauftrag für eine Kanzlei. Dieses mal wollten wir etwas edles, unaufdringliches erschaffen und die Firmenidentität waren.
Das iPad sollte in der Wand verschwinden und sich nahtlos in den Raum einfügen.
Lassen Sie uns Ihnen zeigen wie uns dies gelungen ist.

Zuerst mussten wir die Grafiken erstellen, dabei haben wir darauf geachtet, dass die Buttons auf keinen Fall globig wirken.
Das wurde dadurch erreicht das die Grafiken generell sehr flach gehalten wurden und den Buttons nur ein hauchdünner Chromrand spendiert wurde.
Befindet sich ein Button in einem aktiven Status, leuchten seine Ränder in einem dunklen Rot, das wirkt als hätte der Button eine LED Hintergrundbeleuchtung.

Nachdem das Design der Haupt-Buttons abgeschlossen war, widmeten wir uns den restlichen Grafiken.
Unten Links sehen sie das in zwei geteilte (da zwei Schaltgruppen) Logo des Besprechungszimmers. Gegenüber die Grafik für die Beleuchtung über dem Kopierer.
Im nächsten Bereich ist ebenfalls das Besprechungszimmerlogo vorhanden. Neu hinzugekommen sind die Buttons der Empfangsbeleuchtung und des Präsentationsmodus,
welche der Visu eine besonders warme und ansprechende Farbgebung verpassen.

Im nächsten Raum, dem Konferenzraum haben Sie über den Button "Dimmer-Details" zugriff auf die einzelnen Dimmerreihen. Diese lassen sich Stufenlos und in Echtzeit ansteuern.