Aufwerten von FHEM-Devices durch Icons

FHEM bietet von sich aus viele Icons an. Beginnend bei einfachen Glühbirnen bis hin zu komplexen Icons für diverse Szenarien. 

Es gibt unterschiedliche Wege in FHEM diese Icons den Devices zuzuordnen. In diesem Beitrag möchte ich euch den Umgang mit den Icons etwas näher bringen und erklären, welche Möglichkeiten ihr habt eure Devices durch anschauliche Icons aufzuwerten. Dazu werde ich auf die drei Attribute "icon", "devStateIcon" und "cmdIcon" eingehen.

Im Grunde unterscheidet man zwischen zwei Arten von Icons. Zum Einen die normalen Device-Icons und zum Anderen die State-abhängigen Icons. 

icon - Device Icons

Die Device Icons dienen lediglich dazu, die Devices in FHEM etwas visuell aufzupeppen und die Übersicht zur erhöhen. Oft geht es schneller, das gewünschte Device anhand seines Icons zu finden anstatt über seinen Namen. 

In diesem Fall zum Beispiel Icons für das Deckenlicht, die Hängelampe oder die Stehlampe. Durch die passenden Symbole kann man diese schnell wiederfinden. 

Einstellen lassen sich diese Icons über das Attribut "icon":

attr WZ_Stehlampe icon light_floor_lamp

Problem bei dieser Vorgehensweise ist, dass man die Icons mit Name kennen muss. Bei einfachen Icons wie die Glühbirne oder die Steckdose ist das vielleicht noch möglich, möchte man jedoch komplexere Icons einsetzen, hat man den Namen nicht unbedingt parat.

Aus diesem Grund gibt es die Möglichkeit, die Icons über die Weboberfläche zu setzen. Erreichen kann man diese über die Detailseite des entsprechenden Devices. Unter der Tabelle der Attribute befindet sich der Link "Select icon" zum Setzen des Device-Icons.

Hier kann man nun durch einfaches Anklicken das gewünschte Icon auswählen.

devStateIcon - abhängige Icons 

Neben den einfachen Device-Icons gibt es die abhängigen Icons. Die sogenannten "devStateIcons". Diese Icons können so eingerichtet werden, dass je nach Status des Devices ein anderes Icon gezeigt wird. Als Bezugspunkt wird hier das Reading "state".

Wie man an den beiden Bilder gut erkennt, ändert sich das Bild sobald die entsprechenden Devices angeschaltet werden. Die Möglichkeiten dieser abhängigen Icons sind Vielfältig. Beginnend bei einfachen Glühbirnen, die je nach Status leuchten bzw. nicht leuchten oder Icons, welche die Helligkeit und die eingestellte Farbe einer Lampe wiederspiegeln. 

Diese Vielfältigkeit macht jedoch auch das Einrichten etwas komplizierter. Eingerichtet wird es über das Attribut "devStateIcon". Die Definition kann über zwei Wege erfolgen.

Weg 1

Die erste Definition folgt dabei folgenden Syntax:

attr WZ_Stehlampe devStateIcon regexp:icon-name:cmd

"regexp" steht dabei für den aktuellen Status von "state". "Icon" beschreibt das Icon, welches bei diesem Status angezeigt wird. Mit "cmd" lässt sich der Status festlegen,  welcher gesetzt werden soll, wenn auf das Icon geklickt wird. "icon-name" und "cmd" kann dabei weggelassen werden. Mehrere Einträge werden durch Leerzeichen voneinander getrennt.

Zur Veranschaulichung nehmen wir mal das devStateIcon mit der leuchtenden Glühbirne:

attr WZ_Stehlampe devStateIcon on:on:off off:off:on

"on:on:off" ist für das Icon im eingeschalteten Zustand. Das erste "on" steht dabei für den state-Zustand "on". Das zweite "on" beschreibt das Icon der leuchtenden Glühbirne, welches den Namen "on" hat. Das "off" steht für den Status, welcher beim Klicken auf die Glühbirne gesetzt werden soll. Der zweite Abschnitt "off:off:on" beschreibt dabei den umgekehrten Vorgang. Off-Status mit ausgeschalteter Glühbirne und on-Status beim Klicken.

Dieses Setting ist jetzt relativ unspektakulär und wird bei Devices mit dem Attribut "setList = on off" und "webCmd = on:off" sowieso automatisch gesetzt. Dennoch denke ich, dass diese Konstellation zur Veranschaulichung gut geeignet ist. 

Es lassen sich natürlich auch komplexere Konstellationen einrichten. Anhand eines weiteren Beispiels möchte ich diese nun etwas näher erklären.

Im obigen Bild sieht man eine grüne Steckdose, das Gerät ist also angeschaltet. Im unteren Bild ist die Steckdose rot und ist durch ein kleines Kreuz ergänz. Das Icon und die Farbe hat sich also geändert. Möglich ist dies durch den Einsatz von SVG-Icons. Diese erlaube, die Icons in eine gewünschte Farbe einzufärben.

attr WZ_TV devStateIcon on:message_socket_enabled@green:off off:message_socket_off@red:on

