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

This may work better for you and @Tyfoon. It also avoids the stack-in-card.

type: entities
entities:
  - type: custom:fold-entity-row
    head:
      type: custom:mushroom-entity-card
      entity: sensor.passadeira_power
      name: Passadeira
      primary_info: name
      secondary_info: state
      layout: horizontal
      icon: mdi:dumbbell
      icon_color: light-green
      multiline_secondary: true
      card_mod:
        style: |
          ha-card {
            --ha-card-border-width: 0;
            --ha-card-box-shadow: 0;
            background: none;
          }
    padding: 0
    entities:
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.passadeira_power
            line_color: deep-orange
        hours_to_show: 24
        points_per_hour: 4
        line_width: 1
        font_size: 50
        animate: true
        show:
          name: false
          icon: false
          state: false
          legend: true
          fill: fade
        card_mod:
          style: |
            ha-card {
              --ha-card-border-width: 0;
              --ha-card-box-shadow: 0;
              background: none;
            }
card_mod:
  style: 
    fold-entity-row$: |
      ha-icon {
        background: none !important;
        margin-right: 24px !important;
        --toggle-icon-width: 21px !important;
        color: rgb(var(--rgb-disabled-color));
      }
    .: |
      .card-content {
        padding: 0;
      }

Mushroom variables are different for each card type. Which ones are you interested in?

Great work, i’d like to see the code also. Thanks.

Here is an example of a fold-entity-row with auto-entities for Mushroom.

Mushroom Fold Entity Row with Auto Entities:

Mushroom Folded-Entity-Row with Auto-Entities

type: entities
entities:
  - type: custom:fold-entity-row
    head:
      type: custom:mushroom-entity-card
      entity: group.lounge_amps
      name: Lounge Amps
      icon: mdi:audio-video
      icon_color: light-blue
      tap_action:
        action: toggle
    padding: 0
    entities:
      - type: custom:auto-entities
        filter:
          include:
            - group: group.lounge_amps
              options:
                type: custom:mushroom-entity-card
                icon_color: light-blue
                tap_action:
                  action: toggle
        card:
          type: custom:layout-card
          cards: []
          layout_type: masonry
        sort:
          method: friendly_name
    card_mod:
      style: |
        :host {
          --masonry-view-card-margin: -12px 8px 0px 8px; 
          --ha-card-border-width: 0;
          --ha-card-background: none;
          --ha-card-box-shadow: 0;
        }
card_mod:
  style:
    fold-entity-row$: |
      ha-icon {
        background: none !important;
        margin-right: 24px !important;
        --toggle-icon-width: 21px !important;
        color: rgb(var(--rgb-disabled-color));
      }
    .: |
      .card-content {
        padding: 0;
      }
5 Likes

Is it possible to change the color of the secondary text in a template card?

A quick search in the topic leads to Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1) - #2085 by rhysb

Actually someone did: GitHub - Dodoooh/awesome-mushroom-cards: a collection of awesome mushroom user cards for the lovelace-mushroom. Though it’s hard to keep up with all the things shared in here. There’s also another topic focused on sharing just images with code: Mushroom Inspiration!.

Would be nice to see indeed. In general any post with whole lovelace views/layouts are always nice for inspiration. I’m wanting to share my setup soon but it always remains a WIP… Maybe a seperate topic for that as well? :stuck_out_tongue_winking_eye:

I’m experiencing this too. CPU usage and RPi temp start rising when viewing lovelace. I’ve already started thinking about replacing some template cards back to simple entity cards. @piitaya can you confirm this is caused by the template cards?

2 Likes

You can use the Chrome Task Manager (shift + esc) to try and see what is going on. Add GPU mem, JavaScript Mem & Idle Wake Ups to the monitored columns. You could try creating a new, clean dashboard and add a single card type with the same entity. Do this for each card type to see if there are any differences. You could then try adding a bunch of the same card type and see what that does.

A quick test that I did showed a huge jump in CPU & mem usage when editing cards.

Hello masters of mushroom dashboards. I am using a presence solution with nodered that provides more granularity of a persons status. Doing so requires the use of a sensor template. My goal is to replicate the cool little icons displayed above the entity image in the mushroom_persons card in the mushroom_entity card. Any way to make image1 below look like image2?

image

image

You should be able to use something similar to:

badge_icon: >-
     {% if state_attr('device_tracker.person', 'place') == "Home" %} mdi:home {% else %} mdi:home-off {% endif %}

I figured it out…in case anyone is interested:

  - type: custom:mushroom-template-card
    entity: sensor.your-sensor
    picture: '{{state_attr(entity,''entity_picture'')}}'
    primary: '{{state_attr(entity,''friendly_name'')}}'
    secondary: '{{states(entity)}}'
    badge_icon: >-
      {% if states(entity)=="Home" %} mdi:home {% elif states(entity)=="Arrived"
      %} mdi:home {% elif states(entity)=="Just Leave" %} mdi:home-off {% elif
      states(entity)=="Away" %} mdi:home-off {% endif %}
    badge_color: >-
      {% if states(entity)=="Home" %} green {% elif states(entity)=="Arrived" %}
      yellow {% elif states(entity)=="Just Leave" %} orange {% elif
      states(entity)=="Away" %} red {% endif %}
    layout: vertical
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    fill_container: true
    icon: ''
2 Likes

Did you ever come up with a solution to this idea?

Thanks.

Maybe a idea to put all of them on Github sub section: Themes variables.

Im looking for those 2 for now:

mushroom-entity-card
mushroom-media-player-card

