Hey Typeonnegative.
My template achieves what you are looking for, The show_last_changed is brilliant to bu did not fit my needs.
This is the template:
[[[
var last_date = new Date(states['sensor.wasmachine_status'].last_changed);
var now_date = Date.now();
var diff = now_date - last_date;
var msec = diff;
var hh = Math.floor(msec / 1000 / 60 / 60);
msec -= hh * 1000 * 60 * 60;
var mm = Math.floor(msec / 1000 / 60);
msec -= mm * 1000 * 60;
var ss = Math.floor(msec / 1000);
msec -= ss * 1000;
var hhtext = '00';
if (hh > 0){ hhtext = String(hh);}
if (hhtext.length == 1){hhtext = '0' + hhtext};
var mmtext = '00';
if (mm > 0){ mmtext = String(mm);}
if (mmtext.length == 1) { mmtext = '0' + mmtext };
var sstext = '00';
if (ss > 0) { sstext = String(ss); }
if (sstext.length == 1) { sstext = '0' + sstext };
return `<span style='align: left;'>${(hhtext + ':' + mmtext)}</span>`;
]]]
This wil show the duration from last changed in HH:MM. If you want to add days en seconds you niet som extra variables.
thanx man. quick look and you are also checking your last_changed info. im looking for last_triggered to see when automation really last triggered (not switched on/off).
I use button card for almost everything in my setup.
I’m using wake up automations for the master bedroom, for me and my wife, and separate once for our two kids bedrooms. These automations can be toggled on and of from Lovelace but we sometimes need to alter the time everyone, or some of us, needs to be woken. To do that I’m using input_datetime entities.
Is it possible to ad those to a button-card to be altered? I can’t see that it can be done, can it?
An alternative solution is to use popup-cards and I don’t have any problem doing so with other “built in” cards but I can’t get it to work with “Button-cards”, isn’t it possible to do? I’m not sure if this is a button-card or popup-card issue. I reckon that it might be doable with “tap_action” but I don’t know how. 
This is the code I use for testing. The second part, with the “entities-card” works without a problem with popup and is just there to make sure that there is nothing wrong with the popup it self. I also tried to remove that so it doesn’t interfere with the first but with the same result.
popup_cards:
input_boolean.sovrum_vack:
title: Wakeup
card:
type: entities
entities:
- entity: input_datetime.aos_vackning
cards:
- type: vertical-stack
cards:
- type: "custom:button-card"
entity: input_boolean.sovrum_vack
icon: mdi:power
name: Bedroom
- type: entities
title: Popup test
entities:
- entity: input_boolean.sovrum_vack
name: Bedroom
Hi
I would like to show the day of the week as text in a custom field so instead of
custom_fields:
tomorrow: >
[[[
return `<span>Tomorrow: <span style="color: var(--text-color-sensor);">${states['sensor.dark_sky_precip_probability_1d'].state}%</span></span>`
]]]
Instead of using
Tomorrow:
I would like to see the day of the week that should be something like
{{ (as_timestamp(now())+(60*60*24))|timestamp_custom('%A')}}
Is it possible?
Thanks
Hi,
i’m using button card template… and i need help with simple thermostat entity.
i have one issue with the simple thermostat AC entity , i want to achieve that when the AC state is off to be like the other buttons thaht the color will change to gray like all others entities. the rest of the states “cool”,“heat”,“on”, i want that it will highlighted like the others.
i don’t know how to it, here is the ac code below:
- type: custom:simple-thermostat
entity: climate.mzgn_khdr_shynh
style: |
ha-card {
border-radius: 15px;
background: rgba(255,255,240,0.9);
}
name: AC Bedroom
step_size: 1
button template that i use for small cube entities :
Button3:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
show_last_changed: true
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
- background-color: 'rgba(255,255,240,0.9)'
- border-radius: 15px
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var
name:
- color: black
state:
- color: gray
label:
- color: black
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: 'rgba(0, 0, 0, 0.0)'
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
Someone can help?
Use two conditional cards for every climate entity, one for “on” one for “off”,
in “Off” card change this:
background-color: 'rgba(255,255,240,0.9)'
To
background-color: 'rgba(255,255,240,0.1)'
Thank you,
i need when the state is “off” the following :
border-radius: 15px;
background: rgba(0, 0, 0, 0.0);
opacity: 0.3;
And when the states are: “on”,“cool”,“heat” the following:
rgba(255,255,240,0.9);
border-radius: 15px;
would you mind help me with the code? i tried without success.
Thank you,
Thank you!
code:
- type: conditional
conditions:
- entity: climate.mzgn_khdr_shynh
state: 'cool'
card:
type: horizontal-stack
cards:
- type: custom:simple-thermostat
entity: climate.mzgn_slvn
style: |
ha-card {
border-radius: 15px;
background: rgba(255,255,240,0.9);
}
name: AC Living Room
step_size: 1
- type: conditional
conditions:
- entity: climate.mzgn_khdr_shynh
state: 'heat'
card:
type: horizontal-stack
cards:
- type: custom:simple-thermostat
entity: climate.mzgn_slvn
style: |
ha-card {
border-radius: 15px;
background: rgba(255,255,240,0.9);
}
name: AC Living Room
step_size: 1
- type: conditional
conditions:
- entity: climate.mzgn_khdr_shynh
state: 'off'
card:
type: horizontal-stack
cards:
- type: custom:simple-thermostat
entity: climate.mzgn_khdr_shynh
style: |
ha-card {
border-radius: 15px;
background: rgba(255,255,240,0.9);
opacity: 0.3;
}
name: AC Living Room
step_size: 1
Another option with less code:
# - type: custom:simple-thermostat
# entity: climate.mzgn_slvn
# style: |
# ha-card {
# background:
# rgba(255,255,240,0.9);
# border-radius: 15px;
# {% if is_state(config.entity, 'off') %}
# border-radius: 15px;
# background: rgba(0, 0, 0, 0.0);
# opacity: 0.3;
# {% endif %}
# background: rgba(255,255,240,0.9);
# border-radius: 15px;
# ;
# name: AC Living Room
# step_size: 1
When I try to use javascript the code is just display including the [[[ ]]] and not executed.
javascript_version: latest is set in the configuration.yaml.
I use hassbian with HA 0.98.1
What can be the issue?
You’re probably not using the latest version or you have a caching issue. Clear your browser cache, download the latest version and retry.
Cleared cache in all browsers. javascript_version: latest. HA 0.98.1 is most recent. Stll this issue 
Anyone that can help me on how to do it?
Thanks
Share your code please, but I’m pretty sure you’re not using the latest button-card version.
I use conditional cards to do this as well, but there is a much cleaner way to do this and that is to template the color/state/icons. I recently found that this is a lot less code and just as easy to setup. I would actually suggest using a template instead.
Okay
custom_updater shows version 1.1.1.
I downloaden the .js to local/ and it works.
Something wrong with the version indeed. Now I need to figure out why the custom_updater does not work.
Thanks!
Hi, would you mind help me creating the template ?
I use hassbian so hacs is not available (by my knowlegde)