FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Flexstarr am 19 September 2016, 20:19:07

Titel: Symbol Widget abhängig von mehreren Readings
Beitrag von: Flexstarr am 19 September 2016, 20:19:07
Hallo,
ich überlege, wie ich ein Symbol darstelle, dass abhängig vom reading "location" und "state" entsprechend Symbole darstellt.

Bsp:
location=home & state=present  --> Icon1
location=home & state=absent  --> Icon1 warn (zuletzt zuhause, aktuell nicht mehr)
location=work & state=present --> Icon2
location=work & state=absent --> Icon2 warn (zuletzt auf der Arbeit, aktuell nicht mehr)

Lässt sich das umsetzen?
Titel: Antw:Symbol Widget abhängig von mehreren Readings
Beitrag von: peterk_de am 19 September 2016, 20:33:58
such mal nach dem classchanger widget :-)
Titel: Antw:Symbol Widget abhängig von mehreren Readings
Beitrag von: Flexstarr am 19 September 2016, 20:42:13
Gesucht und gefunden.  ;D
Aber noch nicht ganz verstanden..

Kannst du mir den Code entsprechend anpassen, damit es auf mein Bsp passt?
<div data-type="classchanger"
     data-device="dummyDevice"
     data-get="myReading"
     data-get-on="yes"
     data-on-class="border-red"
     class="container bg-gray">

  <div data-type="symbol"
       data-device="myDummy1"></div>

  <div data-type="symbol"
       data-device="myDummy2"></div>

</div>
Titel: Antw:Symbol Widget abhängig von mehreren Readings
Beitrag von: setstate am 20 September 2016, 10:14:00
Eine logische Verknüpfung von Readings würde ich im FHEM als Userreading bauen und im UI nur 1:1 anzeigen.
Titel: Antw:Symbol Widget abhängig von mehreren Readings
Beitrag von: peterk_de am 20 September 2016, 10:41:05
Z.B. so:


<div data-type="classchanger"
     data-device="myPosition"
     data-get="state"
     data-get-on="absent"
     data-on-class="warn">

  <div data-type="symbol"
       data-device="myPosition"
       data-get="location"
       data-get-on='["home","work"]'
      data-icons='["fa-home","fa-office"]'></div>
     
</div>     


Wenn der State "absent" ist, wird dem Symbol.Widget die css-Klasse "warn" hinzugefügt. In deine CSS-Datei muss dann, wie du das Warning hervorheben möchtest, z.B. durch einen roten Hintergrund wäre so:


.warn {
  background-color: red;
}
Titel: Antw:Symbol Widget abhängig von mehreren Readings
Beitrag von: Flexstarr am 20 September 2016, 19:11:23
Danke euch beiden für die Lösungen!