Lovelace: Button card

[dmatik]

@RomRider

Thanks Not only are you setting a brightness but also a light temperature. This card also reacts to the light temperature which is something the default HA components do not do (only brightness and color). The result you are obtaining is expected (40% brightness of a light blue-ish color)

Thanks for quick answer. That is actually pretty cool!
Anyway to configure it, in case I would like the button to react only to brightness (not sure I do, but just in case)?

[RomRider]

It’s not possible to configure it, but I can think about something, please open a feature-request on github

[mynameisdaniel (Daniel)]

I’m liking the spin animation on icons in some cases, but looking to make something a bit more subtle for other icons (more like a sway). Has anyone played around with adding animations?

I suspect defining ‘- webkit-animation:’ under style would work, unfortunately defining the animation keyframes there also doesn’t work, and I don’t know enough to work out how to get around that.

[RomRider]

Use card-modder to inject this CSS using the extra_styles property:

@keyframes mysway {
    0%, 100%{ transform: rotate(-8deg);}
    50%{ transform: rotate(6deg); }
}

Then on the button-card:

styles:
  icon:
    - animation: mysway 16s infinite

Play with the numbers to suit your needs

[jarrah]

@jarrah

I did originally try a vertical stack but it didn’t show the buttons for some reason, so tried vertical-stack-in-card instead. I must have had some other error at the time.

Ah, I know what happened now - the input_boolean needs to be ON when you refresh the browser, otherwise it doesn’t render the buttons… @iantrich do you know if there’s a better way of doing this instead of using input_boolean?

[petro]

@dmatik what does those icons look like when off? What version of the card are you using? I have auto color working for shadows and icon color w/ no problem on v 1.8.0.

[petro]

Add the padding in custom_button_motion and you’ll get it to work.

  custom_button_motion: &custom_button_motion
    type: "custom:button-card"
    color_type: card
    show_name: true
    show_icon: true
    show_last_changed: true
    size: 25px
    styles:
      label:
        - font-size: 10px
      card:
        - border-radius: 10px
        - padding: 10px 10px 0px 0px
      name:
        - font-size: 15px
      grid:
        - grid-template-areas: '"i n" "i l"'
        - grid-template-columns: min-content min-content
        - width: min-content
        - grid-gap: 0px 2px
    state:
      - value: "on"
        icon: mdi:run-fast
        <<: *custom_button_state_red
      - value: "off"
        icon: mdi:run
        <<: *custom_button_state_green

[mynameisdaniel (Daniel)]

Brilliant! Thanks!

Works a treat, just wish I could define it globally as things are getting a bit crazy with different layers of custom cards now as I’m also using template-config in some places

[jimz011 (Jim)]

I am interested too in animated icons, can I find this in the docs how to do that? Or does it only work with gifs?

[mynameisdaniel (Daniel)]

Have a look at the spin option in the docs - it spins the regular icons - but there’s quite a few effects you can achieve using CSS

[RomRider]

I’ve played a bit with all the stuff lately and wanted to simulate a menu, here’s the result using an input_boolean to trigger a conditional card. Also the menu resets itself after 15sec

The input_boolean part:

input_boolean:
  lovelace_menu_ikea_spots:
  lovelace_menu_falcon:
  lovelace_menu_covers:

automation:
  - alias: lovelace_reset_menu
    hide_entity: true
    trigger:
      - platform: state
        entity_id: input_boolean.lovelace_menu_ikea_spots
        to: 'on'
      - platform: state
        entity_id: input_boolean.lovelace_menu_falcon
        to: 'on'
      - platform: state
        entity_id: input_boolean.lovelace_menu_covers
        to: 'on'
    action:
      - wait_template: >
          {{ is_state(trigger.entity_id, 'off') }}
        timeout: '00:00:15'
        continue_on_timeout: 'true'
      - condition: template
        value_template: >
          {{ is_state(trigger.entity_id, 'on') }}
      - service: input_boolean.turn_off
        data_template:
          entity_id: "{{ trigger.entity_id }}"

[jimz011 (Jim)]

Will have a look at that for sure. I’d like my fan icons to spin for example. Thanks a lot.

[Cerb]

How do you get the botton with only color so thin? Mine is more like the old one in therms of height.

[petro]

I’ve noticed some odd css behavior. The longer a button gets, the grid shifts down pixels and squeezes the grid-template-rows. And css auto will calculate zero for text height. I’ve been trying to fight this for a bit. I have this configuration.

All buttons have a static icon height/width of 30px x 30px inside the upper left grid spot which is 50px x 50px.

small button

medium button

large button

  type: horizontal-stack
  cards:
  - type: custom:button-card
    color_type: blank-card
    styles:
      card:
        - width: 10px
  - type: "custom:button-card"
    layout: icon_label
    color: auto
    show_state: false
    show_name: true
    show_label: true
    name: Media
    icon: mdi:music-note
    label: Media
    styles:
      grid:
        - grid-template-rows: 50px auto auto
        - grid-template-columns: 50px auto
      card:
        - border-radius: 15px
        - height: 76px
        - width: 342px
        - margin: 5px 5px 0px 0px
        - --paper-card-background-color: rgba(40, 40, 40)
        - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
      icon:
        - color: var(--paper-item-icon-active-color)
        - height: 30px
        - width: 30px
      name:
        - justify-self: start
        - padding: 0px 10px
        - font-size: 12px
        - text-transform: capitalize
      label:
        - text-transform: capitalize
        - font-size: 12px
        - justify-self: start
    tap_action:
      action: toggle

