Lovelace: Button card

kuuji · October 16, 2018, 1:41pm

No I think I need to add support for it. I have some tradfri that I don’t use yet so I should be able to see how these bulbs works.

folrewef · October 16, 2018, 2:42pm

Ok - looking forward to that if you do.

Klagio · October 17, 2018, 8:46am

Love this card, one of the favorite.

HAving a hard time with coloring the card. For example I want to have a button card to turn ON a scene with light bulbs in red coloir: ideally the card should be

when the light is OFF background white (or very light red colour)
when light is ON background red

How to do the above? Below my config which is not working (just the colours)

p.s. if you have better ideas on how to present it in frontend I am all ears

      - type: "custom:button-card"
        icon: mdi:sofa
        name: Red dining room
        action: service
        color: auto
        color_type: card
        default_color: rgb(255, 233, 155)
        service:
          domain: scene
          action: turn_on
          data:
            entity_id: scene.red_dining_room

Klagio · October 17, 2018, 8:49am

Other small cosmetic issue: I am having a hard time finding an appropriate/nice icon for the lights that I have in the Garden (outdoor/patio/garden I can’t find any suitable icon)

woody4165 · October 17, 2018, 10:01am

Hi all

I’m getting this error as some others I saw in this topic.

This is my config

  - url: /local/custom-lovelace/button-card/button-card.js
    type: js


  - type: vertical-stack
    cards:
      - type: "custom:button-card"
        entity: switch.plug_158d0001259685
        icon: mdi:floor-lamp
        color: rgb(28, 128, 199)
      - type: "custom:button-card"
        entity: switch.piantana_pranzo
        icon: mdi:floor-lamp
        color: rgb(28, 128, 199)

Any advice?

Thanks

PS: I found the issue.
In the resources part I had

  - url: /local/custom-lovelace/button-card/button-card.js
    type: js

instead of

  - url: /local/custom-lovelace/button-card/button-card.js
    type: module

tomoqv · October 17, 2018, 10:14am

I am a long time hass.io user, but have relatively recently started to experiment with the new Lovelace UI. Lovelace seems very sensitive to config and versions, particularly for some custom cards. I am getting the “Custom element doesn’t exist error” in about every other custom card I try. I find it very hard to debug the issue and it remains “hit and miss” for me. Also I haven’t yet figured out if the actual folder (as long as it is placed somewhere under /config/www/) matters as long as the resource component in the ui-lovelace.yaml points to the correct path for the js file.

woody4165 · October 17, 2018, 10:33am

@tomoqv
you have to save all the custom lovelace js stuff somewhere under config/www folder

I have created a custom-lovelace folder under www and then for each component I have created subfolders in which there are the .js files

Then in the ui-lovelace.yaml in the resources part I just refer to the correct folder like

  - url: /local/custom-lovelace/toggle-lock-entity-row/toggle-lock-entity-row.js
    type: js

That’s it.

tomoqv · October 17, 2018, 2:46pm

@woody4165
Thanks, good to know that the js files can be located in different sub folders of /config/www.

When it comes to wether HA finds the resources or not, seems to be a different issue. As I said, it has so far been “hit or miss” for me. I have really made an effort to point to the right filename under the correct path, but some custom cards have HA throw this dreadful error no matter what I try while others work without issue. I have even tried to have only one resource and one custom card at a time without succeeding with e.g. monster-card or weather-card.

woody4165 · October 17, 2018, 2:51pm

You should share some code from configuration.yaml and from ui-lovelace.yaml to give better answer…

tomoqv · October 17, 2018, 2:54pm

I have shared some code in this post. Sorry for being so persistent about this, but it is really bugging me that I can’t make it work! And I don’t seem to be the only one…

sparkydave · October 22, 2018, 4:28am

@kuuji I’m really liking this card. I’m not sure if this card can do this already with the correct config but I would like to have a button which changes icon colour based on the state of an entity_id but has a click action to run a script. Is this possible?

infiniteloop · October 22, 2018, 4:23pm

Hi all,
i have some issue with css style.
It’s like there’s another white card under the one I’m styling.
For example if I use border-radius i get something like this.

Is this the expected behaviour?

I’m running hassio 80.3 (last version I think)

bosbefok · October 24, 2018, 1:13am

Is it possible to add support for ‘per state’ icons?
E.g:

state:
    - value: 'closed'
      color: var(--state-icon-color)
      icon: mdi:garage
    - value: 'open'
      color: var(--state-icon-active-color)
      icon: mdi:garage-open

Martin_Granger · October 26, 2018, 11:39am

Toggle issues!

I’m trying to set up a card to toggle all of my downstairs lights on / off, but the issue is that it is toggling each individual light state, not the group state. So I end up with half the lights turning off and the other half on.
Hope that makes sense?!?
My code:

- type: "custom:button-card"
                entity: group.downstairs
                icon: mdi:cloud-question
                name: "Downstairs Lights"
                show_state: false
                style:
                  - text-transform: none

vloris · October 26, 2018, 1:35pm

It makes sense. I just don’t know what you are expecting. You want one button to toggle all lights on or off. But if there is already a mix (some lights on, some off), what do you want the button to do? All on? Or all off?

Martin_Granger · October 26, 2018, 1:42pm

I essentially want the button to act like the standard group toggle switch. So if anything in that group is on, it turns everything off. The image shows my standard group toggle for my hall. the group is ‘on’ if anything in that group is on, and only ‘off’ if everything is off. I’d just like that functionality in a nicer button.
I understand that I could easily add an on & an off button, but I don’t really want to use all that screen real estate.

kuuji · October 28, 2018, 11:12pm

Hey folks!

You might have noticed that the latest release of home assistant includes a button-card.
This is not my initiative and I was not included at all into this, even though it was clearly inspired by my project.

You may also have noticed that the official button card doesn’t include all of the features that I’ve been adding for you guys. It looks like the developer has no intention of including these in the future.

On my side I’ll continue working on my project and try and include the features you guys ask.

Cheers!

Jer78 · October 29, 2018, 4:24am

Yeah I was wondering about that. I read through the docs and saw it doesn’t nearly have what yours does, what’s the point of dumbing down someone’s work? It just confuses users more than anything. Keep up the good job on your version! It’s way better.

arsaboo · October 29, 2018, 5:29pm

You should add these features to the HA core. There is no reason to keep working on custom cards. It is easier to get smaller PRs accepted than trying to add everything.

The project has been around for few months and should have been submitted to the core long time back.

kuuji · October 29, 2018, 8:09pm

@arsaboo someone on discord told me that some features will never be brought over and that basically this custom project will be the only way to access advanced features.

Besides that, I don’t feel great about this whole thing. If the dev that created this fork in the core repo wanted me to help, He could have mentioned me on the original PR or even here on the forum.

At this point, I don’t feel that my help is welcomed/needed.