Thank you. Unfortunately, this does not quite work. Although it displays when it will expire, it is not updated every second like a countdown, but only when the view is refreshed.
However, it works well with the nested button card and its state field.
Not important to me, but you have a typo in your code at finishes. In case anyone wants to use it.
Thanks again anyway.
Updated. Thanks.
Oh, I assumed you wanted to see the time updated every ~minute, like in the more-info dialog. I didnāt even know that relativeTime could update so frequently - this is valuable info and I will remember it. So far I always used the timer-bar-card for this purpose.
On a side note: I especially like that the lit-template (relativeTime) works even when thereās no connection to the HA backend. I have a use for this: āofflineā backups that I can initiate in Home Assistant and then monitor the duration.
That doesnāt work (so easily), I failed at that. As I and especially RomRider said, with timers it only works in the state field. But there it works natively, without a template.
Sorry, but I still donāt understand where to put the templates
Is that where the 3 dots are? I go there, paste the template, and it still canāt find it.
You are missing button_card_templates which is the parent config dictionary.
Soā¦
button_card_templates:
timer_bar:
...
The timer is running but the progress bar is not visible.
Now it seems that it accepts the template but something is not right with it.
Post your config (not picture use code insert backticks).
button_card_templates:
timer_bar:
show_state: true
aspect_ratio: 1/1
state_display: |
[[[
if (entity) {
return entity.state === 'active'
? helpers.relativeTime(entity.attributes.finishes_at)
: entity.state;
}
]]]
styles:
grid:
- grid-template-areas: |
"i"
"n"
"s"
"progress"
- grid-template-rows: 1fr min-content auto 0.5rem
- grid-template-columns: 1fr
- grid-gap: 8px
card:
- position: relative
custom_fields:
progress:
- position: absolute
- left: 0
- bottom: '-20px'
- width: 100%
- z-index: 1
custom_fields:
progress:
card:
type: custom:timer-bar-card
entities:
- timer.temporizador_cambio_agua
layout: full_row
text_width: 0px
card_mod:
style: |
ha-card {
box-shadow: none;
border-radius: 0;
background: none;
padding: 0;
border: none;
}
views:
- title: Home
sections:
- type: grid
cards:
- type: heading
heading: Nueva secciĆ³n
- show_name: true
show_icon: true
type: button
entity: timer.temporizador_cambio_agua
template: timer_bar
This needs to be type: custom:button-card
Thanks so much for the help. It worked.
How do I add template-type sensors? By writing from a template:
I would like to add a sidebar that has a template type sensor
sorry, but how is the related to this topic, which is about custom:button-card ?
Sorry. I thought I could ask here. The button card uses a sensor as an entity. And I didnāt know how to add it from the visual editor. Iāll ask in another topic.
sure, if its about the custom:button-card, this is the place.
you shoudnt have any trouble adding any entity that is available to the entity_picker, the type of that entity is irrelevant.
Maybe you should describe a bit more what you want and how you edit your button-card
I program in other languages, but Iām lost here. I want to implement a sidebar like they used in that Git project, but that button card has a sensor.sidebar. That project is all done in YAML, but now I only use the visual environment. Maybe thereās something simpler to build a sidebar from the visual environment with a custom:button card, but I donāt know what it is. I added button_card_templates: in a dashboard, but I donāt know how to add that sensor so that the button card displays the entire template it has. Add
template:
- sensor:
- unique_id: sidebar
state: template
attributes:
time: >
{% set hours = now().strftime('%H') %} {% set minutes =
now().strftime('%M') %} <span class="time">
{{ hours }}<span class="time-colon">:</span>{{ minutes }}
</span>
which is the sensor that has the button card but still doesnāt show anything. Zero errors, but the sidebar appears blank.
This is de button
- type: vertical-stack
cards:
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar
view_layout:
grid-area: sidebar
this is not a correct template sensor definition. you should check the documentation of template sensor for that.
If that sensor does not exist, you can not show it obviously anywhere.
you are confused by the terminology:
a configuration template for button-card is something completely different from an actual template sensor
a configuration template holds many used setting in styling for button-card (which would otherwise have to be configured on each and every button-card with the same styling), small in the Frontend.
a template sensor is an entity in the HA backend, that derives its state from another entity or manipulation in Jinja)
You can show that template sensor entity on a button-cardā¦
hope this helps a bit. If not, please first check those links I gave you and come back if youāre still stuck 
I understand. But I add the sensor and it doesnāt exist. Iām not doing something right when I add it.
template:
- sensor:
- name: Sun Angle
unit_of_measurement: "Ā°"
state: "{{ '%+.1f'|format(state_attr('sun.sun', 'elevation')) }}"
views:
- type: custom:grid-layout
title: Home
layout:
margin: 0
that should not be in 1 fileā¦
or is that just for showing here?
anyways, this is not to do with button-card, I believe youād better move to layout-card topic for specifics on that
I added the sensor to the configuration.yaml file because it wouldnāt let me add the sensor with multiple attributes from the visual environment, and it worked. Thanks for the info.