hOn Washer & Dryer Card for Home Assistant
Dashboard cards for washing machines and tumble dryers in the hOn app (Haier, Candy, Hoover). The machine looks like the real thing: the time left on its own display, a progress ring round the door, laundry spinning in the drum, and buttons to pause it or start a programme without walking to the utility room.
What it does
- The machine's own display: the time left counts down every second, with the percentage done underneath. Before a cycle it shows the programme's length and "Ready", like the machine.
- A progress ring round the door: blue for the washer, orange for the dryer, light blue while the dryer cools down, green when it's finished.
- A drum that turns while it runs, with water in the washer and a warm glow in the dryer. The current phase (Washing, Rinse, Spin, Drying, Cooldown) sits on the glass.
- The details that matter: programme, temperature and spin speed or dry level, and the finish time. When idle, the total number of cycles.
- Door and Remote Control icons.
- Pause, Resume, Standby and Off buttons, shown when the machine's Remote Control is on. Standby and Off cancel the cycle, so they ask first.
- A programmes card: your favourite programmes as buttons, plus a searchable list of the rest. Tap one, confirm, and it starts.
Both cards are in one file, with the pictures built in.
| Running | Finished / cooling down |
|---|---|
 |
 |
| Start a programme | Standby confirm |
|---|---|
 |
 |
Requirements
- Your washer and/or dryer added to the hOn app on your phone.
- The hOn custom integration. gvigroux/hon is the actively maintained fork. The older Andre0512 version no longer logs in. Add it in HACS as a custom repository, restart Home Assistant, then add hOn under Settings → Devices & services.
- Remote Control switched on at the machine if you want to start, pause or stop it from Home Assistant. Without it the card still shows everything; it just can't send commands.
Install
HACS (recommended)
- In HACS, open the three-dot menu and choose Custom repositories.
- Paste this repository's URL (the address of this page) and choose the type Dashboard.
- Search for hOn Washer & Dryer Card, download it, and reload your browser when asked.
Manual
- Download
hon-appliance-card.jsfrom the latest release. - Copy it to
config/www/hon-appliance-card.js. - Go to Settings → Dashboards → ⋮ → Resources, add
/local/hon-appliance-card.js?v=2.0.0as a JavaScript module, then reload your browser.
Use
This puts each machine above its programme buttons, washer on the left and dryer on the right:
type: grid columns: 2 square: false cards: - type: vertical-stack cards: - type: custom:hon-appliance-card appliance: washer max_width: 380px - type: custom:hon-programmes-card appliance: washer - type: vertical-stack cards: - type: custom:hon-appliance-card appliance: dryer max_width: 380px - type: custom:hon-programmes-card appliance: dryer
The cards look for entities starting washing_machine and tumble_dryer, which is what the hOn integration creates if your machines are called "Washing machine" and "Tumble dryer" in the hOn app. If yours are different, find your machine's power sensor under Settings → Entities (it ends in _status, for example binary_sensor.hoover_washer_status) and add the start of its name:
type: custom:hon-appliance-card appliance: washer entity: hoover_washer
Options
| Option | Card | What it does |
|---|---|---|
appliance |
both | washer or dryer (required) |
entity |
both | Start of your entity IDs. Default washing_machine / tumble_dryer |
name |
both | Card title. Default Washer / Dryer |
colour |
both | Accent colour, e.g. "#4fb3ff" |
max_width |
appliance | How wide the machine can get, e.g. 380px |
style |
appliance | photo (default, H-WASH 500 / H-DRY 500 style illustrations) or drawn (a simple drawing that suits any front loader) |
finish |
appliance | Colour of the built-in machines: white (default), graphite or black |
images |
appliance | Folder with your own pictures, e.g. /local/myimg/ (see Your own pictures) |
favourites |
programmes | Programme buttons to show, as hOn programme keys such as iot_wash_cotton |
programmes |
programmes | Full list for the "All programmes" search |
Machine colour
Got a dark machine? Add finish: graphite or finish: black to the appliance card. The door ring, knob and glass stay silver and dark, like the real thing.
type: custom:hon-appliance-card appliance: washer finish: graphite
Your own pictures
You can swap the built-in machines for your own. Put the files in a folder under config/www/, for example config/www/myimg/, and point the card at it:
type: custom:hon-appliance-card appliance: washer images: /local/myimg/
The card looks for these names in that folder:
washer.svg(washer card) anddryer.svg(dryer card): the machine, front onlaundry-drum.webp: the clothes that turn behind the glass
Include all three, because the card takes every picture from that folder once images is set.
To make the progress ring, display and icons line up, draw your machine the same way as the built-in ones: 600 × 850 (portrait), door centre at 298, 352, glass about 372 across (washer) or 384 (dryer), and the display at the top right, about 374, 10 to 565, 74. Your own pictures replace finish.
Finding your programme keys
The programmes card starts a cycle with the hon.start_program action, using the programme's default temperature and spin. To see which keys your machine accepts, go to Developer tools → Actions, pick hon.start_program, choose your machine and enter a made-up programme such as test. The error lists every programme it accepts. Put the ones you use most in favourites.
Thanks
Thanks to gvigroux for keeping the hOn integration working, and to Andre0512 for the original.
More free Home Assistant cards and guides at mymediabuild.uk, including a step-by-step guide to this card with a live demo. If you find it useful, you can buy me a coffee ☕ (no pressure).
Licence
MIT. Not affiliated with or endorsed by Haier, Candy or Hoover.