Lovelace: Button card

Thanks for sharing this, I got it working.

Thanks, I don’t know why but that did it. I’ve tried every combo, true/false, on/off, 1/0.

You saved me another night of headache!

Is anyone else having trouble executing scripts from buttons since the latest updates?

template

  menu_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: none
    layout: vertical
    show_label: false
    show_name: true
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--paper-card-background-color': 'rgba(0, 0, 0, 0)'
      icon:
        - width: 28px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: call-service
  picture_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: none
    layout: vertical
    show_entity_picture: true
    show_icon: false
    show_label: false
    show_name: false
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--paper-card-background-color': 'rgba(0, 0, 0, 0)'
      entity_picture:
        - width: 100%
        - height: 100%
        - object-fit: contain
    tap_action:
      action: call-service

card

entities:
  - card_type: horizontal-stack
    cards:
      - aspect_ratio: 8.4/3
        entity: script.lounge_macro_watch_tv
        icon: 'mdi:television-classic'
        name: Watch TV
        service: script.lounge_macro_watch_tv
        template: menu_button
        type: 'custom:button-card'
      - aspect_ratio: 8.4/3
        entity: script.lounge_macro_watch_movie
        icon: 'mdi:filmstrip'
        name: Watch Movie
        service: script.lounge_macro_watch_movie
        template: menu_button
        type: 'custom:button-card'
    type: 'custom:hui-element'
  - card_type: horizontal-stack
    cards:
      - aspect_ratio: 8.4/3
        entity: script.lounge_macro_listen_music
        icon: 'mdi:airplay'
        name: Airplay
        service: script.lounge_macro_listen_music
        template: menu_button
        type: 'custom:button-card'
      - aspect_ratio: 8.4/3
        entity: script.lounge_macro_watch_youtube
        icon: 'mdi:monitor-speaker'
        name: PC Sound
        service: script.lounge_macro_watch_youtube
        template: menu_button
        type: 'custom:button-card'
    type: 'custom:hui-element'
  - card_type: horizontal-stack
    cards:
      - aspect_ratio: 16/3
        entity: script.lounge_macro_goodnight
        icon: 'mdi:weather-night'
        name: All Off (Lights Delayed 30sec)
        service: script.lounge_macro_goodnight
        template: menu_button
        type: 'custom:button-card'
    type: 'custom:hui-element'
show_header_toggle: false
style:
  .: |
    ha-card {
      border: solid 1px var(--primary-color);
      background: url("/local/background/card_bg_{{states('input_select.select_theme')}}.png");
    }
    ha-card div.card-header {
      padding-top: 8px;
      padding-bottom: 36px;
    }
title: Scene Select
type: entities

Calling the scripts directly from the developer tools services menu works as expected.

I don’t see where you defined the service you are calling?
Did have some issues with my buttons… I was calling script.turn_on instead of using script.name-of-script… dunno when that changed

service is not a main configuration entry, it is only exists inside *_action so if you don’t want to define action: call-service in your button instance, you’ll still have to define:

tap_action:
  service: xxxxxx
1 Like

It’s written in my answer (= instead of ==)

1 Like

Weird. I could swear that was working.

Can someone pls help me with the config of a button card:

color: auto
color_type: card
entity: switch.tumble_dryer
hold_action:
  action: more-info
icon: 'mdi:tumble-dryer'
label: Dryer
name: Tumble
show_label: true
state:
  - color: white
    styles:
      card:
        - animation: blink 2s ease infinite
        - color: 'rgb(255, 0, 0)'
    value: 'on'
  - color: 'rgb(255, 255, 255)'
    value: 'off'
type: 'custom:button-card'

The above works fine based on the on/off state of my wifi switch (flashes red when it is on) but I need to create the exact same but to work off of a sensor.tumble_dryer value which is the wattage value of the wifi switch.
Not sure how to change this part so I can say if value is > 10watts then flash red (means the dryer is on)

state:
  - color: white
    styles:
      card:
        - animation: blink 2s ease infinite
        - color: 'rgb(255, 0, 0)'
    value: 'on'
  - color: 'rgb(255, 255, 255)'
    value: 'off'

Any ideas?

That should do it instead of value: 'on'

value: 10
operator: '>' 

That did it :slight_smile:
Much obliged.

