Very useful card, thanks for sharing! I am wondering if it is possible to set a custom color for the off state?
2 Likes
Great work. Can we define different icons based on the state of the entity? I was trying to use it with my Garage door cover entity. Would be good to show separate icons when itās open vs closed.
2 Likes
Iām working on that 
1 Like
Just an empty color button?
I was able to show the name without an icon by setting an invalid icon. Thatās because if you do not set an icon, it does not show the name.
1 Like
I released a new version! I updated this topic and created a changelog on github.
More feature requests and feedback are very welcome and appreciated!
Thanks!
4 Likes
Thanks for this card @kuuji! Iāve noticed that if I have color_type of card and the entity is off, the tile uses var(--disabled-text-color), which doesnāt look quite right. Adding the following solves this for me:
color_off: var(--disabled-icon-color)
Also, this makes a really cool tile interface by adding the following to get a square tile:
style: - height: 0 - padding-bottom: 50% - padding-top: 50%
The only issue I have is that I havenāt figured out how to add a name for a temperature entity where the state is used instead of an icon.
Hey @JoRoCoBo! Thanks a lot for your feedback!
Adding the following solves this for me:
color_off: var(--disabled-icon-color)
That is a great idea. Iāll add that by default for the card style in my next release
Also, this makes a really cool tile interface by adding the following to get a square tile:
I can show that as an example on the readme. Or feel free to take a screenshot and snippet of your configuration and open a PR.
The only issue I have is that I havenāt figured out how to add a name for a temperature entity where the state is used instead of an icon.
It works for me but it shows next to each other.
Iād have to figure out a way to make that better. Dang CSS =/
- type: "custom:button-card"
entity: light.office
show_state: true
name: Office
Hi,
i like to use your card on my amazon fire tablet with the silk browser. But it says that
n.setConfig is not a function
Maybe you could have a look?
Hey @teqqy
n.setConfig is not a function
It sounds like your web browser does not support custom components. This is fairly new technology that doesnāt work everywhere. Some lovelace component donāt use it but this card does (and other ones too)
Iād suggest going with chrome if you can, it seems to have the best support afaik.
For reference, the lovelace faq about this =>
Excelente!
Tks for ācolor_typeā and āshow_stateā. I only need now āserviceā in āactionā and image suport.
Tks for ācolor_typeā and āshow_stateā. I only need now āserviceā in āactionā and image suport.
Thatās on my radar ;). That and support for the tracker_card.
Likely in my next release.
1 Like
Hi @kuuji
Thnx for this useful nice dashboard , very useffull & nice. Please , could you advice , when I am trying to use command :
- type: ācustom:no-cardā
I am getting following message :
Sun Sep 02 2018 19:59:47 GMT+0200 (Central European Summer Time)
http://X.X.X.X:8123/local/no-card.js:7:1 Uncaught SyntaxError: Unexpected token <
Could you advise please ?
Thank you.
hassbian
raspberry 3+
Home Assistant 0.77.2
So, I started using the buttons and realized that it will be nice to have an option to templatize icons. We can allow different icons based on states (something that is currently being used in LL). Alternately, we already have the icon_template that folks are using to set the icons based on the state (or other conditions). We can probably use that information.
Since, we are using LL, we should probably use the state_image option.
Iām unsure what no-card.js is. But itās not from my project, unless you renamed it.
Did you follow the instructions here?
Thatās neat. Iāll look into the implementation of the picture-elements to do something similar and keep a similar naming.
Thanks for the tip! 
Good jobā¦please share 
1 Like
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: "custom:no-card"
- type: "custom:button-card"
entity: script.controle_tv_sala_mudo
icon: mdi:volume-off
style:
- --disabled-text-color: white
- type: "custom:no-card"
- type: "custom:button-card"
entity: script.controle_tv_sala_power
icon: mdi:power
style:
- background-color: red
- --disabled-text-color: white
- type: "custom:no-card"
- type: horizontal-stack
cards:
- type: "custom:no-card"
- type: "custom:button-card"
entity: script.controle_tv_sala_1
name: "1"
show_state: false
- type: "custom:button-card"
entity: script.controle_tv_sala_2
show_state: false
name: "2"
- type: "custom:button-card"
entity: script.controle_tv_sala_3
show_state: false
name: "3"
- type: "custom:no-card"
- type: horizontal-stack
cards:
- type: "custom:no-card"
- type: "custom:button-card"
entity: script.controle_tv_sala_4
name: "4"
show_state: false
- type: "custom:button-card"
entity: script.controle_tv_sala_5
show_state: false
name: "5"
- type: "custom:button-card"
entity: script.controle_tv_sala_6
show_state: false
name: "6"
- type: "custom:no-card"
- type: horizontal-stack
cards:
- type: "custom:no-card"
- type: "custom:button-card"
entity: script.controle_tv_sala_7
name: "7"
show_state: false
- type: "custom:button-card"
entity: script.controle_tv_sala_8
show_state: false
name: "8"
- type: "custom:button-card"
entity: script.controle_tv_sala_9
show_state: false
name: "9"
- type: "custom:no-card"
- type: horizontal-stack
cards:
- type: "custom:no-card"
- type: "custom:no-card"
- type: "custom:button-card"
entity: script.controle_tv_sala_0
show_state: false
name: "0"
- type: "custom:no-card"
- type: "custom:no-card"
- type: horizontal-stack
cards:
- type: "custom:button-card"
entity: script.controle_tv_sala_cima
icon: mdi:menu-up-outline
style:
- --disabled-text-color: white
- type: "custom:no-card"
- type: "custom:button-card"
entity: script.controle_tv_sala_seta_cima
icon: mdi:menu-up
style:
- --disabled-text-color: var(--primary-text-color)
- type: "custom:no-card"
- type: "custom:button-card"
entity: script.controle_tv_sala_up
icon: mdi:volume-plus
style:
- --disabled-text-color: white
- type: horizontal-stack
cards:
- type: "custom:button-card"
entity: script.controle_tv_sala_baixo
icon: mdi:menu-down-outline
style:
- --disabled-text-color: white
- type: "custom:button-card"
entity: script.controle_tv_sala_seta_esquerda
icon: mdi:menu-left
style:
- --disabled-text-color: var(--primary-text-color)
- type: "custom:button-card"
entity: script.controle_tv_sala_ok
#icon: mdi:solid
name: "OK"
show_state: false
style:
- --disabled-text-color: white
- font-weight: bold
- height: 3.1em;
- type: "custom:button-card"
entity: script.controle_tv_sala_seta_direita
icon: mdi:menu-right
style:
- --disabled-text-color: var(--primary-text-color)
- type: "custom:button-card"
entity: script.controle_tv_sala_down
icon: mdi:volume-minus
style:
- --disabled-text-color: white
- type: horizontal-stack
cards:
- type: "custom:button-card"
entity: script.controle_tv_sala_return
icon: mdi:undo-variant
style:
- --disabled-text-color: white
- type: "custom:no-card"
- type: "custom:button-card"
entity: script.controle_tv_sala_seta_baixo
icon: mdi:menu-down
style:
- --disabled-text-color: --disabled-text-color
- background-color: var(--paper-card-background-color)
- type: "custom:no-card"
- type: "custom:no-card"
- type: horizontal-stack
cards:
- type: picture-elements
image: /local/img/lovelace/button-label.png
elements:
- type: service-button
title: "NET"
service: media_player.select_source
service_data:
entity_id: media_player.tv_sala
source: "HDMI 4"
style:
left: 52%
top: 50%
font-size: 1.5em
- type: picture-elements
image: /local/img/lovelace/button-label.png
elements:
- type: service-button
title: "Apple TV"
service: media_player.select_source
service_data:
entity_id: media_player.tv_sala
source: "HDMI 3"
style:
left: 52%
top: 50%
font-size: 1.5em
- type: picture-elements
image: /local/img/lovelace/button-label.png
elements:
- type: service-button
title: "AUX"
service: media_player.select_source
service_data:
entity_id: media_player.tv_sala
source: "HDMI 2"
style:
left: 52%
top: 50%
font-size: 1.5em
- type: horizontal-stack
cards:
- type: picture-elements
image: /local/img/lovelace/button.png
elements:
- type: image
image: "/local/img/canais/netflix.png"
service: script.controle_tv_sala_netflix
tap_action: call-service
style:
left: 50%
top: 50%
icon-size: 50px
width: 90%
- type: picture-elements
image: /local/img/lovelace/button.png
elements:
- type: image
image: "/local/img/canais/globo2.png"
service: script.tv_sala_globo
tap_action: call-service
style:
left: 50%
top: 50%
width: 90%
- type: picture-elements
image: /local/img/lovelace/button.png
elements:
- type: image
image: "/local/img/canais/natgeo.png"
service: script.tv_sala_natgeo
tap_action: call-service
style:
left: 50%
top: 50%
width: 90%
- type: picture-elements
image: /local/img/lovelace/button.png
elements:
- type: image
image: "/local/img/canais/discovery.png"
service: script.tv_sala_discovery
tap_action: call-service
style:
left: 50%
top: 50%
width: 90%
- type: horizontal-stack
cards:
- type: picture-elements
image: /local/img/lovelace/button.png
elements:
- type: image
image: "/local/img/canais/history.png"
service: script.tv_sala_history
tap_action: call-service
style:
left: 50%
top: 50%
width: 90%
- type: picture-elements
image: /local/img/lovelace/button.png
elements:
- type: image
image: "/local/img/canais/discovery_turbo.png"
service: script.tv_sala_discovery_turbo
tap_action: call-service
style:
left: 50%
top: 50%
icon-size: 50px
width: 90%
- type: picture-elements
image: /local/img/lovelace/button.png
elements:
- type: image
image: "/local/img/canais/pfc.png"
service: script.tv_sala_pfc
tap_action: call-service
style:
left: 50%
top: 50%
width: 90%
- type: picture-elements
image: /local/img/lovelace/button.png
elements:
- type: image
image: "/local/img/canais/combate.png"
service: script.tv_sala_combate
tap_action: call-service
style:
left: 50%
top: 50%
width: 90%
- type: horizontal-stack
cards:
- type: picture-elements
image: /local/img/lovelace/button.png
elements:
- type: image
image: "/local/img/canais/sportv.png"
service: script.tv_sala_sportv
tap_action: call-service
style:
left: 50%
top: 50%
width: 90%
- type: picture-elements
image: /local/img/lovelace/button.png
elements:
- type: image
image: "/local/img/canais/axn.png"
service: script.tv_sala_axn
tap_action: call-service
style:
left: 50%
top: 50%
icon-size: 50px
width: 90%
- type: picture-elements
image: /local/img/lovelace/button.png
elements:
- type: image
image: "/local/img/canais/telecine.png"
service: script.tv_sala_telecine
tap_action: call-service
style:
left: 50%
top: 50%
width: 90%
- type: picture-elements
image: /local/img/lovelace/button.png
elements:
- type: image
image: "/local/img/canais/hbo.png"
service: script.tv_sala_hbo
tap_action: call-service
style:
left: 50%
top: 50%
width: 90%
12 Likes
That looks great! Where is this no-card ?