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

amfadten · July 21, 2022, 9:52pm

very nice good work

rhysb · July 22, 2022, 12:04am

You can use an animated GIF or SVG icon:

Animated Icon

type: custom:mushroom-template-card
primary: '{{ states(entity) | title }}'
secondary: >-
  {{ state_attr(entity, 'temperature') | round(0), ' ', state_attr(entity,
  'temperature_unit'), ' - ', state_attr(entity, 'humidity') | round(0), ' %' }}
icon: ''
picture: local/weather_icons/animated/{{ states(entity) }}.svg
entity: weather.unsworth_heights_weather_daily

Spooky

type: custom:mushroom-template-card
primary: Spooky
secondary: ''
icon: mdi:home
picture: /local/icons8-ghost.gif

rhysb · July 22, 2022, 12:10am

You can use whatever mini-media-player supports.

berkans · July 22, 2022, 1:52am

Hi Rhysb…

Is there a way to greyout chip pictures depending on the state of an input boolean ?

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: input_boolean.ana_sayfa_menu
        state: 'off'
    chip:
      type: template
      entity: input_boolean.futbol
      picture: /local/icons/besiktas2.png
      content: |
        {% if is_state('input_boolean.futbol', 'off') %}
        Maç Yok
        {% elif is_state('input_boolean.futbol', 'on') %}
        Maç Günü
        {% else %}
        HATA
        {% endif %}
      icon: |-
        {% set state=states(entity) %}
        {% if state=='off' %}
        mdi:soccer
        {% elif state=='on' %}
        mdi:soccer
        {% else %}
        mdi:door
        {% endif %}
      icon_color: |-
        {% set state=states(entity) %}
        {% if state=='off' %}
        grey
        {% elif state=='on' %}
        amber
        {% else %}
        grey
        {% endif %}
      tap_action:
        action: more-info

Like in this one :

Ekran Resmi 2022-07-22 04.50.00

“Maç Yok” is appearing during the state off. I would also like to greyout the logo based on the state. If the boolean is off the color of the picture should be grey ? Is this possible ? I trıed with card mode but had no luck.

GMusich · July 22, 2022, 2:43am

Hello everyone!

Is there a way to hide the one chip card if one condition is set?
Example: I use one chip card with the couter of lights that are on at the moment.
If the number of this counter = 0, the chip should not be displayed.

Is it possible?

erika.mason24 · July 22, 2022, 3:20am

Simply use a conditional chip.

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: light.lights
        state: 'on'
    chip:
      type: light
      entity: light.lights

rhysb · July 22, 2022, 3:50am

Yes, probably like this :

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: input_boolean.ana_sayfa_menu
        state: 'off'
    chip:
      type: template
      entity: input_boolean.futbol
      picture: /local/icons/besiktas2.png
      content: |
        {% if is_state(entity, 'off') %}
        Maç Yok
        {% elif is_state(entity, 'on') %}
        Maç Günü
        {% else %}
        HATA
        {% endif %}
      icon: |-
        {% set state=states(entity) %}
        {% if state=='off' %}
        mdi:soccer
        {% elif state=='on' %}
        mdi:soccer
        {% else %}
        mdi:door
        {% endif %}
      icon_color: |-
        {% set state=states(entity) %}
        {% if state=='off' %}
        grey
        {% elif state=='on' %}
        amber
        {% else %}
        grey
        {% endif %}
      tap_action:
        action: more-info
      card_mod:
        style: |
          ha-card {
              {{ 'filter: grayscale(100%);' if is_state('input_boolean.futbol', 'off') }}
          }

BTW, using picture has precedence over icon and icon_color, so you can remove them.

rolfokevin · July 22, 2022, 4:38am

popup_cards:
      light.all_lights:
        title: All Lights
        card:
          type: entity-filter
          entities:
            - light.ambilight_wled
            - light.bedroom_light
            - light.cabinet_lights
            - light.entryway
            - light.front_lights
            - light.kitchen
            - light.living_room
            - light.minecraft_wled
            - light.mirrorlight
            - light.wled
            - light.office_ambient
            - light.office_led_strip
            - light.office_lights
          state_filter:
            - 'on'

this shows a popup card using browser mod of only lights that are on in that list.
Screenshot 2022-07-21 213444

fastender · July 22, 2022, 5:09am

Animated SVG icons do not work for me using your method.

type: custom:mushroom-template-card
primary: light.arbeitszimmer
icon: ''
picture: /local/3D-printing.svg
entity: light.arbeitszimmer_deckenleuchte
secondary: ''

