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

[paddy0174 (Patrick)]

Oh! I’m so sorry, I thought you (of all people) would know about this. But it’s not that long “on the market”, not even half a year… Really if I’d have known, I’d have posted a link earlier.

It’s really a nifty little extension and the idea with Jinja macros is something, I’m thinking about using. Haven’t found something to use it meaningful, but that will not be like that for long.

[Bieniu (Maciek)]

@dimitri.landerloos

Maybe try and ping your ha instance from the client and look at your latency instead of the bandwidth.

Latency is about 81 microseconds (ping from WSL on Windows 10):

root@Stacjonarny:/home/maciek# ping 192.168.2.15 -c 1000 -i 0.010
PING 192.168.2.15 (192.168.2.15) 56(84) bytes of data.
64 bytes from 192.168.2.15: icmp_seq=1 ttl=63 time=0.852 ms
...
64 bytes from 192.168.2.15: icmp_seq=1000 ttl=63 time=0.685 ms

--- 192.168.2.15 ping statistics ---
1000 packets transmitted, 1000 received, 0% packet loss, time 16010ms
rtt min/avg/max/mdev = 0.472/0.814/5.024/0.251 ms
                            ^^^^^^^

@paddy0174

To investigate that further, we need to know what browser/app you’re running and on what device.

Windows 10 + Firefox 117 (ethernet)
Windows 11 + Edge 116 (WiFi)
iOS companion app 2023.4 (WiFi)

It doesn’t seem to be device or browser dependent

[jiteshpatel]

Hi, I can not find this in HACS at all

[dimitri.landerloos]

You have to add it as a custom repository

[jiteshpatel]

Sorry to be a pain @dimitri.landerloos, but are you able to share the url, as GitHub - Petro31/easy-time-jinja: Easy Time calculations for Home Assistant templates did not work for me

[dimitri.landerloos]

Here you go, this is better to explain the installation steps

Easy Time Macros for Templates!

Hello community! As you may know, 2023.4 offers a new global template macro option in Home Assistant. How does this benefit you? The introduction of this feature allows me to easily share all the templates I’ve helped you create over the years in a single easy-to-use template library! All in your native language! Introducing… Easy Time Jinja A 1-stop-shop for easy time calculations. Get it from HACS! These templates are now available in HACS, with a caveat. In order to see templat…

you need experimental features turned on for HACS

[andyblac (Andy Blackburn)]

you can also use the built in relative_time, no add-on required ie

{{relative_time(states['fan.bathroom_extractor'].last_changed)}}

this returns like 12 hours, this is what the normal Lovelace cards use.

[dimitri.landerloos]

This is definitely a solution. But the reason i liked my template and now the add-on is because it can returns more complex strings like 6d 4h 23m. Or even seconds if needed

Im a sucker for having all of the info available. But i can definitely see relative_time being useful for a lot of people

[dimitri.landerloos]

Definitely not your latency either then. Must just be the type and quantity of modifications you have

[paddy0174 (Patrick)]

^^ What he says!

Anyway, I’d open a new topic, as helping here in this overcrowded place is kinda difficult (and not the scope of this topic). If you decide to do so, please tag me, so I don’t miss it (hopefully).

[schumi2004]

How did you do that with that DSM version in DiskStation Manager entity item?
Tried several things but can’t get the current version to be displayed.

Maybe you can post complete code?

[T1Ph0Zy (Sébastien)]

Hello everyone,

