custom-cards / button-card Goto Github PK

You custom button car does not show up in my tracker card for custom_updater. All other custom components and custom card are showing up properly. I do have 2 urls for the tracker if that matters. heres my config:

custom_updater:
track:
- components
- cards
card_urls:
- https://raw.githubusercontent.com/kuuji/button-card/master/tracker.json
- https://raw.githubusercontent.com/kalkih/mini-media-player/master/tracker.json

I also tried

custom_updater:
track:
- components
- cards
card_urls:
- https://raw.githubusercontent.com/kuuji/button-card/master/tracker.json
card_urls:
- https://raw.githubusercontent.com/kalkih/mini-media-player/master/tracker.json

and that didnt work

I'm fed up with entity-button, as are many others, and would like to propose moving a good chunk of your awesome work into the core entity-button. I don't think there will ever become a point where core button would be nearly as feature rich as your button-card, and hope you don't think I'm trying to run you out of business :) If anything, I'm hoping that we can make entity-button a lot better so that your custom card could actually just extended it with more awesomeness.

Any objections? I don't want to step on any toes.

I would like to do it slowly, as well, adding bits and pieces to make sure we do it smart. I, of course, would love it if you were the one to submit it to core, but know that free-time is not easily found by most devs :)

Let me know your thoughts. Thanks! 🍻

Can now add UI Editors to custom cards. e.g. my Roku Card

Hi ! i'm trying to find the right syntax to execute a shell command...

I tried this :

     - type: custom:card-modder
        card:  
            type: "custom:button-card"
            icon: 'mdi:arrow-left-bold-outline'
            action: service
            service: shell_command.kodi_salon_left
            color: rgb(0, 225, 255)
            color_off: rgb( 200, 200, 200)

Feature Request
Can the feature that a button can work as a link to a specific site be implemented?
Like:
action: navigate
navigation_path: /lovelace/0

Like the function you have in Picture Elements Card.
Thx for the good work!

Hello,

I just set this up and noticed that it loads a few unpkg.com dependencies.

Is there a way to have all the dependencies hosted localy instead of a third party ?

Thanks !

Hello everyone! Great custom ui, just love it! Thanks for the time and effort.

I was wondering why this happens here: only the light group does not changes the color, like this:

Code:

      - type: horizontal-stack
        cards:
          - type: custom:button-card
            entity: light.entrada
            icon: mdi:lightbulb
            action: toggle
            size: 60%
            color: rgb(211, 47, 47)
            name: Entrada
            style:
              - text-transform: none
          - type: custom:button-card
            entity: light.luzes_principais_cozinha
            icon: mdi:lightbulb
            action: toggle
            size: 60%
            color: rgb(211, 47, 47)
            name: Cozinha
            style:
              - text-transform: none
          - type: custom:button-card
            entity: light.area_servico
            icon: mdi:lightbulb
            action: toggle
            size: 60%
            color: rgb(211, 47, 47)
            name: Area serviço
            style:
              - text-transform: none

Thanks.

So, I tried to add two different types of button cards as follows:

          - type: horizontal-stack
            cards:
              - type: "custom:button-card"
                color_type: blank-card
              - type: "custom:button-card"
                color_type: card
                color: rgb(223, 255, 97)
                icon: mdi:volume-plus
                action: service
                service:
                  domain: media_player
                  action: volume_up
                  data:
                    entity_id: media_player.family_room_2
              - type: "custom:button-card"
                color_type: card
                color: rgb(223, 255, 97)
                icon: mdi:volume-minus
                action: service
                service:
                  domain: media_player
                  action: volume_down
                  data:
                    entity_id: media_player.family_room_2
              - type: "custom:button-card"
                entity: sensor.sonos_volume
                color_type: card
                show_state: true
                color: rgb(223, 255, 97)
                action: more_info
              - type: "custom:button-card"
                color_type: blank-card

However, they don't align well.

Notice how the state card is slightly smaller than the other cards.

With HA 0.86.4 the toggle does not toggle only, it also opens up the info dialog.

The behaviour is the same under Chrome, Opera and Android Chrome.

I tried also with the branch from Lopton where long_click toggles correctly but a simple don't.

Are there any other events generated now on click?

Thank you.

