custom-cards / button-card

❇️ Lovelace button-card for home assistant
MIT License
1.93k stars 233 forks source link

Allow Templating for State->Color #804

Open Rai-Rai opened 10 months ago

Rai-Rai commented 10 months ago

Is your feature request related to a problem? Please describe. I'd like to crate a button showing 3 states from two entities for a door: open, closed and locked. Currently that's not easy to do since state (default) --> color doesn't allow templating Wanted states/colors: Door open: red and blinking Door closed & unlocked: yellow Door closed & locked: green

Describe the solution you'd like Allowing templating for state->color would allow the following configuration which is much shorter than what my current solution (see below) is:

type: custom:button-card
color_type: card
entity: binary_sensor.ug_garagentuere_mk
icon: mdi:door
state:
    - operator: default
      color: |
        [[[
          if(states["binary_sensor.ug_garagentuere_rk"].state == 'on') return 'red';
          else if(states["binary_sensor.ug_garagentuere_mk"].state == 'on') return 'orange';
          else if(states["binary_sensor.ug_garagentuere_mk"].state == 'off') return 'green';
          else return 'grey';
        ]]]
      styles:
        card:
          - animation: |
            [[[
              if(states["binary_sensor.ug_garagentuere_rk"].state == 'on') return 'blink 2s ease infinite';
              else return 'none';
            ]]]

Describe alternatives you've considered I've found a solution, but it takes too much duplicated code in my oppinion. When I change the color by using state->color, then the text/icon is automatically changed to be be still readable. With my solution I have to do this manually:

color_type: card
entity: binary_sensor.eg_garten_tursensor_eg_garten_tursensor_ch1
icon: mdi:door
styles:
  card:
    - animation: |
        [[[
          if(states["binary_sensor.eg_garten_tursensor_riegelkontakt"].state == 'on') return 'blink 2s ease infinite';
          else return 'none';
        ]]]
    - background-color: |
        [[[
          if(states["binary_sensor.eg_garten_tursensor_riegelkontakt"].state == 'on') return 'red';
          else if(states["binary_sensor.eg_garten_tursensor_eg_garten_tursensor_ch1"].state == 'on') return 'orange';
          else if(states["binary_sensor.eg_garten_tursensor_eg_garten_tursensor_ch1"].state == 'off') return 'green';
          else return 'grey';
        ]]]
    - color: |
        [[[
          if(states["binary_sensor.eg_garten_tursensor_riegelkontakt"].state == 'on') return 'black';
          else if(states["binary_sensor.eg_garten_tursensor_eg_garten_tursensor_ch1"].state == 'on') return 'black';
          else if(states["binary_sensor.eg_garten_tursensor_eg_garten_tursensor_ch1"].state == 'off') return 'white';
          else return 'black';
        ]]]

Additional context Add any other context or screenshots about the feature request here.

LordMike commented 1 week ago

Awesome - thanks for the workaround @Rai-Rai. My use was simpler than yours, so it worked out in the end :)