Thanks you!

Thanks for your feedback. And you only get the high CPU when viewing the HA dashboard, not if you close down the app/browser ?

I had a steady CPU when viewing my dashboard and then duplicated a grid with three Muishroom template cards and my pretty powerful NUC running HA went from 4% to 24% CPU (goes down when closing the app/browser).

My Core I7 laptop that I used to edit the dashboard started blowing the fans at full speed as soon as I duplicated the Mushroom cards. Here is the Chrome Task Manager:

Not sure what I can read from this other than that my laptop is working hard just to display my dashboard, high CPU and fans on full speed.

Deleting the added Mushroom tempalte cards solved the high CPU. The tempalte cards are nothing special and since I just duplicated existing ones there is nothing wrong in my code, jsut feels like I’m reaching a threshold of number of Mushroom tempalte cards that creates this.

This is really unfortunate sice the combination of Home Assistant and Muishroom (template) cards are amazing.

Edit 1:
I added a grid card with three Mushroom Entity cards and that went witout any problems and CPU stayed at 3%-4%, so the issue is the Template cards. Not sure if that helps :slight_smile:

Edit 2:
Please let me know @piitaya if there is anything I can try to give you more information about this.

Hello.

I`m having question about mushroom-cover-card. Is there any change to put custom colours for icons? Or add styles into it?

Hi all

I have a problem with my mushrrom cards, the card itself cut’s the text instead of increase the size as you can see in the image :

the code is this :

square: false
columns: 1
type: grid
cards:
  - type: horizontal-stack
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:mushroom-template-card
            primary: Deco Living Room
            picture: /local/wifi.png
            layout: vertical
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    picture: /local/ip.png
                    icon_color: yellow
                    content: '{{state_attr('''', ''ip'') }}'
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                  - type: template
                    picture: /local/internet.png
                    icon_color: blue
                    content: >-
                      {{state_attr('device_tracker.living_room_deco',
                      'internet_online')}}
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                  - type: template
                    picture: /local/connected.png
                    icon_color: blue
                    content: >-
                      {{ device_entities('966a1db5ec1a0fbd78bd3eec7f1cb447') |
                      map('state_attr', 'friendly_name') | list}}
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                alignment: center
                card_mod:
                  style: |
                    ha-card {
                      position: center;
                      margin: 0px 0px 0px 0px;
                      left: 0px;
                      top: calc(25% - px);
                      }
                      .chip-container {
                      flex-flow: column !important;
                      }
                    }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:mushroom-template-card
            primary: Deco Office
            picture: /local/wifi.png
            layout: vertical
            icon_color: yellow
            tap_action:
              action: navigate
              navigation_path: /lovelace/quarto
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    picture: /local/ip.png
                    icon_color: yellow
                    content: '{{state_attr('''', ''ip'') }}'
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                  - type: template
                    picture: /local/internet.png
                    icon_color: blue
                    content: '{{state_attr(''device_tracker.office_deco'', ''internet_online'') }}'
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                  - type: template
                    picture: /local/connected.png
                    icon_color: blue
                    content: '{{ device_entities(''89e54cf6074785d49b935749cdb3c8b5'') |
          map(''state_attr'', ''friendly_name'')  
                              | list }}'
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                alignment: center
                card_mod:
                  style: |
                    ha-card {
                      position: center;
                      margin: 0px 0px 0px 0px;
                      left: 0px;
                      top: calc(25% - px);
                      }
                      .chip-container {
                      flex-flow: column !important;
                      }
                    }

What im missing or doing wrong?

Thanks all

Template card use Jinja2 template which are rendered server side. That’s why you can use the same template syntax with your automations, template sensors, markdown card and mushroom template cards.

If you use a many templates and ,have a lot of entities this can significantly increase your cpu.

1 Like

Can you share the template that you use in your card? There may have some optimization to do.

It is a bit random and not specific to these cards, but here is an exmaple that causes high CPU:

square: true
columns: 3
type: grid
cards:
  - type: custom:mushroom-template-card
    primary: Idag
    secondary: >-
      {{
      (states('sensor.elforbrukning_totalt_dag')|float-states('sensor.elforbrukning_laddning_dag')|float)|round(0)
      }} kWh / {{ states('sensor.elkostnad_huset_dag')|round(0) }} kr
    icon: mdi:calendar-outline
    icon_color: blue
    layout: vertical
    entity: sensor.elkostnad_huset_dag
    tap_action:
      action: more-info
  - type: custom:mushroom-template-card
    entity: sensor.elkostnad_huset_manad
    primary: Månad
    secondary: >-
      {{
      (states('sensor.elforbrukning_totalt_manad')|float-states('sensor.elforbrukning_laddning_manad')|float)|round(0)
      }} kWh / {{ states('sensor.elkostnad_huset_manad')|round(0) }} kr
    icon: mdi:calendar-month-outline
    icon_color: blue
    layout: vertical
    tap_action:
      action: more-info
    style: |
      ha-card {
         margin: 0px -5px 0px -5px;
       }
  - type: custom:mushroom-template-card
    primary: Faktura {{ (now().timestamp() | timestamp_custom('%B'))[:3]|lower }}
    secondary: >-
      {{ states('sensor.elkostnad_huset_manad')|round(0) +
      states('sensor.elkostnad_laddning_manad')|round(0) }} + 707 kr
    icon: mdi:cash-multiple
    icon_color: blue
    layout: vertical

Hi I’m trying to make something similar.
Will you share your code?

This is what I ended up with

1 Like