First of all, many thanks for all the ideas and help in this topic, it’s really great.
I’ve read just about every topic about Mushroom Chips Card animations.
But I’m stuck on a configuration that I can’t solve.
I can apply the animation to the first chip but not to the second.
Could someone tell me where the error is in my code?

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: sensor.garbage
        state_not: Inconnu
    chip:
      type: template
      entity: sensor.garbage
      content: |-
        {% if is_state('sensor.garbage', 'Encombrant') %}
          Encombrant
        {% elif is_state('sensor.garbage', 'Poubelle Verte') %}
          Poubelle verte/marron
        {% elif is_state('sensor.garbage', 'Poubelle Jaune') %}
          Poubelle jaune 
        {% else %}
          Pas de poubelle
        {% endif %}
      icon: |-
        {% if is_state('sensor.garbage', 'Encombrant') %}
          fas:recycle
        {% elif is_state('sensor.garbage', 'Poubelle Verte') %}
          ios:trash-fill
        {% elif is_state('sensor.garbage', 'Poubelle Jaune') %}
          ios:trash-fill  
        {% else %}
          ios:trash-slash-fill
        {% endif %}
      icon_color: |-
        {% if is_state('sensor.garbage', 'Encombrant') %}
          #4682B4
        {% elif is_state('sensor.garbage', 'Poubelle Verte') %}
          #228B22
        {% elif is_state('sensor.garbage', 'Poubelle Jaune') %}
          #FFD700   
        {% else %}
          grey
        {% endif %}
      card_mod:
        style: |
          ha-card{
            --chip-background: rgba(66,65,77, 0.50);
          }
      double_tap_action:
        action: none
      tap_action:
        action: none
      hold_action:
        action: none
  - type: conditional
    conditions:
      - entity: sensor.308_charging_mode
        state: 'No'
    chip:
      type: template
      entity: sensor.308_charging_mode
      icon: ios:bolt-car-fill
      content: |-
        {% if is_state('sensor.308_charging_mode', 'Slow') %}
            Reste {{ states('sensor.308_charging_remaining_time')}}
          {% elif is_state('sensor.308_charging_mode', 'Quick') %}
            Reste {{ states('sensor.308_charging_remaining_time')}}
          {% else %}  
            Déconnectée
          {% endif %}
      double_tap_action:
        action: none
      icon_color: |-
        {% if is_state('sensor.308_charging_mode', 'Slow') %}
            #228B22
          {% elif is_state('sensor.308_charging_mode', 'Quick') %}
            #FF8C00
          {% else %}  
            grey
          {% endif %}
      tap_action:
        action: none
      hold_action:
        action: none
      card_mod:
        style: |
          ha-card{
            --chip-background: rgba(66,65,77, 0.50);
          }
alignment: left
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: surprise 3s ease infinite;
      }
      @keyframes surprise {
        0%, 20%, 100% { transform: translateY(0); }
        2.5% { transform: translateY(-6px) rotate(-14deg); }
        5% { transform: translateY(-6px) rotate(11deg); }
        7.5% { transform: translateY(-6px) rotate(-8deg); }
        10% { transform: translateY(-6px) rotate(5deg); }
        12.5% { transform: translateY(0); }
        15% { transform: translateY(-3px) }
        }
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        animation: surprise 3s ease infinite;
      }
      @keyframes surprise {
        0%, 20%, 100% { transform: translateY(0); }
        2.5% { transform: translateY(-6px) rotate(-14deg); }
        5% { transform: translateY(-6px) rotate(11deg); }
        7.5% { transform: translateY(-6px) rotate(-8deg); }
        10% { transform: translateY(-6px) rotate(5deg); }
        12.5% { transform: translateY(0); }
        15% { transform: translateY(-3px) }
        }
    .: |
      ha-card {
        --chip-spacing: 0.5em;
      }

Many thanks in advance

[dimitri.landerloos]

Have a read of my guide here:

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

But to make it easy, because you are using conditional chips you need to specify that first. as per the below.

card_mod:
  style:
    mushroom-conditional-chip:nth-child(1): 
      mushroom-template-chip$: |
        ha-state-icon {
          animation: surprise 3s ease infinite;
        }
        @keyframes surprise {
          0%, 20%, 100% { transform: translateY(0); }
          2.5% { transform: translateY(-6px) rotate(-14deg); }
          5% { transform: translateY(-6px) rotate(11deg); }
          7.5% { transform: translateY(-6px) rotate(-8deg); }
          10% { transform: translateY(-6px) rotate(5deg); }
          12.5% { transform: translateY(0); }
          15% { transform: translateY(-3px) }
        }
    mushroom-conditional-chip:nth-child(2): 
      mushroom-template-chip$: |
        ha-state-icon {
          animation: surprise 3s ease infinite;
        }
        @keyframes surprise {
          0%, 20%, 100% { transform: translateY(0); }
          2.5% { transform: translateY(-6px) rotate(-14deg); }
          5% { transform: translateY(-6px) rotate(11deg); }
          7.5% { transform: translateY(-6px) rotate(-8deg); }
          10% { transform: translateY(-6px) rotate(5deg); }
          12.5% { transform: translateY(0); }
          15% { transform: translateY(-3px) }
        }
    .: |
      ha-card {
        --chip-spacing: 0.5em;
      }

