Autor Thema: warn-icon  (Gelesen 823 mal)

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3922
  • FHEM TabletUI
    • FHEM Tablet UI
warn-icon
« am: 14 August 2018, 08:23:10 »
es gab ein Update bei famultibutton-ähnlichen Widgets (Symbol, Switch, Push usw.)

neu:

data-warn-icon

Damit kann man andere Symbole rechts oben anzeigen als nur die roten Kreise.

Beispiel: ein Schloss-Symbol, wenn die Tür abgeschlossen ist. Das Symbol zeigt primär, ob die Tür offen oder zu ist.

<div data-type="symbol" class="big height-narrow"
data-device="Eingangstuer" data-icon="ftui-door" 
data-warn="EingangstuerRiegel:state"
data-warn-on="closed" 
data-warn-off="open"
data-warn-icon="fa-lock large fa-fw"
data-warn-color="#d44"
data-warn-background-color="transparent"></div>


btw.: ich benutze bei mir schon Fontawesome-5 Icons => siehe Switch oben mit dem neuen Lampen-Symbol.
Die Änderung ist optisch etwas gewöhnungsbedürftig  ;)

https://fontawesome.com/icons?d=gallery&m=free

Die Namen bleiben abwärts-kompatibel, aber sehen dann vielleicht etwas anders aus.
Update werde ich demnächst vorbereiten.
« Letzte Änderung: 14 August 2018, 08:25:27 von setstate »
Gefällt mir Gefällt mir x 3 Liste anzeigen

Offline tomster

  • Sr. Member
  • ****
  • Beiträge: 914
Antw:warn-icon
« Antwort #1 am: 14 August 2018, 10:10:25 »
Großartig! Auf DAS warte ich schon lange.
Wenn es die Funktion auch noch in das Weather Widget schafft, dann glaub ich wär ich am Ziel...

Vielen, vielen Dank aber schon Mal, setstate!
« Letzte Änderung: 14 August 2018, 10:26:04 von tomster »

Offline Waldmensch

  • Sr. Member
  • ****
  • Beiträge: 791
Antw:warn-icon
« Antwort #2 am: 27 April 2019, 17:08:43 »
Ich muss mal den Fred hochholen

Ich möchte das Das Warn Icon nutzen, um den Status meines Photovoltaik Speichers anzuzeigen (siehe Screenshot). Das Warnsymbol soll über ein on/off reading (Wechselrichter1:Bat_DrainState) eingeblendet werden. Der Blitz soll grün bei Ladung sein und rot bei Entladung. Ich habe ein Reading (Wechselrichter1:Bat_Drain), was mir den jeweiligen Farb Hexcode zur Verfügung stellt. Scheinbar akzeptiert das Attribut data-warn-color kein Reading. Trage ich dort einen festen Hexwert ein, wird er dargestellt. Mit einem Reading bleibt der Blitz weiß. Liegts an mir?

<div data-type ="symbol"
data-device ="Wechselrichter1"
data-limits ='[1,25,50,75,99]'
data-colors ='["#FF0000","#FFC300","#3FFF33","#3FFF33","#3FFF33"]'
data-get="Bat_SoC"
data-icons='["fa-battery-empty blink","fa-battery-quarter", "fa-battery-half", "fa-battery-three-quarters", "fa-battery-full"]'
data-warn-background-color="transparent"
data-warn="Wechselrichter1:Bat_DrainState"
data-warn-color="Wechselrichter1:Bat_Drain"
data-warn-on="on" 
data-warn-off="off"
data-warn-icon ="fa-bolt"
class="big right-space top-space-2x">
</div>

Ich weiß wie die Forumssuche funktioniert und ich kenne auch das Wiki und die commandref.

Offline somansch

  • Full Member
  • ***
  • Beiträge: 283
Antw:warn-icon
« Antwort #3 am: 19 Mai 2019, 13:00:06 »
Hallo @setstate,

ich nutze "data-warn-icon" nun schon umfangreich. Ist das eigentlich schon irgendwo dokumentiert?!

