Lovelace: Button card

If it works with a glance card then why don’t you use a glance card?
What’s the problem with the spin?

Hi Guys,
I am going nuts over templating in custom-fields. I am trying a simple if-statement and am getting this error:

SyntaxError: Unexpected token ')' in 'if (states['input_boolean.vacuum_run_today'].state = ) return 'Harald ska städa idag'; else return...'

with this code:

  harald: >
    [[[ if (states['input_boolean.vacuum_run_today'].state = 1) return 'Harald
    ska städa'; else return 'Harald <strong>ska inte</strong> städa' ]]]

Any ideas on what I am doing wrong?

Thanks!
Rob

= is used to assign a value, == is used to compare a value.
Also the state of an input_boolean shouldn’t be 1 or 0, it’s “on” or “off” as far as I know.

  harald: >
    [[[
      if (states['input_boolean.vacuum_run_today'].state == 'on') 
        return 'Harald ska städa';
      else
        return 'Harald <strong>ska inte</strong> städa'
    ]]]
1 Like

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