Icon-Frabe in „Custom-room-Card“ abhängig vom Entity-Zusatnd in unterschiedliche Farben ändern

[bergziege007]

Moin zusammen,

ich nutze als Übersicht die custom room card, und möchte ein Icon je nach Status einer Entität färben.

Konkret → “sensor.nachste_abholung” gibt folgenden Status aus: “Gelbe Tonne in 8 Tagen”; “Gelbe Tonne Morgen” etc.

Ich möchte aus dem String nur nach dem Wort “Gelb” / “Schwarz” / “Blau” suchen und entsprechend eine Farbe zuweisen.

Ich finde leider nirgends die korrekte Syntax. Weder per Google über Foren, noch per ChatGPT.

Hier Beispiele, was ich leider ohne Erfolg probiert habe:

- entity: sensor.nachste_abholung
        show_name: false
        show_state: true
        show_icon: true
        icon: mdi:trash-can
        style: |
          :host {
          --paper-item-icon-color: {% if 'Gelb' in states('sensor.nachste_abholung') %} red {% else %} grey {% endif %};
          }

if (entity.state.includes("on")) {

Ich finde massig Beispiele für Zahlenwerte < / >, für einen konkreten Status “off” / “on” etc., aber keine Beispiele für einen bestimmten String im Status.

Vielleicht hat jemand die korrekte Syntax parat.

Danke und viele Grüße

[anon76678013]

@bergziege007

paper-item-icon-color

gibbet nicht mehr.

Ich kenne diese custom card nicht; üblich ist die Syntax:

card_mod:
  style: |
    :host {
      --card-mod-icon-color:

Wenn du ein bestimmtes Wortteil suchst, gehst du mit einer regex-Suche auf Nr. Sicher.

{% if states('sensor.xxxxxxxxxxxxxxxxxxxxxxx') |regex_findall('gelb', ignorecase=true) %}red{% else %}grey{% endif %};

[bergziege007]

Erstmal vielen Dank für den Support!

Leider ohne Erfolg, Icon ändert die Farbe nicht.
Hab ich irgendwo eine falsche Einrückung?

- entities:
      - entity: sensor.nachste_abholung
        show_name: false
        show_state: true
        show_icon: true
        icon: mdi:trash-can-outline
        card_mod:
          style: |
            :host {
            --card-mod-icon-color: {% if states('sensor.nachste_abholung') |regex_findall('gelb', ignorecase=true) %}red{% else %}grey{% endif %};
            }

[anon76678013]

wie gesagt, ich kenne diese Karte nicht. Was du versuchen kannst, ist, den card mod - Part komplett nach links einzurücken, so dass er mit type: … eine Linie bildet.

[bergziege007]

Es scheint tatsächlich mit der custom room card zu tun zu haben.
Hab mal testweise einfach ein vertical stack erstellt, und dort funktioniert es…

type: vertical-stack
cards:
  - type: entity
    entity: sensor.nachste_abholung
    icon: mdi:trash-can-outline
    card_mod:
      style: |
        :host {
        --card-mod-icon-color: {% if states('sensor.nachste_abholung') |regex_findall('1', ignorecase=true) %}red{% else %}grey{% endif %};
        }

[anon76678013]

@bergziege007

custom room card

Falls es sich um die Karte von Marco Kreeft handeln sollte: Die hat ne super Dokumentation mit einem direkten Beispiel für die Icon-Farbe: Configuration · marcokreeft87/room-card Wiki · GitHub

[bergziege007]

Ja, korrekt. Die Karte ist das.

Die Doku hab ich gelesen, komme aber nicht ans Ziel

Problem ist, dass das Filtern nur mit Zahlen und mit einem konkreten Status funktioniert. Mein Sensor hat aber jeden Tag einen anderen Status weil er die Tage mit in den Sensor schreibt. Also heute “Gelbe Tonne in 8 Tagen” - morgen dann “Gelbe Tonne in 7 Tagen”. Deshalb will ich ja nur nach dem “Gelb” suchen.

Alle Beispiele beziehen sich nur auf Zahlen die verglichen werden oder auf Status “on” / “off” / “close” etc…

[anon76678013]

Das ist JavaScript. Probier das:

template:
  styles: |
    return entity?.state.match(/gelb/gi) !== null ? 'red' : 'grey';

match() durchsucht den Status nach der Zeichenkette „gelb“; mittels /gi sucht es unabhängig von Groß- und Kleinschreibung. Wenn match() nichts findet, gibt es null aus.

Das Fragezeichen in entity?.state ist ein sog. optional chaining (?.) operator, der verhindern soll, dass die Karte keine Fehlermeldung auswirft, wenn die Entität nicht verfügbar ist.

null ? 'red' : 'grey' ist ein ternary operator, der wenn - dann - sonst abfragt.

[bergziege007]

Guten Morgen,

vielen Dank für die ausführliche Erklärung.

Leider ohne Erfolg.
Wenn ich den Code 1:1 so formatiert eingebe, wird die Karte gar nicht mehr geladen:

wenn ich den Code wie folgt ändere, dann wird die Karte wieder angezeigt, aber das Icon ändert sich nicht

template:
        style: |
          return entity?.state.match(/gelbe/gi) !== null ? 'red' : 'grey';

Ich poste Dir mal den kompletten Code von der Karte. Vielleicht hilft das.

type: custom:room-card
title: 🌎
icon: mdi:home-assistant
content_alignment: center
tap_action:
  action: navigate
  navigation_path: "#lichtwohnzimmer"
  double_tap_action:
    action: toggle
info_entities:
  - entity: sensor.restzeit_battery
    hide_if:
      conditions:
        - condition: below
          value: 0
        - condition: equals
          entity: sensor.restzeit_battery
          value: unavailable
    format: precision1
    styles:
      template: |
        if (entity.state < 1) return 'color: #e9692c';
  - entity: sensor.tempsensor_ausenbereich_temperature
    format: precision1
    styles:
      template: >
        if (entity.state < 10) return 'color: lightblue'; if (entity.state >=
        25) return 'color: #f21917'; if (entity.state >= 22) return 'color:
        orange'; if (entity.state >= 18) return 'color: green';
  - entity: sensor.tempsensor_ausenbereich_humidity
    format: precision1
    styles:
      template: >
        if (entity.state < 40) return 'color: lightblue';  if (entity.state >=
        80)return 'color: #f21917';  if (entity.state >= 60) return 'color:
        orange'; if (entity.state >= 40) return 'color: green';
rows:
  - entities:
      - entity: switch.tv_wohnzimmer_steckdose_1
        name: " "
        show_icon: false
  - entities:
      - entity: switch.tv_wohnzimmer_steckdose_1
        name: " "
        show_icon: false
  - entities:
      - entity: sensor.nachste_abholung
        show_name: false
        show_state: true
        show_icon: true
        template:
        style: |
          return entity?.state.match(/gelbe/gi) !== null ? 'red' : 'grey';
      - entity: sensor.anzahl_lampen_an_aktuell
        icon:
          template:
            styles: >
              if (entity.state < 1) return 'color: #9acd32'; if (entity.state =
              1) return 'color: #e9692c'; if (entity.state > 1) return 'color:
              #cc0000';
        show_name: false
        show_state: true
        show_icon: true
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.more_info
            data:
              entity: sensor.lampen_eingeschaltet_aktuell
      - entity: sensor.solcast_pv_forecast_prognose_heute
        icon:
          template:
            styles: >
              if (entity.state <= 14) return 'color: #cc0000'; if (entity.state
              > 14 & entity.state <= 19) return 'color: #e9692c'; if
              (entity.state >= 20) return 'color: #9acd32';
        show_name: false
        show_state: true
        show_icon: true
      - entity: sensor.solcast_pv_forecast_prognose_morgen
        icon:
          template:
            styles: >
              if (entity.state <= 14) return 'color: #cc0000'; if (entity.state
              > 14 & entity.state <= 19) return 'color: #e9692c'; if
              (entity.state >= 20) return 'color: #9acd32';
        show_name: false
        show_state: true
        show_icon: true

[anon76678013]

Vergleiche bitte nochmals das Beispiel auf Github. Dort steht:

  - entity: sensor.fordpass_fuel
    show_icon: true
    icon:
      template:
        styles: >
          if (entity.state >= 70) return 'color: green';  
          if (entity.state >= 20) return 'color: orange';  
          else return 'color: orangered';

[bergziege007]

Oh, das war mein Fehler. “icon:” fehlte.

Jetzt wird die Karte auch geladen. Danke!

Leider keine Farbänderung.

[anon76678013]

Da fehlt noch color:

`return entity?.state.match(/gelb/gi) !== null ? 'color: red' : 'color: grey';`

[bergziege007]

Das wars. Danke!!

Icon färbt sich korrekt gelb. Super.

Jetzt fehlt eigentlich nur noch, dass er auch auf Blau / Schwarz reagiert.
Weil jetzt kann er ja wegen dem Bedingungsoperator nur Gelb / Grau werden.

Hab mir die Seite die Du verlinkt hast mal angeschaut, aber ich bekomme aus dem Beispiel mit der Bedingungskette keine Syntax abgeleitet, die funktioniert

Könntest Du mir da bitte auch nochmal auf die Sprünge helfen?

[Radiocarbonat]

Versuche dieses Beispiel:
return entity?.state.match(/gelb/gi) !== null ? 'color: yellow' : entity?.state.match(/red/gi) !== null ? 'color: red' : entity?.state.match(/blau/gi) !== null ? 'color: blue' : entity?.state.match(/schwarz/gi) !== null ? 'color: black' : 'color: grey' ;

[bergziege007]

Danke!

So einfach, wenn man weiß wie

Vielen Dank auch nochmal an @anon76678013!