EDIT: I also noticed that I cannot override text-align and set it to left justified. I’m forcing carriage returns in the label text field to output title and artist of a media player. Is there any way to override it or should I create a new layout in my .js file?

[daphatty]

I set up a sub menu system similar to RomRider’s using input_booleans and conditional cards last week. The number of views in my ui-lovelace.yaml is getting out of hand and I wanted a way to consolidate menus with similar functions.

I still need to tweak the text on some buttons as well as add some missing entities for the relevant rooms but overall, I am happy with the reduction in distinct views for the mobile platform. This new method should bring my number of mobile phone views well below 10.

EDIT: Sharing my config for those of you that have asked/might be interested. In hindsight, my setup is much more complicated than I originally thought so this might get a bit cumbersome. Forgive me in advance if I utterly confuse anyone.

My setup consists of:

1. Input Booleans - one for each room
2. Groups - Used for determining which input booleans should be on and off
3. Automations - Leverage the state of a Group in order to set the off state of a Group based on the on state of an input boolean
4. Conditional cards which show and hide based on the on state of an input boolean.

Input Booleans (defined in customize.yaml)

input_boolean:
  livingroom:
    name: Living
    initial: on
  diningroom:
    name: Dining
    initial: off
  kitchen:
    name: Kitchen
    initial: off

Groups

This is the most complex part of the setup. Since only one card can be visible at a time, it stands to reason that when one card is on, the other two cards must be simultaneously turned off. Grouping together two input_booleans together simplifies the next step, Automations.

Example: If the Kitchen Card is on, the Dining Room and Living Room Cards are off.

  input_kitchen_on:
    name: Input Kitchen ON
    view: no
    entities:
      - input_boolean.diningroom
      - input_boolean.livingroom
  input_diningroom_on:
    name: Input Dining Room ON
    view: no
    entities:
      - input_boolean.kitchen
      - input_boolean.livingroom
  input_livingroom_on:
    name: Input Living Room ON
    view: no
    entities:
      - input_boolean.kitchen
      - input_boolean.diningroom

Automations (one per input boolean)

With the groups configured, now we create an automation that will call homeassistant.turn_off and apply it to a group based on which input boolean is turned on. Below is one example of the automation (created via the HA GUI). One automation is needed for every card being created.

Whenever an input boolean is turned on, these automations will turn off the other input booleans.

- id: '1556756275823'
  alias: Bedroom Card - Guest ON
  trigger:
  - entity_id: input_boolean.guestbedroom
    from: 'off'
    platform: state
    to: 'on'
  condition: []
  action:
  - data:
      entity_id: group.input_guest_on
    service: homeassistant.turn_off

Please note: The formatting of this particular Automation was created by the HA GUI. This may not translate to a working automation in your environment if you do a simple copy/paste with the requisite entity replacement.

Button Cards (need one for each input_boolean)

These are the buttons that actually turn an input_boolean on. Below is one example of a single Button Card. You will need to create a button card for each view you are trying to consolidate. (e.g. Living, Dining, Kitchen).

    - type: "custom:button-card" 
      show_icon: false
      color_type: card
      name: Living
      entity: input_boolean.livingroom
      state:
        - value: 'on'
        - value: 'off'
      tap_action:
        action: call-service
        service: homeassistant.turn_on
        service_data:
          entity_id: input_boolean.livingroom

Conditional Cards

These cards are pretty straight forward. Simply configure the Conditional card to monitor the state of your input boolean, then define which card and entities should be shown when the conditions are true.

  - type: conditional
    conditions:
      - entity: input_boolean.livingroom
        state: "on"
    card:
      type: #Define your cards and entities here

[myle (StePhan McKillen (Other kiwi Here))]

Thanks getting the head around now

[RomRider]

@petro

I’ve noticed some odd css behavior. The longer a button gets, the grid shifts down pixels and squeezes the grid-template-rows. And css auto will calculate zero for text height. I’ve been trying to fight this for a bit. I have this configuration.

All buttons have a static icon height/width of 30px x 30px inside the upper left grid spot which is 50px x 50px.

Because the grid has 4 lines and you only define 3 of them - grid-template-rows: 50px auto auto auto.

And also because the card has a default padding of: 4% 0px (4% is based on the width)

@petro

EDIT: I also noticed that I cannot override text-align and set it to left justified. I’m forcing carriage returns in the label text field to output title and artist of a media player. Is there any way to override it or should I create a new layout in my .js file?

It’s not text align, it’s justify-self: start
There’s no need to edit the JS, you can do all the things in the config.

[INTEL]

Any way to add sensor value to switch?

[RomRider]

Yes, using value_template, please check the documentation.

[mclaudiopt]

hello there ! i am new on this card…i wish to make one thing…below is my current card

1st - when an identify is not available how can i change its icon?
2nd - come of the lamps are xiaomi so they have colors, how can i change the icon color according to the selected color on the lamp?
thanks to all in advance
regards