09 Sonstige Customizations

Stylesheets

Das Aussehen von HomeHub kann mit der Datei custom/css/custom.css angepasst werden.

Das Stylesheet wird nach dem HomeHub Stylesheet aufgerufen. Es ist auch möglich, das komplette Design für einen einzelnen Menüeintrag zu verändern. Dazu muss eine HTML Datei für diese Kategorie angelegt werden und im Ordner app/Views/lowercase_category_name.html abgelegt werden.

Einfaches Beispiel: ändern der Farbe für die jeweils aktive Kategorie

 nav>a.selected {
 background-image: linear-gradient(to bottom left, darkblue, #292929);
 }

---

Text bei Variablen durch Icons ersetzen

Standardmäßig wird bei CCU Variablen der Typen Logik oder Werteliste der Variableninhalt als Text angezeigt.

Um diesen Text durch bedingungsabhängige Icons zu ersetzen, kann folgendermaßen vorgegangen werden:

• Eine CCU-Variable des Typs Zeichenkette anlegen, z.B.

• Ein CCU-Programm anlegen, das über Skripts, den jeweiligen Verweis zu den gewünschten Icons in diese Variable schreibt. Im Beispiel wurden virtuelle Taster als Trigger genutzt. Kann aber z.B. ein Tür-/Fensterkontakt mit dem entsprechenden Zustand (geschlossen, gekippt, geöffnet) sein, o.ä.

Skrip für HH4 Test VT1

 string icon = "<img srC=icon/edit_numeric_1.png>";
 
 dom.GetObject("HH_Test_IconChange").State(icon);

Skrip für HH4 Test VT2

 string icon = "<img srC=icon/edit_numeric_2.png>";
 
 dom.GetObject("HH_Test_IconChange").State(icon);

• In der custom.json dann die neue CCU-Variable einbinden (nach erneutem Import)

Einbinden in der custom.json

 {
 "name": "HH_Test_IconChange",
 "icon": "edit_numeric_0.png",
 "display_name": "HH_Test_IconChange-String",
 "color": "#00CC33"
 }

Angezeigt wird das dann so (hier wenn Taster "HH4 Test VT2" getriggert hat):

Diskussion zu dem Thema hier https://homematic-forum.de/forum/viewtopic.php?f=41&t=79208&p=797898#p797680

---

Geräte mit Statusmeldungen "state_icons"

Für Geräte, die Statusmeldungen wie 0,1,2 oder false,true zurück geben (z.B. Fenster-/Türkontakte, Kontaktschnittstelle,...) kann man die in HH vordefinierten, statusabhängigen Icons verändern. Beispiel

Einbinden in der custom.json

 {
 "name":"WZ-Fenster-links:1",
 "icon": "edit_numeric_0.png",
 "state_icons": "0,edit_numeric_0.png;1,edit_numeric_1.png",
 "display_name":"IconTest Fenster auf_zu",
 "color": "#00CC33"
 }

Wird kein Icon angezeigt, statt 0 und 1 mal false und true probieren oder umgekehrt. Wird das alte Icon angezeigt, mal einen Browser-Reload (mit gehaltener Shift-Taste) durchführen.