Lovelace: Button card

Probably, what error do you have in the javascript console of your browser?
If any of the entities in your entities list is modified, it will show up if you have the same problem as me.

I’m going to investigate it’s really strange.

So many things to do :scream:

I had a tap action with service as the action that stopped working… now need to specify call-service? Is that a breaking change I missed?

You’re right, it has been removed in 1.0.0, I forgot to mention it, sorry.

We really appreciate your amazing work on this card, but please don’t burn out trying to do everything for everyone asap. :slight_smile: Do the easy wins first and then look at minor issues like this one at a later date - we’re a patient bunch!

1 Like

No worries. Thanks! Love this card.

1 Like

Appreciate your support :slight_smile:
There’s some background work to do to be able to introduce new stuff, that’s what I’m working on currently :wink:

@apt @jumper @DavidFW1960, the bot is fixed, custom_updater should pick the new version now :wink:

1 Like

Yep it’s now available. I did think it was a long time, appreciate the hard work.

Am I blind but I can’t find the syntax for adding rotation? I have a fan ready and waiting :slight_smile:

Ah found it… its spin: true

@RomRider @jarrah Here is the console error I get (firefox) when the config-template-card/button card first loads on a new login: (the button then appears following a lovelace>REFRESH)

SyntaxError: An invalid or illegal string was specified 
config-template-card.js:2776

Here’s from chrome (a bit after the error, chrome loads the button spontaneously). Also, background.png is not a file I specify in my configurations:

Failed to load resource: the server responded with a status of 404 (Not Found) ... background.png

 config-template-card.js:2776 Uncaught (in promise) DOMException: Failed to execute 'whenDefined' on 'CustomElementRegistry': "custom:button-card" is not a valid custom element name
        at HTMLElement.createThing (http://192.168.xx.xxx:8123/local/config-template-card.js:2776:24)
        at HTMLElement.render (http://192.168.xx.xxx:8123/local/config-template-card.js:2693:30)
        at HTMLElement.update (http://192.168.xx.xxx:8123/local/config-template-card.js:2593:37)
        at HTMLElement.performUpdate (http://192.168.xx.xxx:8123/local/config-template-card.js:2098:18)
        at HTMLElement._enqueueUpdate (http://192.168.xx.xxx:8123/local/config-template-card.js:2060:29)

oh yes, so it does! Interesting but useful workaround for now, thanks!

Proper width, height and icon size support incoming (works with all the different layouts also) :slight_smile:
https://github.com/custom-cards/button-card/pull/132

8 Likes

Astounding, Thanks

:tada::tada: Version 1.3.0 :tada::tada:
New Features

  • Complete rewrite of the card using CSS grids for easier maintenance

  • size and CSS height are now working properly. Fixes #15, Fixes #111, Fixes #79

  • Ability to specify the width of the card through styles (card without width specified will occupy the remaining space). Fixes #29

        - type: horizontal-stack
          cards:
            - type: "custom:button-card"
              entity: light.test_light
              color: auto
              name: s:default h:200px
              style:
                - height: 200px
            - type: "custom:button-card"
              entity: light.test_light
              color_type: card
              color: auto
              name: s:100% h:200px
              size: 100%
              style:
                - height: 200px
            - type: "custom:button-card"
              entity: light.test_light
              color_type: card
              color: auto
              size: 10%
              name: s:10% h:200px
              style:
                - height: 200px
        - type: horizontal-stack
          cards:
            - type: "custom:button-card"
              entity: light.test_light
              color: auto
              name: 60px
              style:
                - height: 60px
                - width: 60px
            - type: "custom:button-card"
              entity: light.test_light
              color_type: card
              color: auto
              name: 80px
              style:
                - height: 80px
                - width: 30px
            - type: "custom:button-card"
              entity: light.test_light
              color_type: card
              color: auto
              name: 300px
              style:
                - height: 300px
    

Have fun and give feedback :slight_smile:

6 Likes

This PR should fix it:

2 Likes

:tada::tada: Version 1.4.0 :tada::tada:
New features

  • New option label: can be used for anything, if template is needed, use label_template. Both are also available per state. Fixes #112, Fixes #120

  • New option show_label: default is false. To display the label or label_template field

  • New layout: icon_label to display the label on the right side of the icon

  • templating support :tada: in label_template and state with the template operator. For more advanced templates, please use the config-template-card. The next version of config-template-card (available soon) will fix the issue you all had in the past.

    • In label_template:
      Home_Assistant
      - type: "custom:button-card"
        color_type: icon
        entity: light.test_light
        label_template: >
          var bri = states['light.test_light'].attributes.brightness;
          return 'Brightness: ' + (bri ? bri : '0') + '%';
        show_label: true
        size: 15%
        style:
          - height: 100px
      - type: "custom:button-card"
        color_type: icon
        entity: light.test_light
        layout: icon_label
        label_template: >
          return 'Other State: ' + states['switch.skylight'].state;
        show_label: true
        show_name: false
        style:
          - height: 100px
      
    • value with template operator
      - type: "custom:button-card"
        color_type: icon
        entity: switch.skylight
        show_state: true
        show_label: true
        state:
          - operator: template
            value: >
              return states['light.test_light'].attributes
              && (states['light.test_light'].attributes.brightness <= 100)
            icon: mdi:alert
          - operator: default
            icon: mdi:lightbulb
      - type: "custom:button-card"
        color_type: icon
        entity: light.test_light
        show_label: true
        state:
          - operator: template
            value: >
              return states['input_select.light_mode'].state === 'night_mode'
            icon: mdi:weather-night
            label: Night Mode
          - operator: default
            icon: mdi:white-balance-sunny
            label: Day Mode
      

Fixes

  • Blank card was not following the specified width
5 Likes

That test light is way too bright :wink:

2 Likes

Nice I was asking this a few days ago, (without answer though). But this is amazing once again. I have reworked my setup with haptic feedback support. Amazing!

1 Like

You are doing absolutely incredible stuff!

3 Likes

Thanks for implementing templates @RomRider!

Removed my previous edit as I realised I hadn’t followed the example exactly. :slight_smile:

1 Like