Basics: Icons verwenden

Basics: Icons verwenden

26. Januar 2017 10 249 Von Bastian

Weiter geht es mit den Fibaro Home Center 2 Basics. Diesmal geht es um Icons Verwenden. Das Webinterface ermöglicht das Hochladen von eigenen Icons zur Darstellung im Webinterface und den Fibaro Apps.Wie diese verwaltet und dynamisch verwendet werden zeigt dieser Artikel.

Eigene Icons verwenden

Eigene Icons verwenden

Fibaro Icons

Bei der Inkludierung von Geräten werden in der Regel passende Icons angezeigt. Dies gilt insbesondere für Geräte für deren Verwendung das Home Center 2 über ein Z-Wave Template verfügt. Diese Icons stellen in der Regel exakt das inkludierte Gerät dar. Wobei Geräte mit mehreren Anwendungsmöglichkeiten meist eine Auswahl des Einsatzes ermöglichen. So ist es beispielsweise bei Tür– und Fenstersensoren möglich zwischen Tür- und Fenstereinsatz auszuwählen. Geräten ohne Template wird ein generisches, zur Geräteklasse passendes Icon zugeordnet.

Jedoch passen die vorgegeben Icons nicht immer. Gerade wenn die Geräte des individuell eingesetzt werden. Bei uns wird beispielsweise der binäre Eingang eines Fenstersensors für die Anbindung der Klingel verwendet. Das geöffnete bzw. geschlossene Fenster ist hier natürlich kein geeignetes Icon, so dass ich dieses geändert habe.

Icon Klingelkontakt

Icon Klingelkontakt

Eigene Icons

Die Verwendung eingener Icons ermöglicht einen hohen Individsualisierungsgrad und vereinfachen die Visualisierung von Zuständen. Jedoch ist besonders in virtuellen Devices mit mehreren Schaltflächen die Verwaltung von Icons sehr mühselig und führt immer wieder zu Verwirrungen. Im folgenden wird gezeigt, wie die Verwaltung von Icons funktioniert und diese dynamisch in virtuellen Devices verwendet werden können.

Icons verwalten

Im Webinterface kann also jeder Szene und jedem (auch virtuellem) Gerät zur Steigerung der Übersichtlichkeit ein eigenes Icon zugeordnet werden. Dies erfolgt über die Schaltfläche „Change Icon“ in den Eigenschaften.

Iconzuordnung im HC2

Iconzuordnung im HC2

Hochladen

Icons die auf dem Home Center gespeichert werden sollen müssen bestimmte Vorgaben erfüllen. So müssen diese eine Größe von 128×128 Pixeln, (ggf.) einen Transparenten Hintergrund haben. Das Dateiformat PNG hat sich als sehr brauchbar für diese Aufgabe erwiesen. So sind die Dateien relativ klein und es unterstützt den geforderten transparenten Hintergrund.

Das Hochladen von eigenen Icons erfolgt im „Change Icon“ Dialog und bietet bei Geräten mit binären Zustandsdarstellung die Auswahl von mehreren Icons. Dies ist beispielsweise bei Fensterkontakten der Fall. So gibt es ein Icon für ein geöffnetes und eines für den geschlossenen Kontakt.

Icon Upload

Icon Upload

Löschen

Ungenutzte Icons lassen sich auch wieder vom Home Center entfernen. Das dafür notwendige Dialogfenster befindet sich ebenfalls unter „Change Icon“. Einfach oben rechts von „Show Icons“ zu „Delete Icons“ wechseln. Hier ist ein wenig Vorsicht geboten, denn das bloße Anklicken eines Icons genügt schon um es zu löschen. Geräte und Szenen welche das gelöschte Icon verwenden werden automatisch auf das Standard-Icon zurückgesetzt.

Icons verwenden

Icons lassen sich aber auch individuell bzw. dynamisch verwenden. So ist es möglich, auf Zuständen und/oder Aktionen basierte Icons zu verwenden. Virtuellen Device kann man beispielsweise je nach Zustand einer globalen Variable ein anderes Icon zuweisen. Man benötigt lediglich die laufende Nummer (ID) des hochgeladenen Icons sowie die ID des betreffenden Gerätes dessen Icon man ändern möchte.

Icon ID ermitteln

Leider wird die ID der Icons nicht im Webinterface dargestellt, so dass man sich hier eines kleinen Tricks mit dem Webbrowser behelfen muss. Ich verwende dafür Mozilla Firefox, es geht aber sicher auch mit jedem anderen gängigen Browser. Widerum im „Change Icon“ Dialog (ACHTUNG der Dialog des virtuellen Devices) einfach nach dem Upload die Eigenschaften des Icons anklicken.

Icon ID ermitteln

Icon ID ermitteln

Im daraufhin geöffneten Dialogfenster wird das gewählte Icon und dessen URL bereits markiert.

Icon URL extrahieren

Icon URL extrahieren

Die URL des Icons ist in diesem Falle http://10.10.10.14/fibaro/n_vicons/User23.png. Der hier fett dargestellte Teil (also 23) ist die benötigte Icon ID.

Szenen

Mit der ermittelten Icon ID ist es nun möglich dieses aus einer Szene ober einem VD dynamisch als Icon für virtuelle Geräte zu setzen. Neben der Icon ID wird dafür noch die ID des Ziel-VDs (hier 253) benötigt. Im Standard tragen VDs einen kleinen blauen Würfel als Icon. Möchte man dieses nun dynamisch in das oben ausgewählte Icon ändern, ist folgender Lua Code notwendig:


Wird diese Szene ausgeführt, ändert sich das Icon des virtuellen Devices mit der ID 254.

Icon Vorher Nachher

Icon Vorher Nachher

Virtuelle Devices

Dieser Lua Code kann auch innerhalb von virtuellen Devices verwendet werden. So kann das – zusätzlich zu den eigentlichen Aktionen – beim Betätigen eines VD Buttons das Icon geändert werden und damit der aktuellen Status visualisiert werden.

Icon über VD ändern

Icon über VD ändern

Im Standard erfolgt diese Zuweisung über einen „Change Icon“ Dialog für jeden im VD verfügbaren Knopf. Bei der Erstellung eines komplexen VD mit mehreren Buttons ist hier also entweder dieser Lua Code zu verwenden oder ein eigenes Icon über den Dialog auszuwählen. Der Lua Code lässt sich auch wunderbar im Main Loop des VD platzieren. Der Lua Code im Main Loop eines virtuellen Devices wird zyklisch (etwa alle 1-2 Sekunden) ausgeführt und so lässt sich die Aktualisierung des Icons, unabhängig vom betätigten Button, dort hinterlegen. So ist sichergestellt, dass das VD immer über ein Icon verfügt und der kleine blaue Würfel verschwindet.

Der Autor

Moin, ich heiße Bastian und bin Autor dieser kleinen bescheidenen Seite. Zwanghaft, ja fast schon neurotisch beschäftige ich mich seit Jahren mit jedem erdenklichen technischen Schnick-Schnack. Nichts, was einen Stecker hat ist vor mir sicher. So war es klar, dass ich eines Tages das Haus auf den Kopf stellen und alles vernetzen würde.

Da ich bei meinem Vorhaben sehr viel Hilfe und Unterstützung in diversen Foren, Blogs und Boards erfahren habe, möchte ich diesen Blog zum sammeln meiner Smarthome- und Technikerrungenschaften nutzen um der Community zumindest ein klein wenig was zurückgeben zu können.

Artikel teilen