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

Thanks @TommyWelle and @paddy0174 ! Now it works!

1 Like

@Stuartie
Love it.
I can’t work out how to define sensor.count_living_room_lights_on in your code below
Can you help?

type: custom:stack-in-card
cards:

  • type: custom:mushroom-template-card
    primary: Living Room
    secondary: ‘{{ states(’‘sensor.thermostat_1_current_temperature’’) }} °C’
    icon: mdi:sofa
    entity: light.living_room_lights
    icon_color: |-
    {% if is_state(‘light.living_room_lights’, ‘on’) %}
    orange
    {% endif %}
    hold_action:
    action: toggle
    tap_action:
    action: navigate
    navigation_path: livingroom
    badge_icon: |-
    {% if is_state(‘sensor.count_living_room_lights_on’, ‘0’) %}
    {% elif is_state(‘sensor.count_living_room_lights_on’, ‘1’) %}
    mdi:numeric-1
    {% elif is_state(‘sensor.count_living_room_lights_on’, ‘2’) %}
    mdi:numeric-2
    {% elif is_state(‘sensor.count_living_room_lights_on’, ‘3’) %}
    mdi:numeric-3
    {% elif is_state(‘sensor.count_living_room_lights_on’, ‘4’) %}
    mdi:numeric-4
    {% elif is_state(‘sensor.count_living_room_lights_on’, ‘5’) %}
    mdi:numeric-5
    {% elif is_state(‘sensor.count_living_room_lights_on’, ‘6’) %}
    mdi:numeric-6
    {% elif is_state(‘sensor.count_living_room_lights_on’, ‘7’) %}
    mdi:numeric-7
    {% elif is_state(‘sensor.count_living_room_lights_on’, ‘8’) %}
    mdi:numeric-8
    {% elif is_state(‘sensor.count_living_room_lights_on’, ‘9’) %}
    mdi:numeric-9
    {% else %}
    mdi:numeric-9-plus
    {% endif %}
    badge_color: orange
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
    style: |
    :host {
    z-index: 1;
    }
  • type: custom:mushroom-chips-card
    chips:
    • type: conditional
      conditions:
      • entity: binary_sensor.living_room_motion_sensor_occupancy
        state: ‘on’
        chip:
        type: template
        icon_color: green
        icon: mdi:window-open-variant
    • type: conditional
      conditions:
      • entity: binary_sensor.living_room_window
        state: ‘on’
        chip:
        type: template
        icon_color: red
        icon: mdi:motion-sensor
        alignment: end
        card_mod:
        style: |
        ha-card {
        –chip-box-shadow: none;
        –chip-background: none;
        –chip-spacing: 0;
        top: -36px;
        z-index: 0;
        }
        card_mod:
        style: |
        ha-card {
        height: 66px;
        }

Sorry for the late reply but this worked! Thanks alot!

1 Like

put your code between Preformatted text

Sorry I don’t understand - maybe my question was not clear
I wanted to know how we can declare sensor.count_living_room_lights_on

I tried in yaml but my coding is very bad and it does not work but I guess there might be a better way to define it somewhere else?

see my configuration.yaml code

sensor:

  • platform: google_wifi
  • platform: template
    sensors:
    count_living_room_lights_on:
    friendly_name: “# Living Room Lights on”
    unit_of_measurement: ‘on’
    value_template: “{{ expand(state_attr(‘light.living_room_lights’, ‘entity_id’) ) | selectattr(‘state’, ‘eq’, ‘on’) | list | count }}”

No, the problem is, you need to format the code in your post properly. :slight_smile: We can’t help you, as long as you post the code like a written text. It’s not that we don’t want to, but YAML is very dependent on indentation. A small white space to much, and your code won’t work.

See here for how to post your code properly formatted:

So please post your code properly formatted, so we can have a look for errors. :slight_smile:

Hello :mushroom:

A new Mushroom release is out with Assist action support : Release v3.0.0 · piitaya/lovelace-mushroom · GitHub

image
image

:warning: This release is a major version change because it has breaking change for card_mod users :warning:

Mushroom cards and chips now uses ha-state-icon instead of ha-icon . You should update your card_mod overrides to reflect that change.

10 Likes

He asked you to put your code like this :

With the new version and this breaking change, how would the following code need to be fixed?

I originally thought if I changed “ha-icon” to “ha-state-icon” this may be it. But it doesn’t seem to be that easy :slight_smile:

