Basics: Icons verwenden

Advertisements

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:

fibaro:call(254, "setProperty", "currentIcon", 23)

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.

Posted in Basics and tagged .

10 Comments

  1. Pingback: Heizplan temporär ändern | Mein kleiner Smart Home Blog

  2. Hallo Bastian,
    danke Dir für dein ausführlichen und profunden Erläuterungen.
    Aber gerade zu Türsensor-Icon habe ich noch eine Frage.
    Dort gibt es den aktiv/inaktiv Upload. Ich hab mir aus den Us-Forum die Türe mit der Glühbirne geholt und die Bilder auf dem Pc gespeichert und für aktiv und inaktiv ins HC2 geladen.
    Es scheint aber nur nötig zu sein dass man das PNG -File ein mal hochlädt, es beinhaltet beide Bilder. Es wird auch das Richtige je nach Zustand angezeigt. Wie das funktioniert- keine Ahnung. Wenn ich aber ein anderes Icon für aktiv verwenden wollte und bei dem hochgeladenen für inaktiv bleiben wollte wie würde das dann funktionieren?

    Gruß
    Gerhard

    • Hallo Gerhard,

      interessant. Das höre ich zum ersten Mal. Welches Icon hast Du denn eingebunden, bzw. wo finde ich dieses? Dann gucke ich mir das gern mal an und arbeite es auch in den Artikel ein.

      Danke und Gruß
      Bastian

    • Hallo Gerhard,

      ich habe mir die Icons einmal angesehen. Das von Dir geschilderte Verhalten kann ich aber nicht nachvollziehen. Wenn ich lediglich ein Icon für inkativ hochladen möchte, erhalte ich die Meldung: „Fehler. Die Symbole sind zu groß oder die Zahl der Symbole entspricht nicht den Zuständen des Gerätes.“.

      Gruß
      Bastian

  3. Ich hatte erst beide Icons gespeichert und dann hoch geladen. Dann hatte ich das Icon Tür offen doppelt und Tür zu gar nicht (in der Iconverwaltung). Daraufhin habe ich beide Icons gelöscht und nur Tür zu hochgeladen. In der Iconverwaltung hatte ich dann als individuelles wieder Tür offen sichtbar. Das habe ich aktiviert und siehe da bei geschlossenem Türkontakt sah ich Tür zu im Bereich „Ihr Haus“ und Tür offen bei offenem Kontakt. Ich hab nicht das Icon aus dem Beitrag direkt kopiert, sondern es erst geöffnet, (dann kann man ja weiterblättern) und dann kopiert. Aber definitiv beim zweiten mal nur eines hochgeladen. Mein PNG-file hat 25 KB.
    Besser kann ich es leider nicht beschreiben. Ich muss noch mal nachsehen. Ich glaube auch weder an Zauberei noch bin ich einer von den Unglaublichen 🙂

    Gruß
    Gerhard

  4. Hallo,
    kennt zufällig jemand einen Weg, wie man für ein Gerät, welches die HC2 nicht erkennt (Modulart: „Unbekanntes Z-Wave Gerät“) das Icon ändern kann?
    Beste Grüße, Rüdiger

    • Hallo Rüdiger,
      unbekanntes Z-Wave Gerät? Ist mir so bisher nicht begegnet. Oder meinst Du ein Gerät ohne Template? Das Gerät müsste doch wenigstens eine Geräteart haben.
      Wenn Du kannst, dann poste mal bitte die Json Ausgabe.

      Gruß
      Bastian

      • Hallo Bastian,
        es handelt sich um den Z-Wave Range Extender von Aeon Labs.

        Unter „Module“ erscheint er im HC2 mit folgenden Angaben:

        Modulart: Unbekanntes Z-Wave Gerät
        Hersteller: AEON Labs
        Version: 1.6
        Konfiguration: Modul konfiguriert

        Es ist aber das einzige Modul, bei welchem links unter dem Bild der Button „Icon ändern“ fehlt.

        Beste Grüße, Rüdiger

        • Hallo Rüdiger,

          ich habe keinen Range Extender im Einsatz, daher ist mir dies noch nicht untergekommen ist.
          Die Icons werden vom HC2 nach Gerätetyp zugeordnet. Ohne Gerätetyp kein (automatisches) Icon. Warum es keine manuelles Zuordnung gibt weiß ich leider nicht.

          Möglicher Lösungsansatz ist die API. Hier taucht bei bekannten Geräten eine Icon ID auf die ggf. auch änderbar ist. Ähnlich der Änderung des Templates für die Sensitive Strips in der Version 0.6.

          Gruß
          Bastian

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ich akzeptiere