Waschmaschinen Icon das sich dreht

Dashboard/Cards/Frontend
, , ,
1

Hallo zusammen,

ich habe hier ein Video gefunden, indem der Smart Home Junkie sein Icon der Waschmaschine animiert hat.
Leider kriege ich es trotz abschreiben nicht so hin wie er.
(Ja ich habe mushroom und Stack in Cards aus HACS installiert und den browser cache aktualisiert)

  • Hat das jemand von euch gemacht?
  • Falls ja gerne teilen :slightly_smiling_face: :+1:

Hier ist mein code

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: input_boolean.animated_washing_machine
    icon: mdi:washing-machine
    icon_color: |
      {% if is_state('input_select.waschmaschine_status', 'Läuft') %}
        orange
      {% else %}
        grey
      {% endif %}
    layout: vertical
    primary: Washing Machine
    tap_action:
      action: toggle
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 0%);
          }
        .: |
          ha-card {
            border: none;
          }
  - type: custom:mushroom-template-card
    entity: input_boolean.animated_washing_machine
    icon: mdi:washing-machine
    icon_color: |
      {% if is_state('input_select.waschmaschine_status', 'Läuft') %}
        orange
      {% else %}
        grey
      {% endif %}
    layout: vertical
    tap_action:
      action: toggle
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            {{ '--icon-animation: spin 1s linear infinite;' if is_state('input_select.waschmaschine_status', 'Läuft') else '' }}
            transform-origin: 50% 58%;
            clip-path: circle(21.7% at 50% 58%);
          }
        .: |
          ha-card {
            top: -100px;
            border: none;
          }

Danke schonmal

2

Hast du auch Card Mod mit installiert?

3

Hab ich vergessen reinzuschreiben aber Ja ist Installiert
In den Dashboard Ressources meine ich auch alles drin zu haben
image

Hab hier noch ein paar andere Beispiele
Hier funktioniert allederings nur AccesPoint und Alter!