Es kommt also das Icon "message_socket_enable" und "message_socket_off" zum Einsatz. Durch die Erweiterung "@green" bzw. "@red" lässt sich das Icon in eine beliebige Farbe einfärben. Neben vordefinierte Farben wie red, Green, blue, yellow etc. lässt sich auch ein HEX-Farbcode verwenden. 

attr WZ_TV devStateIcon on:message_socket_enabled@00FF00:off off:message_socket_off@FF0000:on

Natürlich lässt sich auch das devStateIcon über die Weboberfläche einstellen. Dazu einfach über die Detailseite des Devices unten auf den Link "Extend devStateIcon" klicken.

Die Weboberfläche ähnelt der des normalen Icons, nur dass hier noch ein weiteres Feld vorhanden ist. 

Hier trägt man das "regexpt" ein, welches man sonst im Befehl eingetragen hat. In diesem Fall zum Beispiel "on". Anschließend kann man das gewünschte Icon anklicken und das Attribut "devStateIcon" wird dann entsprechend gesetzt, genau so als hätten man folgenden Befehl ausgeführt:

attr WZ_Stehlampe devStateIcon on:message_socket_enable

Anschließend kann man den Vorgang wiederholen mit dem regexp "off" und dem gewünschten Icon. Dies wird dann dem Attribut "devStateIcon" angehängt. Ähnlich dem Befehl:

attr WZ_Stehlampe devStateIcon on:message_socket_enable off:message_socket_off

Wie man sieht, kann man "cmd" nicht über das Webinterface auswählen. Man muss dies dann manuell durch bearbeiten des Attributs setzen. Auch eventuell Farbwünsche lassen sich nicht über das Webinterface auswählen. Dennoch hilft das Webinterface dabei, dass gewünschte Icon ausfindig zu machen.

Weg 2

Der zweite Weg beschreibt die Definition innerhalb geschweifter Klammern. Dies erlaubt das Ausführen komplexerer Funktionen oder den Einsatz von HTML-Strings.

Setzt man Code in den geschweiften Klammern zusätzlichen in <> wird der Code als HTML-String gesehen. So lassen sich zum Beispiel einfache geometrische Formen realisieren.

attr WZ_Stehlampe devStateIcon {'<div style="width:32px;height:32px;background-color:green"></div>'}

Obiger Befehl erzeugt zum Beispiel ein einfaches Rechteck mit der Größe 32px*32px und der Farbe grün. Das "/div" bewirkt das toggeln des Devices beim drauf klicken auf das Rechteck. 

Es lassen sich aber auch Funktionen aufrufen. Zum Beispiel MiLight-Devices stellen bereits eine Funktion zur Verfügung mit der das Icon sich je nach Farbe und Helligkeit ändert.

Die Funktion muss dann als Rückgabewert (bzw. String) den Syntax des ersten Weges haben ("regexp:icon-name:cmd"). Wie bereits erwähnt, gibt es bei den MiLight-Lampen bereits eine vordefinierte Funktion um das Icon wie auf dem Bild zu setzen.

attr WZ_Stehlampe devStateIcon {(MilightDevice_devStateIcon($name),"toggle")}

Da die MiLight-Funktion nur "regexp:icon-name" zurückgibt, kann der gewünschte Befehle "cmd" innerhalb von Anführungszeichen angegeben werden. In diesem Fall also "toggle". 

Es lassen sich aber natürlich auch eigene Funktionen erstellen und hier eingsetzen. 

cmdIcon - WebCMD-Einträge durch Icons ersetzen

Neben den beiden Attributen "icon" und "devStateIcon" gibt es noch das Attribut "cmdIcon". Mit diesem Attribut lassen sich Einträge, welche mit Hilfe des Attributs "webCmd" gesetzt wurden bestimmte Icons zuordnen.

Anhand des obigen Beispiels will ich euch dies nun etwas näher erläutern. Hier gibt es zu einem das normale Icon, die Musiknote. Dies wurde mit Hilfe des Attributs "icon" gesetzt. Rechts daneben kommt dann das nächste Icon, der grüne Kasten, welches mit Hilfe des Attributs "devStateIcon" gesetzt wurde. Danach folgen weitere Icons. Das Lautlossymbol und die beiden Icons für zurück und vorwärst. Diese wurde mit Hilfe des Attributs "cmdIcon" gesetzt. 

In diesem Fall wurde mit dem Attribut "webCmd" in das Device-Overview die Buttons volume, muteT, input, previous und next hinzugefügt. Ohne das "cmdIcon" Attribut würde nun der reine Text als Button erscheinen.

Mit Hilfe des Attributs "cmdIcon" lassen sich nun der Text durch Icons ersetzen. Der Syntax ist dabei wiefolgt  "webCmd:Icon-name". Mehrere Einträge werden durch Leerzeichen voneinander getrennt.

attr WZ_Stehlampe cmdIcon muteT:rc_MUTE previous:rc_PREVIOUS next:rc_NEXT

Das webCmd "muteT" wird dadurch durch das Icon "rc_MUTE" ersetzt und "previous" durch das Icon "rc_PREVIOUS" usw. 

Ich hoffe ich konnte euch die Icons etwas näher bringen und euch aufzeigen, wie einfach es ist in FHEM Devices mit Icons zu versehen.

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
Fotos und Bilder
 
 
 
sonstiges Dateiformat
 
 
 
wpDiscuz