One question, I see two tap_action (one in the template and one in the main code) and no condition, which one is going to be used?
ha, missed that copying from another template, thanks! Doesn’t really trouble since the config overrides the template…
but it can (should) be left out from the template in this setting probably, or at least be minimized to the haptic. Will see if they merge the way.
I’m new with templates, so I’m trying to do this
- type: "custom:button-card"
template: qnap_button_card_template
entity: sensor.qnapb3c_cpu_usage
icon: mdi:chip
name_template: >
return 'CPU: ' + entity.state + '%';
and the template
qnap_button_card_template:
color_type: icon
size: 30px
show_label: true
show_name: true
action: none
styles:
icon:
- height: 18px
card:
- height: 80px
name:
- color: white
- font-size: 16px
label:
- font-size: 12px
show_last_changed: true
where I should put the template in ui-lovelace.yaml ?
Some place specific ?
I’ve put at the end of the file and also within the tab where the card is defined, but it does not work
Thanks
no that won’t work, the template should be a global HA template, so place (or reference) it in ui-lovelace.yaml.
Are you using yaml mode? If so you can do this (of course adapt to your file/folder structure):
##############################################################################################################
# Mqtt Hub Lovelace configuration file, calling all Views via !include /config/lovelace/view_***
# for ease of editing the separate Views, and prevent errors while doing so to the full setup
##############################################################################################################
title: Mqtt Hub Lovelace
resources: !include /config/lovelace/resources/resources.yaml
button_card_templates: !include lovelace/includes/button_card_templates.yaml
etcetc
and have the button_cards_templates.yaml contain the templates:
button_picture_script_small:
size: 70%
show_state: false
show_label: false
show_name: true
show_entity_picture: true
color_type: card
tap_action:
# action: toggle
haptic: light
hold_action:
# action: more-info
haptic: success
styles:
card:
- border-radius: 12px
- width: 70px
- height: 70px
name:
# - justify-self: start
- padding-left: 3px
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
state:
- operator: default
color: grey
Yes, I’m using yaml mode, I’ve put after the resources: without using the !include way and strangely does not work
title: My home
resources:
- url: /customcards/custom-lovelace/thermostat-card/thermostat-card.js?track=true
type: module
.....
qnap_button_card_template:
color_type: icon
size: 30px
show_label: true
show_name: true
action: none
styles:
icon:
- height: 18px
card:
- height: 80px
name:
- color: white
- font-size: 16px
label:
- font-size: 12px
show_last_changed: true
EDIT:
Done it!
I’ve done your way, with includes, and now it’s working, I was missing the button_card_templates: and then the template
1 Like
Cool, it took me some time, but I have some working result now. From here I can build it out to include more stuff. Thanks for the help.
Result:
5 Likes
hello
is there anyway to define color according to lamp color (xiaomi) to the text only when on
i search this solution that is not the ideal for me…the real want that i wish is somethink like this:
looking very nice indeed!
how did you calculate the buttons widths, above the actual light buttons?
also, I take it this is desktop view? does it fit the mobile device also?
You can have the buttons call the MQTT service in the on tap action and then have something listen for the correct messages. I do all my logic in node red so i have node red listen for some mqtt actions. This is how I do the dim lights button below where it sends a message to mqtt and node red listens and dims some lights and turns some off.
I would like to have a card like yours for my fan/light. Right now I have the below setup but yours is much more compact.
If you want something that works right now, pop over to the fan-control-entity-row page and setup the custom card. This card works well is the inspiration behind my attempt to recreate it using button-card.
If you’d rather work from my incomplete configuration, here it is. As of now, the fan speed, on/off button and the button coloring are either incomplete. don’t work, or both. Also, don’t forget to change my entity ids to your own.
I offer this purely as a courtesy. As I said, this only partially works in my environment. I may abandon my efforts since it appears that to do this properly, I may have to learn Jinja 2 which may be outside of my capacity to do at this point. Good luck!
Button Templates
button_card_templates:
ceiling-fan-icon-settings:
show_icon: true
show_label: false
show_name: false
styles:
card:
- height: 36px
- width: 50px
grid:
- grid-template-areas: '"i"'
- grid-template-columnns: auto
icon:
- height: 26px
- width: 26px
state:
- value: 'on'
# styles:
# icon:
spin: true
ceiling-fan-name-settings:
show_icon: false
show_label: false
show_name: true
styles:
card:
- height: 36px
grid:
- grid-template-areas: '"n"'
- grid-template-columnns: auto
name:
- justify-self: start
state:
- value: 'on'
styles:
name:
color_type: icon
color: rgb(181, 142, 49)
fan-speed-settings:
show_icon: false
styles:
card:
- height: 35px
- font-size: 12px
- width: 35px
- border: 1px solid white
- border-radius: 5px
- text-transform: uppercase
- --paper-card-background-color: grey
icon:
- icon-size: 14px
state:
- value: 'on'
styles:
name:
- color: blue
- value: 'off'
styles:
vertical-divider-grey:
color_type: blank-card
styles:
card:
- width: 3px
- color: '#292929'
horizontal-divider-grey:
color_type: blank-card
styles:
card:
- height: 3px
- background-color: '#292929'
horizontal-divider-blk:
color_type: blank-card
styles:
card:
- height: 3px
- background-color: '#222222'
Card
- type: custom:vertical-stack-in-card
cards:
- type: custom:button-card
template: horizontal-divider-grey
- type: horizontal-stack
cards:
- type: custom:button-card
template: ceiling-fan-icon-settings
entity: fan.living_room_fan
tap_action:
action: call-service
service: fan.toggle
service_data:
entity_id: fan.living_room_fan
- type: custom:button-card
template: vertical-divider-grey
- type: custom:button-card
template: ceiling-fan-name-settings
entity: fan.living_room_fan
name: Fan
tap_action:
action: call-service
service: fan.toggle
service_data:
entity_id: fan.living_room_fan
- type: custom:button-card
entity: fan.living_room_fan
template: fan-speed-settings
name: low
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.living_room_fan
speed: low
- type: custom:button-card
template: vertical-divider-grey
- type: custom:button-card
entity: fan.living_room_fan
template: fan-speed-settings
name: med
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.living_room_fan
speed: medium
- type: custom:button-card
template: vertical-divider-grey
- type: custom:button-card
entity: fan.living_room_fan
template: fan-speed-settings
name: high
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.living_room_fan
speed: high
- type: custom:button-card
template: vertical-divider-grey
- type: custom:button-card
entity: fan.living_room_fan
template: fan-speed-settings
name: Off
tap_action:
action: call-service
service: fan.toggle
service_data:
entity_id: fan.living_room_fan
- type: custom:button-card
template: vertical-divider-grey
- type: custom:button-card
template: horizontal-divider-grey
Can the new templates work with the storage mode, if I am not using the yaml mode? Or do I need to go back to using yaml mode.
I’ve been trying to figure out where to place the template in the UI editor but so far no places have worked.
YAML mode only.
Edit: It’s possible in storage mode also.
I think I’m attempting to do something unorthodox. I’m trying to check for the value in speed_list, an attribute of a fan entity and then apply coloring to the appropriate Low, Medium, High button. The snippet below would appear once in each card with the value low/medium/high where appropriate.
Am I doing this right? (Syntax adopted from a previous Mariusthvdb example.)
state:
- operator: template
value:
return states['fan.office_fan'].speed_list === 'low'
color: rgb(181, 142, 49)
- operator: default
EDIT: After reading through the States section under Templating, I suspect I should be using return state_attr instead of return state but can’t seem to get that working either.
You are missing attributes and a >:
value: >
return states['fan.office_fan'].attributes.speed_list === 'low'
Also, the templates are not the one from home-assistant for this button. This is plain javascript,check the documentation on github.
I needed to clear the cache and hard reset, now it looks like it is pulling the template
Way out of my league here, So might misunderstand. But I’m not in YAML mode and are using the templates. Not by !including but by adding the template code using the “Raw editor”.
2 Likes
Right, so if that’s possible, it’s good 
(I never used storage mode and thought you couldn’t edit the “yaml” directly)
I’ll edit my post, thanks for pointing it out.
That explains it, thank you. I’ll disregard the HA templating docs.
I made the change you suggested and after some trial and error, this is the new statement.:
return states['fan.office_fan'].attributes.speed === 'low'
The results, however, are puzzling. My desired text effects are not applying. I’ve confirmed that the above statement does indeed return true when I set the fan speed to low. I suspect there is a conflict somewhere between my button template and the card but I can’t see it.
Template
button_card_templates:
fan-speed-settings:
show_icon: false
styles:
card:
- height: 30px
- font-size: 12px
- border: 1px solid white
- border-radius: 5px
- text-transform: uppercase
icon:
- icon-size: 14px
Card
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: fan.office_fan
state: "on"
card:
type: horizontal-stack
cards:
- type: custom:button-card # Low Button
template: fan-speed-settings
name: low
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.office_fan
speed: low
state:
- operator: ==
value: >
return states['fan.office_fan'].attributes.speed === 'low'
styles:
name:
- color: rgba(181, 142, 49, 0)
- operator: default
styles:
name:
- color: '#292929'
Operator should be operator: template 
Ugh… I really shouldn’t do this when I’m tired. Thank you!