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

[P4SQL]

Hi all,

I’m following this thread since several weeks and I learned a lot (or sometimes I’m a bit lost), nevertheless a big thanks to everyone especially to rhysb

So I started to redesign and optimize my dashboard. I’d like to modify/add a dropdown to my current card but I do not understand how it is done in the right way so that all three mini-graph-card are not shown by default:

type: vertical-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.netatmo_meteoro_indoor_office_pascal_co2
            icon_color: teal
            card_mod:
              style: |
                ha-card {
                        padding: 5px;
                        --chip-font-size: 0.6em;
                        --chip-height: 32px
                        }
          - type: entity
            entity: sensor.netatmo_meteoro_indoor_office_pascal_temperature
            icon_color: orange
            card_mod:
              style: |
                ha-card {
                        padding: 5px;
                        --chip-font-size: 0.6em;
                        --chip-height: 32px
                        }
          - type: entity
            entity: sensor.netatmo_meteoro_indoor_office_pascal_humidity
            icon_color: blue
            card_mod:
              style: |
                ha-card {
                        padding: 5px;
                        --chip-font-size: 0.6em;
                        --chip-height: 32px
                        }
        alignment: justify
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.netatmo_meteoro_indoor_office_pascal_battery_percent
            icon_color: blue-grey
            card_mod:
              style: |
                ha-card {
                        padding: 5px;
                        --chip-font-size: 0.6em;
                        --chip-height: 33px
                        }
          - type: entity
            entity: sensor.pwrplg01_office
            icon_color: '#ff452a'
            card_mod:
              style: |
                ha-card {
                        padding: 5px;
                        --chip-font-size: 0.6em;
                        --chip-height: 32px
                        }
        alignment: justify
  - type: custom:mini-graph-card
    entities:
      - sensor.netatmo_meteoro_indoor_office_pascal_co2
    name: CO2
    icon: mdi:molecule-co2
    line_color: teal
    line_width: 5
    hours_to_show: 24
  - type: custom:mini-graph-card
    entities:
      - sensor.netatmo_meteoro_indoor_office_pascal_temperature
    name: Temperature
    line_color: orange
    line_width: 5
    hours_to_show: 24
  - type: custom:mini-graph-card
    entities:
      - sensor.pwrplg01_office
    name: Power consumption
    line_color: '#ff452a'
    line_width: 5
    hours_to_show: 48

Thanks for your help

Cheers
P4SQL

[gfandrea (Andrea)]

This is my solar dashboard, I quite like the graphs

[codedmind]

Very good, can you share the code please

[gfandrea (Andrea)]

I use always the mushroom-entity-card, so is quite simple

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Tesla Powerwall
  - type: grid
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.powerwall_charge
        name: Stato carica
        icon: mdi:home-battery
        icon_color: green
        primary_info: state
        secondary_info: name
      - type: custom:mushroom-entity-card
        entity: sensor.powerwall_site_export
        name: Esportato oggi
        icon: mdi:home-export-outline
        icon_color: cyan
        primary_info: state
        secondary_info: name
      - type: custom:mushroom-entity-card
        entity: sensor.powerwall_site_now
        name: Consumo rete
        icon: mdi:home-lightning-bolt
        icon_color: red
        primary_info: state
        secondary_info: name
      - type: custom:mushroom-entity-card
        entity: sensor.powerwall_battery_now
        name: Batteria
        icon: mdi:battery-sync
        icon_color: light-green
        primary_info: state
        secondary_info: name
      - type: custom:mushroom-entity-card
        entity: sensor.powerwall_load_now
        name: Consumo casa
        primary_info: state
        secondary_info: name
        icon_color: '#0091FF'
      - type: custom:mushroom-entity-card
        entity: sensor.powerwall_solar_now
        name: Input solare
        icon: mdi:white-balance-sunny
        icon_color: yellow
        primary_info: state
        secondary_info: name
    columns: 2
    square: false

