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

[Valdorama]

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

Just wrap the --icon-animation in an if, like this: {{ '--icon-animation: rotation 1s linear infinite;' if is_state(config.entity, 'on') }}

[RaA11]

              - type: custom:mushroom-template-card
                primary: AC
                secondary: >-
                  {% set ac_on = expand(states.group.ac) | selectattr( 'state', 'eq','on') |
                  list | count %} {% if ac_on > 1 %}
                  {{ ac_on }} On
                  {% elif ac_on == 1 %}
                  {{ ac_on }} On
                  {% else %} {% endif %}
                layout: vertical
                icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }} '
                entity: group.ac
                tap_action:
                  action: more-info
                hold_action:
                  action: toggle
                icon: mdi:snowflake
                card_mod:
                  style:
                    mushroom-shape-icon$: |
                      ha-icon { 
                        {{ '--icon-animation: rotation 1s linear infinite;' if is_state(config.entity, 'on') }}
                      }

The animation not working, any idea?

[Valdorama]

One of the biggest ‘quality-of-life’ improvements (in my view) to the Mushroom cards would be for only the icon portion of a card to toggle the entity, rather than the whole card being one giant active button.

Quite often I’ve inadvertently grazed over part of a card only to toggle a light/fan/switch etc. unexpectedly. This also happens when trying to go back to the previous screen using the ‘swipe from edge’ feature on Android. (Obviously these issues are touchscreen-specific).

There’s already an open issue for this: [Feature]: limit tap target area to the button · Issue #446 · piitaya/lovelace-mushroom · GitHub

However it hasn’t been progressed in months so not sure how likely it is to be officially implemented.

So…is there anyway some of these cardmod tricks could be used to achieve this? Ideally I’d love for just the icon to toggle the underlying entity, and clicking anywhere else on the card would bring up the more-info dialog (or something else).

[Valdorama]

I think the is_state(config.entity, 'on') should be just is_state(entity, 'on')

[RaA11]

@Valdorama

is_state(entity, ‘on’)

Still no animation…

[brewston (Tim Jones)]

Don’t you need to declare the entity before referencing it ? Try moving entity: group.ac above the icon_color line

[RaA11]

@brewston

entity: group.ac

              - type: custom:mushroom-template-card
                primary: AC
                secondary: >-
                  {% set ac_on = expand(states.group.ac) | selectattr( 'state', 'eq','on') |
                  list | count %} {% if ac_on > 1 %}
                  {{ ac_on }} On
                  {% elif ac_on == 1 %}
                  {{ ac_on }} On
                  {% else %} {% endif %}
                layout: vertical
                entity: group.ac
                icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }} '
                tap_action:
                  action: more-info
                hold_action:
                  action: toggle
                icon: mdi:snowflake
                card_mod:
                  style:
                    mushroom-shape-icon$: |
                      ha-icon { 
                        {{ '--icon-animation: rotation 1s linear infinite;' if is_state(entity, 'on') }}
                      }

not working

[Valdorama]

Is “on” definitely the right status for this entity i.e. an AC unit.

Should it be something else, like ‘running’ or ‘heating’ or ‘cooling’ etc…?

EDIT: actually, do you not need to also define the @keyframes for the rotation animation? I don’t see it in your code snippet.

[RaA11]

its a group of input_boolean

[brewston (Tim Jones)]

That would be my next check too. Just found this in my code :

            entity: sensor.hot_tub_heater_action
            fill_container: false
            icon: '{{ ''mdi:radiator'' if  is_state(entity, ''Heater On'') else ''null'' }}'
            icon_color: '{{ ''red'' if  is_state(entity, ''Heater On'') else ''null'' }}'

[Valdorama]

Or maybe use the ‘spin’ animation since it’s builtin and doesn’t need you specify the @keyframes. This is the very first example from @rhysb animations list:

type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: teal
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: spin 1s linear infinite;
      }

[Posreg (Daros)]

let me tell you, I’m looking for this for a long time and I bet that somebody has a solution

In Mushroom Light Card, the Icon is automatically picking up the light/RGB etc color

