Lovelace: Button card

Share your Projects! Dashboards & Frontend
4098

Thanks for the quick reply, @RomRider . That makes sense, but I now have a very expected behavior with the code below. instead of (or maybe in addition to) evaluating the if statement in the template, the actual logged-in user name for Home Assistant changes to TOPFLOORTAB, both as shown on the sidebar and when opening the user settings menu from the sidebar.

The Lovelace code editor automatically changes entity_picture: > (as shown in the template docs) to entity_picture: | when saving the card. I’m a JavaScript novice. Could that have something to do wiht it?

entity_picture: |
  [[[
    if ( user.name = 'TOPFLOORTAB')
      return '/local/images/logos/sonos_white.png';
    else
      return '/local/images/logos/sonos_black.png';
  ]]]
show_entity_picture: true
styles:
  card:
    - padding: 15px
    - height: 60px
    - width: 120px
  entity_picture:
    - height: 17px
    - width: 86px
tap_action:
  action: call-service
  service: script.turn_on
  service_data:
    entity_id: script.call_sonos_topfloortab_launch
type: 'custom:button-card'
4099

Change that to
user.name == 'TOPFLOORTAB'
With one = you’re setting the user name, with two == you compare it.

4100

Thanks a lot for your reply @gerard33 . I had tested that change earlier by replacing the ==, swapping to another dashboard and then going back to the TOPFLOORTAB dashboard. I had the same behavior. I now realize that I should have also cleared the cache. This now works.

I appreciate that this isn’t a JavaScript tutorial thread :wink: but is there a reason in the context of the button card that = instead of == appears to mean that the if statement is ignored and instead it’s treated as variable setting–If that’s what’s happening?

Cheers.

4101

In almost ANY language = means assign a variable, == means compare.
You can assign a variable in a if statement (even if that’s pretty unusual
), but it will not return true, so the if will not do anything. Nothing specific to button-card, this is just plain javascript.

4102

Thanks. Understood.

4103

Next up I would like to get my bathroom lights onto the wall panel. The problem is that I have 3 things to control when I want the bathroom lights to go “on” or “off”.

I have a hue group,
light.master_bathroom_group

a single hue light,
light.master_bathroom_loo

and then a wall toggle switch that works the walk in closet lights
switch.master_bathroom_closet_lights_switch

I would like to have two buttons on my panel instead of a single one that does toggle. The reason for this is that at night only the light.master_bathroom_loo comes on so it is difficult to describe “on” since it changes based on the time of day.

Button 1: Turns off those three devices
Button 2: Turns on those three devices

I can take care of the styling of the button but I am not sure how to architect the tap action

Should I create two automations and call the automation when the user pushes the button
automation 1: turn those three devices off
automation 2: turn those three devices on

or should I accomplish it some other way. I am relatively new to Home Assistant and am still not fully aware of the things available to us.

thanks!!

4104

That seems to be a step in the right direction, but now I am getting an error on the card about reading the property.

ButtonCardJSTemplateError: TypeError: Cannot read property ‘octoprint_actual_bed_temp’ of undefined in ‘if (states.sensor.octoprint_actual_bed_temp.state > states.sensor.octoprint_target_bed_temp.state)
’

4105

Because your javascript is wrong:

        [[[
          if (states['sensor.octoprint_actual_bed_temp'].state > states['sensor.octoprint_target_bed_temp'].state)
            return 'green';
          else
            return 'red';
        ]]]
4106

That did it! Thanks!

4107

Don’t do fancy things in a tap_action, do that in the backend with scripts (not automation) and then call the scripts from the tap_action.

4108

Hello! I really love the Button card but since a few days I have a problem with it: The icon doesn’t get resized any longer. “size:” is ignored, and different sizes of the button don’t change anything. The icon is always displayed very small.
Does anyone here have an idea where to search for a solution? I already updated HA to 110.4 and loaded the latest button-card.js. Many thanks for your help!

4109

The answer is probably somewhere already, but I don’t seem to search on the correct keywords. But how do you arrange size different size buttons next to each other. Assume a full columns in lovelace with butons in a 2x3 grid where I want to have a double width button in it:

1 2 3
4 4 5