type: grid
cards:
  - type: custom:mushroom-template-card
    icon: mdi:access-point
    icon_color: teal
    primary: Access Point
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: clip 1.5s infinite;
          }
          @keyframes clip {
            0% { clip-path: circle(13.0% at 50% 50%); }
            100% { clip-path: circle(50.0% at 50% 50%); }
          }
          .shape {
            --shape-animation: ping 1.5s infinite;
          }
          @keyframes ping {
            0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-teal), 0.3) inset; }
            50% { box-shadow: 0 0 5px 15px transparent inset; }
            51% { box-shadow: 0 0 1px 1px rgba(var(--rgb-teal), 0.3); }
            100% { box-shadow: 0 0 5px 15px transparent; }
          }
  - type: custom:mushroom-template-card
    icon: mdi:shimmer
    icon_color: amber
    primary: Sparkle
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: stars 4s linear infinite;
          }
          .shape {
            --shape-color: rgba(var(--rgb-disabled), 0.2);
          }
          @keyframes stars {
            0%, 3.1%, 14.1%, 40.1%, 55.1% { clip-path: inset(0 0 0 0); }
            3%, 40% { clip-path: polygon(48% 100%, 48% 62%, 0 63%, 0 0, 100% 0, 99% 100%); }
            14% { clip-path: polygon(49% 45%, 48% 100%, 0 100%, 0 0, 100% 0, 100% 36%); }
            55% { clip-path: polygon(0 100%, 0 60%, 41% 65%, 49% 46%, 100% 44%, 100% 100%); }
          }
  - type: custom:mushroom-template-card
    primary: Fireplace
    icon: mdi:fireplace
    icon_color: red
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: fire 800ms infinite;
            transform-origin: 50% 85%;
          }
          @keyframes fire {
              0%, 19%, 23%, 39%, 43%, 49%, 53%, 69%, 73%, 89%, 93%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
              20%, 40%, 50%, 70%, 90% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 99%, 66% 49%, 52% 44%, 33% 48%, 33% 82%, 66% 82%, 69% 100%, 0 100%); }
          }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:washing-machine
        icon_color: orange
        primary: "Washing Machine #2"
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                --icon-animation: shake 400ms ease-in-out infinite;
                transform-origin: 50% 58%;
                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);
              }
              @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); }
              }
      - type: custom:mushroom-template-card
        icon: mdi:washing-machine
        icon_color: orange
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                --icon-animation: spin 1s linear infinite;
                transform-origin: 50% 58%;
                clip-path: circle(21.7% at 50% 58%);
              }
              .shape {
                --shape-color: none;
              }
            .: |
              ha-card {
                width: 66px;
                top: -66px;
              }
    card_mod:
      style: |
        ha-card {
          height: 66px;
        }
  - type: custom:mushroom-template-card
    primary: Alert!
    icon: mdi:fire
    icon_color: red
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;;
          }
          @keyframes ping {
            0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
            100% { box-shadow: 0 0 5px 15px transparent; }
          }
          @keyframes blink {
            100% {opacity: 0;}
          }
  - type: custom:mushroom-template-card
    primary: Dust
    icon: mdi:weather-dust
    icon_color: brown
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: wind 10s ease-in-out infinite, dust 1s infinite; 
            transform-origin: 15% 50%
          }
          @keyframes wind {
            0%, 100% { transform: scaleX(1.2); }
            30% { transform: scaleX(0.9); }
            45% { transform: scaleX(1.1); }
            75% { transform: scaleX(0.8); }
          }
          @keyframes dust {
            0%, 21%, 41%, 61%, 81%, 100% { clip-path: inset(0 0 0 0); }
            20% { clip-path: polygon(0 0, 69% 0, 72% 27%, 100% 30%, 100% 100%, 0 100%); }
            40%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 57% 100%, 57% 79%, 0 79%); }
            60%  { clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%, 0 28%, 30% 28%); }
            80%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 61%, 32% 62%, 32% 46%, 0 46%); }
          }
  - type: custom:mushroom-template-card
    icon: mdi:looks
    primary: Double Rainbow
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: double 3s linear infinite alternate;
          }
          @keyframes double {
            0% { clip-path: inset(0 98% 0 0); transform: rotateY(0deg); }
            12.5% { clip-path: polygon(0 22%, 0 75%, 50% 75%); }
            25% { clip-path: inset(0 50% 0 0); }
            37.5% { clip-path: polygon(0 0, 0 75%, 50% 75%, 100% 0); }
            50% { clip-path: inset(0 0 0 0); transform: rotateY(0deg); }
            50.1% { transform: rotateY(180deg); }
            62.5% { clip-path: polygon(0 0, 0 75%, 50% 75%, 100% 0); }
            75% { clip-path: inset(0 50% 0 0); }
            87.5% { clip-path: polygon(0 22%, 0 75%, 50% 75%); }
            100% { clip-path: inset(0 98% 0 0); transform: rotateY(180deg); }
          }
          .shape {
            --shape-animation: rainbow 40s linear infinite;
          }
          @keyframes rainbow {
            0%, 100% {--icon-color: rgb(var(--rgb-red)); --shape-color: rgb(var(--rgb-red), 0.2); }
            6.25% { --icon-color: rgb(var(--rgb-deep-orange)); --shape-color: rgb(var(--rgb-deep-orange), 0.2); }
            12.5% { --icon-color: rgb(var(--rgb-orange)); --shape-color: rgb(var(--rgb-orange), 0.2); }
            18.75% { --icon-color: rgb(var(--rgb-amber)); --shape-color: rgb(var(--rgb-amber), 0.2); }
            25% { --icon-color: rgb(var(--rgb-yellow)); --shape-color: rgb(var(--rgb-yellow), 0.2); }
            31.25% { --icon-color: rgb(var(--rgb-lime)); --shape-color: rgb(var(--rgb-lime), 0.2); }
            37.5% { --icon-color: rgb(var(--rgb-light-green)); --shape-color: rgb(var(--rgb-light-green), 0.2); }
            43.75% { --icon-color: rgb(var(--rgb-green)); --shape-color: rgb(var(--rgb-green), 0.2); }
            50% { --icon-color: rgb(var(--rgb-teal)); --shape-color: rgb(var(--rgb-teal), 0.2); }
            56.25% { --icon-color: rgb(var(--rgb-cyan)); --shape-color: rgb(var(--rgb-cyan), 0.2); }
            62.5% { --icon-color: rgb(var(--rgb-light-blue)); --shape-color: rgb(var(--rgb-light-blue), 0.2); }
            68.75% { --icon-color: rgb(var(--rgb-blue)); --shape-color: rgb(var(--rgb-blue), 0.2); }
            75% { --icon-color: rgb(var(--rgb-indigo)); --shape-color: rgb(var(--rgb-indigo), 0.2); }
            81.25% { --icon-color: rgb(var(--rgb-deep-purple)); --shape-color: rgb(var(--rgb-deep-purple), 0.2); }
            87.5% { --icon-color: rgb(var(--rgb-purple)); --shape-color: rgb(var(--rgb-purple), 0.2); }
            93.75% { --icon-color: rgb(var(--rgb-pink)); --shape-color: rgb(var(--rgb-pink), 0.2); }
          }
  - type: custom:mushroom-template-card
    primary: Cog
    icon: mdi:cog
    icon_color: grey
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: spin 1.5s steps(5) infinite;
          }
  - type: custom:mushroom-template-card
    icon: mdi:sprinkler
    icon_color: cyan
    primary: Sprinkler
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon { 
            --icon-animation: sprinkle 2s linear infinite;
            transform-origin: 29% 88%; 
          }
          @keyframes sprinkle {
            0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
            1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
            6%, 21%, 36%, 51% { transform: rotate(2deg); }
          }
  - type: custom:mushroom-template-card
    icon: mdi:washing-machine
    icon_color: amber
    primary: Washing Machine
    card_mod:
      style:
        mushroom-shape-icon$: |
          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); }
          }

