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

wgumaa · May 3, 2023, 4:04pm

@SteffenDE, Thanks! I’ll try that once the machine is turned on again.

Mattia2399 · May 3, 2023, 5:36pm

Sorry, I haven’t had much time to try

SteffenDE · May 3, 2023, 6:33pm

You can simulate a machine run with setting the state on dev section selecting the sensor and set a new state.

sanil.heartbeats · May 4, 2023, 3:19am

I am trying to make a change in my person info display. Earlier it was done using chip cards. Now i am changing it to person card. accomplished as required using the mushroom person card.
As usual all is ok in the desktop screen

But moving to mobile, the location display overlaps the battery icon… Like this

So I decide to change to grid layout so that i can use a different layout when viewed on mobile. I could do it ok. But there is a difference in the alignment of the new card when compared to the old one. A gap around the cards, which kind of looks odd.

This is the code of the new card done using a grid layout. how can I remove the gap to match the outer size …to make it the same as the old card which was done using the stack-in card option.

I tried to make changes in CSS by using custom:mod-card. But not able get a proper selector to remove the margins/ padding…

New Code using the grid-layout

type: custom:mod-card
card:
  type: custom:layout-card
  layout_type: custom:grid-layout
  layout:
    grid-template-columns: 1fr 1fr
    grid-template-areas: |
      "l1 r1 "
    mediaquery:
      '(max-width: 540px)':
        grid-template-columns: 100%
        grid-template-rows: auto
        grid-template-areas: |
          "l1"
          "r1"
      '(max-width: 1400px)':
        grid-template-columns: 50% 50%
        grid-template-rows: auto
        grid-template-areas: |
          "l1 r1"
  cards:
    - type: custom:stack-in-card
      mode: horizontal
      cards:
        - type: custom:mushroom-person-card
          entity: person.sanil
          icon_type: entity-picture
          secondary_info: state
          card_mod:
            style:
              mushroom-shape-avatar$: |
                .picture {
                  animation: ping 2s infinite;
                }
                @keyframes ping {
                  0% {
                    box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
                  }
                  
                  100% {
                    box-shadow: 0 0 5px 15px transparent;
                  }
                }
              .: |
                ha-card {
                  width: fit-content;
                  --ha-card-border-width: 0px;
                }
        - type: custom:mushroom-entity-card
          entity: sensor.sanil_s_oneplus_battery_level
          primary_info: none
          secondary_info: none
          icon_color: green
          tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card {
                position: absolute;
                top: 0px;
                right: 0px;
                width: fit-content;
                --ha-card-border-width: 0px;
              }
      view_layout:
        grid-area: l1
    - type: custom:stack-in-card
      mode: horizontal
      cards:
        - type: custom:mushroom-person-card
          entity: person.shinsa
          icon_type: entity-picture
          secondary_info: state
          card_mod:
            style:
              mushroom-shape-avatar$: |
                .picture {
                  animation: ping 2s infinite;
                }
                @keyframes ping {
                  0% {
                    box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
                  }
                  
                  100% {
                    box-shadow: 0 0 5px 15px transparent;
                  }
                }
              .: |
                ha-card {
                  width: fit-content;
                  --ha-card-border-width: 0px;
                }
        - type: custom:mushroom-entity-card
          entity: sensor.shinsa_s_iphone_battery_level
          primary_info: none
          secondary_info: none
          icon_color: green
          tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card {
                position: absolute;
                top: 0px;
                right: 0px;
                width: fit-content;
                --ha-card-border-width: 0px;
              }
      view_layout:
        grid-area: r1
card_mod:
  style: |
    ha-card {
      background: color-mix(in srgb, var(--green-color) 10%, var(--card-background-color));
    }

Old code using just Stack-in-Card

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-person-card
        entity: person.sanil
        icon_type: entity-picture
        secondary_info: state
        card_mod:
          style:
            mushroom-shape-avatar$: |
              .picture {
                animation: ping 2s infinite;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
                }
                
                100% {
                  box-shadow: 0 0 5px 15px transparent;
                }
              }
            .: |
              ha-card {
              width: fit-content;
                --ha-card-border-width: 0px;
              }
      - type: custom:mushroom-entity-card
        entity: sensor.sanil_s_oneplus_battery_level
        primary_info: none
        secondary_info: none
        icon_color: green
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              position: absolute;
              top: 0px;
              right: 0px;
              width: fit-content;
              --ha-card-border-width: 0px;
            }
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-person-card
        entity: person.shinsa
        icon_type: entity-picture
        secondary_info: state
        card_mod:
          style:
            mushroom-shape-avatar$: |
              .picture {
                animation: ping 2s infinite;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
                }
                
                100% {
                  box-shadow: 0 0 5px 15px transparent;
                }
              }
            .: |
              ha-card {
                width: fit-content;
                --ha-card-border-width: 0px;
              }
      - type: custom:mushroom-entity-card
        entity: sensor.shinsa_s_iphone_battery_level
        primary_info: none
        secondary_info: none
        icon_color: green
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              position: absolute;
              top: 0px;
              right: 0px;
              width: fit-content;
              --ha-card-border-width: 0px;
            }
