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

[sparkydave (🇦🇺 Dave)]

I tried to adapt this code for my garage door but it isn’t working.

    icon_color: >-
      {{ 'red' if states.binary_sensor.paradox_z3_garage_door.state == 'off'
      else 'green' }}

When used in a mushroom cover card I simply get the default icon colours (grey when closed, blue when open) but in a mushroom entity card it completely removes part of the icon…

Any ideas?

Also, in the mushroom entity card the icon does not change between an open or closed garage door but the cover card does. I take it we need to template the icon for the entity card in a similar way to the colour but I’d like to get that bit working first.

[Mariusthvdb (Marius)]

@sparkydave

    icon_color: >-
      {{ 'red' if states.binary_sensor.paradox_z3_garage_door.state == 'off'
      else 'green' }}

not sure if this is causing your issue, but regular jinja rules strongly suggest you to use the below format:

      {{ 'red' if states('binary_sensor.paradox_z3_garage_door') == 'off'
      else 'green' }}

to prevent issues when the state is not known to the system. there’s a warning sign in the jinja docs on this

[sparkydave (🇦🇺 Dave)]

Thanks for the tip… It’s still not working though.

      - type: custom:mushroom-cover-card
        entity: cover.garage_door
        icon_color: >-
          {{ 'red' if states('binary_sensor.paradox_z3_garage_door') == 'off' else 'green' }}

[Holdestmade]

Can’t see icon_color as an option for the cover card ? Maybe need to use card_mod

https://github.com/piitaya/lovelace-mushroom/blob/b664347715cfaabc16de880617095d6e8e2256df/docs/cards/cover.md

I have this working but only in the template card:

icon_color: "{{ is_state('person.xxxxxx', 'home') | iif('green', 'red') }}"

[rak (Ralf Klüber)]

We have been discussing template card. I started suing template card more and more bc I am fully flexible what to show. Combine multiple entities … what not. Requires you become fluent in jinja.

[rhysb (Rhys)]

Perhaps something like this.

Mushroom Restriction Card:

type: custom:mod-card
card:
  type: custom:restriction-card
  restrictions:
    confirm:
      text: Do you want to proceed?
  card:
    type: custom:mushroom-entity-card
    entity: switch.coffee_machine
    tap_action:
      action: toggle
card_mod:
  style:
    restriction-card$: |
      ha-icon {
        display: flex;
        position: absolute;
        justify-content: center;
        align-items: center;
        top: 8px;
        left: 40.5px;
        background: rgb(var(--rgb-grey-color));
        color: rgb(var(--rgb-white-color));
        border-radius: 50%;
        --lock-icon-size: 0.9em;
        --lock-opacity: 1;
        width: 17px;
        height: 17px;
      }

Restriction Card was easier to customize, so would recommend sticking with that .

[Mariusthvdb (Marius)]

o yes, that was what I had in mind indeed… though I would have hoped to leave card-mod/mod-card home when talking about mushroom/tile…

but yes, that Is a very good setup. cool thanks!

we should loop Paul in , and hope he can make this available in core HA Tile…

the badge icon is much bigger here though (because I have the some restriction variables set in my theme already):

    restriction-lock-row-margin-left: calc(100% - 25px) #95%
    restriction-regular-lock-color: red
    restriction-lock-opacity: 0.8

I tried to set it to:

                  --mdc-icon-size: var(--badge-icon-size);

