Picture-elements // state-label Hintergrund nach Zustand färben

Dashboard/Cards/Frontend
,
1

Hallo zusammen,

Ich habe folgenden YAML leider bekomme ich nicht das gewünschte Ergebnis.

type: picture-elements
image: /api/image/serve/f7d9f173a8ef4f3798fba1788edbc0e4/512x512
elements:
  - type: state-label
    entity: sensor.drachenbaum_wohnzimmer_soil_moisture
    prefix: "Bodenfeuchte "
    style:
      left: 65%
      top: 90%
      transform: translate(-50%, -50%)
      font-size: 2em
      color: white
      border-radius: 10px
      opacity: 0.7
      background-color: |
        {% if is_state('sensor.drachenbaum_wohnzimmer_water_warning', 'alarm') %}
          red
        {% elif is_state('sensor.drachenbaum_wohnzimmer_water_warning', 'none') %}
          blue
        {% else %}
          grey
        {% endif %}

Vergebe ich eine feste Farbe, z.B. blue, ist der Hintergrund eingefärbt. wenn ich unter Entwicklerwerkzeug die “if-Funktion” teste, bekomme ich den korrekten Wert zurück, aber im Bildelement bekomme ich nicht den gewünschten Hintergrund. er bleibt Transparent.

Hat einer eine Idee warum?

Gruß
Dennis

PS: auch wenn ich card-mod nutze, bekomme ich das gleiche Ergebnis…

2

Ich meine picture-elements kann template nicht. Du nutzt card_mod? Was hast du damit schon versucht?

    card_mod:
      style: |
        :host {
          background-color:
            .....
3

Hallo, danke für den Tipp, das hatte ich aber zuvor auch ausprobiert, dies hat auch nicht funktioniert… mittlerweile bin ich so weit, dass ich den Text selber einfärben kann, indem ich folgendes nutze:

type: picture-elements
image: /api/image/serve/f7d9f173a8ef4f3798fba1788edbc0e4/512x512
elements:
  - type: state-label
    entity: sensor.drachenbaum_wohnzimmer_soil_moisture
    style:
      left: 65%
      top: 90%
      transform: translate(-50%, -50%)
      font-size: 1.5em
      color: white
      border-radius: 10px
      opacity: 0.7
    prefix: "Bodenfeuchte: "
card_mod:
  style:
    hui-state-label-element $: |
      {% if is_state('sensor.drachenbaum_wohnzimmer_water_warning', 'alarm') %}
        div {color:red;}
      {% elif is_state('sensor.drachenbaum_wohnzimmer_water_warning', 'none') %}
          div {color:blue;}
        {% else %}
          div {color:gray;}
        {% endif %}

leider habe ich bisher nicht das Element gefunden, welches genau dies mit dem state Label Hintergrund macht.

4

Jetzt habe ich es mit hilfe von Gemini gelöst!

type: picture-elements
image: /api/image/serve/f7d9f173a8ef4f3798fba1788edbc0e4/512x512
elements:
  - type: state-label
    entity: sensor.drachenbaum_wohnzimmer_soil_moisture
    style:
      left: 65%
      top: 90%
      transform: translate(-50%, -50%)
      font-size: 1.5em
      color: white
      border-radius: 10px
      opacity: 0.7
    prefix: "Bodenfeuchte: "
card_mod:
  style:
    hui-state-label-element $: |
      {% if is_state('sensor.drachenbaum_wohnzimmer_water_warning', 'alarm') %}
        div {background-color:red;}
      {% elif is_state('sensor.drachenbaum_wohnzimmer_water_warning', 'none') %}
          div {background-color:blue;}
        {% else %}
          div {background-color:gray;}
        {% endif %}