Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

rhysb · November 22, 2022, 8:25am

Mushroom Animations - Part 5

Mushroom Chip Animations

Mushroom Chip Animated Scene

Chip Animated Scene

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: template
    icon: mdi:snail
    icon_color: brown
  - type: template
    icon: mdi:flower
    icon_color: amber
  - type: template
    icon: mdi:butterfly
    icon_color: cyan
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-icon {
        animation: bump 10s infinite;
        transform-origin: 50% 100%;
      }
      @keyframes bump {
        0% { transform: translateX(0); }
        1% { transform: translateX(-0.6px) rotate(-9deg); }
        2% { transform: translateX(0.5px) rotate(7deg); }
        3% { transform: translateX(-0.3px) rotate(-5deg); }
        4% { transform: translateX(0.2px) rotate(3deg); }
        5% { transform: translateX(0); }
      }
    mushroom-template-chip:nth-child(2)$: |
      ha-icon {
        animation: slip 0.5s linear infinite alternate;
        transform-origin: 100% 100%;
      }
      @keyframes slip {
        from { transform: scale(1.05, 0.9);}
        to { transform: scale(0.9, 1.05); }
      }
    mushroom-template-chip:nth-child(3)$: |
      ha-icon {
        animation: bump 10s infinite;
        transform-origin: 50% 100%;
      }
      @keyframes bump {
        50% { transform: translateX(0); }
        51% { transform: translateX(-0.6px) rotate(-9deg); }
        52% { transform: translateX(0.5px) rotate(7deg); }
        53% { transform: translateX(-0.3px) rotate(-5deg); }
        54% { transform: translateX(0.2px) rotate(3deg); }
        55% { transform: translateX(0); }
      }
    mushroom-template-chip:nth-child(4)$: |
      ha-icon {
        animation: flutter 5s infinite alternate;
      }
      @keyframes flutter {
        0% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        10% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg) scalex({{ range(3, 7) | random / 10 }}); }
        20% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        30% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg) scalex({{ range(3, 7) | random / 10 }}); }
        40% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        50% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg) scalex({{ range(3, 7) | random / 10 }}); }
        60% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        70% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg) scalex({{ range(3, 7) | random / 10 }}); }
        80% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        90% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg) scalex({{ range(3, 7) | random / 10 }}); }
        100% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
      }
    .: |
      .chip-container {
        background: radial-gradient(circle, rgba(var(--rgb-light-blue), 0.1) 0%, transparent 100%);
        border-bottom: 3px dotted rgba(var(--rgb-green));
        border-radius: 20%;
        box-shadow: 0 5px 1px 0.1px rgba(var(--rgb-green), 0.2)
      }
      mushroom-template-chip:nth-child(2) {
        animation: slide 10s ease-in-out infinite;
      }
      @keyframes slide {
        0% { transform: translate(0px, 0px) rotateY(0deg); }
        50% { transform: translate(100px, 0px) rotateY(0deg); }
        50.1% { transform: translate(100px, 0px) rotateY(180deg); }
        100% { transform: translate(0px, 0px) rotateY(180deg); }
      }
      mushroom-template-chip:nth-child(3) {
          transform: translate(100px);
      }
      mushroom-template-chip:nth-child(4) {
          animation: by {{ range(5, 15) | random }}s ease infinite;
      }
      @keyframes by {
        0% { transform: translate(100px, 0px); }
        50% { transform: translate({{ range(110, 150) | random }}px, 0px); }
        100% { transform: translate(100px, 0px); }
      }

Adding Animations to Chips

Adding an animation to a Mushroom Chip is a bit more complicated than a normal Mushroom Card. You have the Chips ‘parent’ and multiple Chip ‘children’. The card_mod can be applied differently to each.

To the Chip

The simplest method is to add the card_mod to the Chip. The disadvantage of doing this is that we can’t address the icon directly, so animations such as clip-path will not work and we can’t have any text on the Chip. This method also breaks the GUI editor of the Chips, so you have to configure with YAML.

