This is my approach, more minimalistic, conditional chips at the top of the view, It only appears when it is turned on showing the remaining time. Finish event is announced thru samsung tv notification and alexa.
2 Likes
Replying to myself: In custom button card, I changed the name of the switch and sensor with the name of my switch and sensor.
I really like this, it is all I need.
If you don’t mind, could you please share your card and what all you had to add?
It’s been 1-2 years since I tried to set it all up and I don’t remember what I already did/added.
Sure!
First create a sensor to format the remaining time:
- sensor:
- name: "Lavadora tiempo"
state: >
{% set ct = states('sensor.lavadora_washer_completion_time') | as_datetime %}
{{ '00:00' if now() > ct else (ct - now()).total_seconds() | timestamp_custom('%H:%M', false) }}
Then add the mushroom chip (install thru HACS frontend)
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: switch.lavadora
state: 'on'
chip:
type: entity
entity: sensor.lavadora_tiempo
icon: mdi:washing-machine
name: Lavadora
icon_color: cyan
“switch.lavadora” is the only entity that have a switch in the washing machine device, to determinate if is on or off.
Similar to what @Lainol did with creating a new sensor by formatting the time, create template sensors:
template:
- sensor:
- name: 'Washer Remaining Time'
state: >-
{% set rem_h = (as_timestamp(states.sensor.washer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-H', false) %}
{% set rem_m = (as_timestamp(states.sensor.washer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-M', false) %}
{% if int(rem_h) > 0.9 %} {{ rem_h }}hr {{ rem_m }}m {% else %} {{ rem_m }}m {% endif %}
- name: 'Dryer Remaining Time'
state: >-
{% set rem_h = (as_timestamp(states.sensor.dryer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-H', false) %}
{% set rem_m = (as_timestamp(states.sensor.dryer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-M', false) %}
{% if int(rem_h) > 0.9 %} {{ rem_h }}hr {{ rem_m }}m {% else %} {{ rem_m }}m {% endif %}
And use those instead for your completion time
2 Likes
I’m getting this error, any idea what might be happening?
ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'state') in 'return states[variables.ulm_custom_washer_grid_completion_timestamp].state'
tap_action:
action: none
type: custom:button-card
group_expand: false
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
size: 40%
color_type: icon
show_name: true
show_state: false
show_icon: true
show_units: true
show_label: false
show_entity_picture: false
show_live_stream: false
card_size: 3
styles:
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
type: custom:button-card
template: custom_washer_state_grid_state_item_list
custom_fields:
item1:
card:
type: custom:button-card
template:
- icon_info
entity: '[[[ return variables.ulm_custom_washer_grid_machine_state ]]]'
icon: mdi:washing-machine
name: Washing machine
tap_action:
action: more-info
label: not running
state:
- value: 'on'
label: running
styles:
icon:
- color: rgba(var(--color-blue), 1)
img_cell:
- background-color: rgba(var(--color-background-blue), 0.2)
item2:
card:
type: conditional
conditions:
- entity: '[[[ return variables.ulm_custom_washer_grid_machine_state ]]]'
state: 'on'
card:
type: custom:button-card
template:
- icon_info
entity: >-
[[[ return variables.ulm_custom_washer_grid_completion_timestamp
]]]
icon: mdi:progress-clock
tap_action:
action: none
label: >-
[[[ return
states[variables.ulm_custom_washer_grid_completion_timestamp].state
]]]
item2:
card:
type: custom:button-card
template: custom_washer_state_job_state_grid_item_list
custom_fields:
item1:
card:
type: custom:button-card
icon: mdi:scale
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: weightSensing
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
item2:
card:
type: custom:button-card
icon: mdi:waves
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: wash
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
item3:
card:
type: custom:button-card
icon: mdi:water
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: rinse
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
item4:
card:
type: custom:button-card
icon: mdi:fan
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: spin
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
item5:
card:
type: custom:button-card
icon: mdi:tumble-dryer
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: drying
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
template: custom_washer_state_grid
variables:
ulm_custom_washer_grid_machine_state: switch.laundry_room_washer
ulm_custom_washer_grid_job_state: sensor.laundry_room_washer_washer_job_state
ulm_custom_washer_grid_completion_timestamp: sensor.washer_remaining_time
state: []
lock:
enabled: false
duration: 5
unlock: tap
Replying to myself. I redid every step in this thread and got it working flawlessly.
I’ve noticed that with presented template after end of washing / drying cycle it’s still counting:
{% set rem_h = (as_timestamp(states.sensor.washer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-H', false) %}
{% set rem_m = (as_timestamp(states.sensor.washer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-M', false) %}
{% if int(rem_h) > 0.9 %} {{ rem_h }} hour(s) and {{ rem_m }} minute(s) {% else %} {{ rem_m }} minute(s) {% endif %}
I’ve changed it to assure that completion_time is in the future (and therefore avoiding every-minute-entry in the Logbook with irrelevant data):
{% set completion_time = states.sensor.washer_completion_time.state %}
{% set completion_timestamp = as_timestamp(completion_time) %}
{% set current_timestamp = as_timestamp(now()) %}
{% if completion_timestamp > current_timestamp %}
{% set rem_h = ((completion_timestamp - current_timestamp) | timestamp_custom('%-H', false)) | int %}
{% set rem_m = ((completion_timestamp - current_timestamp) | timestamp_custom('%-M', false)) | int %}
{% if rem_h > 0.9 %}
{{ rem_h }} hour(s) and {{ rem_m }} minute(s)
{% else %}
{{ rem_m }} minute(s)
{% endif %}
{% else %}
Off
{% endif %}
1 Like
Does anyone know how to remove the borders that appear when creating this card? I updated HA docker from version 2023.10.3 to 2024.4.3 today, but for some reason this card now has borders around every button.
1 Like
Check Theme Settings => I’ve experienced similar issues which could be fixed by choosing the right one.
I’ve got that set (and still have, just checked!) but after one of the recent updates it brokes. No icon visible 
What could that be?
Finally got it running. Had to check all the sensors 3 times to solve every issue.
The template sensor shows up as: sensor.remaining_time for no known reason, but works fine otherwise.
My washer entitiies also start with washer_washer_ instead of just washer_
Fixing it made it work.
But does anyone know how to get round corners?
@dennisschmitz55m is there any chance you could paste a copy of the latest working version, seems to be lots of changes and hard to tell what is the actual working code. TIA.
I used the template in the first post on configuration.yaml
Just had to adjust the states.sensor values to washer_washer_completion_time.state instead of just washer_completion_time.state
#washer sensor
template:
- sensor:
- unique_id: washer_remaining_time
name: 'Remaining Time'
state: >-
{% set rem_h = (as_timestamp(states.sensor.washer_washer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-H', false) %}
{% set rem_m = (as_timestamp(states.sensor.washer_washer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-M', false) %}
{% if int(rem_h) > 0.9 %} {{ rem_h }} hour(s) and {{ rem_m }} minute(s) {% else %} {{ rem_m }} minute(s) {% endif %}
The resulting sensor has the name: sensor.remaining_time instead if sensor.washer_remaining_time and I have no clue why…,
Anyway, just had to adjust that inside the button card itself which here looks like this:
type: custom:button-card
template: custom_washer_state_grid
variables:
ulm_custom_washer_grid_machine_state: switch.washer
ulm_custom_washer_grid_job_state: sensor.washer_washer_job_state
ulm_custom_washer_grid_completion_timestamp: sensor.remaining_time
The template for the raw configuration looks like this here with the only adjustment I made was for rounded corners
button_card_templates:
icon_info:
color: var(--color-theme)
show_icon: true
show_name: true
show_label: true
size: 20px
custom_fields:
notification: |
[[[
if (entity.state =='unavailable'){
return `<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
}
]]]
state:
- styles:
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- left: 24px
- top: '-2px'
- height: 16px
- width: 16px
- border: 2px solid var(--card-background-color)
- font-size: 12px
- line-height: 14px
- background-color: |
[[[
return "rgba(var(--color-red),1)";
]]]
value: unavailable
styles:
card:
- border-radius: 21px 8px 8px 21px
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"i n" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
icon:
- color: rgba(var(--color-theme),0.2)
img_cell:
- background-color: rgba(var(--color-theme),0.05)
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 14px
- margin-left: 12px
label:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
state:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
custom_washer_state_job_state_grid_item_list:
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 10px
- pointer-events: none
- background-color: rgba(var(--color-theme), 0.05)
- justify-items: center
grid:
- grid-template-areas: '"item1 item2 item3 item4"'
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
- justify-items: center
img_cell:
- justify-items: center
custom_washer_state_grid_job_state_item_list_items:
show_icon: true
show_name: false
size: 20px
tap_action:
action: none
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 50%
- place-self: center
- height: 42px
- width: 42px
- pointer-events: auto
- background-color: transparent
grid:
- grid-template-areas: '"i"'
icon:
- color: var(--color-theme)
custom_washer_state_grid_state_item_list:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
custom_washer_state_grid:
styles:
card:
- border-radius: 10px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
type: custom:button-card
template: custom_washer_state_grid_state_item_list
custom_fields:
item1:
card:
type: custom:button-card
template:
- icon_info
entity: '[[[ return variables.ulm_custom_washer_grid_machine_state ]]]'
icon: mdi:washing-machine
name: Washing machine
tap_action:
action: more-info
label: not running
state:
- value: 'on'
label: running
styles:
icon:
- color: rgba(var(--color-blue), 1)
img_cell:
- background-color: rgba(var(--color-background-blue), 0.2)
item2:
card:
type: conditional
conditions:
- entity: >-
[[[ return variables.ulm_custom_washer_grid_machine_state
]]]
state: 'on'
card:
type: custom:button-card
template:
- icon_info
entity: >-
[[[ return
variables.ulm_custom_washer_grid_completion_timestamp ]]]
icon: mdi:progress-clock
tap_action:
action: none
label: >-
[[[ return
states[variables.ulm_custom_washer_grid_completion_timestamp].state
]]]
item2:
card:
type: custom:button-card
template: custom_washer_state_job_state_grid_item_list
custom_fields:
item1:
card:
type: custom:button-card
icon: mdi:scale
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: weightSensing
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
item2:
card:
type: custom:button-card
icon: mdi:waves
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: wash
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
item3:
card:
type: custom:button-card
icon: mdi:water
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: rinse
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
item4:
card:
type: custom:button-card
icon: mdi:fan
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: spin
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
2 Likes
Hey hello
can you please advice me what i need to change.
when i used your setting i see this
see remaining time. it shows 2024 05 11 T09:29:22+00:00
type: custom:button-card
template: custom_washer_state_grid
variables:
ulm_custom_washer_grid_machine_state: switch.wasmachinenl_switch
ulm_custom_washer_grid_job_state: sensor.wasmachinenl_washer_job_state
ulm_custom_washer_grid_completion_timestamp: sensor.wasmachinenl_washer_completion_time
1 Like
It looks like something is wrong with the template sensor in your configuration.yaml and outputting the wrong numbers.
1 Like
Can you please also tell me how to make it bigger the icon and time.
thanks in advance.
Here you go! Sorry for the delay.
i tried the whole stuff but my button card is just empty. any changes which are know to be done because auf new HA version(s)?