card_mod:
  style: |
    ha-card {
      border-width: 0px;
    }

Can anyone help me do this

Edit:
Sorry for the long explanation above
Long Story Short.

The stack- in-card doesn’t consume any margins or padding while adding cards inside it.

But in the Grid Card Layout, there is space consumed in the form of margin/padding/whatever… thereby the cards added inside them are moved away from the outer margins of the custom:grid-layout card

How can I remove this margin consumed by grid-layout & have just the gap between the individual cards which are inside this layout only …

burg93 · May 4, 2023, 7:06am

Looks like mockup but this is probably one of the best dashboards I’ve seen. The room selector and bottom quick bar looks awesome. I’m hoping HA one day will be able to ship like this but it be great if someone had a similar custom dashboard in the meantime! ha

basbrus · May 4, 2023, 7:36am

Just to give you a heads up. UI Lovelace Minimalist is the project that is inspired on that mockup and comes pretty close within the possibilities of the HA Frontend. This project Mushroom is a better GUI focused project that incorporates a lot of the cards from both projects.

So yeah you can build a custom dashboard that’s quite similar even with mixing Mushroom and UI Lovelace Minimalist

burg93 · May 4, 2023, 7:49am

Yeah I thought it looked quite “minimalist” inspired, I tried that project a while back but it was too yaml docussed for my liking compared to mushroom. I have no doubts that it can be made, I was more hinting that hopefully someone with much better CSS skills than me can do it! Of course, out the box would be ideal but we’re probably a while from seeing that yet.

bogdan.sv · May 4, 2023, 7:54am

Greetings. Tell me how to display the text value of my sensor in the mushroom badge?

I have such a template:

{% set total = 0 %}
            {% if is_state('light.1_big_light', 'on') %}
              {% set total = total + 1 %}
            {% endif %}
            {% if is_state('light.2_big_light_2', 'on') %}
              {% set total = total + 1 %}
            {% endif %}
            {% if is_state('light.3_big_light_3', 'on') %}
              {% set total = total + 1 %}
            {% endif %}
            {{total}}

I also have a sensor that I made from this template. It works. I try to display it’s value using this pattern {{ states(‘sensor.current_lights_on’) }} However it doesn’t work for me. Please help me understand what I am doing wrong

Mattia2399 · May 4, 2023, 9:56am

I’m working on recreating that bar

I hope to create something nice.

madir · May 4, 2023, 10:39am

Hi Rhys,

how can I get the --chip-background: based on the entity state color?

thanks in advance.

jouster · May 4, 2023, 11:15am

I’ve noticed that since updating to 2023.5, the menu bar is now showing on the Mushroom card theme…

reverting to 2023.3.6 has fixed things

tfmeier · May 4, 2023, 11:59am

Is this taken from minimalist? Looks every bit commercial grade stuff

Mattia2399 · May 4, 2023, 12:05pm

THIS

tfmeier · May 4, 2023, 12:12pm

Thanks. Was getting too excited there for a while but I’m sure Home Assistant will eventually provide something like this…

tbrasser · May 4, 2023, 1:50pm

Does anyone know how to open the assist/dialog popup when you have hidden the default header?

AFSC · May 4, 2023, 5:07pm

hi,
I’m trying to create a template card in which the icon changes depending on the status of two entities.
I wanted something like this, when the pool pump is automatic green icon, when the pump is in manual yellow icon and when both are off it would be with red icon
anyone with something similar?

tbrasser · May 4, 2023, 6:23pm

chips:
  - type: action
    icon: mdi:microphone
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.sequence
        data:
          sequence:
            - service: browser_mod.navigate
              data:
                path: "?conversation=1"
            - service: browser_mod.refresh

jeroenvdd89 · May 4, 2023, 8:58pm

‘{% if is_state(‘input_boolean.brievenbusnotificatie’,‘on’) %}
MDI:youricon
{% elif is_state(‘input_boolean.brievenbusnotificatie’,‘on’) %}
MDI:your other icon
{% endif %}’

You can do something like this but with your own states / values / icon
You can keep adding elifs for every scenario you want other icon

AFSC · May 4, 2023, 10:55pm

tks
I don’t know if it will be in the correct format but it works


        icon: |-
          {% if is_state('input_boolean.1','on') %}
          mdi:pump
          {% elif is_state('input_boolean.2','on') %} 
          mdi:pump
          {% elif is_state('input_boolean.1'and'input_boolean.2','off') %} 
          mdi:pump-off
          {% endif %}

weppa · May 5, 2023, 6:07am

Maybe:

{% if is_state('input_boolean.1', 'on') or is_state('input_boolean.2', 'on') %}
  mdi:pump
{% else %} 
  mdi:pump-off
{% endif %}