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

[burg93 (Adam)]

@rhysb

Part 3

These are awesome and exactly what I was looking for. Would it be possible to get them and any future ones added to a github page or perhaps a separate thread on here? I’d love to keep up to date with the latest ones but there’s quite a lot to wade through in this thread!

Perhaps a github page with an alphabetically ordered grid of the gifs so you can quickly browse the icons with each hyperlinking to the relevant point in a file of the code. You can create permalinks to any line in a file so could just chuck them all in one big file and grab the permalink for the icon. Excited to see more!

[rhysb (Rhys)]

I’ve added some documentation to show how to use in your cards.

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

Mushroom Animations - Part 4 Even More Mushroom Card Icon Animations [Mushroom HA Animation]

HA Animation

type: custom:mushroom-template-card icon: mdi:home-assistant icon_color: blue primary: Home Assistant card_mod: style: mushroom-shape-icon$: | ha-icon { --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); } …

[rhysb (Rhys)]

Use abs (absolute value) filter to convert values to positive. Like this:

{% set rssi_level = states(entity) | int | abs %}

[rhysb (Rhys)]

You are missing sone @keyframes on the ping animation. Should be like this:

      @keyframes ping {
        0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-red), 0.7); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }

The style: command needs to be indented after card_mod: like this:

card_mod:
  style:
    mushroom-shape-icon$: |

[Kabala (Cata)]

somehow doesn’t work.

type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''friendly_name'') }}'
secondary: '{{ states(entity) }}dBm'
icon: |-
  {% set rssi_level = states(entity) | int | abs %}
  {% if -1 > rssi_level >= -50 %}
    mdi:wifi-strength-4
  {% elif -51 >= rssi_level > -61 %}
    mdi:wifi-strength-3
  {% elif -62 >= rssi_level > -72 %}
    mdi:wifi-strength-2
  {% elif -73 >= rssi_level > -83 %}
    mdi:wifi-strength-1
  {% elif -83 >= rssi_level > -94 %}
    mdi:wifi-strength-outline
  {% else %}
    mdi:wifi-strength-off-outline
  {% endif %}
entity: sensor.shellyswitch25_ba854b_rssi
fill_container: false
icon_color: |-
  {% set rssi_level = states(entity) | int | abs %}
  {% if -1 > rssi_level >= -50 %}
    green
  {% elif -51 >= rssi_level > -61 %}
    lime-green
  {% elif -62 >= rssi_level > -72 %}
    yelow
  {% elif -73 >= rssi_level > -83 %}
    amber
  {% elif -83 >= rssi_level > -94 %}
    red
  {% else %}
    red
  {% endif %}
tap_action:
  action: more-info
hold_action:
  action: none
double_tap_action:
  action: none
badge_color: ''

[rhysb (Rhys)]

You need to change your comparisons to positive values too.

[RonOnline (Ron)]

@rhysb Could you help me?

The keyframes drum does not work for me …

