Picture Element und color abhängig von Wert

[RudiP]

Ich habe eine Picture Element card, oder auf Deutsch Bildelemente-Karte.

title: Erdgeschoss
type: picture-elements
elements:
- type: state-label
entity: sensor.wohnzimmer_sensor_temperature
style:
top: 28%
left: 45%
color: black
- type: state-label
entity: sensor.wohnzimmer_luftfeuchtigkeit
style:
top: 22%
left: 57%
# color: {% if states('sensor.wohnzimmer_luftfeuchtigkeit'|int, > 60) %} red {%
# else %} green {% endif %};
card-mod:
style: |
:host {
{% if states('sensor.wohnzimmer_luftfeuchtigkeit')|int > 60 %}
color: red
{% else %}
color: black
{% endif %}
}

Wie man sieht habe ich schon ein paar Versuche gemacht, dem Label für die Luftfeuchtigkeit eine Farbe abhängig von der Luftfeuchtigkeit zu geben.
Funktioniert leider nicht.
Gebe ich in den Entwicklerwerkzeugen bei Template das hier ein

{% if states("sensor.wohnzimmer_luftfeuchtigkeit") | int > 70 %}
  color: red
{% else %}
  color: black
{% endif %}

wird mir korrekt "color: black" angezeigt, gebe ich anstelle der 70 mal 60 an, wird mit auch "color: red" angezeigt. Der aktuelle Wert des Sensor liegt bei 67.
Hier funktioniert es also, aber im Bildelement nicht.
Was mach ich nur falsch ?

 

[Nival]

Dafür musst Du über nen shadow-root gehen und dann das div ansprechen:

card_mod:
  style:
    hui-state-label-element $: |
     div {color:red;}

Färbt das Label entsprechend ein:

 

[RudiP]

Zeigt bei mir 0 Reaktion.

  - type: state-label
    entity: sensor.wohnzimmer_luftfeuchtigkeit
    style:
      top: 22%
      left: 57%
    card-mod:
      style:
        hui-state-label-element $: |
          div {color:red;}

Auch das ändern der position

  - type: state-label
    entity: sensor.wohnzimmer_luftfeuchtigkeit
    card-mod:
      style:
        hui-state-label-element $: |
          div {color:red;}
    style:
      top: 22%
      left: 57%

hilft nichts.

 

[Nival]

Du hast es auf - type: state-label bezogen, ich auf type: picture-elements - das dürfte es erklären (aus unerfindlichen Gründen hast Du beim initialen Beitrag vergessen als Code zu formatieren, ich konnte also eh nur raten).

Einmal der komplette Code der Karte inklusive Farbwahl:

type: picture-elements
elements:
  - type: state-label
    entity: input_number.xyz
    style:
      top: 28%
      left: 45%
image: https://demo.home-assistant.io/stub_config/floorplan.png
card_mod:
  style:
    hui-state-label-element $: >
      div {color: {%if (states('input_number.xyz') | int > 60)%} red {%else%} blue {%endif%} ;}

Das else blue ist nur zu Kontrollzwecken, kannst dann rausnehmen.

 

[RudiP]

Du hast es auf - type: state-label bezogen, ich auf type: picture-elements - das dürfte es erklären (aus unerfindlichen Gründen hast Du beim initialen Beitrag vergessen als Code zu formatieren, ich konnte also eh nur raten).

Puh, die Gründe kann ich mir auch nicht erklären.
Außer halt dicke Finger, dusselige Maus, verschmierte Brille. usw.

Einmal der komplette Code der Karte inklusive Farbwahl:

type: picture-elements
elements:
  - type: state-label
    entity: input_number.xyz
    style:
      top: 28%
      left: 45%
image: https://demo.home-assistant.io/stub_config/floorplan.png
card_mod:
  style:
    hui-state-label-element $: >
      div {color: {%if (states('input_number.xyz') | int > 60)%} red {%else%} blue {%endif%} ;}

