Fun with custom:button-card

That looks like it will work :+1:

The more you play with it the more you’ll see places where you can consolidate some of the settings. For example, the off’ state is pretty consistent across all 3 of your templates, so if you wanted to you could make a base template with that config that the other 3 use as a template. There is also an id feature for states that makes it possible for the templates to merge state configs correctly (even if the values aren’t the same!)

Just for fun, and because I like sharing ideas, here is a different way to define your templates given your example:

  standard-button:
    template: standard
    state:
      - id: value_on
        value: 'on'
        styles:
          card:
            - background-color: gold
          name:
            - color: blue
          icon:
            - color: blue
            - opacity: 1
      - id: value_off
        value: 'off'
        styles:
          card:
            - background-color: slategrey
          name:
            - color: white
          icon:
            - color: white
            - opacity: 0.5
  
  standard-alert:
    template: standard-button
    state:
      - id: value_on
        styles:
          card:
            - background-color: darkgrey
          name:
            - color: yellow
          icon:
            - color: yellow
      - id: value_off
        styles:
          card:
            - background-color: darkgey

  standard-cover:
    template: standard-button
    state:
      - id: value_on
        value: 'open'
      - id: value_off
        value: 'closed'

What I did was use your standard-button as a common template for the other two templates. I added id settings for the 2 states so that the other 2 templates can add or replace configs as needed.

In your standard-alert template I changed the state settings to refer to the id instead of the value and removed any settings already defined in the standard-button template, such as the icon opacity and a few other things.

In the standard-cover template I only had to change the value settings to open and closed, since the colors in the standard-button template are already what is needed.

The custom button card is so flexible that there is often more than a couple ways to get the desired effect. You could even use a single template to do this with some variables and javascript to adjust the colors. I’m having fun writing this up, so I’ll give an example:

  standard-button:
    template: standard
    variables:
      value_on: 'on'
      value_off: 'off'
      background_color_on: gold
      background_color_off: slategrey
      text_color_on: blue
      text_color_off: white
    state:
      - id: value_on
        value: '[[[ return variables.value_on ]]]'
        styles:
          card:
            - background-color: '[[[ return variables.background_color_on ]]]'
          name:
            - color: '[[[ return variables.text_color_on ]]]'
          icon:
            - color: '[[[ return variables.text_color_on ]]]'
            - opacity: 1
      - id: value_off
        value: '[[[ return variables.value_off ]]]'
        styles:
          card:
            - background-color: '[[[ return variables.background_color_off ]]]'
          name:
            - color: '[[[ return variables.text_color_off ]]]'
          icon:
            - color: '[[[ return variables.text_color_off ]]]'
            - opacity: 0.5

And then to use that template:

                # the variables don't need to be set because the template's default values are good
                - entity: binary_sensor.katie_smith_s_galaxy_s7_edge_presence_2
                  name: Katie
                  template: standard-button
                  type: 'custom:button-card'

                # same template, but setting a few variables to change colors
                - entity: binary_sensor.daytime_sensor
                  name: Day?
                  template: standard-button
                  type: 'custom:button-card'
                  variables:
                    background_color_on: darkgrey
                    background_color_off: darkgrey
                    text_color_on: yellow

                # again, same template but set some variables to change the on/off values
                - entity: cover.garage
                  name: Over head
                  template: standard-button
                  type: 'custom:button-card'
                  aspect_ratio: 1/1.3
                  variables:
                    value_on: open
                    value_off: closed

Hopefully that wasn’t too deep and it gives you a taste of what’s possible. :slight_smile:

1 Like