card_mod:
  style:
    mushroom-shape-icon$: |
      {% if is_state('switch.office_monitor','on') %}
        ha-icon {
          --icon-animation: power 1.5s infinite; 
        }
        @keyframes power {
          0%, 100% { clip-path: inset(0 0 0 0); }
          50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
        }
      {% else %}

      {% endif %}
      }

Yup, same situation. Tried to replace “ha-icon” to “ha-state-icon” but it does not work. I too would like to know how to fix this.

type: custom:mushroom-template-card
primary: Fan
secondary: |-
  {% if states(config.entity)=='on' %}
    On
  {% else %}
    Off
  {% endif %}
icon: mdi:fan
icon_color: |-
  {% if states(config.entity)=='on' %}
    light-blue
  {% endif %}
entity: switch.fan
tap_action:
  action: toggle
hold_action:
  action: none
double_tap_action:
  action: none
badge_color: ''
badge_icon: ''
layout: horizontal
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{ '--icon-animation: spin 1s linear infinite;' if is_state('switch.fan', 'on') }}
      }

Also, @Murder3D.
This worked for me. Not sure how I figured out how to get it to work.

type: custom:mushroom-template-card
primary: Robot
icon: mdi:robot-outline
icon_color: deep-purple
entity: input_boolean.tester
card_mod:
  style: |
    ha-state-icon {
      animation: rotation linear infinite 3s;
    }
    @keyframes rotation {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg);}
    }

image

2 Likes

I think this should work

card_mod:
  style:
    .: |
      {% if is_state('switch.office_monitor','on') %}
        ha-state-icon {
          --icon-animation: power 1.5s infinite; 
        }
        @keyframes power {
          0%, 100% { clip-path: inset(0 0 0 0); }
          50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
        }
      {% endif %}

Or this

card_mod:
  style: |
    {% if is_state('switch.office_monitor','on') %}
      ha-state-icon {
        --icon-animation: power 1.5s infinite; 
      }
      @keyframes power {
        0%, 100% { clip-path: inset(0 0 0 0); }
        50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
      }
    {% endif %}
1 Like

type: custom:mushroom-template-card
primary: Weeeee!
icon: mdi:pinwheel
icon_color: green
card_mod:
style: |
ha-state-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
100% {transform: rotate(360deg);
}
}type: ‘’
#################################
OK

1 Like

I had the same issue and I had to clear the cache in the app.
On Android: System Settings > Apps > Home Assistant > Storage & cache
On iOS: Home Assistant > Settings > Companion App > Debugging > Reset Frontend Cache
Both: Close and reload the app

OK! Thanks you

hi, is it possible to add shortcuts to the mushroom media player card? for example:

shortcuts:
  columns: 4
  buttons:
    - type: script
      name: Qmusic
      id: script.play_qmusic_kantoor
    - type: script
      name: Arrow rock
      id: script.play_arrow_rock
    - type: script
      name: Radio 10
      id: script.play_radio_10
    - type: script
      name: Radio 538
      id: script.play_radio_538
1 Like

I apprecite that this is a fairly broad question but something is holding back my adoption of some of the great multi-faceted Mushroom cards in this thread.

Why are Mushroom template cards are seemingly so resource intensive ?

As soon as I deploy them my resource use rockets to the point that a R Pi4 become unusable and a VM on Proxmox with 2 cores from an i7 and 8GB slows too.

Is there an obvious explanation for this and/or a way to mitigate it beyond just throwing more and more horsepower at the problem ?

Edited to send an @ to @piitaya who is the founding father @rhysb who has been the most remarkable adopter !

Hello

Since version 3.0.1 my icons on the home assistant application are not centered.
They are centered on the Web version.

Do you have any idea what’s wrong ?

I have a similar piece of code that I just haven’t been able to get working since the update. I swapped out ha-icon to ha-state-icon and for some reason this one icon doesn’t animate while other ones with similar code do

card_mod:
  style:
    mushroom-shape-icon:
      $: |
        .shape ha-state-icon
          {
            {{ '--icon-animation: rotation 1s linear infinite;' if not is_state('climate.bedroom_ac', 'off') }}
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }

@shogun168 I had similar issue and was advised to strip it back to…

card_mod:
   style: |
      mushroom-shape-icon {
         {{ '--icon-animation: ....
      }

There didn’t seem to be a need for the $ and ha-state-icon and the | can go after the style.
Hope that works for you too.

3 Likes