Is there a way to align the card so that the entity_picture is on the left and all the data is on the right side?
Currently all the data is at the bottom of my entity_pitcture.

  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: device_tracker.google_maps
        entity_picture: /local/lovelace/Presence/Home.png
        aspect_ratio: 1/1
        name: Ron
        show_entity_picture: true
        state:
          - value: "home"
            styles:
              entity_picture:
                - filter: opacity(0%)
                - filter: grayscale(0%)
        styles:
          card:
            - border-radius: 0%
            - padding: 5%
            - color: ivory
            - font-size: 12px
            - text-shadow: 0px 0px 0px black
            - text-transform: capitalize
            - justify-self: end
            - align-self: middle
            - font-family: avenir
          grid:
            - grid-template-areas: '"i status" "n n" "address address" "battery battery" "charging charging"'
            - grid-template-columns: 1fr 1fr
            - grid-template-rows: 1fr min-content min-content min-content min-content min-content
          name:
            - font-size: 16px
            - align-self: middle
            - justify-self: start
            - padding-bottom: 0px
          icon:
            - width: 70%
          entity_picture:
            - filter: opacity(50%)
            - filter: grayscale(100%)
          custom_fields:
            status:
              - align-self: start
              - justify-self: end
              - color: gray
            address:
              - padding-bottom: 0px
              - align-self: middle
              - justify-self: start
              - color: gray
            battery:
              - padding-bottom: 0px
              - align-self: middle
              - justify-self: start
              - color: gray
              - '--text-color-sensor': '[[[ if (states["sensor.mobile_battery"].state < 50) return "#EF4F1A"; ]]]'
            charging:
              - padding-bottom: 0px
              - align-self: middle
              - justify-self: start
              - color: gray
        custom_fields:
          status: |
            [[[
              return `<ha-icon
                style="width: 12px; height: 12px; color: black;">
                </ha-icon><span>${entity.state}</span>`
            ]]]
          address: |
            [[[
              return `<ha-icon
                icon="mdi:map-marker-distance"
                style="width: 12px; height: 12px; color: deepskyblue;">
                </ha-icon>  <span>\<span style="color: var(--text-color-sensor);">${states['sensor.phone_geocoded_location'].state}</span></span>`
            ]]]
          battery: |
            [[[
              return `<ha-icon
                icon="mdi:cellphone-iphone"
                style="width: 12px; height: 12px; color: deepskyblue;">
                </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.mobile_battery'].state}% battery</span></span>`
            ]]]
          charging: |
            [[[
              return `<ha-icon
                icon="mdi:flash"
                style="width: 12px; height: 12px; color: deepskyblue;">
                </ha-icon>  <span>\<span style="color: var(--text-color-sensor);">Charging: ${states['device_tracker.google_maps}</span></span>`
            ]]]

@RomRider Thanks - I’ve been working at it a while and am pretty happy with where it’s come. The pop-up card is what really makes it long, though, not button card specifically. Will clickable hot zones ever be a part of the card? That would really be an amazing upgrade from my point of view.

@anilet Glad to see it’s not a complete unintelligible mess to everyone but me!

@ThaNerd In grid-template-areas you have 5 value sets but in grid-template-rows you have 6 rows defined. There needs to be the same number of those two things or the grid breaks. Speaking of the grid, to separate the entity picture on the left and the data on the right, that’s how you do it. Make a column that has only the entity picture on the left side and then another column with your data points on the right.

Something like ‘“i status” “i n” “i address” “i battery” “i charging”’ would make the ‘i’ fill up the entire left column, while the grid areas are spread out across the right column.

Or if you wanted the name and status to be full length across the top, the identity picture in the bottom left corner, and the other info in the bottom right, you could do something like ‘“status status” “n n” “i address” “i battery” “i charging”’

(I made a post a while back doing my best to explain the grid for someone who was confused by it, in case it’s helpful) Lovelace: Button card

1 Like

