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

Mariusthvdb · March 21, 2023, 3:55pm

Hey Rhys,

been meaning to ask you before, but forgot, and now you got me triggered again

is there a reason you use these somewhat unconventional quotes?

according to Ha styleguides we best use double outer en single inner quotes on a single line:

icon_color: "{{ 'green' if is_state(entity,'home') else 'blue' }}"

or, forget about the outer quotes when using multi-line notation:

icon_color: >
  {{ 'green' if is_state(entity,'home') else 'blue' }}

seems much cleaner than these double single quotes to my eyes, but maybe there is another reason I am not aware of?

reypm · March 21, 2023, 6:55pm

Can I get some help animating the icon if the fan is on?

  - type: custom:stack-in-card
    cards:
          - type: template
            entity: fan.office
            content: '{{state_attr(''fan.office'', ''percentage'')}}%'
            icon: '{{ ''mdi:fan'' if is_state(entity, ''on'') else ''mdi:fan-off'' }}'
            icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''grey'' }}'
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Office Fan
                  content:
                    type: custom:stack-in-card
                    cards:
                      - type: custom:mushroom-fan-card
                        entity: fan.office
                        icon_animation: true
                        show_percentage_control: true
                        collapsible_controls: true
                        fill_container: true
                  card_mod:
                    style: |
                      .content {
                      }
            card_mod:
              style: |
                @keyframes rotation {
                  0% {
                    transform: rotate(0deg);
                  }
                  100% {
                    transform: rotate(360deg);
                  }
                }
        alignment: end

Michael_Dahl · March 21, 2023, 7:13pm

@rhysb

I have tried to add a second icon in the top, but there is a lot of spacing, anyway to pull the together at the end of the line ?

rhysb · March 21, 2023, 7:25pm

Hi Marius, Mushroom Template Cards change this when you enter the Visual Editor. Even if you use the double quotes it gets changed back. We will have to take this up with Paul.

johnbull · March 21, 2023, 7:30pm

Hi,
I’m really found of the Mushroom cards and my dashboards contain almost only mushroom cards.
But today I ran into an issue.
I have defined a sensor from Node Red that contains a timer HH.mm.ss and that looks to be impossible to get displayed by any mushroom card. I have tried mushroom entity card and mushroom chips card etc, but I can’t get them to display this sensor/timer.
A standard Entity card can show it.
However, standard entities card on the other looks to have the same issue as mushroom cards.
The drawback of the standard Entity card is that it takes so much space…

Why isn’t it possible to display a sensor that is a running timer by mushroom cards, or is there something I have missed?

Edit:
The entity looks like this:

and when using the standard Entity card, it displays like this:

and says “timer stopped” when it runs out.

But with for example with the mushroom chips card it looks like this:

even when timer is running

reypm · March 21, 2023, 7:31pm

Yea, the reason why is because @rhysb original version for the first custom:mushroom-chips-card is using alignment: justify if you want to change that behavior you have to play a little bit. I am playing with this right now because I want the back chip aligned to the left while the rest, aligned to the right but I am not getting the expected result:

Michael_Dahl · March 21, 2023, 7:33pm

NIce.

I’d like the “menu” on the left, “date” in the middle, but 2 icons on the right…

But I have no idea where to begin

ArenaCloser · March 21, 2023, 7:37pm

Use a horizontal stack with separate chip sections, each aligned differently

reypm · March 21, 2023, 7:43pm

Got mine working as I wanted:

  - type: custom:layout-card
    layout_type: custom:vertical-layout
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: auto auto
          margin: 8px 4px 4px 4px;
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: back
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                entity: light.office
                icon: '{{ ''mdi:lightbulb-on'' if is_state(entity, ''on'') else ''mdi:lightbulb'' }}'
                icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
              - type: template
                entity: fan.office
                content: '{{state_attr(''fan.office'', ''percentage'')}}%'
                icon: '{{ ''mdi:fan'' if is_state(entity, ''on'') else ''mdi:fan-off'' }}'
                icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''grey'' }}'
            alignment: end

I am missing only one thing and I will wait for some help: animate the icons.

As I said you have to play a little bit with @rhysb code and “destroy” your dashboard to get what you want!

rhysb · March 21, 2023, 7:49pm

Yes, you can do like this:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: template
        content: '{{ now().strftime("%A, %-d %B") }}'
        card_mod:
          style: |

            /* Style date & time */
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-border-width: 0;

              /* Center date & time */
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
            }
      - type: template
        icon: mdi:alert-circle
        card_mod:
          style: |
            ha-card {

              /* Position on right */
              position: absolute;
              right: calc(var(--chip-height) + var(--chip-spacing));
            }

reypm · March 21, 2023, 7:50pm

oh this solution is even nicer did not know you could style chips independently

ffm777 · March 21, 2023, 7:57pm

Sorry if this has been asked before. But is it possible to use conditional chip cards with a numerical condition? Let’s say, a chip only displays if the humidity is above a certain threshold. Of course, I could use helpers in HA, but I would like to avoid that.

reypm · March 21, 2023, 8:09pm

@rhysb is it possible to animate the chips icon based on a condition? ie: animate the fan icon only if it is on couldn’t get it working

rhysb · March 21, 2023, 8:19pm

You can do like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: fan.office
    content: '{{state_attr(''fan.office'', ''percentage'')}}%'
    icon: '{{ ''mdi:fan'' if is_state(entity, ''on'') else ''mdi:fan-off'' }}'
    icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''grey'' }}'
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Office Fan
          content:
            type: custom:stack-in-card
            cards:
              - type: custom:mushroom-fan-card
                entity: fan.office
                icon_animation: true
                show_percentage_control: true
                collapsible_controls: true
                fill_container: true
alignment: end
card_mod:
  style: 
    .chip-container :nth-child(1)$: |
      ha-icon {
        {{ 'animation: spin 1s linear infinite;' if is_state('fan.office', 'on') }}
      }
      @keyframes spin {
        100% { transform: rotate(360deg); }
      }

Mariusthvdb · March 21, 2023, 8:25pm

A that explains it. I never use the Ui and write it all in yaml mode…

Yeah, this really should be adjusted. Hope Paul is open to that.

reypm · March 21, 2023, 8:32pm

I must say: you are a crack! exactly what I was looking for. Where do you get the animation params from? is there a guide?

rhysb · March 21, 2023, 8:38pm

Have look here:

rhysb · March 21, 2023, 9:14pm

You do that in CSS like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: entity
    entity: sensor.bathroom_sensor_humidity
    icon: mdi:water-percent
    icon_color: blue
  - type: template
    icon: mdi:mushroom
    icon_color: red
card_mod:
  style: |
    .chip-container :nth-child(2) {
      {{ 'display: none;' if states('sensor.bathroom_sensor_humidity') | float < 80 }}
    }

Michael_Dahl · March 21, 2023, 9:29pm

Hi,

When I use this on the desktop, it looks strange, as the top shows on all columns, anyway to fix that ?

Or it single colum only ?

rhysb · March 21, 2023, 9:32pm

It is intended for single column only. Sticky headers don’t really work for a multi column layout .