Thanks, working perfectly. Another question:
&& mp.attributes.media_artist
what does this part do? Check of the attribute is present or not empty?
Yes, that’s correct. I forgot to adjust the != 'standby' (I have only Echos here to test, and they have no state on or off), so adjust it for your needs.
1 Like
Just wanted to say thank you for this amazing card! I went quite deep with it and designed most of my lovelace UI using variety of button card templates.
The first card I ended up creating is a simple clock card which shows time, date, temperature and current weather.
If you fancy it you can check my repo in Github: https://github.com/troinine/hass-config
Thanks again for creating and maintaining this project!
10 Likes
Hi, I have an input_datetime which I like to display on a button card.
So far I do it like follows:
custom_fields:
left: |
[[[
var date = states['input_datetime.joerg_left_home'];
if (states['device_tracker.joerg_s10'].state != 'home')
return date.attributes.day + '.' + date.attributes.month + ' - ' + date.attributes.hour + ':' + date.attributes.minute;
]]]
That work but doesn’t look good at least due to the missed leading zeros.
There must be a more efficiant way to do it. In jinja I usually use timestamp_custom(’%H:%M am %d.%m’). I havent found something similar for button_card
I’m not sure if it is more efficient than putting another custom:button-card in your custom field or creating a template sensor, but you can give it a try if you like:
[[[
var set = new Date(states['input_datetime.joerg_left_home'].state.split(' ')[0]);
var date = set.toLocaleString('de-DE', { dateStyle: 'medium' });
var time = states['input_datetime.test'].state.split(' ')[1].slice(0, -3)
if (states['device_tracker.joerg_s10'].state == 'home') return date + ', ' + time + ' Uhr'; return '?'
]]]
Or, if your input_datetime is feeded by an automation:
[[[
var set = new Date(states['automation.abcdefg'].attributes.last_triggered);
var d = set.toLocaleString('de-DE', { dateStyle: 'medium', timeStyle: 'short' });
return d + ' Uhr'
]]]
1 Like
Anyone had problem like me?
Thank you. Cool idea to grab the automation trigger timestamp 
Both works
I don’t wanted to create a new sensor only for displaying that on one button
Yeah, it was the only possibility to show the correct state change of a binary sensor (and to avoid false positives due to resets).
I hope I meet the right person with my question ^^
my dashboard consists almost entirely of custom:button_card.
here I try to adapt almost everything exclusively to templates.
I also try to use variables (entity.entity_id.split…etc) as much as possible…
now it is the case that i would like to display the states of some sensors.
They are in custom_fields
header_temp_buero:
custom_fields:
temp:
card:
styles:
card:
- background-color: transparent
- width: 50px
- box-shadow: none
layout: vertical
name: '[[[ return ` ${states[''sensor.buero_temp''].state}°` ]]]'
type: custom:button-card
I have created a template for each sensor at the moment. and then tie them in separately… for bathrooms then as an example:
name: Bathroom
template:
- header_temp_buero:
..........
Is there a way I can make this easier? or is that the best way?
Use variables in your custom fields, too (in combination with triggers_update):
# Testsensor: sensor.cpu
type: custom:button-card
triggers_update: all
variables:
name: Temperatur Büro
temp: sensor.cpu
name: |
[[[ return variables.name ]]]
styles:
grid:
- grid-template-areas: '"n" "temp"'
- justify-items: center
custom_fields:
temp:
card:
styles:
card:
- background-color: transparent
- width: 50px
- box-shadow: none
layout: vertical
name: |
[[[ return states[variables.temp].state + '°' ]]]
type: custom:button-card
1 Like
thanks for the food for thought!! That worked wonderfully!
button_card_templates:
header_temp_var:
styles:
grid:
- grid-template-areas: '"temp n door"'
- grid-template-columns: max-content 1.5fr min-content
- grid-template-rows: 1fr min-content min-content
custom_fields:
temp:
card:
styles:
card:
- background-color: transparent
- width: 50px
- box-shadow: none
layout: vertical
name: |
[[[ return states[variables.temp].state + '°' ]]]
type: custom:button-card
name: Büro
template:
- header
- header_temp_var
- header_door_var
type: custom:button-card
variables:
temp: sensor.buero_temp
door: binary_sensor.ty13600724840d8eae6714
I have now “first” selected three templates…
header is normal, it is standard…
and then one for temp and one for the door/window sensors.
Not every room has both… maybe we can also work with “if/else” here, but I think the code is very short like this
Thank you!
Hi all, one question, is it possible in the button_card_templates.yaml file to link another file with
!Include my_file.yaml to split file?
button_card_templates.yaml
!include my_file.yaml
Thanks.
If you are using the header template in general, you can insert it in all your other ones, e.g.:
button_card_templates:
header_temp_var:
template: header
styles:
…
…
did you try it?
That’s right… I have that with other cards too… then I’ll save myself an entry =)
yes but it doesn’t work.
Why I can’t see picture from entity_picture template?
here is code:
- type: custom:button-card
aspect_ratio: 2/3
size: 100%
show_entity_picture: true
entity_picture: >-
[[[ if (states['media_player.livingroom_mp'].state == 'paused' ||
states['media_player.livingroom_mp'].state == 'playing') return
`${states['sensor.livingroom_mp_media_cover'].state}`; if
(states['media_player.livingroom_mp'].state == 'idle') return
'/local/images/logos/kodi.png';
else return
'/local/images/logos/kodi_red.png';
]]]
the it probably doest work
you can however use button_card_templates: !include_dir_merge_named ../button_card_templates
and have as many files there as you want.
Not the same, but it does help you to keep the template files clear and organized
adapt the path to your situation
1 Like
try:
entity_picture: >-
[[[ if (states['media_player.livingroom_mp'].state == 'paused' ||
states['media_player.livingroom_mp'].state == 'playing') return
states['sensor.livingroom_mp_media_cover'].state;
if (states['media_player.livingroom_mp'].state == 'idle') return
'/local/images/logos/kodi.png';
return '/local/images/logos/kodi_red.png';
]]]
assuming the sensor.livingroom_mp_media_cover is a picture
if that works, use:
entity_picture: >-
[[[ var state = states['media_player.livingroom_mp'].state;
if (state == 'paused' || state == 'playing') return
states['sensor.livingroom_mp_media_cover'].state;
if (state == 'idle') return '/local/images/logos/kodi.png';
return '/local/images/logos/kodi_red.png'; ]]]
btw, is this for a button with that entity media_player.livingroom_mp? if so, you can simply use entity.state
What is the output of this sensor? Try without it.