Chip Animation

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
    card_mod:
      style: |
        .content {
          animation: boing 3s ease infinite;
          transform-origin: 50% 90%;
        }
        @keyframes boing {
          0% { transform: scale3d(1, 1, 1); }
          7% { transform: scale3d(1.25, 0.75, 1); }
          10% { transform: scale3d(0.75, 1.25, 1); }
          12% { transform: scale3d(1.15, 0.85, 1); }
          16% { transform: scale3d(0.95, 1.05, 1); }
          19% { transform: scale3d(1.05, 0.95, 1); }
          25% { transform: scale3d(1, 1, 1); }
        }       
  - type: template
    icon: mdi:mushroom
    icon_color: red
    card_mod:
      style: |
        .content {
          animation: spin 3s ease 1.5s infinite;
        }
        @keyframes spin {
          100% { transform: rotate(360deg); }
        }

To the Chips

The more complex but correct method is to add the card_mod to the Chips (parent) and then address each Chip (child). This is done by referencing the mushroom-<chip-type>-chip:nth-child(x) where x is the number of the Chip and <chip-type> is type of Chip, such as template, entity, light etc. So, if I wanted to reference the 5th Entity Chip I would use mushroom-entity-chip:nth-child(5) or the 2nd Template Chip mushroom-template-chip:nth-child(2). The functionality of the GUI editor is retained with this method.

Chips Animation

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: template
    content: Mushroom
    icon: mdi:mushroom
    icon_color: red
  - type: light
    entity: light.rocket_man
    icon: mdi:rocket-launch
    name: Rocket Man
    content_info: name
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-icon {
        animation: boing 3s ease infinite;
        transform-origin: 50% 90%;
      }
      @keyframes boing {
        0% { transform: scale3d(1, 1, 1); }
        7% { transform: scale3d(1.25, 0.75, 1); }
        10% { transform: scale3d(0.75, 1.25, 1); }
        12% { transform: scale3d(1.15, 0.85, 1); }
        16% { transform: scale3d(0.95, 1.05, 1); }
        19% { transform: scale3d(1.05, 0.95, 1); }
        25% { transform: scale3d(1, 1, 1); }
      }       
    mushroom-template-chip:nth-child(2)$: |
      ha-icon {
        animation: spin 3s ease 1.5s infinite;
      }
      @keyframes spin {
        100% { transform: rotate(360deg); }
      }       
    mushroom-light-chip:nth-child(3)$: |
      ha-icon {
        {{ 'animation: thrust 100ms infinite, motion 3s ease-in-out infinite;' if is_state('light.rocket_man', 'on') }}
      }
      @keyframes thrust {
        0% { clip-path: polygon(0 0, 0 47%, 22% 57%, 28% 63%, 0 91%, 11% 100%, 37% 73%, 45% 77%, 55% 100%, 100% 100%, 100% 0%); }
        33% { clip-path: polygon(0 0, 0 47%, 24% 59%, 42% 76%, 54% 100%, 100% 100%, 100% 0); }
        66% { clip-path: polygon(0 0, 0 92%, 28% 64%, 36% 72%, 9% 100%, 100% 100%, 100% 0%); }
      }
      @keyframes motion {
        0%, 100% { transform: translateY(-2px) translateX(-3px); }
        50% { transform: translateY(3px) translateX(2px); }
      }

Even More Mushroom Card Icon Animations

Mushroom Monitor Animation

Monitor Animation

type: custom:mushroom-template-card
icon: mdi:monitor
icon_color: purple
primary: Monitor
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon:before {
        content: "";
        position: absolute;
        width: 40%;
        height: 30%;
        margin: 6%;
        animation: refresh 300ms linear infinite;
      }
      @keyframes refresh { 
        0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
        25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
        50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
        75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
        100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
      }

Mushroom Email Animation

