Hallo Gemeinde,
ich wollte die aktuellen Zustände meiner HomeMatic Funk-Fenster-Drehgriffkontakte HM-Sec-RHS unter Tablet UI darstellen. Leider habe ich hierzu nichts gefunden und so habe ich mich selbst rangemacht und probiert.
Ziele:
1. Darstellung der drei Zustände Open / Tilted / Closed (Offen / Gekippt / Geschlossen) als verschiedene Icons.
2. Farbliche Veränderung des Icons / Hintergrunds je nach Zustand. Offen = Rot. Gekippt = Gelb. Geschlossen = Grün.
Hier der Code am Beispiel unserer Balkontür als einzelne Kachel. Der Hintergrund verändert sich farblich.
Wichtiger Hinweis: FHEMWiki müssen die Präfixe vor den Icons beachtet werden! Die geklappte Tür ist in einem abweichenden Verzeichnis, keine Ahnung warum.
<header>Wohnzimmer</header>
<div
data-type="symbol"
data-device="HM-Sec-RHS.WZ-Balkon"
data-states='["open","tilted","closed"]'
data-icons='["oa-fts_door_open","fs-fts_door_tilt","oa-fts_door"]'
data-color="#2A2A2A"
data-background-colors='["#c0392b","#f1c40f","#27ae60"]'
data-background-icon="fa-square"
class="cell small"
>
</div>
<div data-type="label" class="narrow darker">Balkontür</div>
Für ein Fenster sieht das dann so aus. Hier einzeln mit farbigem Icon:
<div class="left">
<div data-type="label" class="narrow darker">Wohnzimmer Fenster</div>
<div data-type="symbol"
data-device="HM-Sec-RHS.WZ-Fenster"
data-states='["open","tilted","closed"]'
data-icons='["oa-fts_window_1w_open","oa-fts_window_1w_tilt","oa-fts_window_1w"]'
data-colors='["#e74c3c","#f1c40f","#2ecc71"]'
>
</div>
Snippets dürfen und sollen natürlich frei von Euch benutzt werden. Gern auch in die User-Demos rein damit.
Gruß
Daniel