CSS-Klasse entsprechend Reading ändern

[peterk_de]

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:

Code Auswählen Erweitern


<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 ...

Code Auswählen Erweitern



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!

[setstate]

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.

[peterk_de]

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

[setstate]

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.

[50watt]

@peterk_de: Danke für das classchanger widget. Würde mich freuen, wenn das in die "default widgets" mit aufgenommen werden kann, idealerweise mit

Code Auswählen Erweitern

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>    

Code Auswählen Erweitern

[setstate]

Hab's mit ins Repository übernommen.
Danke für die Arbeit

[Tobias]

Hi,
klappt auch mit "Wenn ein Reading nicht existiert, zeige das eingebettet Widget nicht an"

Code Auswählen Erweitern

              <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>