This is my card:

  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Zolder
        secondary: '{{ states("sensor.zolder_temp_temperature") | round(0) }} °C'
        icon: fapro:z
        entity: light.lounge_light
        tap_action:
          action: navigate
          navigation_path: zolder
        hold_action:
          action: toggle
        icon_color: '{{ ''yellow'' if is_state(entity, ''on'') else ''disabled'' }}'
        fill_container: true
        layout: horizontal
        multiline_secondary: false
        card_mod:
          style: |
            :host([dark-mode]) {
              background-blend-mode: darken;
            }
            :host {
              background-image: url('/local/zolder.jpg') , linear-gradient(to right, rgba(var(--rgb-card-background-color), 1), rgba(var(--rgb-card-background-color), 0));
              background-size: 50% 100%;
              background-position: right;
              background-repeat: no-repeat;
              background-blend-mode: lighten;
              --mush-icon-size: 56px;
              height: 66px;
              margin-left: -10px !important;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: sensor.wasmachine_washer_machine_state
                state: run
            chip:
              type: template
              icon: mdi:washing-machine
              icon_color: |2-
                  {% if is_state(entity, 'off') %}
                  grey
                  {% else %}
                  blue
                  {% endif %}
              entity: sensor.wasmachine_washer_machine_state
              tap_action:
                action: more-info
              card_mod:
                style: >
                  {% if is_state('sensor.wasmachine_washer_machine_state','run')
                  %}
                    ha-card {
                      animation: shake 500ms ease-in-out infinite, drum 1s infinite;
                      transform-origin: 100% 100%;
                    }
                    @keyframes shake {
                      0%, 100% { transform: rotate(4deg); }
                      50%  { transform: rotate(-4deg); }
                    }
                    @keyframes drum {
                      50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
                    }
                  {% else %}

                  {% endif %}

                  }
          - type: conditional
            conditions:
              - entity: sensor.droger
                state: 'on'
            chip:
              type: template
              icon: mdi:tumble-dryer
              icon_color: |2-
                  {% if is_state(entity, 'off') %}
                  grey
                  {% else %}
                  red
                  {% endif %}
              entity: sensor.droger
              tap_action:
                action: more-info
              card_mod:
                style: |
                  {% if is_state('sensor.droger','on') %}
                    ha-card {
                      animation: shake 800ms ease-in-out infinite, drum 1s infinite;
                      transform-origin: 100% 100%;
                    }
                    @keyframes shake {
                      0%, 100% { transform: rotate(4deg); }
                      50%  { transform: rotate(-4deg); }
                    }
                  {% endif %}
                  }
          - type: conditional
            conditions:
              - entity: binary_sensor.kleine_zolderraam_contact
                state: 'on'
            chip:
              type: template
              double_tap_action:
                action: none
              entity: cover
              icon: >
                {% set state=states('binary_sensor.kleine_zolderraam_contact')
                %}

                {% if state=='off' %}

                fapro:door-closed

                {% elif state=='on' %}

                phu:lift-out-window-open

                {% else %}

                fapro:door-closed

                {% endif %}
              icon_color: >-
                {% set state=states('binary_sensor.kleine_zolderraam_contact')
                %}

                {% if state=='off' %}

                green

                {% elif state=='on' %}

                red

                {% else %}

                yellow

                {% endif %}
              card_mod:
                style: >
                  {% if is_state('binary_sensor.kleine_zolderraam_contact',
                  'on') %}
                    ha-card {
                      animation: borderPulse 2s ease-out infinite;
                  }
                    @keyframes borderPulse {
                     50% {
                        box-shadow: 0 0 20px red;
                    }
                  }

                  {% endif %}
              content: null
              tap_action:
                action: toggle
              hold_action:
                action: none
        alignment: end
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
            }
    card_mod:
      style: |
        ha-card {
          height: 102px;
        }

[Homeotte41 (Jonathan)]

Thank you, for all its perfect now

[zeltak]

Hi all

is there anyway to make a mushroom button take over 2 spaces ie:

I want to keep the lights and climate card the same size but want to have the alarmo card take double space (I dont need the fans card)

is there anyway at all to define the size a mushroom card takes?

thx alot

Z

[burg93 (Adam)]

Easiest thing that comes to mind with HA out of the box is a horizontal card with a grid of 2. Then a grid of 2 again in the left cell and just alarmo in the right.

[janiv (Janiv Ratson)]

How do I create a template card with last-changed as secondary?
Thanks

[Kabala (Cata)]

just doesn’t want to work

type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''friendly_name'') }}'
secondary: '{{ states(entity) }}dBm'
icon: |-
  {% set rssi_level = states(entity) | int | abs %}
  {% if 1 > rssi_level >= 50 %}
    mdi:wifi-strength-4
  {% elif 51 >= rssi_level > 61 %}
    mdi:wifi-strength-3
  {% elif 62 >= rssi_level > 72 %}
    mdi:wifi-strength-2
  {% elif 73 >= rssi_level > 83 %}
    mdi:wifi-strength-1
  {% elif 83 >= rssi_level > 94 %}
    mdi:wifi-strength-outline
  {% else %}
    mdi:wifi-strength-off-outline
  {% endif %}