After installing latest HA release some of my buttons disappeared also if i did not changed anything in the configs…
For example these buttons are not anymore visible in the frontend:

                      - type: custom:button-card
                        entity: 'binary_sensor.updater'
                        icon: 'mdi:home-assistant'
                        name: Home Assistant
                        styles:
                          card:
                            - padding-left: 5px
                            - font-size: 12px
                            - font-weight: normal
                            - font-family: 'Georgia'
                            - text-transform: capitalize
                            - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
                          grid:
                            - grid-template-areas: '"i i" "n n" "current current" "local local" '
                            - grid-template-columns: 1fr
                            - grid-template-rows: 1fr min-content min-content
                          name:
                            - font-weight: normal
                            - font-size: 13px
                            - align-self: middle
                            - justify-self: start
                            - padding-bottom: 4px
                          img_cell:
                            - justify-content: start
                            - align-items: start
                          icon:
                            - color: >
                                [[[
                                  if (entity.state == 'on') return 'red';
                                  return 'green';
                                ]]]
                            - animation: >
                                  [[[
                                    if (entity.state == 'on') return 'blink 2s ease infinite';
                                  ]]]                                
                          custom_fields:
                            current:
                              - align-self: start
                              - justify-self: start
                              - --text-color-sensor: >
                                  [[[ if (entity.state == 'on') return 'red'; return 'green'; ]]]
                            local:
                              - align-self: start
                              - justify-self: start
                        custom_fields:
                          current: >
                            [[[
                            return `<ha-icon
                              icon='mdi:home-assistant'
                              style='width: 12px; height: 12px; color: deepskyblue;'>
                            </ha-icon><span>Current: <span style='color: var(--text-color-sensor);animation: var(--animation)'>${states['sensor.latest_version'].state}</span></span>`
                            ]]]
                          local: >
                            [[[
                              return `<ha-icon
                                icon='mdi:home-assistant'
                                style='width: 12px; height: 12px; color: deepskyblue;'>
                              </ha-icon><span>Local: <span style='color: green;'>${states['sensor.current_version'].state}</span></span>`
                            ]]]
                      - type: custom:button-card
                        entity: sensor.rpi_power_status
                        show_state: true
                        name: RPi <br> Power Status
                        styles:
                          card:
                            - font-weight: normal
                            - font-size: 10px
                            - font-family: 'Georgia'
                            - height: 100%
                          icon:
                            - color: >
                                [[[
                                  if (entity.state == 0) return 'red';
                                  return 'green';
                                ]]]
                            
                      - type: custom:button-card
                        entity: sensor.hacs
                        show_state: true
                        name: HACS
                        styles:
                          card:
                            - font-weight: normal
                            - font-size: 12px
                            - font-family: 'Georgia'
                            - height: 100%
                          icon:
                            - color: >
                                [[[
                                  if (entity.state >= 1) return 'red';
                                  return 'green';
                                ]]]
                            - animation: >
                                [[[
                                  if (entity.state >= 1) return 'blink 2s ease infinite';
                                ]]] 

While others like this:

                    - type: custom:button-card
                      entity: sensor.home_assistant_log
                      show_state: true
                      name: Logfile

Are visible like before…
What has changed?

Is there a way to remove the card outline?
I’ve tried the different 'color_type’s

I’m having the same issue, but for me none of the cards are working

I found the issue is about custom stack-in-card i was using with those button cards…
Changing it to vertical-stack all was working again… Hoping in a fast fix!

Probably this:

styles:
  card:
    - background: none

stack-in-card has an issue, I need to look into it but didn’t have time for now

it should now be fixed with stack-in-card v0.1.1: Stack-In-Card: Drop-in replacement for vertical-stack-in-card

So I changed it to ‘“status status” “n n” “i address” “i battery” “i charging”’ and I got this:

so in that code I see all the fields but which one assigns where the entity_picture: goes? Seems like the code you provided made 4 columns…

There aren’t 4 columns, but your justify-self settings make it look like there are. Without knowing what you want the card to finally look like, I can’t provide very specific help. I’ll assume you want a heading across the entire top of the card since that’s the version of my 2 suggestions you used.

  1. To answer your question, entity_picture is defined by i (since you’ve made show_entity_picture: true the entity_picture replaces your icon. i for icon.)

  2. Start by changing justify-self: settings for both name: and status: to justify-self: center. That should show you that the name and status grid areas are spread across the entire top of both columns (and that you only have two, not four). The image and data points will be in the lower portion of the card, separated by the two columns.

  3. Your entity_picture is cut off because it either needs to be made smaller, or you need to change your rows to some other size other than min-content (You can also use fractions of available space, using the nomenclature 1fr 2fr etc)

  4. Again, if you give me a visual of what you want the card to look like I can be a lot more helpful.