Lovelace: Button card

Hi
I created a PR for the use of the icon defined in a state. It has been accepted by the creator of the card and should be released soon.

Good job!

Thank you.

tried it; does not work

will this fix be applied this evening? @thomasloven

@elRadix, this is not @thomaslovenā€™s card.
Have you tried to increment the version number in the resources section of ui-lovelace.yaml?
Also i had to hammer CTRL-F5 multiple times.

Not having gone into the depths of the HA code yet is there a better example that could be used to that doesnā€™t make the cards rely on external sources?

Hopefully, we will see most of these features become part of the official entity-button card and then we donā€™t have to rely on external resources for these basic features.

2 Likes

For the ones that get errors since yesterday (custom:card not found) I just did this and it fixed the problem for me, go to your button-card.js file (default location /local/button-card.js, local is the www folder in your homeassistant installation) and edit the file with any text editor. Then replace line 3 with this address:

https://unpkg-gcp.firebaseapp.com/@polymer/[email protected]/lit-element.js?module

Then save and restart Home Assistant (donā€™t know if you have to restart it but I did it anyways :stuck_out_tongue:). When everything is back online refresh the page a few times as it will take a few tries. If it doesnā€™t clear out your browser cache and try again. They work fine for me now. Hope this helps.

Looks like someone have replaced the urls with localhost:5000? :rofl:

example for button card, weather card etc
https://unpkg.com/@polymer/[email protected]/lit-element.js?module=

its now:

import { PropertiesMixin } from "http://localhost:5000/@polymer/polymer@^3.0.2/lib/mixins/properties-mixin.js?module"; import { camelToDashCase } from "http://localhost:5000/@polymer/polymer@^3.0.2/lib/utils/case-map.js?module"; import { render } from "http://localhost:5000/lit-html@^0.10.0/lib/shady-render.js?module"; export { html, svg } from "http://localhost:5000/lit-html@^0.10.0/lib/lit-extended.js?module";

Its should be like previous version:
https://unpkg.com/@polymer/[email protected]/lit-element.js?module=

I see many custom cards tries to use the broken one at
https://unpkg.com/@polymer/[email protected]/lit-element.js?module=

Also same error for
https://unpkg.com/@polymer/lit-element@^0.6.4/lit-element.js?module

I dropped a new release folks. It includes a fix to the cdn url and custom icon for states.

4 Likes

I have just configured this card to use it as I could not change the colour of an input_boolean (using the core-card) when I switch on/off but this works GREAT!!

The only ā€˜issueā€™ is that I canā€™t edit this card when I use the new lovelace .storage mode.

I agree but as per discussion earlier here Iā€™m not going to hold my breath.

Thank you!

Thanks ! What do you think about storing local all the js files ?

Reply, I just updated the card as it was broken. Now itā€™s fixed again tnx for that! But I have an input_boolean configured, now when I press the button this show up:

image

It didnā€™t beforeā€¦how can I disable this popup?

Config:

    - type: "custom:button-card"
      name: Afwezig
      icon: mdi:account-arrow-right
      size: 60px
      color: rgb(28, 128, 199)
      #color_off: rgb(28, 128, 199)
      entity: input_boolean.scene_afwezig

Thaaanks :slight_smile:

hi guys,

for some reason my custom buttons have started failing

iā€™m on 0.85 which i updated to on release, yet these buttons on stopped loading today

Capture

cards:
  - card_style: ''
color: var(--primary-text-color)
color_off: var(--disabled-text-color)
color_type: icon
default_color: var(--primary-text-color)
entity: script.tvvolumeup
icon: 'mdi:volume-plus'
name: TV Volume Up
size: 30%
type: 'custom:button-card'
  - card_style: ''
color: var(--primary-text-color)
color_off: var(--disabled-text-color)
color_type: icon
default_color: var(--primary-text-color)
entity: script.tvvolumedown
icon: 'mdi:volume-minus'
name: TV VOLUME DOWN
size: 30%
type: 'custom:button-card'
type: horizontal-stack

Could someone please help me

fixed version now available (see a few posts further up)

1 Like

Iā€™ve replaced the .js card with your updated version and restarted yet itā€™s still the same

What am I doing wrong?

did you delete cookies and all site data, cache?

1 Like

I have now :slight_smile:
Thank you

1 Like

YAY Updates!!! Thank you!