After playing around with this UI and reading through the forum, i was inspired by @clemalexās 2 line button card and made one for my washing machine.
Note that this is a Samsung Washing Machine integrated in Home Assistant with SmartThings
Idle
Running
Remaining Time is calculated in a template:
template:
- sensor:
- unique_id: washer_remaining_time
name: '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 }} hour(s) and {{ rem_m }} minute(s) {% else %} {{ rem_m }} minute(s) {% endif %}
The icons represtent the current job state in this order:
- weightSensing
- washing
- rinse
- spinning
- drying
I think this could also be implemented with other washing machines, as soon as they have the required attributes.
Also i have build a automation for a push notification , if anyone is interested 
Code:
Lovelace
- 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_job_state
ulm_custom_washer_grid_completion_timestamp: sensor.washer_remaining_time
Templates
custom_washer_state_job_state_grid_item_list:
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 'var(--border-radius)'
- pointer-events: none
- background-color: 'rgba(var(--color-theme), 0.05)'
- justify-items: center
grid:
- grid-template-areas: '"item1 item2 item3 item4 item5"'
- grid-template-columns: 1fr 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(--google-grey)
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: '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: 'white'
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: 'white'
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: 'white'
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: 'white'
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: 'white'
Automation
id: '1637957448045'
alias: Notify Washing maschine job state
description: ''
trigger:
- platform: state
entity_id: sensor.washer_job_state
condition:
- condition: not
conditions:
- condition: state
entity_id: sensor.washer_job_state
state: none
action:
- service: notify.notify
data:
title: š§ŗ Washing machine state changed
message: |-
{% if is_state("sensor.washer_job_state", "weightSensing") %}
Sensing load, program may be finished at approx. {{ as_timestamp(states('sensor.washer_completion_time')) | timestamp_custom('%H:%M') }}
{% elif is_state("sensor.washer_job_state", "wash") %}
Washing, program may be finished at approx. {{ as_timestamp(states('sensor.washer_completion_time')) | timestamp_custom('%H:%M') }}
{% elif is_state("sensor.washer_job_state", "rinse") %}
Rinsing, program may be finished at approx. {{ as_timestamp(states('sensor.washer_completion_time')) | timestamp_custom('%H:%M') }}
{% elif is_state("sensor.washer_job_state", "spin") %}
Spinning, program may be finished at approx. {{ as_timestamp(states('sensor.washer_completion_time')) | timestamp_custom('%H:%M') }}
{% elif is_state("sensor.washer_job_state", "drying") %}
Drying, program may be finished at approx. {{ as_timestamp(states('sensor.washer_completion_time')) | timestamp_custom('%H:%M') }}
{% elif is_state("sensor.washer_job_state", "finish") %}
Program finished, please empty the washing machine.
{% else %}
Unknown State, please check the washing machine!
{% endif %}
mode: single
Feel free to use/edit/implement this I would submit a pull request, but iām not very familiar with github sadly.
) since he was last active on Giuthub