how can I get the information/state of the EXACT color and include it as color in Mushroom Chip ?

use case:

I have a LED strip badge (crossed out when off)
What I would like to achieve is to have the badge color matching to the LED strip color

anybody :)?

[RaA11]

I have no issue with the animation when no on\off condition set.
also the icon color change depanding state works.

[Valdorama]

Yeah so I think it’s not working cos the necessary @keyframes section is missing. You can either add it, or try to use the ‘spin’ animation instead (which doesn’t require the @keyframes).

[rhysb (Rhys)]

This works for me:

type: custom:mushroom-template-card
primary: AC
secondary: >-
  {% set ac_on = expand(states.group.ac) | selectattr( 'state',
  'eq','on') | list | count %} {% if ac_on > 1 %} {{ ac_on }} On {% elif ac_on
  == 1 %} {{ ac_on }} On {% else %} {% endif %}
layout: vertical
entity: group.ac
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }} '
tap_action:
  action: more-info
hold_action:
  action: toggle
icon: mdi:snowflake
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon { 
        {{ '--icon-animation: spin 1s linear infinite;' if is_state(config.entity, 'on') }}
      }

[rhysb (Rhys)]

Is this the sort of thing you want?

type: custom:mushroom-template-card
primary: Lounge
icon: mdi:sofa
icon_color: '{{ ''amber'' if is_state(entity, ''on'') }}'
entity: light.lounge_light
badge_icon: >-
  {{ 'mdi:led-strip-variant' if is_state('light.lounge_cabinet_light', 'on')
  else 'mdi:led-strip-variant-off' }}
card_mod:
  style: |
    mushroom-badge-icon {
      {% set r = state_attr('light.lounge_cabinet_light', 'rgb_color')[0] %}
      {% set g = state_attr('light.lounge_cabinet_light', 'rgb_color')[1] %}
      {% set b = state_attr('light.lounge_cabinet_light', 'rgb_color')[2] %}
      {% if is_state('light.lounge_cabinet_light', 'on') %}
        --main-color: rgb({{r}}, {{g}}, {{b}});
      {% endif %}
    }

[rhysb (Rhys)]

Use is_state(entity, 'on') within the template card and is_state(config.entity, 'on') within the card_mod of the card.

[Posreg (Daros)]

@rhysb

card_mod:
  style: |
    mushroom-badge-icon {
      {% set r = state_attr('light.lounge_cabinet_light', 'rgb_color')[0] %}
      {% set g = state_attr('light.lounge_cabinet_light', 'rgb_color')[1] %}
      {% set b = state_attr('light.lounge_cabinet_light', 'rgb_color')[2] %}
      {% if is_state('light.lounge_cabinet_light', 'on') %}
        --main-color: rgb({{r}}, {{g}}, {{b}});
      {% endif %}
    }

seriously, you are my hero from now, so many things already done with your examples

now… I know it might be too much

can I somehow add Brightness level as well ?

[RASBR (Rami)]

Thank you for your share.
Any advice/help on how to make PNGs to animated icons (Similar to Battery) for water and diesel?

[rhysb (Rhys)]

Yes, like this:

type: custom:mushroom-template-card
primary: Lounge
icon: mdi:sofa
icon_color: '{{ ''amber'' if is_state(entity, ''on'') }}'
entity: light.lounge_light
badge_icon: >-
  {{ 'mdi:led-strip-variant' if is_state('light.lounge_cabinet_light', 'on')
  else 'mdi:led-strip-variant-off' }}
card_mod:
  style: |
    mushroom-badge-icon {
        {% set r = state_attr('light.lounge_cabinet_light', 'rgb_color')[0] %}
        {% set g = state_attr('light.lounge_cabinet_light', 'rgb_color')[1] %}
        {% set b = state_attr('light.lounge_cabinet_light', 'rgb_color')[2] %}
        {% if is_state('light.lounge_cabinet_light', 'on') %}
          {% set bri = state_attr('light.lounge_cabinet_light', 'brightness') / 255 %}
          --main-color: rgba({{r}}, {{g}}, {{b}}, {{bri}});
        {% endif %}
      }