[T1Ph0Zy (Sébastien)]

@dimitri.landerloos

card_mod:
  style:
    mushroom-conditional-chip:nth-child(1): 
      mushroom-template-chip$: |
        ha-state-icon {
          animation: surprise 3s ease infinite;
        }
        @keyframes surprise {
          0%, 20%, 100% { transform: translateY(0); }
          2.5% { transform: translateY(-6px) rotate(-14deg); }
          5% { transform: translateY(-6px) rotate(11deg); }
          7.5% { transform: translateY(-6px) rotate(-8deg); }
          10% { transform: translateY(-6px) rotate(5deg); }
          12.5% { transform: translateY(0); }
          15% { transform: translateY(-3px) }
        }
    mushroom-conditional-chip:nth-child(2): 
      mushroom-template-chip$: |
        ha-state-icon {
          animation: surprise 3s ease infinite;
        }
        @keyframes surprise {
          0%, 20%, 100% { transform: translateY(0); }
          2.5% { transform: translateY(-6px) rotate(-14deg); }
          5% { transform: translateY(-6px) rotate(11deg); }
          7.5% { transform: translateY(-6px) rotate(-8deg); }
          10% { transform: translateY(-6px) rotate(5deg); }
          12.5% { transform: translateY(0); }
          15% { transform: translateY(-3px) }
        }
    .: |
      ha-card {
        --chip-spacing: 0.5em;
      }

Thanks a lot, I missed that part, sorry

[dimitri.landerloos]

No need for apology, sometimes all you need is a fresh pair of eyes after 2 hours of smashing your head into the wall trying to fix an issue

[EinfachKjell]

Hey Guys i need help.

I created a mushroom template card in a conditional card. I want to change the size but it doesn’t work.
If I created the card without the conditinal card it worked.
Where is my mistake?

type: conditional
conditions:
  - entity: switch.fahrender_ritter
    state: 'on'
card:
  type: custom:mushroom-template-card
  primary: ''
  icon: |-
    {% if is_state('switch.fahrender_ritter','on') -%}
      mdi:bus
    {%- else -%}
      mdi:bus-stop
    {%- endif %}
  icon_color: |-
    {% if is_state('switch.fahrender_ritter','on') -%}
      purple
    {%- else -%}
      disabled
    {%- endif %}
  tap_action:
    action: toggle
  layout: horizontal
  secondary: ''
  entity: switch.fahrender_ritter
  picture: ''
  multiline_secondary: false
  fill_container: true
  card_mod:
    style:
      .: |
        :host {
         --mush-icon-size: 45px;
         height: 50px !important;
         width: px;
        }
        ha-state-icon {
        {% if is_state('switch.fahrender_ritter', 'on') %}
          animation: beat 1.3s ease-out infinite both;
          {% else %}
          
          {% endif %}
        }
        @keyframes beat {
          25% { transform: scale(1); }
          50% { transform: scale(1.1); }
          50% { transform: scale(1.1); }
          25% { transform: scale(1); }
        }

[dimitri.landerloos]

Try like this:

  card_mod:
    style: |
      :host {
        --mush-icon-size: 45px;
      }
      ha-card {
        height: 60px !important;
        width: px;
      }
      ha-state-icon {
        {% if is_state(config.entity, 'on') %}
          animation: beat 1.3s ease-out infinite both;
        {% else %}
          
        {% endif %}
      }
      @keyframes beat {
        25% { transform: scale(1); }
        50% { transform: scale(1.1); }
        50% { transform: scale(1.1); }
        25% { transform: scale(1); }
      }

Specificity is important in CSS. Try to use :host as little as possible. Better to drill down to the element you actually want to style.

[weppa]

The Synology DSM intergration includes an Update entity.