image

4

Also ich hab es mir auch mal lt Video nachgebaut.
Bei mir läuft es auch nicht.
Es werden zwar die Icons schön übereinander gelegt, aber drehen tut sich nix.

Edit:

So läuft es bei mir:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: switch.484010535042001470_bsh_common_setting_powerstate
    icon: mdi:washing-machine
    icon_color: >-
      {% if
      is_state('switch.484010535042001470_bsh_common_setting_powerstate','on')
      -%}
        black
      {%- else -%}
        grey
      {%- endif %}
    layout: vertical
    primary: Läuft
    tap_action:
      action: toggle
    card_mod:
      style: |
        ha-state-icon {
          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);
        }
        ha-card {
          border: none;
        }
  - type: custom:mushroom-template-card
    entity: switch.484010535042001470_bsh_common_setting_powerstate
    icon: mdi:washing-machine
    icon_color: >-
      {% if
      is_state('switch.484010535042001470_bsh_common_setting_powerstate','on')
      -%}
        orange
      {%- else -%}
        grey
      {%- endif %}
    layout: vertical
    tap_action:
      action: toggle
    card_mod:
      style: |
        ha-state-icon {
          {{ 'animation: spin 1s linear infinite;' if is_state('switch.484010535042001470_bsh_common_setting_powerstate','on') }}
          transform-origin: 50% 58%;
          clip-path: circle(21.7% at 50% 58%);
        }
        ha-card {
          top: -93px;
          border: none;
        }
card_mod:
  style: |
    ha-card {
      height: 100px;
      width: 100px
    }
grid_options:
  columns: 4
  rows: 2

Clipboard 06.12.2024, 23.03

6

Könnte es sein, dass es nur bestimmten Browsern funktioniert?

7

Moin
ich habe bereits in Edge, Chrome und in der Android App ausprobiert.
Leider ohne Erfolg :grimacing: :slightly_smiling_face:

8

Habt ihr mal meinen Code versucht?
Ich nutze Safari, aber ich denke nicht, dass es am Browser liegt.

9

Ja hab ich
hatte ein typo :sweat_smile:
jetzt funktioniert es super

Danke dir :slightly_smiling_face: :+1:

1 „Gefällt mir“
10

bei mir zeigt er Symbole nur untereinander an und drehen tut sich nix. jemand nen Tipp?

11

da steht eine if abfrage
Hast du diese für dein System angepasst?

12

läuft jetzt perfekt hatte card-mod vergessen. Da meine Steckdosen immer an sind frage ich nur die Leistung ab. Dazu habe ich einen Helfer “Schwellertsensor” erstellt der zwischen 5 und 3500 die Leistung abfragt. Diesen nutze ich dann

13

Ja klar, der Switch ist dann die Entität meiner Waschmaschine.