custom-cards / button-card Goto Github PK
View Code? Open in Web Editor NEW❇️ Lovelace button-card for home assistant
License: MIT License
❇️ Lovelace button-card for home assistant
License: MIT License
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.
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
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.
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..
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.