It’s actually two custom cards nested inside a horizontal stack which is then nested inside a vertical-stack-in-card.
Vertical-stack-in-card is used to eliminate the gaps between cards.
Horizontal stack is used to place the two buttons on the same line.
Custom:button-card is used for the left side of the button (a.k.a. “big icon”). The templating features are used to round the left side corners and apply styling.
Slider-entity-row is used in full_row mode for the right side of the button. Card modder is used on Slider-entity-row to apply the same styling from the custom:button-card templates.
Although it took me quite a while to fine tune, the actual config is fairly simple. Here’s the code. You should be able to copy/paste with minor adjustments to the entity and name fields.
Actually, I think my case is even more complex than just wanting templated *_action.
I am using buttons to display motion, door and window sensors. I sometimes have door and window sensors in the wrong state (cheap sensors!) so I use a double tap to open a custom-popup-card which allows me to set that sensor’s state via an input_select.
I combined all these buttons to use one template but the motion sensors don’t need a dbltap_action.
I have also realised that motion, door, and window sensors also have different icons (of course!) so would need to template those as well which I don’t think is possible either???
Here is my template after combining Door and Window and before realising the icons were wrong!
EDIT: Also, yes I have still got to template my label properly…
Why not just declare a generic template for your generic settings and declare specific templates for windows or doors that inherit your generic template and set your actions?
Something like this:
generic_sensors:
name_template: >
var sensor_name = entity.attributes.friendly_name;
if (sensor_name.split(' ')[sensor_name.split(' ').length - 1] === 'Door') {
var sensor_name = sensor_name.replace(' Door', '');
return sensor_name;
} else {
var sensor_name = sensor_name.replace(' Window', '');
var sensor_name = sensor_name.replace('Left', '(L)');
var sensor_name = sensor_name.replace('Centre', '(C)');
var sensor_name = sensor_name.replace('Right', '(R)');
return sensor_name;
}
show_label: true
label_template: >
return entity.state === 'on' ? '-MOVEMENT-' : '' ## Maybe this has to be specific for motion only, if so move it in the motion one
layout: icon_label
aspect_ratio: 2.5/1
size: 50%
styles:
# card:
# - width: 110px
name:
- font-size: 12px
label:
- font-size: 12px
- font-weight: bold
- color: var(--secondary-text-color)
- justify-self: start
state:
- value: "on"
id: sensor_on
styles:
card:
- box-shadow: 0px 0px 8px 2px var(--secondary-text-color)
icon:
- color: var(--secondary-text-color)
tap_action:
action: none
hold_action:
action: none
window_sensors:
template: generic_sensors
dbltap_action:
action: more-info
state:
- id: sensor_on
icon: mdi:window-open
- value: "off"
icon: mdi:window-closed
door_sensors:
template: generic_sensors
dbltap_action:
action: more-info
state:
- id: sensor_on
icon: mdi:door-open
- value: "off"
icon: mdi:door-closed
motion_sensors:
template: generic_sensors
state:
- id: sensor_on
icon: mdi:run
- value: "off"
icon: mdi:human-handsdown
And then use the appropriate template in each type of sensor you want to display:
motion_sensors
windows_sensors
door_sensors
The trick here is that you can inherit template from a template and overload/add anything.
It’s a small card that helps you declutter your Lovelace config by using templates for block of cards or a simple card. Changing the template will change it everywhere where its used.
This will be helpful for those of you who embed many cards in a vertical-stack-in-card for example with only small differences like the entity.
You can only define one template, not multiple.
You have to think of templates as a chain. You start from your button-card config and you go all the way up to the last template defined. The chain can be as long as you want.
So what you want to achieve is possible but it has to be done like this:
main_template:
[all your common config here]
ikea_label:
template: main_template # this will inherit the things from main_template
label_template: >
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
var id = entity.entity_id.split('.')[1].slice(11);
return capitalizeFirstLetter(id);
switch_label:
template: main_template # this will inherit the things from main_template
label_template: >
var id = entity.entity_id.split('.')[1].slice(3, -9);
return states['sensor.' + id + '_actueel'].state + ' Watt';
And then you use only: switch_label or ikea_label for your buttons
ok thanks. Will test. cool.
A bit complex it is though, and error prone.
wouldn’t you consider easing up on that, and adding the option for more than 1 template? seems the obvious way to unclutter (pun intended).
A bit like anchors really.
I, too, am looking forward to your post. I’ve spent the last several hours attempting to replicate your awesome layout and cannot coax layout-card to behave properly. Enjoy your trip!
I’ve got this set up and kinda working but I’m also suspecting im doing something wrong.
Pretty much everything i configure works. But I cant seem to get “state” to change color or icon of the entity inside the custom button card.
Im doing my editing inside the “RAW config editor” within the lovelace UI, is this somehow wrong?
Also, do i need anything else to get this to work? Custom UI maybe?
I’ll add it for the next release
