I had already tried with return here:
But now I try again, and now work… but the time does not move… it’s always stable to 0:10:00.
you were right, seem not auto update, even if I update the page, always 10 minutes
The timer attribute is not updated, that’s not button cards fault. With GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card you could try a workaround:
type: custom:button-card
custom_fields:
timer_time:
card:
type: entities
entities:
- entity: timer.testtimer
card_mod:
style:
.: |
ha-card {
box-shadow: none !important;
}
hui-timer-entity-row$hui-generic-entity-row$: |
:host {
justify-content: flex-end !important;
}
state-badge {
display: none !important;
}
.info {
display: none !important;
}
not sure why that mod would display the timer in action tbh…
all I can say if my entity is updated per second, it shows without issue.
and on a button too
this is all that is needed for that:
- type: custom:button-card
entity: sensor.second_updater
show_state: true
and with notification:
- type: custom:button-card
template: styles_cf_notification
entity: sensor.second_updater
show_state: true
custom_fields:
notification: >
[[[ return entity.state; ]]]
if the issue would lie with displaying a timer (sorry I dont have one to test, but will do so later on), you could maybe go around that more easily (than modding all sorts of unnecessary stuff) by creating a template sensor on the attribute of the timer and add it to the button like I just did here
edit
confessing I cant make it happen either using my proposed techniques, sorry bout that. As it stands the attributes isnt even updated in the state machine and a regular jinja template cant make that happen either.
its probably in internal timer and I do have a script somewhere using that, but have to find that…
btw start reading here Display remaining seconds of timer in frontend - #46 by 123 where all of this has been discussed, sorry I hadnt looked that up earlier
this works though:
{{10*60 - (now() - states.timer.tester.last_changed).total_seconds()|round()}}
to give you an idea to work with, showing the time left in seconds, so you would only need to format that to your liking (and make it use the timer setting, instead of my hard coded way now)
btw tis works fine:
- type: custom:button-card
entity: timer.tester
show_state: true
out of the box 
if I put this template the HA give me an error:
ButtonCardJSTemplateError: SyntaxError: Unexpected token ‘{’. Expected a property name. in ‘return {{10*60 - (now() - states.timer.scaldabagno.last_changed).total_seconds() | round() }};’
type: custom:button-card
aspect_ratio: 1/1
triggers_update: timer.scaldabagno
entity: input_boolean.scaldabagno_temporizzato
name: Scaldabagno Timer
icon: mdi:thermometer-plus
custom_fields:
notification: |
[[[ return {{10*60 - (now() - states.timer.scaldabagno.last_changed).total_seconds() | round() }}; ]]]
styles:
img_cell:
- justify-content: start
- align-items: start
- padding-left: 10px
- padding-bottom: 10px
custom_fields:
notification:
- border: 1px solid var(--text-color-on)
- border-radius: 12px
- font-size: 11px
- font-weight: bold
- height: 18px
- line-height: 18px
- min-width: 12px
- padding: 0px 3px
- position: absolute
- right: 5%
- top: 10%
What is my error?
Hi,
I am trying to use the button card to display the state of another entity and change the style. Currently I have it like this:
- type: custom:button-card
entity: light.living_area_lights #hue_group
name: Living Area
show_state: false
styles:
top: 20%;
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.office_light
state:
- entity_id: light.office_light
value: 'on'
styles:
card:
- background-color: '#f0c209'
- entity_id: light.office_light
value: 'off'
styles:
card:
- background-color: '#fffff'
template:
- light
- icon_hue
I have the entity on living area lights so I use the popup for hold_action to manage hue lights. But with the tap I am toggling the office light via KNX.
The problem is that I would like to display the state of the office_light and also change the background on the card. With my code the background is always #f0c209, no matter if office_light is on or off.
Help please 
This is a Jinja template and can not be used in the button card …
You should really read up on the difference.
It could be a template sensor though.
However, as I have displayed the last button, you should really do that. The master (Romrider) suggest that as way to go for templates, easy as can be.
If must you can embed it in another card and position it to the spot you want
state:
- operator: template
value: |
[[[ return states['light. office_light'].state == 'on' ]]]
styles:
card:
- background: red
- operator: template
value: |
[[[ return states['light. office_light'].state == 'off' ]]]
styles:
card:
- background: green
1 Like
embed timer card as notification:
- type: custom:button-card
template: styles_cf_notification
entity: sensor.second_updater
aspect_ratio: 1/1
show_state: true
custom_fields:
notification:
card:
type: custom:button-card
styles:
card:
- box-shadow: none
- font-size: 11px
- font-weight: bold
entity: timer.tester
show_state: true
show_name: false
show_icon: false
tap_action:
action: toggle
entity_id: input_boolean.tester
needs some more formatting, but hey, this is what you were looking for?
1 Like
Yeah, I’ve created a template named sensor.sensore_timer_scaldabagno (it work)
If I put it on my button_card code the custom_field become [object] as you can see below:
type: custom:button-card
aspect_ratio: 1/1
triggers_update: timer.scaldabagno
entity: input_boolean.scaldabagno_temporizzato
name: Scaldabagno Timer
icon: mdi:thermometer-plus
custom_fields:
notification: |
[[[ return states ['sensor.sensore_timer_scaldabagno'] ]]]
styles:
img_cell:
- justify-content: start
- align-items: start
- padding-left: 10px
- padding-bottom: 10px
custom_fields:
notification:
- border: 1px solid var(--text-color-on)
- border-radius: 12px
- font-size: 11px
- font-weight: bold
- height: 18px
- line-height: 18px
- min-width: 12px
- padding: 0px 3px
- position: absolute
- right: 5%
- top: 10%
from now, if you change code, please only post the changed code ? unless you got a complete new config ofc… btw, your error here is you’re missing the .state in the template.
Anyways, as I posted above, you should embed the button-card with entity timer in your other button-card. Dixit button-card Author/Magician
this is a bit more fledged out, with adequate services:
- type: custom:button-card
template: styles_cf_notification
entity: timer.tester
aspect_ratio: 1/1
show_state: true
# use a state_display, because otherwise 'show_state: true' will show the remaining time as state ;-)
state_display: >
[[[ return entity.state; ]]]
custom_fields:
notification:
card:
type: custom:button-card
styles:
card:
- box-shadow: none
- font-size: 11px
- font-weight: bold
entity: timer.tester
show_state: true
show_name: false
show_icon: false
tap_action:
action: call-service
service: >
[[[ return entity.state === 'active' ? 'timer.pause' : 'timer.start'; ]]]
service_data:
entity_id: timer.tester
hold_action:
action: call-service
service: >
[[[ return entity.state === 'active' ? 'timer.cancel' : 'timer.pause'; ]]]
service_data:
entity_id: timer.tester
thank you @Marcoletto for TIL …
2 Likes
why… just put the second_updater in triggers update and have the timer as the main entity.
that is not even needed. button-card shows the timers remaining seconds as is.
- type: custom:button-card
entity: timer.tester
show_state: true
suffices for that. But, above was asked to have that show in a notification field. At first I hadnt realized timer entity uses the internal clocking and can not be shown by its attribute.
Embedding a button-card makes it all happen, no secondary helpers needed.
but in this case the entity of the button is the timer, not other entities.
Timer in the button and timer in the right top corner
Yes, what ever you want. I just made this quickly to show some action possibilities too and display what state shows why
Ah ok… but if you try to put another entity for the button, you will see that the timer will not visible
Sorry but that must be a config mistake. The button card embed is using its own entity, so you can use any thing on the main button. Or nothing for that matter
been meaning to ask for sometime but forgot:
Chrome seems to behave differently from Safari in many ways, and this is a bad one…
using a (decluttering) card config like:
- type: custom:button-card
confirmation:
text: >
Open cover at 'My' position?
entity: '[[command]]_my'
Safari nicely shows:
but Chrome reveals the entire server path and port (mydomain.duckdns:port):
Is there anything we can do as user to hide that/make it show like Safari? If not would this warrant an issue in the repo…?So you can fix it resource side?
Anyone know if its even possible to use strptime inside this button. As soon as I add that, the whole button disappears, so I’m assuming it isn’t.
edit: I managed to resolve this by creating a template sensor, and then referencing that inside the button. Is there a way to do whole thing inside the button?
The button-card uses javascript, not jinja2 (strptime is a jinja2/python function). So you’ll have to write javascript to make it work directly in the button-card.
1 Like
While I’m here, I have a problem that I don’t think is related specifically to this comp, but figured I’d ask you guys anyway…
I cast a Lovelace view loaded with these custom buttons to a Google Hub. Since sometime last month, that has errored out with the following message:
‘custom element doesn’t exist: button-card’
This Lovelace view works fine on desktop/mobile, but fails on the Google Hub. One fix that worked up until last month was to delete the HACS entry in Resources and replace it with a direct link to ‘/local/community/button-card/button-card.js’. But that doesn’t work anymore.
I opened an issue on Github for the Cast integration, but it got moved to core, where I’m assuming it will die. Do you guys have any ideas?
edit: This is resolved. Turns out that I had forgotten that I was also using card-mod, which needed to be pointed at /local/. Do any of you have a better grasp on this stuff and can maybe suggest who would fix this? Apologies for being offtopic…