Lovelace: Button card

I’m not sure we can do templating with lovelace. If you have an example of another module that supports that, could you send it my way?

Customizing the states and their icons is totally possible though, I’ll look into it, I think a lot of people would like that.

I was looking into doing that at the very beginning of this project but it was not very reliable. I’ll try to have a second look now that I’m more comfortable with the code.

1 Like

If you add empty buttons on each side you can get a smaller button. Check github, I have an example with some volume buttons.

I haven’t upgraded yet, I’ll do that soon and look into any issue that shows up.

I think my error turned out to be an issue on my end. Seems like when you upgrade, you have to redo the nest integration every time (I think that someone else has called that out before).

Hi @kuuji, it’s working great at the moment, so more of a feature request really. Would it be possible to allow custom sizing and padding of the buttons please?

For example, this screenshot in my post here: Custom UI: Tiles and another where I created custom graphics with no padding between borders: Custom UI: Tiles

Thanks!

1 Like

Hello,
short question:
is it possible to activate a Scene via a button?
because my script:

          - type: "custom:button-card"
            entity: scene.tv
            icon: mdi:television-box
            name: TV - Scene
            color: rgb(28, 128, 199)

only sends a toggle command which is not usefull here, or?
how can i send a simple “scene_on” with this entity?
because:

          - type: "custom:button-card"
            entity: scene.fernsehen
            icon: mdi:television-box
            name: TV - Scene
            color: rgb(28, 128, 199)
            action: service
            service:
              action: scene.turn_on

is also not working^^
Thx for help

This is working for me:

            action: service
            service:
              domain: scene
              action: turn_on
              data:
                entity_id: scene.lampen_aan
2 Likes

Exactly how I do mine too.

Thx, it worked for me now also.
One Question:
Is it possible to make the card compatible with Android Webview 59 (like in FireOS),
so it is displayed in the Fully Kiosk Browser on a Fire HD Tablet?
This would be awesome!
Thx Wiesl

I love this card, very useful.

Wish to have the following functionality, not sure if possible: basically I put a SCENE as the trigger, the SCENE turns ON some lights with a particular scene (brithgness, colours and so on); what would be nice to have is with a following click on the button to turn the LIGHTS off

I do not know if this has already been solved. I am using the button-card to create a panel for turning on and off lights. I would like the color of the icon to be the same as the icon lights would be in the theme I am using. In this case I am talking about the color of the lamps to the left in the picture.

image

I currently have the following setup:

          - type: custom:button-card
            entity: light.lampor_i_vardagsrummet
            icon: mdi:sofa
            name: Vardagsrum
            color: auto
            color_off: "#1DE9B6"
            action: toggle

I assume I would have to use some form of ‘var(–xxxxx-color)’. I do not know which I should use.

I guess it should look something like:

          - type: custom:button-card
            entity: light.lampor_i_vardagsrummet
            icon: mdi:sofa
            name: Vardagsrum
            color: "var(--yyyyy-color)"
            color_off: "var(--xxxxx-color)"
            action: toggle

Any help is appreciated.

Try something like this:

color: auto
default color: rgb(255, 233, 155)

Remove color_off

I do not know how to use default color. It is not an option to the card.

If I use color: auto I get white. No color_off gives me gray.

The theme is green when off and yellow that changes depending on brightness. I could off corse specify the green of the theme, but the it does not work when. I change theme.

@folrewef What type of bulb do you use? It’s possible that the card is unable to get the color of your bulb entities when you set it to auto.

If you want to set the color to a variable, it should totally work, as a matter of fact the default values for these are variables.

I’d recommend to dig in your theme to see what variables are available. Each theme can specify their own.

1 Like

I just released version 0.0.3 folks!

You probably noticed that the original post here is not up to date anymore. Updating both readme and this post has been tedious so I decided to just post changelog here and update the original post with minimal instructions.

Most of the examples will now be on github only.

Thank you all for your feedback and a special thanks to the users that open PRs.
Last note. If you’re trying to contact me for a bug or a feature request, github is probably the best place :wink:

Here’s the changelog for the new version

0.0.3

Custom state, label card and icon attribute

New features :

Custom state example with input select entity

              - type: "custom:button-card"
                entity: input_select.cube_mode
                icon: mdi:cube
                action: service
                show_state: true
                state:
                  - value: 'sleeping'
                    color: var(--disabled-text-color)
                  - value: 'media'
                    color: rgb(5, 147, 255)
                  - value: 'light'
                    color: rgb(189, 255, 5)

Other

  • Allow to show both state and name (and doesn’t break the style)
  • Support for unit of measurement
1 Like

@kuuji you the man! this update rocks!

2 Likes

Thanks a lot @simbesh

You move fast! Can’t believe you had time to update and make a gif before I’m even done updating this post :smiley:

I would use an input-boolean that triggers an automation to do what you want.

On the automation :

  • if input-boolean is true then trigger the service that activates the scene
  • if input-boolean is false then turn off the light.

Then you just configure the button-card on that input-boolean

1 Like

@kuuji I use Ikea Tradfri. I have made progress. I have the following now:

          - type: custom:button-card
            entity: light.lampor_i_vardagsrummet
            icon: mdi:sofa
            name: Vardagsrum
            color_type: icon
            color: "var(--state-icon-active-color)"
            color_off: "var(--state-icon-color)"
            action: toggle

If the theme does not change it I do not need to change “state-icon-active-color”. In the two themes I use I have had to specify “state-icon-color”. This works well and adapts to my changing the theme. Only issue now which of course is an extra is that the lights show different colors depending on brightness, but using “state-icon-active-color” does not allow for that.

Compare the color of the cutlery with the lamps under “Lampor i matsalen”. There must be some way of defining the color the same way as it is done by default in the glance card.

I love the card by the way.

By the way - the tracker still states that it is version 0.0.2 that is available.