since 0.88
virt env
no traceback

http://10.3.1.2:8123/local/button-card.js?v=0.0.5:1:39 Uncaught TypeError: Cannot convert undefined or null to object

from chrome dev console:

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
8ee9235853b66c6b78f9.chunk.js:5609 Uncaught (in promise) /local/button-card.js

If i try to open the url from the "import section" of the button-card.js code, theres an error too.

Covered my whole lovelace UI in buttons to control the house - LOVE IT! Thanks

Would it be possible to have a color_trigger based on attribute? I'm thinking of primarily a fan
(so if the speed = 'low') then the color of the button would change then?
If you had 3 buttons (low, medium, high)
you could set instead of off or on (as the fan doesnt have off or on) color_trigger based on the attribute of the fan speed.

- type: "custom:button-card"
                entity: switch.bedroom_fan
                size: 48px
                icon: mdi:fan
                name: Low
                action: service
                service:
                  domain: fan
                  action: set_speed
                  data:
                    entity_id: fan.bedroom_fan
                    speed: low
                color_type: card
                color_off: rgb(68, 70, 73)
                color: rgb(1, 121, 116)
                **color_trigger: 
                  value_template:  "{{ is_state('fan.attributes.speed', 'low')}}"**

I am being a little lazy here as could make switches for each speed, but i'm thinking of also those folks that use it for tv remotes (ie light up the xbox logo when that attribute is set)?

I used a script to toggle the state of my garage door and the color changes as expected, but I was hoping that I could also change the icon to indicate state.

Here is my example code:

          - type: custom:button-card
            action: service
            color_type: card
            color: rgb(66, 134, 244)
            entity: cover.garage_door
            icon: mdi:garage
            service:
              domain: script
              action: turn_on
              data:
                entity_id: script.toggle_garage_door
            show_state: true
            state:
              - value: 'closed'
                color: var(--disabled-text-color)
                icon: mdi:garage
              - value: 'closing'
                color: rgb(66, 134, 244)
                icon: mdi:garage-open
              - value: 'open'
                color: rgb(66, 134, 244)
                icon: mdi:garage-open
              - value: 'opening'
                color: rgb(66, 134, 244)
                icon: mdi:garage-open

Heya
So not sure if you have enabled this but i cant get my icon_template to work and wanted to check if you either have coded it (and its broken my end) or you havent added it?

Not sure what's easier
icon_on
icon_off

OR
use the icon_template from the entity?

I wondered if its possible to get a little smarter on my remote and a button to show the mdi:play icon or mdi:pause icon depending on the state of the switch.

The description for size says it resizes the icon, but it actually seems to resize both the icon and the button.

Nothing wrong with that (although you might consider updating the documentation)... except I'd like to scale just the icon while leaving the overall button size unchanged (some icons look too small/large next to others). It's a minor issue, so if it's more trouble than it's worth, no biggie. Only challenge might be how to handle attempts to scale the icon larger than the button - maybe there is a limit of +/- 25% or something.

Thank you very much for this card - the ability to change the color of the whole button on action is especially nice!

Unrelated: your examples seems to imply you have a dark theme for lovelace? Could you share how you're doing that?

Would be great if we could have this call a service as well

Since upgraded to HA 86.x the following errors appear in the log when visiting views with the custom button-card component in Chrome and Safari:

https:/URL:8123/frontend_latest/8ee9235853b66c6b78f9.chunk.js:3254:365 Uncaught TypeError: Cannot read property 'replaceChild' of null

When I out-comment the custom buttond-card config there is no error.

Hi,

I'd love to be able to track my garage door using one of your buttons and use one icon mdi:garage (green) when closed and another icon mdi:garage-open (red), when open. Very high WAF.

Is that doable?

Please add auto align to your code so icons will not get cut
Thanks.

Before the latest HA update, I could set the css style 'width: 675px' to modify the width of a column or vertical stack. Since the last HA update, it no longer works, or recognizes that setting.

Hi, can you add the name of entity_id, I just put 3 in a horizontalk stack and ...

Is there a chance to add options, where after clicking on the button, next button are shown underneath
example, after clicking "living room" button, underneath i have buttons from light switches, info from all sensors?

Hey,

