After getting a new washer and dryer, I searched for some Lovelace cards that fitted well into my dashboard which uses mushroom cards.
The most visually appealing for me was from UI Lovelace Minimalist.
Yet not wanting to use that I made my own. Just posting here for anyone else to use.
End result:
Device on:
The card only displays the entity as off without the additional items.
The card uses these HACS items:
custom:stack-in-card
custom:timer-bar-card
custom:mushroom-entity-card
Haier hOn Revived - (GitHub - mmalolepszy/hon-revived: Home Assistant integration for Haier hOn: support for Haier/Candy/Hoover home appliances like washing machines and air conditioners in 28 languages.)
To start I made some additional sensors.
Because the dryer and washer are quite similar i’ll just explain the dryer one.
- Binary sensor based on the washer state to display on and off.
template:
- binary_sensor:
- name: "Droger"
unique_id: droger
state: >
{{ states('sensor.droger_fase') != 'ready' }}
device_class: power
icon: >
{% if is_state('binary_sensor.droger', 'on') %}
mdi:tumble-dryer
{% else %}
mdi:tumble-dryer-off
{% endif %}
- A Sensor to calculate the end time based on the remaining time
template:
- sensor:
- name: "Droger Klaar Om"
unique_id: droger_klaar_om
state: >
{% if states('sensor.droger_resterende_tijd') not in ['unknown', 'unavailable'] %}
{% set minutes = states('sensor.droger_resterende_tijd') | int %}
{{ (now() + timedelta(minutes=minutes)).astimezone().strftime('%H:%M') }}
{% else %}
Onbekend
{% endif %}
icon: mdi:timer
- An automation to log the start time in a input_datetime helper based on the previously made binary_sensor.
alias: Starttijd Droger & Wasmachine
description: ""
triggers:
- trigger: state
entity_id:
- binary_sensor.wasmachine
from: "off"
to: "on"
id: Wasmachine
- trigger: state
entity_id:
- binary_sensor.droger
from: "off"
to: "on"
id: Droger
conditions: []
actions:
- choose:
- conditions:
- condition: trigger
id:
- Wasmachine
sequence:
- action: input_datetime.set_datetime
target:
entity_id: input_datetime.wasmachine_starttijd
data:
datetime: "{{ now().strftime('%Y-%m-%d %H:%M:%S') }}"
- conditions:
- condition: trigger
id:
- Droger
sequence:
- action: input_datetime.set_datetime
data:
datetime: "{{ now().strftime('%Y-%m-%d %H:%M:%S') }}"
target:
entity_id: input_datetime.droger_starttijd
mode: single
- a timer sensor for use with timer-bar-card, based on this topic Miele washing machine · Issue #62 · rianadon/timer-bar-card but adapted to use with Haier hOn Revived
template:
- sensor:
- name: "Droger timer"
state: "{{ states('binary_sensor.droger') }}"
attributes:
start_time: "{{ as_datetime(states('input_datetime.droger_starttijd')).strftime('%Y-%m-%dT%H:%M:%S') }}"
end_time: "{{ now().strftime('%Y-%m-%dT') + states('sensor.droger_klaar_om') }}:00"
remain_time: "{% set total_minutes = states('sensor.droger_resterende_tijd') | int %}{% set hours = total_minutes // 60 %}{% set minutes = total_minutes % 60 %}{{ '%d:%02d:00' | format(hours, minutes) }}"
this makes sure that the remaining minutes are displayed as 0:10:00 format instead of just 10 and that the start&end time are dispayed like “YYYY-mm-ddTHH:MM:SS” in order for the timer bar to work.
- Addes this card yaml to the dashboard:
type: custom:stack-in-card
mode: vertical
keep:
outer_padding: true
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-entity-card
entity: binary_sensor.droger
name: Droger
layout: horizontal
icon_color: indigo
tap_action:
action: perform-action
perform_action: switch.toggle
target:
entity_id: switch.droger_pauze
- type: conditional
conditions:
- condition: state
entity: binary_sensor.droger
state: "on"
card:
type: custom:mushroom-entity-card
entity: sensor.droger_resterende_tijd
name: Resterende tijd
layout: horizontal
icon_color: primary
card_mod:
style: |
ha-card {
margin: 0px 0px -20px;
}
- type: conditional
conditions:
- condition: state
entity: binary_sensor.droger
state: "on"
card:
type: custom:timer-bar-card
entity: sensor.droger_timer
name: Droger
active_state: "on"
bar_radius: 5px
layout: full_row
text_width: 0px
bar_foreground: "#3f51b5"
bar_background: "#a9b1bc33"
- type: conditional
conditions:
- condition: state
entity: binary_sensor.droger
state: "on"
card:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.droger_machine_status
- type: entity
entity: sensor.droger_fase
- type: entity
entity: sensor.droger_programma
- type: entity
entity: sensor.droger_klaar_om
card_mod:
style: |
ha-card {
margin: -18px 0px 0px;
}