Home Connect Waschmaschine "klein aber schön" um Dashboard abbilden

Dashboard/Cards/Frontend
,
1

Hi zusammen,

ich würde gern meine Siemens Home Connect Waschmaschine auf meinem Dashboard abbilden aber eben nicht einfach mit mehreren Zeilen wie Program, Laufzeit, Türstatus etc sondern am liebsten solle einfach eine kleine Grafik da sein welche eine Grafik einer Waschmaschine beinhaltet und je nach Zustand (an/aus) eingefärbt wird. In den 4 Ecken würde ich dann gern Informationen zeigen wie Programmdauer, Türzustand oder bsp. welches Programm gerade läuft. Wieviele und welche überlege ich noch. Ich glaube sowas lässt sich mit der Custom Button Card realisieren, oder?
Hat jemand dafür vielleicht nen Template oder das bei sich schon gebaut?

2

Ich hab gerade nach so etwas für nen Home Connect Geschirrspüler gesucht. Leider nichts gefunden :\

3

Vielleicht könnt ihr euch hier Ideen holen:

4

also ich habe das so dargestellt, ohne Grafik zwar, aber mit allen wichtigen Informationen:
Wenn er an ist, sieht man wo er sich befinden in % und die Zeit wann dieser fertig ist.
Die Türzustand wird duch das badge_icon dargestellt.

type: custom:mushroom-template-card
tap_action: null
icon: mdi:dishwasher
icon_color: |
  {% if states('switch.geschirrspuler_power') == 'on' %}
  blue
  {% else %}
  grey
  {% endif %}
primary: Spülmaschine
entity: switch.geschirrspuler_power
secondary: >
  {% if states('switch.geschirrspuler_power') == 'on' %} {{
  states('sensor.geschirrspuler_program_progress') }} % | {{
  as_timestamp(states('sensor.geschirrspuler_remaining_program_time')) |
  timestamp_custom(' %H:%M')   }} Uhr  {% else %} frei {% endif %}
card_mod:
  style:
    mushroom-shape-icon$: |
      {% if is_state('switch.geschirrspuler_power','on') %}
      ha-icon {
        --icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      }
      @keyframes shake {
        0%, 100% { transform: translate(0, 0) rotate(0); }
        20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
        40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
        60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
        80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
      }
      @keyframes drum {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
      }
      {% else %}
      {% endif %}
      }
badge_icon: |-
  {% if is_state('binary_sensor.geschirrspuler_door', 'on') %}
    mdi:door-open
  {% else %}
    mdi:door-closed
  {% endif %}
badge_color: |-
  {% if is_state('binary_sensor.geschirrspuler_door', 'on') %}
    yellow
  {% else %}
  {% endif %}