Here is the code:

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Synology NAS
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        primary: DiskStation Manager
        secondary: |-
          {% if is_state(entity, 'off') %}
            {{ state_attr('update.braavos_dsm_update', 'installed_version') | replace('DSM','') | replace(' Update ','.') }}
          {% else %}
            {{ state_attr('update.braavos_dsm_update', 'latest_version') | replace('DSM','') | replace(' Update ','.') }}
          {% endif %}
        icon: mdi:nas
        entity: update.braavos_dsm_update
        icon_color: blue
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
        badge_icon: '{{ ''mdi:check-bold'' if is_state(entity, ''off'') else ''mdi:help'' }}'
        badge_color: '{{ ''green'' if is_state(entity, ''off'') else ''orange'' }}'
        card_mod:
          style: |
            ha-card {
              --ha-card-border-width: 0;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: button.braavos_reboot
            icon_color: white
            icon: mdi:restart
            content_info: none
            tap_action:
              action: toggle
              confirmation:
                text: Are you sure you want Restart?
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-primary-text-color), 0.05);
                  --chip-border-width: 0;
                  --icon-color: rgb(var(--rgb-white));
                }  
          - type: entity
            entity: button.braavos_shutdown
            icon_color: white
            icon: mdi:power
            content_info: none
            tap_action:
              action: toggle
              confirmation:
                text: Are you sure you want Shutdown?
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-primary-text-color), 0.05);
                  --chip-border-width: 0;
                  --icon-color: rgb(var(--rgb-white));
                } 
        card_mod:
          style: |
            ha-card {
                --chip-box-shadow: none;
                top: 16px;
                width: -webkit-fill-available;
                right: 12px;
                position: absolute;
            } 
            .chip-container {
                right: 0px;
                position: absolute;
            }

[EinfachKjell]

Thank you, that’s work!

[Yannik]

Hello everyone,

I would like to display the air pressure level as a pie chart:

Code:

    type: custom:mushroom-template-card
    primary: Kompressor
    secondary: |-
      {% if is_state('switch.kompressor','on') %}
       {{states('sensor.kompressor_power')  |  round (0)}} W
      {% endif %}
    icon: mdi:gas-cylinder
    icon_color: |
      {% if is_state('switch.kompressor','on') %}
        blue
      {% endif %}
    entity: switch.kompressor
    tap_action:
      action: toggle
    layout: horizontal
    multiline_secondary: false
    fill_container: true
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            /* Radial progress bar */
            background: radial-gradient(var(--card-background-color) 60%, 
            transparent calc(60% + 1px)), 
            conic-gradient(var(--icon-color) {{ states('sensor.druck_to_percentage') }}% 0%, 
            var(--card-background-color) 0% 100%);
          }
          .shape:after {
            content: '';
            height: 100%;
            width: 100%;
            position: absolute;
            border-radius: var(--icon-border-radius);
            background: var(--shape-color);
          }

in my overview of the garage:

Code:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Garage
    secondary: >-
      {{states('sensor.garage_temp_temperature')  |  round (1)}}°C |
      {{states('sensor.garage_temp_humidity')  |  round (0)}}%
    icon: |-
      {% if is_state('binary_sensor.garagentorkontakt_contact','on') %}
        mdi:garage-open-variant
      {% else %}
        mdi:garage-variant
      {% endif %}
    icon_color: |-
      {% if is_state('light.garage_licht','on') %}
        orange
      {% endif %}
    badge_color: red
    badge_icon: |-
      {% if is_state('binary_sensor.garagetorturkontakt_contact','on') %}
        mdi:door-open
      {% endif %} 
    entity: light.garage_licht
    tap_action:
      action: navigate
      navigation_path: /lovelace-newhome/Garage
    hold_action:
      action: toggle
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        ha-card {
          z-index: 1;
        }
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.garage_temp_temperature
        color: '#ff33ff'
        y_axis: secondary
    height: 60
    hours_to_show: 24
    points_per_hour: 4
    line_width: 5
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
      labels: false
      labels_secondary: false
      points: false
    card_mod:
      style: |
        ha-card {
          position: absolute !important;
          height: 100%;
          width: 100%;
          top: 0px;
          left: 3px;
          --ha-card-border-width: 0;
        }
        ha-card:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
        }
card_mod:
  style: |
    ha-card:active {
      transform: translateY(1.5px);
      transition: 0s;
      box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
    }

Unfortunately I can’t do that because of the Mini Graph. Can you help me?