Hallo zusammen,
ich wollte etwas eigentlich "gaaanz" einfaches machen: Um zwei andere Widgets sollte einen roten Rahmen, wenn ein bestimmtes Reading "Ja" wird - und sonst nicht.
Da ich auf die schnelle nix gefunden habe, ist dafür ein sehr kleines und simples Widget für die aktuelle Eval-Version (!) entstanden, mit dem man die css-Klasse eines divs in Abhängigkeit eines Readings setzen kann. Ist daher etwas für "Fortgeschritte" - insbesondere muss man sich grundlegend mit CSS auskennen.
Den besagten roten Rahmen macht damit man z.B. so:
<div data-type="classchanger"
data-device="dummyDevice"
data-get="meinReading"
data-get-on="ja"
data-on-class ="roterRahmen"
class = "meineButtonsammlung">
<div data-type="symbol"
data-device="meinDummy1"></div>
<div data-type="symbol"
data-device="meinDummy2"></div>
</div>
Hier werden einfach die entsprechenden Widgets, die wir umranden wollen, in das classchanger-widget hineingepackt. Dem äußeren div, das von Haus aus nur die Klasse "meineButtonsammlung" hat, wird entsprechend eines Readings von "dummyDevice" die Klasse "roterRahmen" zusätzlich gegeben - bzw. wieder weggenommen, wenn das Raeading nicht "ja" ist. Die CSS-Klassen legen wir dazu natürlich auch noch an ...
div.meineButtonsammlung {
padding:5px;
border-radius:5px;
}
div.roterRahmen {
background-color:#880000;
border: 1px solid red;
}
... fertig! Natürlich ist es auf diese Weise auch möglich, mehrere Symbole komplett auszublenden (per display:none), umzufärben und per css selektoren auch noch einzelne Unterelemente gezielt zu beeinflussen etc. Ach ja: mit off geht es genauso, das heißt man kann noch eine off-Klasse und einen off-wert definieren und zwischen beiden Klassen hin- und herschalten.
Vielleicht hilft es ja dem ein oder anderen :-)
Edit: Beispiel korrigiert, danke 50watt!
Na fein, das hatte ich auch schon vor, in ein eigenes Widget zu packen, aber da das Label-Widget diese Funktionalität schon mitbringt, haben ich den Gedanken wieder verworfen.
Hu, das geht? Hab ich wohl überlesen - hab aber zugegebenerweise auch nicht lang nach gesucht - dank der sehr tollen Struktur von Tablet UI ging das sehr einfach zu bauen ;)
Ja, wenn man nach "data-classes" sucht, findet man 2,3 Sachen.
https://forum.fhem.de/index.php/topic,53868.msg455225.html#msg455225
Aber als spezielles Plugin/Widget ist das bestimmt optimaler gelöst.
@peterk_de: Danke für das classchanger widget. Würde mich freuen, wenn das in die "default widgets" mit aufgenommen werden kann, idealerweise mit
div.hide {
display: none;
} zum Ausblenden von Widgets abhängig von readings.
Im Beispielcode ist ein Fehler. Es sollte wohl "data-on-class" und nicht data-class-on heißen. Detto data-off-class
<div data-type="classchanger"
data-device="dummyDevice"
data-get="meinReading"
data-get-on="ja"
data-on-class="roterRahmen"
class = "meineButtonsammlung">
<div data-type="symbol"
data-device="meinDummy1"></div>
<div data-type="symbol"
data-device="meinDummy2"></div>
</div>
Hab's mit ins Repository übernommen.
Danke für die Arbeit
Hi,
klappt auch mit "Wenn ein Reading nicht existiert, zeige das eingebettet Widget nicht an"
<div data-type="classchanger"
data-device="par_HZ_dev"
data-get="R-btnLock"
data-get-on='["on","off","set_on","set_off"]'
data-off-class="hide"
data-on-class="small inline left-narrow right-narrow-10" >
<div
data-type="switch"
data-device="par_HZ_dev"
data-get="R-btnLock"
data-states='["on","off","set_on","set_off"]'
data-set-states='["regSet btnLock off","regSet btnLock on","",""]'
data-icons='["oa-secur_locked","oa-secur_open","oa-secur_locked fa-blink","oa-secur_open fa-blink"]'
data-colors='["red","green","red","green"]'
data-background-icons='["","","",""]'
data-background-colors='["SeaGreen","IndianRed","SeaGreen","IndianRed"]' >
</div>
</div>