I’ve created a custom interactive Picture Elements card for Miele washing machines (specifically designed for W1 models with TwinDos).
To make it super easy for anyone to adapt this to their setup without messing with complex YAML, I also built a standalone HTML Code Generator. Just type your entity prefix (e.g., washer), select your language, and copy the ready-to-use code!
Key Features:
Circular Progress Ring: A dynamic LED-style ring around the door that visually fills up as the wash cycle progresses.
Dynamic TwinDos Cartridges: The Phase 1 & 2 containers visually fill and empty based on your actual liquid percentage sensors.
Smart Controls: Context-aware Start/Stop buttons and a Power button that changes color based on the state.
Multi-Language: Built-in support for English, German, and Russian.
Minimalist Stats: Clean water and energy consumption indicators.
Requirements:
card-mod installed via HACS (required for the CSS gradients and masks).
How to use:
Download the miele_washer_card_generator.html and the washer.webp background image from my GitHub.
Open the HTML file in any browser.
Enter your entity prefix, copy the generated YAML, and paste it into a Manual card in your dashboard.
UPDATE: The ‘unknown’ values were the energy and water consumption sensors. I made their display conditional on not being that and it now looks perfect.
Hi everyone! Thanks for the feedback on the initial version.
I noticed that the picture-elements approach was a bit rigid, especially since the card-mod dependency and hardcoded sensor names were causing issues for some setups.
To fix this and make it easier to use, I’ve rebuilt the project as a standalone Custom JS Card.
What’s changed in V2:
Zero Dependencies: You don’t need card-mod or button-card anymore. Everything is handled internally by the .js file.
Dryer Support: Added a specific layout for tumble dryers, including a flashing “Clean Filter” alert.
Responsive Layout: The text inside the drum now automatically centers itself. If your machine doesn’t report certain states (like spin speed or drying step), it won’t leave empty gaps.
Interactive (More-Info): Clicking on the drum, remaining time, water/energy, or TwinDos containers now correctly opens the standard Home Assistant history graphs.
Better Error Handling: If a sensor is unavailable or missing, the card will neatly show a - instead of breaking or showing “unknown”.
Regarding custom entity names: I know the strict naming convention was a pain. The new card handles missing sensors much more gracefully now. As a next step, I’m planning to update the HTML generator so you can easily map your own custom sensor names if they differ from the default Miele integration.
You can grab the new .js file and the updated HTML Generator from the GitHub repo. Setup is now just 4 lines of YAML.
Let me know if this version works better for your setups!
Hi Eugen417, this new v2 update is a big improvement in easy of use and presentation. Maybe next step is to get it in to HACS
Some comparison screenshots of my machine showcasing the old v1 card (including a couple of small mods I made) alongside the new v2 with no alterations:
Looks great. +1 on HACS. It’d also be nice in the YAML definition for my dashboard when using this card to be able to specify the prefix (or to pick the main entity e.g. sensor.washer) rather than having to regenerate via HTML the entity specific card each time there is an update.
Thanks for the feedback! Your suggestions have been implemented: HACS support and entity prefixing are now live. Miele Appliance Custom Card HACS is ready for testing: GitHub - Eugen417/miele-appliance-card · GitHub
Key Features:
Circular Progress Ring: A dynamic LED-style ring around the door that visually fills up as the wash cycle progresses.
Dynamic TwinDos Cartridges: The Phase 1 & 2 containers visually fill and empty based on your actual liquid percentage sensors.
Smart Controls: Context-aware Start/Stop buttons and a Power button that changes color based on the state.
Multi-Language: Built-in support for English, German, and Russian.
Minimalist Stats: Clean water and energy consumption indicators.
Requirements:
How to use:
Get the Code Generator & Instructions on my GitHub
UPDATE: The ‘unknown’ values were the energy and water consumption sensors. I made their display conditional on not being that and it now looks perfect.
