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

gfandrea · November 4, 2022, 7:44pm

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 · November 4, 2022, 9:12pm

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 · November 4, 2022, 9:44pm

Hi P4SQL,

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

Download Vertical-stack-in-card + Card Mod + Gap Card + Layout Card from Hacs.
Make an input boolean and use it instead of this line in the code input_boolean.your_own_boolean two places inte code.
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 · November 5, 2022, 5:42am

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 · November 5, 2022, 7:22am

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

Thekholm · November 5, 2022, 10:01am

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!

Best Regards
Thekholm

T1ppes · November 5, 2022, 12:39pm

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:

laundry_room

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 · November 5, 2022, 1:52pm

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

cloudbr34k · November 5, 2022, 3:14pm

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 · November 5, 2022, 6:09pm

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 · November 5, 2022, 10:22pm

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

fifrak · November 5, 2022, 10:37pm

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 · November 6, 2022, 4:37am

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 · November 6, 2022, 7:30am

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 · November 6, 2022, 8:47am

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 · November 6, 2022, 10:23am

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 · November 6, 2022, 1:14pm

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

ryanhindinger · November 6, 2022, 3:40pm

Love these cards but having one issue with the Chips that is almost certainly an error on my part. Tried to add a ‘tap_action’ to a conditional chip. When the condition is true and the chip is visible, tapping on it ‘dismisses’ the chip, it goes away, and the tap_action is not called. Any ideas what I’m doing wrong or is a tap_action not supported on a conditional chip?

janiv · November 6, 2022, 8:07pm

Hi
How do I show/hide a chip based on its content?
Thanks

RaA11 · November 6, 2022, 8:46pm

you can use the conditional chip

              - type: conditional
                conditions:
                  - entity: binary_sensor.multisensor_motion
                    state: "on"
                chip:
                  type: entity
                  entity: binary_sensor.multisensor_motion
                  icon_color: yellow