In einer Card den Status eines anderen Sensors anzeigen

Dashboard/Cards/Frontend
2

Schau mal ob Du es aus diesem Beispiel ableiten kannst. Dort wird der Hintergrund rot bei Bewegung. Gutes Gelingen.

Hier ein Beispiel bei Änderung mir Werten

type: custom:button-card
entity: sensor.luftreiniger_oben_indoor_allergen_index
layout: horizontal
show_icon: true
show_name: true
show_state: true
name: Allergene
icon: pap:iai
styles:
  card:
    - justify-content: center
    - align-items: center
  grid:
    - grid-template-areas: '"i n s"'
    - grid-template-columns: auto auto auto
  icon:
    - width: 35px
    - color: white
  name:
    - justify-self: start
    - padding-left: 10px
    - color: white
  state:
    - justify-self: start
    - padding-left: 10px
    - color: white
state:
  - operator: template
    value: |
      [[[ return entity.state >= 1 && entity.state <= 3; ]]]
    styles:
      card:
        - background-color: '#5686FF'
  - operator: template
    value: |
      [[[ return entity.state >= 4 && entity.state <= 6; ]]]
    styles:
      card:
        - background-color: '#BB7CFF'
  - operator: template
    value: |
      [[[ return entity.state >= 7 && entity.state <= 9; ]]]
    styles:
      card:
        - background-color: '#FF59A3'
  - operator: template
    value: |
      [[[ return entity.state >= 10 && entity.state <= 12; ]]]
    styles:
      card:
        - background-color: red

Und hier eins mit Einzelwerten (keine Ranges). Das war etwas ungewohnt Zahlen in ‘’ zu stecken aber so geht es

type: custom:button-card
entity: sensor.luftreiniger_oben_total_volatile_organic_compounds
layout: horizontal
show_icon: true
show_name: true
show_state: true
name: Gas
icon: mdi:blur
styles:
  card:
    - justify-content: center
    - align-items: center
  grid:
    - grid-template-areas: '"i n s"'
    - grid-template-columns: auto auto auto
  icon:
    - width: 35px
    - color: white
  name:
    - justify-self: start
    - padding-left: 10px
    - color: white
  state:
    - justify-self: start
    - padding-left: 10px
    - color: white
state:
  - operator: template
    value: |
      [[[ return entity.state == '1'; ]]]
    styles:
      card:
        - background-color: '#5686FF'
  - operator: template
    value: |
      [[[ return entity.state == '2'; ]]]
    styles:
      card:
        - background-color: '#BB7CFF'
  - operator: template
    value: |
      [[[ return entity.state == '3'; ]]]
    styles:
      card:
        - background-color: '#FF59A3'
  - operator: template
    value: |
      [[[ return entity.state == '4'; ]]]
    styles:
      card:
        - background-color: red