This is the first graph

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Consumi ultime 48 ore
  - type: custom:mini-graph-card
    show:
      name: false
      icon: false
      state: true
      fill: true
      points: always
    line_width: 2
    hours_to_show: 48
    height: 200
    hour24: true
    points_per_hour: 1
    entities:
      - entity: sensor.powerwall_load_now
        name: Consumo
        color: '#0091FF'
      - entity: sensor.powerwall_site_now
        name: Rete
        color: '#e74c3c'
      - entity: sensor.powerwall_solar_now
        name: Solare
        color: yellow
      - entity: sensor.powerwall_battery_now
        name: Batteria
        color: green
view_layout:
  column: 1

Then I just repeat with other entities.

This is the last graph

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Distribuzione energetica
  - type: custom:sankey-chart
    show_names: true
    show_icons: null
    wide: true
    height: 275
    min_box_distance: 10
    unit_prefix: k
    round: 0
    sections:
      - entities:
          - entity_id: sensor.powerwall_solar_export
            color: yellow
            children:
              - sensor.powerwall_site_export
              - sensor.powerwall_battery_import
              - sensor.powerwall_load_import
          - entity_id: sensor.powerwall_battery_export
            color: green
            name: Batteria
            children:
              - sensor.powerwall_site_export
              - sensor.powerwall_load_import
          - entity_id: sensor.powerwall_site_import
            color: '#e74c3c'
            children:
              - sensor.powerwall_site_export
              - sensor.powerwall_battery_import
              - sensor.powerwall_load_import
      - entities:
          - entity_id: sensor.powerwall_site_export
            color: cyan
          - entity_id: sensor.powerwall_battery_import
            color: green
          - entity_id: sensor.powerwall_load_import
            color: '#0091FF'
view_layout:
  column: 3

[Thekholm]

Hi,

How can I use this template in the secondary line off the Media Player card?

{% set state=states('media_player.bluesound_duschrum') %}  
{% if state=='playing' %} Spelar 
{% elif state=='paused' %} Av 
{% elif state=='idle' %} Spelar i Grupp 
{% else %} 
{% endif %}

Best Regards
Thekholm

[Thekholm]

Hi P4SQL,

I`am learning as you, very hard at times! Try this;

1. Download Vertical-stack-in-card + Card Mod + Gap Card + Layout Card from Hacs.

2. Make an input boolean and use it instead of this line in the code input_boolean.your_own_boolean two places inte code.

3. Now you should have it working.

type: custom:vertical-stack-in-card
cards:
  - type: custom:gap-card
    height: 2
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 33px
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-template-card
        entity: ''
        primary: Air Quality
        secondary: Everything is great
        icon: mdi:chart-areaspline
        icon_color: green
        fill_container: false
        multiline_secondary: false
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-border-width: 0;
            }
      - type: custom:mushroom-template-card
        entity: input_boolean.mushroom_matrum_card
        icon: >-
          {{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
          }}
        icon_color: black
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              align-items: flex-end;
              background: none;
              --ha-card-border-width: 0;
            }
            mushroom-shape-icon {
              --shape-color: none !important;
            }  
  - type: conditional
    conditions:
      - entity: input_boolean.mushroom_matrum_card
        state: 'on'
    card:
      type: custom:vertical-stack-in-card
      cards:
        - type: custom:mini-graph-card
          entities:
            - sensor.netatmo_meteoro_indoor_office_pascal_co2
          name: CO2
          icon: mdi:molecule-co2
          line_color: teal
          line_width: 5
          hours_to_show: 24
        - type: custom:mini-graph-card
          entities:
            - sensor.netatmo_meteoro_indoor_office_pascal_temperature
          name: Temperature
          line_color: orange
          line_width: 5
          hours_to_show: 24
        - type: custom:mini-graph-card
          entities:
            - sensor.pwrplg01_office
          name: Power consumption
          line_color: '#ff452a'
          line_width: 5
          hours_to_show: 48
      card_mod: null
      style: |
        ha-card {
          --ha-card-border-width: 0;
        }

Best Regards
Thekholm

[Sddawson]

I’m a little confused about the mushroom themes and HA 2022.11. It says the main Mushroom theme is no longer required because it’s in the default HA theme. Does that just mean that

    ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
    ha-card-border-radius: 12px 

(which is all that was in the main Mushroom theme) are now the default in HA? And can I still use the same mushroom-specific variables that are documented on the mushroom theme GitHub page in my own theme? Thanks for any pointers.

[svalmorri]

Nice, but…
2163 kWh exported today…I doubt it, it’s probably the totalizer so far…

[Thekholm]

Hi all Mushroom fans,

I have started a new post named Mushroom Insperation. I hope it could be a place for all pictures with codes in one place, this post is getting hard to follow!

Mushroom Inspiration!

Mushroom topic are now over 8000 post! It`s really hard to get inspiration or code to use with your own dashboard. I would like this post to be all about pictures with codes, nothing else! So if you have something to share or offer, please do it with pictures and code. Do not ask any questions here, instead ask them directly to the person or in the original Mushroom post! To all new user of Mushroom, you will need to download some things from HACS, some example: Card Mod, Stack In …

