Lovelace: Button card

[apop]

So, if I’m understanding right, you want to be able to tap the button, and if the light’s off, turn it on to a low brightness, tap it again and turn it to full brightness, and tap it again to turn it off?

You could call a script, passing the entity_id in and evaluating the current state of the light to decide which action to take. Let me know if you need additional guidance and I can help you put it together later.

[cyberumb15]

how to have buttons like yours? Is that need to have new entity_picture for button?

thanks,

[hwoltering]

Hi, that’s exactly what I’m looking for. I figured that it could be done with some script, however I never worked with those before. Would be awesome if you could help out.
I have a philips Hue system connected, and can control the lights directly from Home Assistant. the current entity I’m working with is “light.sidetable” and it just switched on/off now, however in the info-window I can choose a differen colours and brightness. No idea yet how I need to add this to a script.

[apop]

Sure thing, I can put together a script for you to use later today.

[petro]

This is a 105 x 105 pixel button

    type: custom:button-card
    layout: icon_label
    color: auto
    show_state: true
    show_name: true
    show_label: true
    styles:
      grid:
        - grid-template-rows: 42px auto 42px
        - grid-template-columns: 42px auto
      card:
        - border-radius: 15px
        - height: 105px
        - width: 105px
        - margin: 5px 5px 0px 0px
        - padding: 0px 0px
      icon:
        - align-self: end
        - height: 30px
        - width: 30px
      name:
        - justify-self: start
        - padding: 0px 10px
        - font-size: 13px
      label:
        - align-self: end
        - padding: 7px
        - font-size: 11px
        - font-weight: bold
        - font-family: Helvetica
      state:
        - font-size: 11px
        - font-family: Helvetica
        - text-transform: capitalize
        - font-weight: bold
        - align-self: end
        - justify-self: start
        - padding: 9px 10px
      lock:
        - align-items: flex-end
    state:
      - value: "on"
        styles:
          card:
            - --paper-card-background-color: rgba(40, 40, 40)
            - box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
          name:
            - color: white
          state:
            - color: white
          label:
            - color: white
      - value: "off"
        styles:
          label:
            - color: rgba(0, 0, 0, 0.0)
    tap_action:
      action: toggle
    hold_action:
      action: more-info

This is the 76 x 76

    type: custom:button-card
    layout: icon_name
    show_state: false
    show_name: false
    show_label: true
    color: auto
    styles:
      grid:
        - grid-template-rows: 42px 0px auto
        - grid-template-columns: 42px auto
      icon:
        - height: 30px
        - width: 30px
      card:
        - border-radius: 15px
        - height: 76px
        - width: 76px
        - margin: 5px 5px 0px 0px
        - padding: 0px 0px
      label:
        - justify-self: start
        - align-self: end
        - padding: 9px 10px
        - font-size: 12px
        - text-transform: capitalize
    state:
      - value: "on"
        styles:
          card:
            - --paper-card-background-color: rgba(40, 40, 40)
            - box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
          name:
            - color: white
          state:
            - color: white
          label:
            - color: white
      - value: "off"
        styles:
          label:
            - color: rgba(0, 0, 0, 0.0)
    tap_action:
      action: toggle

[Abeksis]

Anyone can help code to control the tv

[apop]

Do you have a way to control it from Home Assistant already? Is it a Smart TV or are you using a Harmony Hub?

[oriolism]

Thanks! That solve my issue.

[Abeksis]

Yes, I’m looking for a button card design

[RomRider]

@petro

Instead it comes out like this:

Right… That’s because whenever you assign a width or a height to the card, I assign actually those properties to the container of the card itself. When you wrap it, it can’t work. It would need another card around again

@masterfink

I just discovered the Configuration Templates and can’t seem to get it to work with anything other than styles. Everything under Styles works as expected but none of the other configuration shows up when I use the template. Is this expected behavior? Here is an example of my configuration in lovelace-ui.yaml

Your config works just fine for me, however you are missing one - in front of width and quotes around the last operator.

@oriolism

Does anyone knows how to fix the gap generated when this card is used with the conditional card? Already tried with the vertical-stack-in-card but the result is worst.

Put the horizontal-stack with all the elements inside your conditional card, not a conditional card for each element inside your horizontal-stack.

@hwoltering

Hi all, I’m working on creating a new dashboard for my lights around the house and I have a question: Is it possible to create 1 button that switches 1 light, but has 3 states? What I try to achieve is to create a button that switches between off > dim > full and shows this as such. The dim setting can be a fixed setting. Currently the button switches between off and on, but uses the last known brightness.

A script would be possible, but it’s going to be a bit more complex to understand if you’re starting with Home Assistant. My suggestion for this is to use a input_select with 3 values (on, dim, off) add an automation triggered based on the input select value to do what you want (turn off, set dim and turn on) and then on the button-card the tap_action would be:

tap_action:
  action: call-service
  service: input_select.select_next
  service_data:
    entity_id: input_select.your_inputselect

And in your home-assistant config:

input_select:
  your_inputselect:
    options:
      - 'Dim'
      - 'On'
      - 'Off'

