Lovelace: Button card

Share your Projects! Dashboards & Frontend
247

I am trying to add a volume controller to my google home, i have added the below code. When pressing the button i receive the below error

https://xxxxxxxxxxxxxxxxxxxxlocal/custom-lovelace/button-card/button-card.js:229:28 Uncaught TypeError: Cannot read property 'entity_id' of undefined


  - type: "custom:button-card"
    color_type: blank-card
    color_type: card
    color: rgb(223, 255, 97)
    icon: mdi:volume-plus
    action: service
    service: media_player.volume_up
    domain: media_player
    action: volume_up
    data:
         entity_id: media_player.googlehome447
248

Suddenly my lovelace custom cards stopped working with

Access to script at 'https://unpkg.com/@polymer/lit-element@%5E0.5.2/lit-element.js?module' from origin 'https://xxx.duckdns.org:344444' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Anyone else having issues?

249

ok well since I didnā€™t get assistance with his, I went another way, I created scripts for each command and set the buttons to toggle the scriptsā€¦
I feel itā€™s not the percfect way, a little indirect, but it worksā€¦

250

I feel a bit stupid to ask but I just switched to Lovelace and trying the different cards. With below I would expect that -when I click the button- the light actually goes on/off and the icon changes from yellow to white and visa versa. However it just shows the state and tapping has no effect. Iā€™ve tried several variations.

What am I missing?

type: entity-button
tap_action:
  - action: toggle
entity:
  - switch.fibaro_system_fgwpef_wall_plug_gen5_switch
251

Maybe indentantion is wrongā€¦
Try:

type: entity-button
  tap_action:
    - action: toggle
  entity: switch.fibaro_system_fgwpef_wall_plug_gen5_switch
252

thanks but thatā€™s not it. Your proposal actually creates indention errors. sorry

253

This button card is different than the stock button card. They just happen to share the same name. Assuming youā€™ve already declared the use of this custom button card and downloaded the corresponding .js file, Your yaml code should be something like:

type: custom:button-card
tap_action:
  - action: toggle
entity: switch.fibaro_system_fgwpef_wall_plug_gen5_switch

Also, since you are only using one entity, you donā€™t really need to declare a list with the dash (i.e.
- switch.fibaro_system_fgwpef_wall_plug_gen5_switch)

254

Trying to create a button for my alarm_control_panel which has different icons and color depending on the state, but I cant use any icons I want, this for example will only show the correct icon for state ā€œarmed_awayā€

But if I change the icon for state ā€œarmed_homeā€ to mdi:clock it works fine.
I also tried to use shield-home and shield-off on another custom button, same issue there.
So Iā€™m guessing some icons dont work, I thought it might been icons with ā€œ-ā€ in itā€™s names, but water-percent works, and also window-closed.

Anyone else noticed this?

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: conditional
        conditions:
          - entity: alarm_control_panel.grave_alarm
            state: armed_away
        card:
          type: custom:button-card
          entity: alarm_control_panel.grave_alarm
          icon: mdi:security
          action: more_info
          state:
            - value: 'armed_away'
              color: rgb(0, 255, 0)
      - type: conditional 
        conditions:
          - entity: alarm_control_panel.grave_alarm
            state: armed_home
        card:
          type: custom:button-card
          entity: alarm_control_panel.grave_alarm
          icon: mdi:shield-home
          action: more_info
          state:
            - value: 'armed_home'
              color: rgb(251, 210, 41)
      - type: conditional 
        conditions:
          - entity: alarm_control_panel.grave_alarm
            state: disarmed
        card:
          type: custom:button-card
          entity: alarm_control_panel.grave_alarm
          icon: mdi:shield-off
          action: more_info
          state:
            - value: 'disarmed'
              color: rgb(255, 0, 0)
255

To my knowledge, this card doesnā€™t properly support the changing of the icons based on the state of the entity. It has been requested a couple of times.

As a work around, you could use a conditional card, one for every state, where the main difference is the icon itself. I posted an example of this process earlier in this thread.

257

I use a different setup that works for me but its a lots of more things into itā€¦

The setup I use and it involves input_boolean, input_select and a sensor.
I dont know if its the smartest setup but it works for meā€¦ But I have the same problems like youā€¦ some of the icons wont work like mdi:shield-lock or mdi:shield-home, they just turn up blank.

I dont know why and I am still looking into it.

258

Any idea what Iā€™m doing wrong hereā€¦canā€™t get the custom button to size properly?

[Album] Imgur 
      - type: horizontal-stack
        cards:
          - type: light
            entity: light.bedroom_light
          - type: custom:button-card
            entity: switch.bedside_lamp
            action: toggle
259

Hi, thank you for this awesome Button card. However, could you implement an icon template, please? And I canā€™t switch off and on group of switches/lights, only toggle. Thanks :slight_smile:

1 Like
260

Hi there,

is it me or is something broken right now?
For some reason it says:

custom card doesnā€™t exist: button-card.

I did not touch anything and it worked for weeksā€¦
Is anyone else having this problem?

EDIT: Now it works again, after about 1 hourā€¦

261

happened the other day. Came back after awhile, just an issue with the source location not been available.

262

The Light Card is difficult to tweak. I suspect the issue is with the card itself. Many have tried to tweak this card and failed.

263

Indeed, I also donā€™t get these icons working.

264

Same, mine just break randomly. Long-pressing and then selecting the action works; but just the tap no longer does, most of the time.

265

Hi All,

I would like to highly recommend an alternative to Button Card, one that is being actively developed, and whose developer is responsive!

Itā€™s a follow-on from Custom UI: Tiles, and is a fully functional and separate LoveLace custom card that follows strongly in its original Tiles roots. It is very customisable and feature rich with what you can do!

Anyway, as a taster, this is what Iā€™ve done with mine:
image

Discussion starts here: Custom UI: Tiles
Github here: https://github.com/rodrigofragadf/lovelace-cards/tree/master/tiles-card

5 Likes
266

most likely becuase the ā€˜@polymer/lit-elementā€™ package this custom card depends on has been deprecated (@polymer/lit-element - npm)

267

Found a fix, you need to edit the the button-card.js file.

remove the ā€˜^ā€™ from line 3 in the url (next to the version number 0.5.2)

} from 'https://unpkg.com/@polymer/lit-element@^0.5.2/lit-element.js?module';

becomes

} from 'https://unpkg.com/@polymer/[email protected]/lit-element.js?module';

if this does not fix it for you it is likely because HA has cached the js file. to force it to refresh add or increment the version number in your ui-lovelace.yaml
eg:

resources:
  - url: /local/button-card.js?v=1.0.5
2 Likes