Lovelace: Button card

adamlaakso1 · November 5, 2018, 6:57pm

Replace the entity portion with your switch id

radinsky · November 5, 2018, 8:35pm

This one is working. I can confirm using “action: sevice” cause disability to set the colors.
It solved for my switches, but I can’t trigger scenes without using action service call.

radinsky · November 6, 2018, 4:06pm

Solved by adding the entity (despite the action service call):

jarrah · November 10, 2018, 9:37pm

Ahh yes, thanks for the tip!

One benefit of having a separate label template is that the button colour status could be based on another entity. Using a Custom UI Tiles example:

- entity: input_boolean.window_is_open
  label_template: "return 'Windows: ' + entities['sensor.windows_open'].state;"
  icon_template: "if (state === 'on') return 'mdi:window-open'; else return 'mdi:window-closed'"

@kuuji Based on the above, could the Button Card state option be expanded to include another entity, e.g.

- type: "custom:button-card"
  entity: sensor.windows_open
  name: "Windows"
  show_state: yes
  state:
    - entity_id: input_boolean.window_is_open
      value: 'on'
      color: rgb(5, 147, 255)
    - entity_id: input_boolean.window_is_open
      value: 'off'
      color: rgb(189, 255, 5)

Following on from this, is there a way to alter the icon based upon the entity state? e.g.

icon_template: "if (state === 'on') return 'mdi:window-open'; else return 'mdi:window-closed'"

Thanks!

jarrah · November 10, 2018, 10:20pm

A Lovelace version of Custom UI Tiles? Could you point me to where this is please?

Bobby_Nobble · November 10, 2018, 10:53pm

Unsurprisingly, the Custom UI Tiles thread on here

tomerbs · November 11, 2018, 2:27pm

Hi simbesh

Can you please share your code to the switching fan speed?

Thanks.

gabrielmiranda · November 13, 2018, 9:55pm

Is there a way to use this with conditional cards? I know its possible to use conditional cards plus button card but i cant use button card plus button card like a conditional

The best thing i could do is this:

  - type: horizontal-stack
    cards:
    - type: conditional
      conditions:
      - entity: switch.mqtt_switch_light_1
        state: "off"
      card:
        type: horizontal-stack
        cards:                         
        - type: "custom:button-card"
          entity: switch.mqtt_switch_light_1
          icon: mdi:sofa
          color: auto
          action: toggle
          default_color: rgb(255, 233, 155)
          color_type: card
          name: Living room
          style:
          - font-size: 12px
          - font-weight: bold
        - type: "custom:button-card"
          entity: switch.mqtt_switch_light_1
          icon: mdi:sofa
          color: auto
          action: toggle
          default_color: rgb(255, 233, 155)
          color_type: card
          name: Living room
          style:
          - font-size: 12px
          - font-weight: bold
  - type: horizontal-stack
    cards:
    - type: conditional
      conditions:
      - entity: switch.mqtt_switch_light_1
        state: "off"
      card:
        type: horizontal-stack
        cards:                         
        - type: "custom:button-card"
          entity: switch.mqtt_switch_light_1
          icon: mdi:sofa
          color: auto
          action: toggle
          default_color: rgb(255, 233, 155)
          color_type: card
          name: Living room
          style:
          - font-size: 12px
          - font-weight: bold
        - type: "custom:button-card"
          entity: switch.mqtt_switch_light_1
          icon: mdi:sofa
          color: auto
          action: toggle
          default_color: rgb(255, 233, 155)
          color_type: card
          name: Living room
          style:
          - font-size: 12px
          - font-weight: bold

But i have to create a conditional for each line. Is this correct?

simbesh · November 14, 2018, 4:19am

  - type: "custom:button-card"
    entity: input_select.bedroom_fan
    icon: mdi:fan
    name: Bedroom -
    show_state: true
    action: service
    service:
      domain: input_select
      action: select_next
      data:
        entity_id: input_select.bedroom_fan
    size: 40%
    color_type: card
    state:
      - value: 'low'
        color: rgb(252, 243, 207)
      - value: 'medium'
        color: rgb(247, 219, 110)
      - value: 'High'
        color: rgb(241, 196, 15)
      - value: 'off'
        color: var(--paper-card-background-color)