rhysb · July 22, 2022, 5:30am

Weird, are you able to share your SVG and I can test here?

You can grab the animated weather icons I used here:

fastender · July 22, 2022, 6:31am

Funny, the SVGs you recommended work. I don’t know why the SVG I have didn’t work.

Works: rainy.svg (from the Free animated SVG weather icons - amCharts)

Does not work: deckenleuchte2_an.svg (Link: https://file.io/cDxOiCKbcF6X)

But I have found another (less user-friendly) solution for animated icons: Animated SVG Icon - Album on Imgur

swifty · July 22, 2022, 7:44am

love that - is there any way you can get the effect to apply for a few seconds only when an entity changes state ?

I everything I tried so far applies the effect on page load too… but I’m not sure if it’s actually possible to only apply it when the state changes (after the page has loaded).

Step · July 22, 2022, 8:31am

      card_mod:
        style: |
          ha-card {
              {{ 'filter: grayscale(100%);' if is_state('input_boolean.futbol', 'off') }}
          }

I’m using this with a person card, is there a way to keep the (away) badge the original (red) color?

cowboysdude · July 22, 2022, 10:15am

Thank you so much!!! This works great!

              picture: |
              {% if is_state('climate.john_s_device', 'cool') %}
              /local/animated/spinning.gif
              {% else %}
              /local/animated/afan.gif
              {% endif %}

tismondo · July 22, 2022, 11:09am

I’m replying to my own post to show my solution.

I was trying to find a way to combine a conditional chip and a template chip together, so that I could display the below template chip ONLY if the AC is turned on and actively cooling.

2022-07-22 20_03_25-Wall – Home Assistant

I found a solution with the help of this older post # 195 (thanks @pedolsky!) that had worked on the same issue, modified for my purposes.

Also tagging @berkans who had liked my earlier post and presumably was also looking for a solution to this.

The solution requires the card-mod addon installed.

Using card-mod, I have two Air Conditioner template chips - but each will only appear if that particular AC is turned on. See below if this is something you’d like to achieve!

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:snowflake
    icon_color: blue
    content: |
      Bedroom AC on / Set to {{ state_attr('climate.bedroom_ac', 'temperature') }}°
    tap_action:
      action: toggle
    card_mod:
      style: |
        :host {  
          display: 
            {%- if states('climate.bedroom_ac') == 'cool' %}inline;
            {%- else %}none
            {%- endif %}
  - type: template
    icon: mdi:snowflake
    icon_color: blue
    content: |
      Living Room AC on / Set to {{ state_attr('climate.living_room_ac', 'temperature') }}°
    tap_action:
      action: toggle
    card_mod:
      style: |
        :host {  
          display: 
            {%- if states('climate.living_room_ac') == 'cool' %}inline;
            {%- else %}none
            {%- endif %}

Jan-Arild-Blekken · July 22, 2022, 12:09pm

Love the new climate card but I have a problem with my thermostat setup that is a x-comfort 12channel controller for water heating.

This is not a regular thermostat and the hvac-modes does not set the states automatic. This has to be done manually. How can this be done in the new climate card?

rhysb · July 22, 2022, 12:23pm

To get a button glow on press you could try something like this:

Activate

type: custom:mushroom-template-card
primary: Activate
secondary: null
icon: mdi:radioactive
icon_color: red
hold_action:
  action: none
card_mod:
  style: |
    ha-card:active {
      box-shadow: 0 0 20px red;
    }

rhysb · July 22, 2022, 12:31pm

Your SVG does animate, it just does it once. The SVG animation needs to loop/repeat.

rhysb · July 22, 2022, 12:43pm

You can do that like this:

card_mod:
  style: |
    mushroom-shape-avatar {    
      filter: grayscale(100%);
    }

Step · July 22, 2022, 1:18pm

I tried this, unfortunately this doesn’t work.

  - type: custom:mushroom-person-card
    entity: person.step
    primary_info: none
    secondary_info: none
    use_entity_picture: true
    card_mod:
      style: |
        mushroom-shape-avatar {    
          filter: grayscale(100%);
        }

Nothing changed, I expected it to always be grayscale, also tried it with this:

{{ 'filter: grayscale(100%);' if is_state('person.step', 'not_home') }}

The above works on the entire card (including the badge using ha-card without card_mod), but not on ‘mushroom-shape-avatar’.

Any ideas? It’s like it is not recognizing the mushroom-shape-avatar.