For lights we need the option to open the more_info window to change the brightness or color of the light... but it makes sense for light buttons to have the action of toggle instead of more_info. Hence I think a long tap for the more_info window would make sense.

Hi there,
working my way through all the lovelace UI docs, and stumbled across your button card (super handy so thank you)
Is it possible to set the color, but instead of it changing the mdi icon, it changes the whole button?

If I use a group entity with the button, it toggles all items in the group, instead of toggling the group.
For example, if one light in the group is on and all others are off, one light will turn back off, and all others will turn on.

This is the error I get while trying to use Button card with one of my entities :

ERROR (MainThread) [frontend.js.latest.201809160] http://x.x.x.x:8123/local/custom_ui/button-card.js?v=1:1:8 Uncaught SyntaxError: Unexpected token {

Attached is the Chrome debugger screenshot to emphasize

Hi there,

Your URL below is wrong so my custom updater is not seeing the new release. Don't know how to edit it or make a PR so leaving it here as an issue.

You have:

custom_updater:
  card_urls:
    - https://raw.githubusercontent.com/kuuji/button-card/0.0.2/tracker.json

Shoud be?

custom_updater:
  card_urls:
    - https://raw.githubusercontent.com/kuuji/button-card/master/tracker.json

When using 'action: service' the "color" (color on) parameter is not working

Hi there,

Trying to create a button to turn off all lights. Toggle works but off course turns on all lights that are off in the opposite state which is undesirable. Just want to turn off all lights when pushed and icon tracks all lights state. Below is not working.

              - type: "custom:button-card"
                # entity: group.all_lights
                icon: mdi:lightbulb-on-outline
                color: rgb(255, 255, 47)
                action: service
                service:
                  domain: light
                  action: homeassistant.turn_off
                  data:
                    entity_id: group.all_lights
                name: All Lights

Any help would be appreciated

In custom:vertical-stack-in-card
get error 'element.setConfig is not a function'

  - type: custom:vertical-stack-in-card
    title: Living Room Light Control
    cards:
      - type: custom:color-picker
        show_header: false
        entity: light.living_room

      - type: "custom:button-card"
        entity: light.living_room
        icon: mdi:sofa
        color: auto

Best regards

was problem with vertical-stack-in-card ok in V1.1

Hi, I've installed Fully Kiosk Browser on an Amazon Fire Tablet
I see (attached) that the button cards are rendered incorrectly, anything I should change in my setup to make it work ?

What's needed to troubleshoot this issue ?

Thanks

HA forum down, so posting it here.

First: GREAT WORK! I love it! ❤️

It would be nice to add a name , text and background color to the blank-card, so you can use it as label.
In the moment i use:

          - type: "custom:button-card"
            color_off: var(--paper-card-background-color)
            color_type: icon
            name: Esszimmer

as label.

Works, but is clickable and raises error in the log because there's no entity.

Just a sidenote: Why are all the characters uppercase?

My button cards are not loading, and I get this error in my logs:

Uncaught SyntaxError: Identifier 'LitElement' has already been declared

I've tried updating the button-card.js to the version from #63, but get the same error. It's not a caching issue, as I get the same error in an incognito window with a fresh login.

tap_action toggle no longer works with the change implemented in 0.84.0

Would be great if the number of buttons that fit into one horizontal line could be specified or if that is not possible the minimum width. I try to fit 5 buttons into one line and depending on the width of the column the 5th does not show up.

Would it be possible to make the button colour change based on the state of another entity please? For example, can the State option be expanded to include entities?

- type: "custom:button-card"
  entity: sensor.windows_open
  name: "Windows"
  show_state: yes
  state:
    - entity_id: input_boolean.window_is_open
      value: 'on'
      color: rgb(5, 147, 255)
    - entity_id: input_boolean.window_is_open
      value: 'off'
      color: rgb(189, 255, 5)

The would allow me to show the number of open windows based on the sensor.windows_open state, but have the button colour as green if all are closed, and red if more than one is open.

This would work when using the following automation:

automation:
  - alias: "Windows Open"
    trigger:
      platform: numeric_state
      entity_id: sensor.windows_open
      above: 0
    action:
      - service: input_boolean.turn_on
        entity_id: input_boolean.window_is_open

Thanks in advance!