dubsix · November 14, 2018, 1:08pm

Yes would love this config option! would make the button useful for so much more!

bundito · November 14, 2018, 4:10pm

First off - don’t get discouraged. Once I master the options, this is certain to be one of my most-used card types. But for right now, I’ve got an issue.

I used the trick of lining up a couple blank cards on either side of the “action” card to make it smaller and neatly center the one I want.

However, I cannot get a color applied.

Here’s my code:

 - type: horizontal-stack
          cards:
          - type: "custom:button-card"
            color_type: blank-card
          - type: "custom:button-card"
            color_type: blank-card
          - type: "custom:button-card"
            color_type: card
            icon: mdi:speaker
            color: rgb(28, 128, 199)
            action: service
            entity: script.vizio_toggle
          - type: "custom:button-card"
            color_type: blank-card
          - type: "custom:button-card"
            color_type: blank-card

No matter what technique I find, I can’t get anything but a dull grey icon.

If I try to use color_type: icon, it crashes all of Lovelace with an “Unexpected Error Occurred.”

I’m running the latest code from your git repo. And I bumped the ?v=x parameter on the include.

The card in question calls a simple service to send a “PowerToggle” command to my Vizio soundbar, which turns itself off after 10 minutes of silence. No fancy states or anything.

What do I have wrong?

gabrielmiranda · November 15, 2018, 4:49am

You have to change the color type from card to icon (“color_type: card” >> color_type: icon")

bundito · November 15, 2018, 5:06am

Still no joy.

 - type: "custom:button-card"
   color_type: icon          <--------
   color: rgb(28, 128, 199)
   icon: mdi:speaker
   action: service
   entity: script.vizio_toggle

I still get nothing but this ugly grey icon:

Screenshot_20181114_230438

It’s kinda bugging me. I want/need to make a row of different-colored buttons for ease of use. But I can’t even color a single one!

gabrielmiranda · November 15, 2018, 6:03am

Did you refresh your browser? Im asking this because everything is fine with your code… I got a blue icon. Maybe you can also try the “color_off:”

bundito · November 15, 2018, 8:24pm

Refreshed the browser, tried different browsers, viewed it on my phone…

Does HA have its own cache somewhere?

bundito · November 15, 2018, 11:56pm

color_off was the magic formula!

Thank you, thank you!

Perhaps, because it’s a toggle, it’s never “on” or “off”, but somewhere in between? I dunno. Hopefully the maintainer of this add-on will read this saga and sort it out.

BUT I HAVE A BLUE ICON!

Thanks again!

Martin_Granger · November 16, 2018, 10:29am

Did you work this out?

Martin_Granger · November 19, 2018, 12:20pm

I’m trying to make a button that toggles two automations, but I’m struggling with the show_state.

I’m guessing that I need some sort of boolean or something?? anyone got any ideas?
Here is my code:

  - type: "custom:button-card"
    entity: script.wifi_away_toggle_mart
    name: "Wifi away"
    icon: mdi:wifi
    action: toggle
    show_state: true

and this is the script:

wifi_away_toggle:
  sequence:
    - service: automation.toggle
      entity_id: automation.wifi_away_mart_day
    - service: automation.toggle
      entity_id: automation.wifi_away_clare

akkaria · November 22, 2018, 10:21pm

I know this has been asked before but just curious if the long press function has been released yet?

I’ve got a couple scripts i run with buttons that control my blinds. Basically, i have dual roller blinds and i’ve setup the following button cards.

As the open and close buttons control both blinds, i like to just open the block out blind on its own regularly, i’d love to be able to just hold down the open/close button and it would run a separate entity/script which would open my block out blinds only. That way i dont have to add extra buttons to run these scripts.

Keep up the good work

Rondom · November 24, 2018, 11:14pm

Entitycard that is default in lovelace now has long press funcion if you need it