Best Regards
Thekholm

[T1ppes]

I am using a mushroom-template-card stacked with some mushroom-chips as room/navigation cards in my dashboard.
For my laundry room the card currently looks like this:

This is the current code

      - type: custom:stack-in-card
        cards:
          - type: custom:mushroom-template-card
            icon: |
              {% if is_state('sensor.washer_status', 'Done') %}
                mdi:washing-machine-alert
              {% elif is_state('sensor.dryer_status', 'Done') %}
                mdi:tumble-dryer-alert
              {% elif is_state('sensor.washer_status', 'Running') %}
                mdi:washing-machine
              {% elif is_state('sensor.dryer_status', 'Running') %}
                mdi:tumble-dryer
              {% else %}
                mdi:washing-machine-off
              {% endif %}
            icon_color: >
              {% if is_state('sensor.washer_status', 'Done') or
                    is_state('sensor.dryer_status', 'Done') %}
                red
              {% elif is_state('sensor.washer_status', 'Running') or
                      is_state('sensor.dryer_status', 'Running') %}
                orange
              {% else %}
                blue
              {% endif %}
            layout: horizontal
            primary: Waschküche
            tap_action:
              action: navigate
              navigation_path: laundry
          - type: custom:mushroom-chips-card
            card_mod:
              style: |
                ha-card {
                  --chip-box-shadow: none;
                }
            chips:
              - type: template
                icon: none
                tap_action:
                  action: none
              - type: template
                icon: |
                  {% if is_state('sensor.washer_status', 'Done') %}
                    mdi:washing-machine-alert
                  {% elif is_state('sensor.washer_status', 'Running') %}
                    mdi:washing-machine
                  {% else %}
                    mdi:washing-machine-off
                  {% endif %}
                icon_color: |
                  {% if is_state('sensor.washer_status', 'Done') %}
                    red
                  {% elif is_state('sensor.washer_status', 'Running') %}
                    orange
                  {% elif is_state('sensor.washer_status', 'Off') %}
                    #646464
                  {% else %}
                    white
                  {% endif %}
                content_info: none
              - type: template
                icon: |
                  {% if is_state('sensor.dryer_status', 'Done') %}
                    mdi:tumble-dryer-alert
                  {% elif is_state('sensor.dryer_status', 'Running') %}
                    mdi:tumble-dryer
                  {% else %}
                    mdi:tumble-dryer-off
                  {% endif %}
                icon_color: |
                  {% if is_state('sensor.dryer_status', 'Done') %}
                    red
                  {% elif is_state('sensor.dryer_status', 'Running') %}
                    orange
                  {% elif is_state('sensor.dryer_status', 'Off') %}
                    #646464
                  {% else %}
                    white
                  {% endif %}
                content_info: none```

Having seen your animiations it would be neat to have the little chips being animated, but I am struggeling to get the code right. There seem to have already been a couple of posts on this regard, I have gone through them, but I can’t seem to get it quite right.
Maybe somebody could help.

Where would I need to be adding the
Washing machine animation

Washing Machine Animation

card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      }
      @keyframes shake {
        0%, 100% { transform: translate(0, 0) rotate(0); }
        20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
        40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
        60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
        80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
      }
      @keyframes drum {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
      } 

Tumble Dryer Animation

card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: shake 400ms ease-in-out infinite, drum 1s infinite;
        transform-origin: 50% 65%;
      }
      @keyframes shake {
        0%, 100% { transform: rotate(4deg); }
        50%  { transform: rotate(-4deg); }
      }
      @keyframes drum {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
      }

And what exactly do I need to change to have it acustomed for the chip instead of the main icon?
What do I need to add to have the animation only, when the machine is actually running?

Furthermore is it possible to use a theme provided icon_color for the chips, when 'Off'?
Currently I have it set to white, which is fine, whilst in dark mode, but invisble when in light mode.

Edit: I have found an answer regarding my last question and am setting the color now to var(--color-theme) instead of white.

[gfandrea (Andrea)]

you are right, but to be fair I don’t know from when is counting

[cloudbr34k (Apples)]

Hey all, just looking for the css code to make the icons bigger and move left or right

type: custom:mushroom-template-card
primary: Lights
secondary: Dashboard
icon: mdi:home-lightbulb
layout: vertical
tap_action:
  action: navigate
  navigation_path: /lovelace/house-lights
icon_color: pink
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
      }

[fifrak]

Do you plan to add air purifier and power socket cards as it done for humidifier, fan, either for vacuum cleaner? I think it will be good to have it

[piitaya (Paul)]

For HA, power socket is a switch and air purifier is a fan I think. Why would you want another card ?

[fifrak]

I must check switch, but anyway I tried to use purifier in mushroom fan card and it was impossible. In specific card for purifier you may check for instance rpm, filter usage or current PM, etc. In case of power socket beside turn on/off it might show also power consumption.

[PsYchon (Paul)]

Ik weet niet of het de bedoeling dat ik het hier plaats anders hoor ik het wel .
Heb nog niet zo lang H.A geïnstalleerd en begin het beetje te snappen.
Alleen wil graag dit thema instaleren maar zou echt niet weten waar ik moet beginnen.
Is er ergens een how to?

Het gaat bij mij al mis omdat ik de HASC niet kan vinden
Zoals hier in de tekst staat:
is beschikbaar inHACS , zoek gewoon naar “Mushroom” in de “Frontend” sectie.

[P4SQL]

@Thekholm

Download Vertical-stack-in-card + Card Mod + Gap Card + Layout Card from Hacs.

Good Morning Thekholm,

just as a side note: gap card is integrated in the layout card.
Your code worked great, I needed a bit to get it what you did to support me, but now it looks great.

There would be more nice modifications to integrated e.g. the air quality and the state depends on the entities but I’m good for now

Cheers
P4SQL

[piitaya (Paul)]

To keep Mushroom simple (and because we can not handle all cases), the card is linked to only one entity. If you want to mix things, you can use the template card.

Power socket device = switch entity + power sensor entity
Air purifier device = fan entity + some sensors entities for rpm, filter, etc…

Home Assistant has entity specification : Sensor Entity | Home Assistant Developer Docs but not device specification so that’s why Mushroom is entity focused for now.

[cloudbr34k (Apples)]

I really do suck at this CSS… i just dont get it.
Im trying too add the below css code to make the icon bigger??

type: custom:stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: ''
    subtitle: Pool Equipment
  - type: vertical-stack
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.pool_heater
        show_temperature_control: false
        hvac_modes:
          - heat
        layout: vertical
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
              }
              :host {
                --mush-icon-size: 200px;
              }

[Fabian_V]

First of all we talk English on the Forum…

first you need to install HACS: Download | HACS how to you can also find on Youtube if you can’t figure out.

If HACS is installed, you can search in HACS for Mushroom