What are you using to monitor you Windows 10 PC?
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.
1 Like
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)'
1 Like
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.
1 Like
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 ?