Hmmm, doesn’t seem to work unfortunately. It just throw and error and doesn’t allow me to load the Lovelace UI 
Has anybody been able to make this card work on a Fire HD 10 running Fully Kiosk Browser (it works in Chrome and Silk, but not in FKB)? Keep getting the “custom element doesn’t exist” message. All other custom cards work flawlessly. Thanks!
have you make the script that you are calling?
Thats magnificent news! Do you have a link? Anxious to start with that. Been waiting for that since the demise of regular Tiles
Yes, they’re all scripts and i’m calling them as services. It seems as though you cannot have more than one entity per button??
So i can use the different actions ie tap and hold but for only the one entity, not multiple entities.
It’s in the main Tiles thread…
thanks, that’s cool! Missed it completely watching the original repo.
before we needed the input-text for each set of tiles, and put that into a group. Isn’t that required any longer now? Suffices to declare this main tiles set and have it show?
Don’t think so, been a while since I set it up and also left the old one still running. I did have to make a few subtle changes to the code copied from the customize file but it should be fairly obvious what as I remember it didn’t take long to do.
ok thanks.
for now I get this:
…
–edit-- that was a spacing issue. got my first Lovelace tiles!
seems this is not as nifty yet in autmatic spacing, row heights, icon_colors etc yet, so Ill have to keep my carefully configured Tiles in the legacy front-end after all… Hope this will be fixed soon then.
Glad to assist wherever possible
thx for pointing me to this
please help me out here, Im trying to use these apparently available possible settings in my Card:
if(config.title) newConfig.card_settings.title = config.title;
if(config.columns) newConfig.card_settings.columns = config.columns;
if(config.column_width) newConfig.card_settings.column_width = config.column_width;
if(config.row_height) newConfig.card_settings.row_height = config.row_height;
if(config.gap) newConfig.card_settings.gap = config.gap;
if(config.text_align) newConfig.common_settings.text_align_legacy = config.text_align;
if(config.text_uppercase == false) newConfig.common_settings.label.transform = "none";
if(config.color) newConfig.common_settings.background.value = config.color;
if(config.color_on) newConfig.common_settings.background.value_on = config.color_on;
if(config.color_off) newConfig.common_settings.background.value_off = config.color_off;
if(config.label) newConfig.common_settings.label.value = config.label;
if(config.text_color) newConfig.common_settings.label.color = config.text_color;
if(config.text_color_on) newConfig.common_settings.label.color_on = config.text_color_on;
if(config.text_color_off) newConfig.common_settings.label.color_off = config.text_color_off;
if(config.text_size) newConfig.common_settings.label.size = config.text_size;
if(config.label_sec) newConfig.common_settings.label_sec.value = config.label_sec;
if(config.text_sec_color) newConfig.common_settings.label_sec.color = config.text_sec_color;
if(config.text_sec_color_on) newConfig.common_settings.label_sec.color_on = config. text_sec_color_on;
if(config.text_sec_color_off) newConfig.common_settings.label_sec.color_off = config.text_sec_color_off;
if(config.text_sec_size) newConfig.common_settings.label_sec.size = config.text_sec_size;
if(config.icon_size) newConfig.common_settings.icon.size = config.icon_size;
No matter what I try, the only attributes that stick are color_on, color_off and row_height.
I can’t get the icon, label, label_sec or text to color as they should.
this is my global config for a set of tiles:
- type: custom:tiles-card
legacy_config:
columns: 4
row_height: 70px
color_on: '#F0C209'
color_off: '#555B65'
text_uppercase: false
text_color_on: '#555B65'
text_color_off: '#F0C209'
text_size: 1em
text_sec_size: 1em
text_align: center
entities:
all icons and text show white:
while the should show:
isn’t this yet fully implemented, or am I doing something wrong here?
thx for having a look! @rodrigodf
Strange, mine’s identical.
Do you have any more input to your readme so I can see how you can use this and what type of different settings you can use?
The original readme is gone also or can you post an example file?
I am doing some work of my own home here and this is what I have been doing so far.
I have made a link-card so I can navigate from a button to a homepage like url: /lovelace/0
I have also made a “space-card” as you can see so it makes a no-card that also effect the spacing on the height for the next button.
2 Likes
Having trouble with the colour of my on/off button for the TV.
Should be red for ‘off’ and green for ‘on’ but the ‘on’ is not showing green. I think it’s because the state changes from ‘off’ to ‘playing’ rather than ‘on’.
Any way around this?
- type: "custom:button-card" entity: media_player.lg_webos_smart_tv icon: mdi:power color: rgb(0, 255, 0) color_off: rgb(255, 0, 0) show_state: true
Found the ‘state’ option and that fixed it.
- type: "custom:button-card"
entity: media_player.lg_webos_smart_tv
icon: mdi:power
show_state: true
state:
- value: 'off'
color: rgb(255, 0, 0)
- value: 'playing'
color: rgb(0, 255, 0)Nice work…
For anyone who, like me, wants to change the icon based on the state - I’ve managed to get this working by nesting this custom card inside of a conditional. Here is a sample of the settings.
- type: conditional
conditions:
- entity: switch.kitchen_pendant
state: on
card:
type: custom:button-card
entity: switch.kitchen_pendant
icon: mdi:toggle-switch
action: toggle
name: Pendants
show_state: true
- type: conditional
conditions:
- entity: switch.kitchen_pendant
state: off
card:
type: custom:button-card
entity: switch.kitchen_pendant
icon: mdi:toggle-switch-off-outline
action: toggle
name: Pendants
show_state: true
Yes, this is a lot of work for an icon change but it’ll suffice for the time being. Hopefully we’ll see this button card receive the ability to switch mdi:icons with a simple state entry the same way button coloring is applied.
3 Likes
Hi,
You could actually do this a couple of ways already. I did create this but then thought it was redundant since you can fetch the icon from the attributes. At least in my case since I was using a Cover template. So instead we added the attribute option for icon.
But if your switch is not a template switch you can create one from your current switch, https://www.home-assistant.io/components/switch.template/. Use templating to set the icon based on state. Ex.
icon_template: >-
{% if is_state('cover.garage_door', 'open') %}
mdi:garage-open
{% else %}
mdi:garage
{% endif %}
Then use icon: attribute in your card config.
If this does not help let me know. I think I saved the code to add icon_on: and icon_off option instead.
Hi
If I use this code in the “UI-editor” for lovelace… It works, but it locks up the editor so I’m not able to edit it in UI or Raw mode anymore… can only delete the card…
Anyone else with this issue?
type: 'custom:button-card'
icon: mdi:sofa
name: Library
action: service
service:
domain: scene
action: turn_on
data:
entity_id: scene.library_fullCan one call any service with this button card? Or only scripts?
I have the below in my ui-lovelace.yaml but no action is fired when pressing the button?
- type: horizontal-stack
cards:
- type: "custom:button-card"
color_type: label-card
color: auto
name: Home
action: service
service:
domain: input_select
action: select_option
data:
entity_id: input_select.home_mode
option: Home
- type: "custom:button-card"
color_type: label-card
color: rgb(44, 109, 214)
name: Away
action: service
service:
domain: input_select
action: select_option
data:
entity_id: input_select.home_mode
option: Away
Intact, no matter what action I chose, nothing works?
HA version 0.82.1