Ich hätte einen Feature-Requests dazu:
  • auch für data-type "Label": Dies ist hilfreich, wenn man den Ausfall des Temperatursensors direkt bei der Anzeige der Temperatur visualisieren möchte

Danke und Gruß
Andreas

Offline Ulm32b

  • Full Member
  • ***
  • Beiträge: 334
Antw:warn-icon
« Antwort #4 am: 20 Mai 2019, 01:35:19 »
... ich nutze "data-warn-icon" nun schon umfangreich.
Ich hätte einen Feature-Requests dazu:
  • auch für data-type "Label": Dies ist hilfreich, wenn man den Ausfall des Temperatursensors direkt bei der Anzeige der Temperatur visualisieren möchte
Diese Anforderung lässt sich doch auch mit Bordmitteln lösen: Mittels data-hide bei Vorliegen eines Fehlers (geeignetes Reading auslesen) das Label aus- und ein selbst bestimmtes Symbol einblenden, ggf. ergänzt um einen ebenfalls eingeblendeten Warntext.

Offline somansch

  • Full Member
  • ***
  • Beiträge: 283
Antw:warn-icon
« Antwort #5 am: 22 Mai 2019, 23:30:02 »
Diese Anforderung lässt sich doch auch mit Bordmitteln lösen: Mittels data-hide bei Vorliegen eines Fehlers (geeignetes Reading auslesen) das Label aus- und ein selbst bestimmtes Symbol einblenden, ggf. ergänzt um einen ebenfalls eingeblendeten Warntext.

Ich denke nicht, das folgende Anforderung im Moment realisierbar ist:

- die Temperatur wird als Label angezeigt
- wenn das Device-Reading "active" nicht "ok" ist, soll ein rotes Ausrufezeichen rechts oben zusätzlich auf der Temperatur angezeigt werden

Falls du eine Lösung hast, gerne posten  ;)

Danke vorab
Andreas

Offline yersinia

  • Full Member
  • ***
  • Beiträge: 195
    • Cyanide & Happiness
Antw:warn-icon
« Antwort #6 am: 23 Mai 2019, 09:31:34 »
Ich vermute worauf Ulm32b hinaus will ist, dass es durchaus mit CSS gehen könnte. Theoretisch kann ich mir sowas vorstellen:
- die Temperatur wird als Label angezeigt: eigenes widget_label wie gehabt
- wenn das Device-Reading "active" nicht "ok" ist, soll ein rotes Ausrufezeichen rechts oben zusätzlich auf der Temperatur angezeigt werden: zusätzliches widget_symbol mit data-hide* auf den nicht gewünschten Wert inkl Farbe. Allerdings müsste man diesen div container dann via eigener CSS Klasse oder inline CSS (style="") positionieren. Das könnte aber in Frickelei ausarten....
viele Grüße, yersinia
----
FHEM 5.9 on RPi 3B with Raspian Stretch (perl 5.24.1) | FTUI
nanoCUL@a-culfw-> 2x868 (1x ser2net), 1x433 | ESPEasy
VCCU->7xHM-CC-RT-DN, 5xHM-LC-Bl1PBU-FM, 14xHM-SEC-SCo, 1xHM-PB-2-WM55, 1xHM-LC-Sw1PBU-FM, 1xHM-ES-PMSw1-Pl

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3922
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:warn-icon
« Antwort #7 am: 23 Mai 2019, 09:45:07 »
Ich hatte dazu schon etwas probiert. Ich schaue mal nach...

Offline Ulm32b

  • Full Member
  • ***
  • Beiträge: 334
Antw:warn-icon
« Antwort #8 am: 23 Mai 2019, 16:39:47 »
Ich vermute worauf Ulm32b hinaus will ist, dass es durchaus mit CSS gehen könnte. Theoretisch kann ich mir sowas vorstellen:
- die Temperatur wird als Label angezeigt: eigenes widget_label wie gehabt
- wenn das Device-Reading "active" nicht "ok" ist, soll ein rotes Ausrufezeichen rechts oben zusätzlich auf der Temperatur angezeigt werden: zusätzliches widget_symbol mit data-hide* auf den nicht gewünschten Wert inkl Farbe. Allerdings müsste man diesen div container dann via eigener CSS Klasse oder inline CSS (style="") positionieren. Das könnte aber in Frickelei ausarten....
Stimmt, vor allem der Hinweis auf die "Frickelei".

