spikey1965/ha-hon-appliance-card

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.

• 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

• 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.

1. In HACS, open the three-dot menu and choose Custom repositories.
2. Paste this repository's URL (the address of this page) and choose the type Dashboard.
3. Search for hOn Washer & Dryer Card, download it, and reload your browser when asked.

1. Download hon-appliance-card.js from the latest release.
2. Copy it to config/www/hon-appliance-card.js.
3. Go to Settings → Dashboards → ⋮ → Resources, add /local/hon-appliance-card.js?v=2.0.0 as a JavaScript module, then reload your browser.

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

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

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) and dryer.svg (dryer card): the machine, front on
• laundry-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.

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 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).

MIT. Not affiliated with or endorsed by Haier, Candy or Hoover.