Habe ich so kopiert und bei mir in ein neues Bildelement eingefügt, keine Reaktion.
Und ja, input_number.xyz habe ich durch meinen Sensor ersetzt. Alle beide.

Und, woher soll der Teil bei card_mod wissen, welches Label gemeint ist ? Was, wenn ich mehrere Label habe ?
Und warum muß ich überhaupt mit card_mod arbeiten. state-label hat ja selbst auch ein "color" Attribut.
Aber auch wenn ich es so mache

type: picture-elements
elements:
  - type: state-label
    entity: sensor.wohnzimmer_luftfeuchtigkeit
    style:
      top: 28%
      left: 45%
      color: >
        {%if (states('sensor.wohnzimmer_luftfeuchtigkeit') | int > 60)%} red
        {%else%} blue
        {%endif%} ;}
image: https://demo.home-assistant.io/stub_config/floorplan.png

dann wird gar nichts angezeigt.
Begreif ich nicht, warum es bei Dir geht und bei mir nicht, obwohl wir den selben Code nutzen.

 

[Nival]

keine Reaktion

Äh. Das ist sehr eigenartig. Du hast card_mod aber schon aktiv?

Und, woher soll der Teil bei card_mod wissen, welches Label gemeint ist ? Was, wenn ich mehrere Label habe ?

Muss man ggf. näher spezifizieren mittels CSS.

Und warum muß ich überhaupt mit card_mod arbeiten. state-label hat ja selbst auch ein "color" Attribut.

Das color von state-label kann meines Wissens nach leider nicht mit Templates umgehen.

 

[Nival]

Bzw. funktioniert es tatsächlich auch direkt bei dem Label:

type: picture-elements
elements:
  - type: state-label
    entity: input_number.xyz
    style:
      top: 28%
      left: 45%
    card_mod:
      style: >
          div {color: {%if (states('input_number.xyz') | int > 60)%} green {%else%} yellow {%endif%} ;}
  - type: state-label
    entity: input_number.xyz
    style:
      top: 25%
      left: 40%
    card_mod:
      style: >
          div {color: {%if (states('input_number.xyz') | int > 60)%} red {%else%} blue {%endif%} ;}
image: https://demo.home-assistant.io/stub_config/floorplan.png

 

[RudiP]

So, wenn ich Dir jetzt was sage, fällst Du aus allen Wolken.
Card_mod nutze ich intensiv, um z.B. Zeilen enger zu setzen bzw. zu positionieren. Wenn das nicht funktionieren würde, würde es mir auffallen.
Aber nun kommts.
Ich habe deinen Code eingefügt und es wurde nichts angezeigt.
Ich nutze in aller Regel den Chrome Browser und ja, ich hatte den Cache auch schon geleert.
Dann habe ich den selben HA in Microsoft Edge geöffnet, deinen Code eingefügt und..... er funktioniert.
Dann gespeichert und wieder im Chrome geschaut, da gehts nun auch.

Falls jemand dafür eine Erklärung hat, bin ich mal sehr gespannt.

Danke Dir für deine Engelsgeduld Nival.

 

[Nival]

Hübsch! Immer wieder eine Freude mit der Technik

Erinnert mich jetzt spontan stark an das, was ich hier am Ende erwähnte: https://forum.heimnetz.de/threads/shutter-card-einstellungen.5010/#post-50098 - Änderung an einer JS-Datei vorgenommen, nichtmal was mit HACS, im Debugger kontrolliert - nö, keine Änderung vorhanden, garnichts. Auch nicht mit Cache leeren. JS-Datei direkt aufgerufen, keine Änderung. Mit Strg + F5 neu geladen, ach da ist die Änderung ja, und ab dem Zeitpunkt auch innerhalb von HA.

Stur lächeln und winken oder so... manchmal reicht es zu wissen wie man einen Fehler behebt, ohne zu wissen weshalb er auftritt. Diese Resignation tritt mit den Jahren einfach ein.