Custom Button Card dyn. Iconcolor

Dashboard/Cards/Frontend
1

Hallo zusammen,

Ich bräuchte mal eure Hilfe. Ich würde gerne mein Icon dynamisch an den Status des Garagentors anpassen aber irgendwie übernimmt er mir die Farbe nicht. Hat jemand eine Idee was ich falsch mache?

type: custom:button-card
color_type: icon
color: |
  [[[
    if (states['cover.garagentor'].attributes.current_position == 0)
      return "green"
    return rgba(68, 115, 158, 255);
  ]]]
show_name: false
show_label: false
label: |
  [[[
    return 'test ' + states['cover.garagentor'].state;
  ]]]
show_icon: true
tap_action:
  action: call-service
  service: input_button.press
  service_data:
    entity_id: input_button.garage_zu
entity: input_button.garage_zu
2

Keiner eine Idee? Bin auch für andere Herangehensweise offen. Ich habe auch schon überlegt den Helper Button komplett zu streichen und direkt den cover zu implementieren. Jedoch wird das mein Problem bestimmt nicht lösen, da ich die Attribute ja bekomme und Zugriff darauf habe.

VG

3

Hi,
ich habe mal so etwas ähnliches auch mit der custom-button-card erstellt.
In meinem Fall war es allerdings ein Tür/Fenstersensor für meine Terrassentür und ich habe einfach mdi-icons genutzt.
Aber zum Thema “andere Herangehensweise” kannst du ja evtl. etwas damit anfangen.

Wenn in diesem Fall die Tür geschlossen ist, bleibt das mdi Icon grün und es steht “Tür geschlossen”,
wenn die Tür offen ist, wird das Icon rot und es steht “offen” darunter. Zusätzlich blinkt es noch.
Am Ende habe ich noch die Größe des Icons angepasst.

type: custom:button-card
entity: binary_sensor.turkontakt_wz
name: Terassentür
card: null
tap_action:
  action: more-info
hold_action:
  action: call-service
  service: lock.lock
  service_data:
    entity_id: entity
show_state: true
state:
  - value: 'on'
    color: Red
    icon: mdi:door-open
    state_text: Offen
    styles:
      card:
        - animation: blink 2s ease infinite
  - value: 'off'
    color: Green
    icon: mdi:door-closed-lock
    state_text: Geschlossen
  - styles: null
styles:
  icon:
    - height: 100px
    - width: 100px
  card:
    - font-weight: bold
2 „Gefällt mir“
4

Super Karte genau was ich gesucht habe.