automation:
  - alias: turn_on
    trigger:
      - platform: state
        entity_id: input_select.your_inputselect
        to: 'On'
    action:
      - service: light.turn_on
        entity_id: light.your_light
        data:
          brightness: 255 # That's 100%

  - alias: turn_off
    trigger:
      - platform: state
        entity_id: input_select.your_inputselect
        to: 'Off'
    action:
      - service: light.turn_off
        entity_id: light.your_light

  - alias: dim
    trigger:
      - platform: state
        entity_id: input_select.your_inputselect
        to: 'Dim'
    action:
      - service: light.turn_on
        entity_id: light.your_light
        data:
          brightness: 128  # That's 50%

For learning purpose, this is the solution with a script. It would look like this (didn’t test, but should work). Compared to the other solution, this one is completely generic and you can reuse it just by changing the light in you call to the script. No need to have a lot of input_select etc…:

script:
  dim_on_off:
    sequence:
      - service_template: >
          {% if state_attr(light, 'brightness') | int != 255
             or states(light) == 'off' %}
            light.turn_on
          {% else %}
            light.turn_off
          {% endif %}
        data_template:
          entity_id: >
            {{ light }}
          brightness: >
            {% if states(light) == 'off' %}
              128
            {% elif states(light) == 'on' and state_attr(light, 'brightness') | int != 255 %}
              255
            {% else %}
              0
            {% endif %}

And in button-card, you’d call it like this:

tap_action:
  action: call-service
  service: script.dim_on_off
  service_data:
    light: light.your_light_entity

[apop]

@hwoltering @RomRider the nice thing about the script is it can be reused for multiple lights/buttons. @RomRider the script you posted looks good to me other than the fact that I think it is going to go Off > Full > Dim instead of Off > Dim > Full. Here’s an updated version (disclosure, I haven’t tested either):

 script:
  dim_on_off:
    sequence:
      - service_template: >
          {% if state_attr(light, 'brightness') | int <= 128
             or states(light) == 'off' %}
            light.turn_on
          {% else %}
            light.turn_off
          {% endif %}
        data_template:
          entity_id: >
            {{ light }}
          brightness: >
            {% if state_attr(light, 'brightness') | int <= 128 %}
              255
            {% else %}
              128
            {% endif %}

In addition, if the entity is defined in the card configuration, you can simplify the tap_action as follows:

tap_action:
  action: call-service
  service: script.dim_on_off
  service_data:
    light: entity

[cyberumb15]

I did copy and paste from your previous post
anchors:
custom_button_light_active_glow: &custom_button_light_active_glow
…
…

but the buttons didn’t show as yours.

[RomRider]

@apop

@hwoltering @RomRider the nice thing about the script is it can be reused for multiple lights/buttons. @RomRider the script you posted looks good to me other than the fact that I think it is going to go Off > Full > Dim instead of Off > Dim > Full. Here’s an updated version (disclosure, I haven’t tested either):

Yes, I’ve corrected it , you where faster

[hwoltering]

@apop @RomRider
Thanks both for the quick help. I actually tried both, but I think for future use it’s easier to use the script-version (I have many lights, so can use it for all of them). I will do have a look at the input select option too, as I want to understand all possible options. Surely both come in handy somewhere anyway.

The script goes not from off to dim to full, however it does not turn the lights off on the third tap action. I’ve checked the light state on the full brightness, but it then indicates to be 254 instead of 255.

Whe I tried to change the script from 255 to 254, it gives me an error:

Failed to call service script/dim_on_off, extra keys not allowed @ data[‘brightness’]

I also tried to change it to less than 250, but that also didn’t work. The changes I tried:

{% if state_attr(light, ‘brightness’) | int != 255
{% if state_attr(light, ‘brightness’) | int != 254
{% if state_attr(light, ‘brightness’) | int !>= 250
{% if state_attr(light, ‘brightness’) | int < 250

And the same thing for the line further down:
{% elif states(light) == ‘on’ and state_attr(light, ‘brightness’) | int != 254 %}

Any ideas what I can do here?

ps. how do I add code in a nice box in these comments?

[RomRider]

If you used my version, try by just removing the last else 0 in the brightness object.
2nd option (I think this one is even better), keep the else and replace the whole block of service_template with just service_template: light.turn_on

@hwoltering

ps. how do I add code in a nice box in these comments?

You can use triple backquotes:

```
Code here
```

[masterfink (Taylor Finklea)]

After updating to the latest version of everything, this worked for me!

[petro]

You gotta use the anchors like lovelace cards. Just putting the anchor in your file won’t make all the buttons like that.

                    - <<: *cb_remote_zone_control
                      icon: mdi:volume-high
                      entity: switch.yamaha_volume_control

[petro]

Is there a way using the button to show feedback? I have a bunch of buttons that are 1 liner scripts that have no on/off status. I’d like to flash the button with a different style for half a second to let the user know the button was pressed. Is this possible?

[masterfink (Taylor Finklea)]

BTW how did you get the rounded edges like this?

[petro]

    styles:
      card:
        - border-radius: 15px