Hi everyone! 
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.htmland thewasher.webpbackground 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.
Get the Code Generator & Instructions on my GitHub
Here is how it looks in action:
Hope you find it useful! Let me know what you think.