where 4 4 is one single wider button. I tried using aspect ratio but this just makes makes the height unequal to the button next to it (button 1,2,3,5 have all aspect ratio 1/1

Any help appreciated.

4110

I have found a ‘bug’.
I think


It seems to me that entity.state is not available if the button is included in a pop-up.

It might of course be that it is actually a ‘problem’ with browser_mod but I have no way of knowing.

Also, you might decide that is too obscure to want to look into but here it is in case you want to look at it.

This is the error when used in a pop-up:

button-card.js:1693 Uncaught ButtonCardJSTemplateError: TypeError: Cannot read property 'state' of undefined in 'var on_icon = 'mdi:checkbox-marked';
  var off_icon = 'mdi:checkbox-blank-outline';
  
  if (entit...'
    at HTMLElement.eval (eval at _evalTemplate (http://192.168.1.25:8123/hacsfiles/button-card/button-card.js:1691:14), <anonymous>:7:14)
    at HTMLElement._evalTemplate (http://192.168.1.25:8123/hacsfiles/button-card/button-card.js:1691:106)
    at HTMLElement._getTemplateOrValue (http://192.168.1.25:8123/hacsfiles/button-card/button-card.js:1700:97)
    at http://192.168.1.25:8123/hacsfiles/button-card/button-card.js:1958:62
    at Array.forEach (<anonymous>)
    at n (http://192.168.1.25:8123/hacsfiles/button-card/button-card.js:1957:40)
    at http://192.168.1.25:8123/hacsfiles/button-card/button-card.js:1958:40
    at Array.forEach (<anonymous>)
    at n (http://192.168.1.25:8123/hacsfiles/button-card/button-card.js:1957:40)
    at http://192.168.1.25:8123/hacsfiles/button-card/button-card.js:1958:40

which is caused by this segment:

custom_fields:
  check_box: >
    [[[
      var on_icon = 'mdi:checkbox-marked';
      var off_icon = 'mdi:checkbox-blank-outline';
      
      if (entity.state == 'on')
          return '<ha-icon icon="' + on_icon + '"></ha-icon>';
      else
          return '<ha-icon icon="' + off_icon + '"></ha-icon>';
    ]]]

and here is the full config for the button which works perfectly outside a pop-up:

image

type: custom:button-card
color_type: icon
entity: {{ entity }}
show_state: false
show_name: true
name: {{ name }}
show_icon: true
size: 50%
tap_action:
  action: toggle
styles:
  grid:
    - grid-template-areas: '"i n check_box"'
    - grid-template-columns: 20% auto 15%
    - grid-template-rows: 1fr
  img_cell:
    - padding: 0em
  card:
    - font-family: "[[[ return states['input_text.ui_font_family'].state ]]]"
    - padding: 0em
    - height: 2.5em
    - font-size: 14px
    - border-radius: 5px
  name:
    - justify-self: start
  custom_fields:
    check_box:
      - padding: 0.4em
custom_fields:
  check_box: >
    [[[
      var on_icon = 'mdi:checkbox-marked';
      var off_icon = 'mdi:checkbox-blank-outline';
      
      if (entity.state == 'on')
          return '<ha-icon icon="' + on_icon + '"></ha-icon>';
      else
          return '<ha-icon icon="' + off_icon + '"></ha-icon>';
    ]]] 
state:
  - value: 'on'
    name: {{ on_name }}
    styles:
      card:
        - background-color: var(--primary-background-color)
        - border: 1px solid var(--accent-color)
  - value: 'off'
    name: {{ off_name }}
    styles:
      card:
        - color: var(--secondary-text-color)
      icon:
        - color: var(--secondary-text-color)
1 Like
4111

This might be related to https://github.com/custom-cards/button-card/issues/337
I will take some time over the weekend to deal with it
 But I don’t manage to reproduce it for now.

1 Like
4112

Can you share please The entire config of this?

4113

I’m struggling with some custom colouring of a button card.

I have a button to control a garage door (cover). I also have an automation that starts a timer when it’s opened. I will get a notification on the companion app when this timer expires (i.e. I regard the door as left open for too long, for safety reasons).

On my button, I want to show an icon to indicate whether the door is open or closed. This works fine when using the cover as the entity. The button has a name displayed at the top, then the icon and underneath it the timer which should either display idle or the remaining time.

I discovered on this thread that for the countdown to work, the button’s entity must be the timer and not the cover. This is fine, as I can still implement the different icons and all that (I think). The config below will show a timer/stopwatch icon – I’m not worried about that for now.

I set the button’s entity to the timer and defined a style for the state with colours for the conditions, but it doesn’t change the red countdown time back to blue when the state changes to idle and I can’t see why.

The label in the config below is just a bit of debugging and also because I tried to do this with the label before I learned that the label won’t update.

Does anybody have an idea why it’s not working as I expect?

            cards:
              - type: custom:button-card
                name: Rouvé
                entity: timer.lhs_garage_door_timer #cover.lhs_garage_door
                label: >
                  [[[
                    return states['timer.lhs_garage_door_timer'].state;
                  ]]]
                show_name: true
                show_state: true
                show_label: true
                color_type: icon
                color: var(--paper-item-icon-color)
                styles:
                  name:
                    - color: var(--paper-item-icon-color)
                  state:
                    - operator: "=="
                      value: "idle"
                      color: var(--paper-item-icon-color);
                    - operator: "!="
                      value: "idle"
                      color: "red"
                  label:
                    - color: var(--paper-item-icon-color)
                  card:
                    - font-size: 12px
                  grid:
                    - grid-template-areas: '"n" "i" "s" "l"'
                    - grid-template-rows: min-content 1fr min-content
                    - grid-template-columns: 1fr

Screenshot 2020-06-05 at 18.42.58 Screenshot 2020-06-05 at 18.43.07

4114

The state part of your config should be a main config entry, not under styles.

state under styles is to apply CSS to the state field.
state as a main config entry is to apply several settings based on different state of the entity declared in the button.

4115

Thank you.

When I move that section, it colours the icon red but not the state (meaning the timer countdown/idle below the icon), and the icon’s colour doesn’t change (revert) when the state is idle. I must still be doing something wrong but I see the docs say that the colour change will only apply to the icon. How would one apply dynamic colours to the timer state text?

            cards:
              - type: custom:button-card
                name: Rouvé
                entity: timer.lhs_garage_door_timer #cover.lhs_garage_door
                label: >
                  [[[
                    return states['timer.lhs_garage_door_timer'].state;
                  ]]]
                show_name: true
                show_state: true
                show_label: true
                # color_type: icon
                # color: var(--paper-item-icon-color)
                state:
                  - operator: "=="
                    value: "idle"
                    color: var(--paper-item-icon-color);
                  - operator: "!="
                    value: "idle"
                    color: "red"

I noticed something else. When I define a minimal config for this button, I get an error in the log. I’m not sure whether this is related to my issue. I’m performing a full upgrade at the moment.

            cards:
              - type: custom:button-card
                entity: timer.lhs_garage_door_timer #cover.lhs_garage_door

2020-06-06 02:41:48 ERROR (MainThread) [frontend.js.latest.202004071] http://.../local/button-card.js:1436:27 Uncaught TypeError: Cannot read property 'states' of undefined

UPDATE:
I’ve upgraded to HA 0.110.5 (latest) and I’m using Button Card 3.3.5 (also latest) and I still see the error. Then I saw this was already reported above and logged as issue #337.

SOLUTION:
I’m quite happy with this. The power was in using an embedded custom button card that represents the timer. I first did it with the main card tied to the timer and then using a lot of JavaScript to get it to show state according to the cover’s status but then one needs to do more work for the actions to be tied to the cover. So, I reversed all the logic, which I think makes more sense and reads easier (but just mentioning it anyway to confirm how powerful this custom button is).

              - type: custom:button-card
                name: Rouvé
                entity: cover.lhs_garage_door
                show_name: true
                color_type: icon
                color: var(--paper-item-icon-color)
                custom_fields:
                  t:
                    card:
                      type: custom:button-card
                      name: Timer
                      entity: timer.lhs_garage_door_timer
                      show_name: false
                      show_icon: false
                      show_state: true
                      styles:
                        card:
                          - font-size: 12px
                        state:
                          - color: >
                              [[[
                                if (states['timer.lhs_garage_door_timer'].state == 'idle')
                                  return "var(--paper-item-icon-color)";
                                else
                                  return "red";
                              ]]]
                styles:
                  name:
                    - color: var(--paper-item-icon-color)
                  card:
                    - font-size: 12px
                  grid:
                    - grid-template-areas: '"n" "i" "t"'
                    - grid-template-rows: min-content 1fr min-content
                    - grid-template-columns: 1fr
                tap_action:
                  action: toggle
                  haptic: light
                hold_action:
                  action: more-info
                  haptic: selection

Screenshot 2020-06-06 at 17.04.26 Screenshot 2020-06-06 at 17.04.37

2 Likes
4116

I just installed button-card using HACS in my ‘regular’ install of HA on RPi running HASSOS. Super excited about adding it to my UI! On the HACS screen, when I click on the Plugin, I can see the instructions, including the TOC. The links in the TOC don’t seem to be working. I can see the anchor reference in the URL when clicked, but (at least in Firefox on Windows), it doesn’t take me to the anchor. Also, I would have thought that this web page would be in /config/www, but it’s not there, so I assume it is in a container somewhere, relatively inaccessable. Am I missing something?

Also, is the ui-lovelace-card.yaml still a thing? I thought that went away.

4117

You can still use yaml file for Lovelace - it’s still a supported option.