Email Animation

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:email
    icon_color: orange
    primary: Email
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: email 4s infinite;
          }
          @keyframes email {
            0%, 32%, 100% { opacity: 1; }
            33%, 99% { opacity: 0; }
          }
  - type: custom:mushroom-template-card
    icon: mdi:email-open
    icon_color: orange
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: email-open 4s infinite;
          }
          @keyframes email-open {
            0%, 32%, 100% { opacity: 0; }
            33%, 65% { opacity: 1; }
            66% { opacity: 0; }
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
  - type: custom:mushroom-template-card
    icon: mdi:email-newsletter
    icon_color: orange
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: email-newsletter 4s infinite;
          }
          @keyframes email-newsletter {
            0%, 65% { opacity: 0; }
            66% { opacity: 1; }
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -132px;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Mushroom Email #2 Animation

Email #2 Animation

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:email
    icon_color: orange
    primary: 'Email #2'
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: email 2s infinite;
          }
          @keyframes email {
            0%, 49%, 100% { opacity: 1; }
            50%, 99% { opacity: 0; }
          }
  - type: custom:mushroom-template-card
    icon: mdi:email-open
    icon_color: orange
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: email-open 2s infinite;
          }
          @keyframes email-open {
            0%, 49%, 100% { opacity: 0; }
            50%, 99% { opacity: 1; }
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Mushroom Christmas Tree #2 Animation

Christmas Tree #2 Animation

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:pine-tree
    icon_color: green
    primary: 'Christmas Tree #2'
  - type: custom:mushroom-template-card
    icon: mdi:star-four-points
    icon_color: yellow
    primary: Star
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: star 8s ease infinite alternate;
          }
          @keyframes star {
            0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
            50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
  - type: custom:mushroom-template-card
    icon: mdi:grain
    icon_color: red
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: flash 2s steps(1) infinite, lights 2s infinite;
            clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
          }
          @keyframes flash {
            50% { transform: rotateY(180deg); }
          }
          @keyframes lights {
            0%, 100% {--icon-color: rgb(var(--rgb-red)); }
            6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
            12.5% { --icon-color: rgb(var(--rgb-orange)); }
            18.75% { --icon-color: rgb(var(--rgb-amber)); }
            25% { --icon-color: rgb(var(--rgb-yellow)); }
            31.25% { --icon-color: rgb(var(--rgb-lime)); }
            37.5% { --icon-color: rgb(var(--rgb-light-green)); }
            43.75% { --icon-color: rgb(var(--rgb-green)); }
            50% { --icon-color: rgb(var(--rgb-teal)); }
            56.25% { --icon-color: rgb(var(--rgb-cyan)); }
            62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
            68.75% { --icon-color: rgb(var(--rgb-blue)); }
            75% { --icon-color: rgb(var(--rgb-indigo)); }
            81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
            87.5% { --icon-color: rgb(var(--rgb-purple)); }
            93.75% { --icon-color: rgb(var(--rgb-pink)); }
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -132px;
          }
  - type: custom:mushroom-template-card
    icon: mdi:gift
    icon_color: red
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: surprise 4s ease infinite;
          }
          @keyframes surprise {
            0%, 20%, 100% { transform: translateY(0); }
            2.5% { transform: translateY(-2px) rotate(-27deg); }
            5% { transform: translateY(-2px) rotate(21deg); }
            7.5% { transform: translateY(-2px) rotate(-15deg); }
            10% { transform: translateY(-2px) rotate(9deg); }
            12.5% { transform: translateY(0); }
            15% { transform: translateY(-1.2px) }
          }
          .shape {
            --shape-color: none;
            --icon-size: 18px;
            top: 18px;
            left: 18px;
          }
        .: |
          ha-card {
            width: 66px;
            top: -198px;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Mushroom 3D Printing Animation

3D Printing Animation

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:printer-3d-nozzle
    icon_color: cyan
    primary: 3D Printing
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            clip-path: inset(83% 72% 0 0);
          }
        .: |
          ha-card {
            --ha-card-border-width: 0;
          }
  - type: custom:mushroom-template-card
    icon: mdi:printer-3d-nozzle
    icon_color: cyan
    primary: ''
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: print 1s linear infinite alternate;
          }
          @keyframes print {
            0% { transform: translateX(4px); }
            30% { clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 0 26%); }
            100% { transform: translateX(-4px); clip-path: polygon(0 0, 100% 0%, 100% 100%, 40% 100%, 0 26%); }
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
            --ha-card-border-width: 0;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Mushroom 3D Printer Animation

3D Printer Animation

