A fun, Batman-themed picture-elements card for Home Assistant to monitor and control your washer and dryer. Displays animated GIFs and PNGs based on appliance states, with text overlays for job status and remaining time.
- Shows
Batman_Laundry_Empty.pngwhen both appliances are off. - Washer: Displays
Batman_Laundry_Clothes.pngwhen on, with GIFs (Rinse.gif,Sin.gif,Spin.gif) for cycles, andBatmn_Laundry_Done.gifwhen finished. - Dryer: Shows
Batman_Laundry_Spin.gifwhen running alone, andBatmn_Laundry_Done.gifwhen done. - Text overlays for job states (e.g., "wash," "finished") and completion times in minutes.
Here’s a short clip of the card in action. Click the thumbnail to watch on YouTube:
picture-elements.yaml: The card configuration.configuration.yaml: Definesinput_text.laundry_labeland template sensors for completion times.images/: Contains the Batman-themed images (PNG and GIF files).
-
Add to Home Assistant:
- Copy
picture-elements.yamlinto a Lovelace dashboard (Edit Dashboard > Add Card > Manual). - Add
configuration.yamlcontent to yourconfiguration.yamlfile underinput_text:andsensor:sections. - Restart Home Assistant.
- Copy
-
Replace Entities:
- Update
switch.washer,switch.dryer,sensor.washer_job_state,sensor.dryer_job_state,sensor.washer_completion_time_minutes, andsensor.dryer_completion_time_minuteswith your own entity names. - Ensure your washer/dryer integration provides switch and status sensors.
- Update
-
Host Images:
- Place the images in
/config/www/pictures/on your Home Assistant instance. - Replace
your_ip_addressin the YAML with your Home Assistant IP or domain (e.g.,192.168.1.100oryour-nabu-casa-url).
- Place the images in
-
Adapt for Generic Smart Devices:
- If your devices don’t provide
sensor.washer_completion_timeorsensor.dryer_completion_time, modify the template sensors inconfiguration.yamlto use your completion time entities or estimate based on cycle duration (see below).
- If your devices don’t provide
If your devices differ, create these template sensors in configuration.yaml:
sensor:
- platform: template
sensors:
washer_job_state:
value_template: >
{% set status = states('sensor.your_washer_status') %}
{% if status == 'running' and 'wash' in status.lower() %} wash
{% elif status == 'running' and 'rinse' in status.lower() %} rinse
{% elif status == 'running' and 'spin' in status.lower() %} spin
{% elif status == 'completed' %} finish
{% else %} idle
{% endif %}
dryer_job_state:
value_template: >
{% set status = states('sensor.your_dryer_status') %}
{% if status in ['completed', 'finished'] %} finished
{% elif status == 'running' %} drying
{% else %} idle
{% endif %}
washer_completion_time_minutes:
value_template: >
{% set completion_time = states('sensor.your_washer_end_time') | default('') %}
{% if completion_time %}
{% set completion_ts = as_timestamp(completion_time) %}
{% set current_ts = as_timestamp(now()) %}
{{ ((completion_ts - current_ts) / 60) | round(0) if completion_ts > current_ts else 0 }}
{% else %}
{% set duration = 45 %}
{% if is_state('switch.your_washer', 'on') %}
{{ duration - (as_timestamp(now()) - as_timestamp(states('switch.your_washer').last_changed)) / 60 | round(0) }}
{% else %}
0
{% endif %}
{% endif %}
dryer_completion_time_minutes:
value_template: >
{% set completion_time = states('sensor.your_dryer_end_time') | default('') %}
{% if completion_time %}
{% set completion_ts = as_timestamp(completion_time) %}
{% set current_ts = as_timestamp(now()) %}
{{ ((completion_ts - current_ts) / 60) | round(0) if completion_ts > current_ts else 0 }}
{% else %}
{% set duration = 60 %}
{% if is_state('switch.your_dryer', 'on') %}
{{ duration - (as_timestamp(now()) - as_timestamp(states('switch.your_dryer').last_changed)) / 60 | round(0) }}
{% else %}
0
{% endif %}
{% endif %}