Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

Kind of similar request I have. Did you ever find a solution?

These are just AWESOME! This will take the dash to another level, thanks @rhysb !
Now I am curious about, for example, the Washing Machine #2 Animation.
How to create: an icon without animation, but if the washing machine is runningā€¦the animated icon?
And when it has stoppedā€¦the icon without animation again.

Any thoughts?

Thanks and have a great weekend ahead!

2 Likes

if you use card mod you can use the following code:

type: custom:mushroom-chips-card
chips:
  - type: ā€¦
    card_mod:
      style: |
        :host { display:
          {% set x = ['unavailable', 'unknown', 'none'] %}
          {% set e = states('sensor.mobile_battery_level') %}
          {% set b = (e|float(100) <= 35) %}
          {{ 'inline' if b or e in x else 'none' }}; }

My thought would be something like this:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: sensor.washing_machine
    icon: mdi:washing-machine
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    primary: 'Washing Machine #2'
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            {{ '--icon-animation: shake 400ms ease-in-out infinite;' if is_state(config.entity, 'on') }}
            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
    entity: sensor.washing_machine
    icon: mdi:washing-machine
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            {{ '--icon-animation: spin 1s linear infinite;' if is_state(config.entity, 'on') }}
            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;
    }
1 Like

Needs help please.

I would like to change the code, if the off fan, then the icon will not turn around. If he is on then he will turn around.

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Fan Bathroom
    icon: cil:pedestal-fan
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    entity: light.fan_bathroom
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
           --icon-animation: rotation 1s linear infinite;
          }
          @keyframes rotation {
            100% {
              transform: rotate(360deg);
            }
          }

Just wrap the --icon-animation in an if, like this:

{{ '--icon-animation: rotation 1s linear infinite;' if is_state(config.entity, 'on') }}
2 Likes

Thank you very much

1 Like

Is it ok to do it this way? or iā€™m wrong

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    icon: mdi:sprinkler
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    entity: switch.johnson
    primary: johnson
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon { 
            {{ '--icon-animation: rotation 1s linear infinite;' if is_state(config.entity, 'on') }}
            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); }
          }

Now itā€™s all right :slight_smile:

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    icon: mdi:sprinkler
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    entity: switch.johnson
    primary: johnson
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon { 
            {{ '--icon-animation: sprinkle 2s linear infinite;' if is_state(config.entity, 'on') }}
            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); }
          }

1 Like

Cant get your Partly Cloudy animation to work on a chips card.
What i am doing wrong? :frowning:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:weather-partly-cloudy
    icon_color: light-green
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-icon {
        --icon-animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
      }
      @keyframes cloudy {
        0%, 100% { transform: translateX(3px); }
        30% { transform: translateX(-1px); }
        45% { transform: translateX(1.5px); }
        75% { transform: translateX(-3.2px); }
      }
      @keyframes sun {
        50% { clip-path: polygon(0 67%, 18% 55%, 16% 31%, 41% 12%, 67% 24%, 77% 59%, 100% 64%, 100% 100%, 0 100%); }
      }

Thank you very much for the investment.

Can you make something related to the door? Door sensor opens and closes.

2 Likes

Nice can you share code ?

Already shared it, just a tiny scroll up :slight_smile:

1 Like

Awesome work with these! Thanks alot!

I have a question: How to utilize these animations in the weather card where the icon can be different based on the weather entity state? Some kind of if structure I suppose but not too familiar how to do itā€¦

1 Like

Hi, what cards do you use for energy entity?

thank you. Animations work good on browser but not on official app. why?

Hello. Hoping someone can help. Iā€™m trying to add a Mushroom Person Card. In all the videos I watch there are features in the videos that I donā€™t have.

For example, I donā€™t have the option to ā€œUse entity pictureā€
Also, I donā€™t have the option for ā€œHide stateā€ or ā€œHide nameā€.

Thanks for any help.

The screenshot from the video if from an older version of Mushroom Cards. Your screenshot is from the new/current version. Use entity picture is now in the dropdown ā€˜Icon typeā€™ and hide state/name are located under ā€˜Primary/Secondary Informationā€™ dropdowns.

1 Like

:thinking: Animations are working OK for me in Android app. What OS are you on?

For Chips you will need to use animation: instead of --icon-animation:.