but that is not recognized (I did not set it in my themes, and hoped it would be a system default variable, so I need to set the size to 14px (maybe even 16?)

its almost there (though the icon itself is a bit too big, and the badge circle seems a tad too tiny:

even on a regular Tile card (sorry if thats not allowed here…)

for comparison:

  - type: custom:mushroom-climate-card
    entity: climate.heater_library
    show_temperature_control: true
#     hvac_modes:
#       - auto
#     collapsible_controls: true
#     fill_container: false
    layout: horizontal

  - type: tile
    entity: device_tracker.google_home_library

  - type: custom:mod-card
    card:
      type: custom:restriction-card
      restrictions:
        confirm:
          text: Do you want to proceed?
      card:
        type: tile
        entity: switch.espresso_keuken
        tap_action:
          action: toggle
    card_mod:
      style:
        restriction-card$: |
          ha-icon {
            --mdc-icon-size: 16px;
            display: flex;
            position: absolute;
            top: 8px;
            left: 40px;
            background: red;
            color: rgb(var(--rgb-white-color));
            border-radius: 50%;
          }

have to struggle with the var(–lock-icon-size) that is used in Chrome, (where does that come form…) while Safari immediately shows the size Ive set in the mod…

[rhysb (Rhys)]

There are already some variable for this, --mush-rgb-state-cover-open & --mush-rgb-state-cover-closed. You can use these in card-mod or your theme.

type: custom:mushroom-cover-card
entity: cover.garage_door
card_mod:
  style: |
    :host {
      --mush-rgb-state-cover-open: var(--rgb-red-color);
      --mush-rgb-state-cover-closed: var(--rgb-green-color);
    }

[rhysb (Rhys)]

It’s defined in :host.

 --lock-icon-size: var(--restriction-lock-icon-size, var(--mdc-icon-size, 24px));

So --restriction-lock-icon-size takes precedence over --mdc-icon-size.

For sizing I found it easier to use a Mushroom Template Card with a badge and overlay the lock badge over that with opacity 0.5.

[rhysb (Rhys)]

Add some debugging to your Node Red flow to see where the issue is. Your sensor entities should have values like this:

[Mariusthvdb (Marius)]

the icon-size variable wont work in my mods unfortunately, and I need to set it via mdc-icon-size.

since this would be a mod to use throughout the config, I made a decluttering-template out of it:

type: custom:mod-card
card_mod:
  style:
    restriction-card$: |
      ha-icon {
        mdc-icon-size: 16px;
        display: flex;
        position: absolute;
        top: 8px;
        left: 40px;
        background: blue;
        color: rgb(var(--rgb-white-color));
        border-radius: 50%;
      }
card:
  type: custom:restriction-card
  restrictions:
    confirm:
      text: Do you want to proceed?
  card:
    type: '[[type]]'
    entity: '[[entity]]'
    tap_action:
      action: toggle

and used it like:

  - type: custom:decluttering-card
    template: badge_mod
    variables:
      - type: 'custom:mushroom-entity-card'
      - entity: switch.espresso_keuken

but look what happens:

the mod is not applied at all… same happening on a core tile card.

another reason for Paul to make this into core

[Mariusthvdb (Marius)]

uhm, please elaborate…?

  - type: custom:mushroom-template-card
    primary: >
      {{state_attr(entity,'friendly_name')}}
    secondary: >
      {{states(entity)|title}}
# card does not default to the icon attribute if the set entity, so this requires yet another template
    icon: >
      mdi:{{iif(is_state(entity,'on'),'coffee','coffee-off')}}
    entity: switch.espresso_keuken
    badge_icon: mdi:lock
    badge_color: red

shows the badge on the perfect spot indeed, and nicely margined and padded, just like it should.

but now how to get the active lock there?

btw, template state does not translate… always an issue somewhere…

and for complete disclosure, I managed to get some of the restriction card variables in the styling:

          card_mod:
            style:
              .: |
                ha-card {
                  --restriction-lock-icon-size: 14px;
                  --restriction-regular-lock-color: rgb(var(--rgb-white-color));
                  --restriction-success-lock-color: green;
                  --restriction-lock-opacity: 0.8
                  /*--restriction-lock-row-margin-left: 40px;*/
                  /*--restriction-lock-row-margin-top: 0px;*/
                }

              restriction-card$: |
                ha-icon {
                  display: flex;
                  position: absolute;
                  top: 8px;
                  left: 40px;
                  background: red;
                  border-radius: 50%;
                }

[BeastHouse (Damien)]

Hi all. Slowly changing over to mushroom cards, they look great. I have one card that currently changes the name through a template sensor. Is it possible to do this with the mushroom entity card?

Example of what I currently use:

name: |
  [[[
    if (states['binary_sensor.home_assistant_versions_update_available'].state === 'off') return "Current";
    else return "Updates";
  ]]]

[jetolu]

It’s possible using the Template card! When migrating to Mushroom cards, I started using Entity cards but soon switched to template cards which are far more versatile. See the example below, where I show different icons based on an attribute.

{% if state_attr(entity, 'changePercent') > 0 %}mdi:arrow-up{% elif state_attr(entity, 'changePercent') == 0 %}mdi:arrow-right{% else %}mdi:arrow-down{% endif %}

[brewston (Tim Jones)]

There is a mushroom update card :

type: custom:mushroom-update-card
entity: update.home_assistant_core_update

[Mariusthvdb (Marius)]

had another check on my earlier effort for the decluttering card, and noticed now I made a small but sgnificant mistake:

card:
  type: custom:mod-card
  card_mod:
    style:
      .: |
        ha-card {
          --restriction-lock-icon-size: 14px;
          --restriction-regular-lock-color: rgb(var(--rgb-white-color));
          --restriction-success-lock-color: green;
          --restriction-lock-opacity: 0.8
          /*--restriction-lock-row-margin-left: 40px;*/
          /*--restriction-lock-row-margin-top: 0px;*/
        }

      restriction-card$: |
        ha-icon {
          display: flex;
          position: absolute;
          top: 8px;
          left: 40px;
          background: red;
          border-radius: 50%;
        }
  card:
    type: custom:restriction-card
    restrictions:
      confirm:
        text: Do you want to proceed?
    card:
      type: '[[type]]'
      entity: '[[entity]]'
      tap_action:
        action: toggle

does the trick.
always open the decluttering cards with a

card:
  type:

allowing this to be used like:

        - type: custom:decluttering-card
          template: badge_mod
          variables:
            - type: 'custom:mushroom-entity-card'
            - entity: switch.espresso_keuken

and with some more tinkering:

card:
  type: custom:config-template-card
  entities:
    - '[[entity]]'
  variables:
    id: states[ '[[entity]]' ].attributes.friendly_name
  card:
    type: custom:mod-card
    card_mod:
      style:
        .: |
          ha-card {
            --restriction-lock-icon-size: 14px;
            --restriction-regular-lock-color: rgb(var(--rgb-white-color));
            --restriction-success-lock-color: green;
            --restriction-lock-opacity: 0.8
            /*--restriction-lock-row-margin-left: 40px;*/
            /*--restriction-lock-row-margin-top: 0px;*/
          }
        restriction-card$: |
          ha-icon {
            display: flex;
            position: absolute;
            top: 8px;
            left: 40px;
            background: red;
            border-radius: 50%;
          }
    card:
      type: custom:restriction-card
      restrictions:
        confirm:
          text: ${'Wil je ' + id + ' schakelen?'}
      card:
        type: '[[type]]'
        entity: '[[entity]]'
        tap_action:
          action: toggle

we get a nice confirmation message based on the attribute selected to our liking

        - type: custom:decluttering-card
          template: badge_mod
          variables:
            - type: tile #'custom:mushroom-entity-card'
            - entity: switch.espresso_keuken

note I moved the conformation itself to the cinfig-template-card, because a decluttering-card by itself can Not evaluate templates.

[stban1983]

Here the screenshot, after clicking on the volume button:
(I don’t use node-red)

EDIT:
find!
that was:

          ha-card {
            --ha-card-border-width: 0;
            --rgb-state-media-player: var(--album-art-color);  ## THIS ONE
            --control-icon-size: 32px;
            background-color: transparent;
            margin-top: 172px;
          }

For the vol+ and vol-, i don’t know, maybe it’s a media_player limitation ?

[Moss (Marco)]

Without Node red you won’t be able to do this because an extra sensor is created.
You can see it at the bottom of the code.
I don’t use node red either, just use an older version of Rhys’s Media Player Card.
I promise you the music will play just as good as with this one

or change it to:

    :host {
      margin-top: 50px !important;
      --album-art-color: var(--rgb-indigo-color);

    }

Greetings
Marco

[tpbillund]

Hi @seanmccabe
So beautiful
Can you tell me why I get circles around my stuff?
I use the code you have listed further down.

[seanmccabe (Seán McCabe)]

Because HA updated their material design implementation, and by default it adds the stupid border around things.
The majority of us all hate that.

You will need to set the border to 0 to remove, or use a theme where the border is off by default.