type: custom:mushroom-template-card
primary: 3D Printer
icon: mdi:printer-3d
icon_color: light-blue
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: print 2s infinite;
      }
      @keyframes print {
        0%, 100% { clip-path: polygon(0 0, 0 51%, 20% 51%, 51% 33%, 81% 53%, 100% 53%, 100% 0); }
        10% { clip-path: polygon(0 0, 0 100%, 49% 100%, 85% 83%, 49% 98%, 50% 89%, 51% 82%, 46% 79%, 36% 73%, 17% 82%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
        20% { clip-path: polygon(0 0, 0 100%, 100% 100%, 85% 83%, 66% 73%, 56% 79%, 51% 83%, 46% 79%, 36% 73%, 17% 82%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
        30% { clip-path: polygon(0 0, 0 100%, 100% 100%, 85% 83%, 66% 73%, 54% 69%, 50% 61%, 45% 69%, 36% 73%, 17% 82%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
        40% { clip-path: polygon(0 0, 0 100%, 100% 100%, 85% 83%, 66% 73%, 54% 69%, 50% 61%, 45% 69%, 34% 63%, 25% 54%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
        50% { clip-path: polygon(0 0, 0 100%, 100% 100%, 76% 51%, 66% 63%, 54% 69%, 50% 61%, 45% 69%, 34% 63%, 25% 54%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
        60% { clip-path: polygon(0 0, 0 100%, 100% 100%, 76% 51%, 66% 63%, 55% 69%, 50% 61%, 39% 55%, 32% 55%, 25% 54%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
        70% { clip-path: polygon(0 0, 0 100%, 100% 100%, 76% 51%, 68% 53%, 60% 55%, 50% 61%, 39% 55%, 32% 55%, 25% 54%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
        80% { clip-path: polygon(0 0, 0 100%, 100% 100%, 76% 51%, 68% 53%, 60% 55%, 50% 61%, 50% 50%, 51% 37%, 31% 44%, 30% 35%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
        90% { clip-path: polygon(0 0, 0 100%, 100% 100%, 77% 51%, 67% 42%, 64% 34%, 56% 34%, 50% 36%, 39% 40%, 31% 44%, 30% 35%, 41% 33%, 85% 53%, 100% 52%, 100% 0); }
      }

Mushroom Auto Fix #2 Animation

Auto Fix #2 Animation

type: custom:mushroom-template-card
icon: mdi:auto-fix
icon_color: cyan
primary: 'Auto Fix #2'
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: sparkle 2s linear infinite, kadabra 2s ease-in-out infinite;
       transform-origin: 10% 90%
      }
      @keyframes sparkle {
        0%, 68%, 100% { clip-path: polygon(0% 100%, 1% 75%, 56% 22%, 80% 43%, 26% 100%); }
        69%, 74%, 79%, 85% { clip-path: inset(0 0 0 0); }
        70% { clip-path: polygon(0 100%, 0 76%, 75% 0, 100% 0, 100% 100%); }
        75% { clip-path: polygon(0 100%, 0 0, 39% 0, 100% 62%, 100% 100%); }
        80% { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 26%, 25% 100%); }
      } 
      @keyframes kadabra {
        0%, 65%, 100% { transform: rotate(-15deg); }
        70% { transform: rotate(20deg); }
        75% { transform: rotate(15deg); }
        80% { transform: rotate(25deg); }
      }

Mushroom Vroom Animation

Vroom Animation

type: custom:mushroom-template-card
icon: mdi:car-hatchback
icon_color: red
primary: Vroom
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: vroom 2s ease-in-out infinite;
      }
      .shape {
        clip-path: inset(0 0 0 0);
      }
      @keyframes vroom {
        49% { opacity: 1;}
        50% { transform: translate(32px); opacity: 0; }
        51% { transform: translate(-32px); opacity: 0; }
        52% { opacity: 1; }
      }

Mushroom Double Garage Animation

Double Garage Animation

type: custom:mushroom-template-card
primary: Double Garage
icon: mdi:garage-variant
icon_color: amber
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: door 3s steps(1) infinite alternate; 
      }
      @keyframes door {
        0% { clip-path: inset(0 0 0 0); }
        25%  { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
        50%  { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
        75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
      }

Continued in Part 1, Part 2, Part 3 & Part 4

rhysb · November 22, 2022, 9:15am

I’ve added some instructions on adding the active animations to your theme.

I use a custom theme under the themes directory so that it doesn’t get overwritten when there is an update. The Mushroom Cards are designed to work without a theme file, so you are not missing anything by not using the Mushroom Theme. The Mushroom Themes just allow you to change the defaults if you want to have something different.

The card_mod in my examples does not break the GUI editor. If it is breaking for you, check that you have followed the examples correctly.

Tim_Knowlden · November 22, 2022, 1:17pm

Thats good, press and hold works well for resetting. I will have a play as it would be ideal for easily making multiple reminders by using only 1 script to reset.

Tim_Knowlden · November 22, 2022, 3:56pm

@rhysb

reset_reminder:

alias: Reset Reminder

sequence:

service: input_datetime.set_datetime

data:

datetime: ‘{{ now() + timedelta(days=30) }}’

target:

data_template:

entity_id: “{{ entities }}”

mode: single

This doesn’t work… cannot find the right formatting to pass an entity into the script, any pointers?

jompa68 · November 22, 2022, 6:49pm

Possible to set a color on the chips-card background?

Yoinkz · November 22, 2022, 8:08pm

Wow… Really nice!

Would you mind sharing your Lovelace config?

rhysb · November 22, 2022, 8:57pm

Try like this:

hold_action:
  action: call-service
  service: script.reset_reminder
  data: {}
  target:
    entity_id: input_datetime.reminder_date

alias: Reset Reminder
sequence:
  - service: input_datetime.set_datetime
    data:
      datetime: "{{ now() + timedelta(days=30) }}"
    target:
      entity_id: "{{ entity_id }}"
mode: single

rhysb · November 22, 2022, 9:11pm

Yes, you can set the Mushroom Chip background like this:

Mushroom Chip Background

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
    content: Mushroom
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(var(--rgb-green), 0.2);
        }

Tim_Knowlden · November 22, 2022, 9:18pm

Ah okay so it’s passed in during the hold action. Thanks

henrikrox · November 23, 2022, 12:35am

Anyone know why my camera feed looks normal on desktop (rounded corners)

And on mobile it gets boxed

Really stands out when it looks boxed, its a grid card with picture entity, render cards as squares is disabled

rhysb · November 23, 2022, 2:29am

Looks like you have a different theme enabled on mobile. Buttons have box-shadow.

jompa68 · November 23, 2022, 5:24am

@rhysb
can chip card have a secondary line, i would like to have my temperature below “Climate”

Skärmavbild 2022-11-23 kl. 06.21.56

henrikrox · November 23, 2022, 6:52am

Tried using different themes. Didn’t find a specific mushroom theme. tried default, minimalist etc

Same issue. No matter what I use on desktop. Default, minimalist etc it works

henrikrox · November 23, 2022, 6:53am

You can also clearly see that before loading the stream the box are rounded but when it starts playing it gets squared

Lastly I don’t have minimalist installed anymore but this is what I have listed under themes. No mushroom specific one

rhysb · November 23, 2022, 7:18am

You can make the Chip multiline like this.

Mushroom Multiline Chip:

Mushroom Multiline Chip

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: climate.office_air_conditioner
    icon: mdi:thermometer
    icon_color: red
    content: |-
      Climate
      {{ state_attr(entity, 'temperature') | round(1) }} °C  
    card_mod:
      style: |
        .content {
          white-space: pre-wrap;
        }

TommyWelle · November 23, 2022, 7:51am

Did you solve this?

henrikrox · November 23, 2022, 9:18am

Figured out the issue with squared camera feed, i had to set theme under picture entity, for some reason, it seems that overwrites the theme set on the user level for that specific resource

brewston · November 23, 2022, 10:17am

I figured this video would be of interest to people on this thread - Create Stunning ANIMATED MUSHROOM CARDS On Your Dashboard NOW! - YouTube - it’s really good

henrikrox · November 23, 2022, 11:20am

Trying to use rooms per device instead of per rooms since we got a big house. Dont know if i like it yet. However, in thermostat view i want to make a power graph at the bottom, but only count based on the thermostats that is on. Do i have to use something like transform and -parsfloat for that?

Edit; figured it out, can use transform/parsefloat if i have a unit that covers all my elelctricy, but easier just to make a new template sensor based on all thermostats. so i figured it out

Tyfoon · November 23, 2022, 12:21pm

Wow. You like it warm Nice dash!