Is there any way to remove the shadow around the button?

Hi ! it could be really cool if we could play with the transparency. so have a fancy background and set the buttons with a 50% transparent when off for exemple

Hi,

If I either don't set the icon to any value or set it to attribute as stated it doesn't show up at all.

Icons set manually:

No icon set manually:

hassio 0.79.2
getting all the time error
`Log Details (ERROR)

Wed Oct 03 2018 22:23:58 GMT+0300 (FLE Daylight Time)

https://my.ip.address/local/button-card.js:154:26 TypeError: state is undefined`

after updating to 0.85.0 my lovelace not working :(

Home Assistant.pdf

Some mdi:icon are not working, like
kitchen
monitor-dashboard

both present in the mdi website .. or maybe I am wrong?

Please note the breaking change for custom cards from 0.88 release notes:

Note for Lovelace custom card developers: if you relied on the availability of <paper-button> in your code, you will have to update it to <mwc-button> to work like before.

I don't know if this is a straight substitution though??

Just wanted to say Thank you for your work! I used the button-cards in my lovelace setup, and I absolutely love it! That is the only custom card I use today. So elegant, easy to setup with great features, and of course well documented repository! We should make this functionality as part of core lovelace so that everyone can enjoy the benefits.

Again, THANK YOU if I wasn't clear enough 😄

Hi,
Thanks for your amazing work!

Is there any chance to group some buttons in a card, with a title? I don't know if already exist this feature or not...

Thanks in advance!

Hey,

I would love to see the states accept numeric values and operators (less/greater than etc).

I want to use this for temperature sensors and change the colour of the card based on how hot it is.

This shows up for a few seconds on when page is refreshed or loads for the first time. Can this be avoided?

I saw in a recent HA update they added long press support. Would be great to define another action for long press (toggle or service call) if possible :)

Hi there, first of all thanks for that hard work on this!
Whenever i add this card to the UI i cant use the raw config editor anymore.
I can add it can save it

But after it has been added and i wanne edit it again, i cant: it keeps loading the card config:

I also cannot use the raw editor then, it just seems blank.

When i remove the card, im able to view the raw config and edit it again..

Removed card:

RAW Editor:

Does this card only work in the YAML mode?

EDIT: Meanwhile i have found out that the problem only occurs when i open the view with the actual card. i can use RAW edit on all other views as long as i wont go to that view that holds the button-card. Once i have opened the view, i think the card loads and things brake. After that when i go back to check config, the config seems fine and i can open the raw editor again from all the other views till the moment i open the view with this card again, I hope u understand me, my language is not native English.

Here is the card config:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: sensor.harmony_activity
  - type: horizontal-stack
    cards:
    - type: custom:button-card
      entity: script.woonkamer_movies_tvshows
      icon: mdi:kodi
      color: rgb(0, 150, 255)
      color_off: rgb(0, 150, 255)
      name: Movies & TV Shows
    - type: custom:button-card
      entity: script.start.kodi
      icon: mdi:kodi
      color: rgb(0, 150, 255)
      color_off: rgb(0, 150, 255)
      name: Start Kodi
    - type: custom:button-card
      entity: script.woonkamer_ziggo_tv
      icon: mdi:television
      color: rgb(255, 140, 255)
      color_off: rgb(255, 140, 0)
      name: Ziggo TV
  - type: horizontal-stack
    cards:
    - type: custom:button-card
      entity: script.script.netflix_living_room
      icon: mdi:netflix
      color: rgb(255, 0, 0)
      color_off: rgb(255, 0, 0)
      name: Netflix
    - type: custom:button-card
      entity: script.woonkamer_spotify
      icon: mdi:spotify
      color: rgb(0, 255, 0)
      color_off: rgb(0, 255, 0)
      name: Spotify
    - type: custom:button-card
      entity: script.woonkamer_youtube
      icon: mdi:youtube
      color: rgb(255, 0, 0)
      color_off: rgb(255, 0, 0)
      name: Youtube
  - type: horizontal-stack
    cards:
    - type: custom:button-card
      entity: script.woonkamer_shutdown
      icon: mdi:power
      color: rgb(150, 150, 150)
      color_off: rgb(150, 150, 150)
      name: Shutdown