Eigentlich habe ich aber den Begriff "Anforderung" etwas allgemeiner ausgelegt.
Zitat
Ich denke nicht, das folgende Anforderung im Moment realisierbar ist:
- die Temperatur wird als Label angezeigt
- wenn das Device-Reading "active" nicht "ok" ist, soll ein rotes Ausrufezeichen rechts oben zusätzlich auf der Temperatur angezeigt werden
Verstehe ich das richtig, dass eine Temperatur angezeigt werden soll, von der man weiß, dass sie falsch ist?  ???  ???
Mein Vorschlag lautet, sich bei ausgefallenem Sensor auf den Hinweis zu beschränken, dass aktuell keine Temperatur verfügbar ist. Dies könnte durch ein Warn-Icon und vielleicht den Text "Temp n/a" o.ä. erfolgen. Und das geht mit den aktuell verfügbaren Widgets via data-hide. Aber jeder wie er mag.
« Letzte Änderung: 23 Mai 2019, 17:13:08 von Ulm32b »

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3922
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:warn-icon
« Antwort #9 am: 23 Mai 2019, 22:19:25 »
<li data-row="1" data-col="6" data-sizex="3" data-sizey="2">
    <header>Badge</header>
    <div class="hbox">
        <div class="white">Room1</div>
        <div class="badge" data-type="html" data-content="family:residentsTotalPresent" data-class="family:residentsTotalPresent" data-map-class='{"0":"hide", ".*":"show"}'>0</div>
    </div>
</li>

<li data-row="10" data-col="6" data-sizex="2" data-sizey="3">
  <header>Badge</header>
  <div class="hbox">
    <div class="tall thin" data-type="label" data-device="KellerClimateSensor" data-get="temperature"  data-unit="°C"></div>
    <div class="badge big" data-type="html" data-class="KellerClimateSensor:error" data-map-class='{"0":"hide", ".*":"show"}'>!</div>
  </div>
</li>

Oder anstatt hbox geht auch inline

<li data-row="14" data-col="6" data-sizex="2" data-sizey="3">
  <header>Badge</header>
  <div>
    <div class="tall thin inline" data-type="label" data-device="KellerClimateSensor" data-get="temperature"  data-unit="°C"></div>
    <div class="badge big inline" data-type="html" data-class="KellerClimateSensor:error" data-map-class='{"0":"hide", ".*":"show"}'>!</div>
  </div>
</li>

eine kleine Änderung bei der CSS class .badge war nötig (im aktuellen Update zu finden)

Offline somansch

  • Full Member
  • ***
  • Beiträge: 283
Antw:warn-icon
« Antwort #10 am: 23 Mai 2019, 23:00:42 »
Funktioniert bei mir. Habe noch die Background-Farbe angepasst. Ist zwar nicht das gleiche "!", kann ich aber mit Leben  :)

Danke dir
Andreas

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3922
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:warn-icon
« Antwort #11 am: 23 Mai 2019, 23:10:36 »
ja, background color einfach per class anpassen. Gegebene nutzen oder per user-css. Am besten, nicht zu viele unterschiedliche Farben. Weniger ist mehr!

div class="badge big bg-orange"

Offline Waldmensch

  • Sr. Member
  • ****
  • Beiträge: 791
Antw:warn-icon
« Antwort #12 am: 24 Mai 2019, 23:45:18 »
@setstate, kannst Du nochmal schauen, warum sich data-warn-color nicht von einem Reading setzen lässt, sondern nur mit Hexwert hardcoded funktioniert? (s. letzen Beitrag von mir weiter oben)
Ich weiß wie die Forumssuche funktioniert und ich kenne auch das Wiki und die commandref.