entity: sensor.shellyswitch25_ba854b_rssi
fill_container: false
icon_color: |-
  {% set rssi_level = states(entity) | int | abs %}
  {% if 1 > rssi_level >= 50 %}
    green
  {% elif 51 >= rssi_level > 61 %}
    lime-green
  {% elif 62 >= rssi_level > 72 %}
    yelow
  {% elif 73 >= rssi_level > 83 %}
    amber
  {% elif 83 >= rssi_level > 94 %}
    red
  {% else %}
    red
  {% endif %}
tap_action:
  action: more-info
hold_action:
  action: none
double_tap_action:
  action: none
badge_color: ''

[rhysb (Rhys)]

Try like this:

ype: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''friendly_name'') }}'
secondary: '{{ states(entity) }}dBm'
icon: |-
  {% set rssi_level = states(entity) | int | abs %} 
  {% if rssi_level > 90 %} 
    mdi:wifi-strength-outline
  {% elif rssi_level > 80 %} 
    mdi:wifi-strength-1
  {% elif rssi_level > 70 %}
    mdi:wifi-strength-2
  {% elif rssi_level > 60 %}
    mdi:wifi-strength-3
  {% elif rssi_level > 1 %}
    mdi:wifi-strength-4
  {% else %}
    mdi:wifi-strength-off-outline
  {% endif %}
entity: sensor.shellyswitch25_ba854b_rssi
fill_container: false
icon_color: |-
  {% set rssi_level = states(entity) | int | abs %} 
  {% if rssi_level > 90 %} 
    red
  {% elif rssi_level > 80 %} 
    amber
  {% elif rssi_level > 70 %}
    yellow
  {% elif rssi_level > 60 %}
    light-green
  {% elif rssi_level > 1 %}
    green
  {% else %}
    red
  {% endif %}
tap_action:
  action: more-info
hold_action:
  action: none
double_tap_action:
  action: none
badge_color: ''

[Kabala (Cata)]

that helped
thanks

[rhysb (Rhys)]

You can do what you want like this:

square: false
columns: 4
type: grid
cards:
  - type: custom:mushroom-light-card
    entity: light.office_light
    show_brightness_control: false
    fill_container: true
    layout: vertical
  - type: custom:mushroom-climate-card
    entity: climate.office_air_conditioner
    layout: vertical
  - type: custom:mushroom-alarm-control-panel-card
    entity: alarm_control_panel.downstairs
    states:
      - armed_home
      - armed_away
    card_mod:
      style: |
        :host {
           grid-column: 3 / span 2; 
        }

[zeltak]

thx both @rhysb and @burg93 !

appreciate your kind help

Z

[rhysb (Rhys)]

That animation works by combining the icons from two cards, so won’t work with a chip. You can use the Washing Machine animation from part 1 though.

[aeozyalcin (Anil Ozyalcin)]

This is awesome stuff! Thank you so much for putting it together!

I am trying to get a spinning “Halo” like effect around a mushroom-chips card as shown in the picture below. Right now, I have only been able to get the Halo to spin along with the icon itself, which is not what I want. I am trying to get the icon to stay stationary while the Halo spins. Any tips?

[phairplay]

Morning guys,
I would really like to start using Mushroom and I could really do with some help first my first card.
the alarm panel icon shows blue when disarmed, is it possible to have it green then red when armed

[rhysb (Rhys)]

Have a look here:

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

You can change the colors used for the Mushroom Alarm Card/Chip by adding these values to you theme: mush-rgb-red: 244, 67, 54 mush-rgb-green: 76, 175, 80 mush-rgb-yellow: 255, 235, 59 mush-rgb-state-alarm-disarmed: var(--mush-rgb-green) mush-rgb-state-alarm-armed: var(--mush-rgb-red) mush-rgb-state-alarm-triggered: var(--mush-rgb-yellow) Or you can change it using CSS like this: type: custom:mushroom-alarm-control-panel-card entity: alarm_control_panel.downstairs sta…