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

[jata]

Hey community, this is a great project and a long thread. I have searched but haven’t found a clear answer. Here goes my question.

I want to use a card (entity or template) to show WAN status (connected) in the primary info slot and IP in secondary. The IP is an attribute of the entity WAN - a binary_sensor.

If I use an entity card, I can show ‘connected’ as primary but can’t find a way to get the attribute in the secondary. If I use a template card, I can get the state to show as ‘on’ in primary info and ip in the secondary - so using a template card seems to work best for this use case.

Can someone explain why the state is ‘on’ it is displayed as ‘connected’ when using the entity card? Is there a way to expose the ‘connected’ state/value using a template?

[Dreamoffice (Dave)]

how can i check 2 sensor value in one “if” condition? this ist not working

              {% if is_state('sensor.smart_state_of_charge', '100') && is_state('binary_sensor.openwb_cp1_autoladestatus', 'off')%}
                not charging

[sarruman (Stratos)]

First of all, I’d like to state that I admire your work! U consist an inspiration to me, though I’m totally new to home assistant and your dashboard and views are something totally unreachable to me…!
However, I try to learn from your examples!
Having said that, could you please share (an example of) the yaml of your dashboard ? I’ve read your posts about individual cards, but I’d like to copy- imitate your (ideal!) structure…!
I hope I don’t ask for much!
Thank you so much in advance!

[Sylwester (Sylwester Olik)]

Hi @rhysb. Is it possible to do wider Chips card so will auto match screen size. Just now I have used padding to make it a little more wider.

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: none;
    hold_action:
      action: call-service
      service: notify.mobile_app_sylwester_s_s21
      data:
        message: Ringing
        title: Find Phone
        data:
          ttl: 0
          importance: high
          priority: high
          tag: Find
          channel: alarm_stream
          timeout: 60
    icon: mdi:target
    icon_color: red
    content: Find Phone
alignment: center
card_mod:
  style: |
    ha-card {
      --chip-background: rgba(var(--rgb-red), 0.2);
      --chip-border-radius: var(--mush-control-border-radius, 12px);
      --chip-height: var(--mush-control-height, 36px);
      --chip-box-shadow: none;
      user-select: none;
      --chip-padding: 80px;
    }
    ha-card:active {
      --chip-background: rgba(var(--rgb-red), 0.4);
    }

[tfmeier (Thomas Meier)]

I’m considering 3 columns for my mushroom dashboard by removing the icon to create more screen real estate - see tile Lounge below. However at the moment the icon turns orange when the light in the room is on. Could I instead turn the whole tile orange if the light in the room is on? Or if that’s not possible could I ad least add a batch and change batch color accordingly?

This is my code with the icon

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Lounge
    secondary: >-
      🌡️{{ states('sensor.atc_f3d3_temperature') | round(1) }}°C 🔋{{
      states('sensor.atc_f3d3_battery') | round(0) }}%
    icon: ''
    entity: light.controller_rgbw_22854b
    tap_action:
      action: navigate
      navigation_path: lounge
    hold_action:
      action: toggle
    icon_color: |-
      {% if is_state('switch.kogan01', 'on') %}
        orange
      {% endif %}
    picture: ''
    badge_icon: mdi:home
  - type: custom:mushroom-template-card
    primary: Kitchen
    secondary: >-
      🌡️{{ states('sensor.atc_b49c_temperature') | round(1) }}°C 🔋{{
      states('sensor.atc_b49c_battery') | round(0) }}%
    icon: mdi:home
    entity: light.controller_rgbw_22854b
    tap_action:
      action: navigate
      navigation_path: kitchen
    hold_action:
      action: toggle
    icon_color: |-
      {% if is_state('light.controller_rgbw_22854b', 'on') %}
        orange
      {% endif %}
    badge_icon: ''
  - type: custom:mushroom-template-card
    primary: Hello, {{user}}
    secondary: How are you?
    icon: mdi:home

[edwardtich]

it doesn’t work for me

              - type: tile
                entity: sensor.10_battery_level
                card_mod:
                  style: |
                    .background {
                      background: color-mix(in srgb, var(--tile-color) 10%, var(--card-background-color));
                    }

[weppa]

Morning @rhysb, long time no speak brother, what transform property are you using on the mushroom-shape-icon’s in your example? Thanks in advance.

[rhysb (Rhys)]

Those ones are Tiles but you can replicate the effect like this:

type: custom:mushroom-light-card
entity: light.office_light
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape:active {
        transform: scale(1.2);
      }

[rhysb (Rhys)]

Does your browser support color-mix?
https://caniuse.com/?search=color-mix

[wgumaa (Waleed)]

Morning guys!

First I would like to extend my thanks to @rhysb and @Mattia2399 for their input and help!

I have designed a stack-in-card card for my washing machine.

I was wondering if i can add another entity on the card but not as a chip. The possible areas would be here in red:

I already have an entity in the red space above the “66 Min”

Here is my code:

type: custom:stack-in-card
title: null
mode: vertical
cards:
  - type: custom:mushroom-template-card
    icon: |-
      {% set state=states(entity) %}
      {% if state=='Pre-Washing' %}
      mdi:washing-machine
      {% elif state== 'Washing' %}
      mdi:washing-machine
      {% elif state== 'Rinsing' %}
      mdi:washing-machine
      {% elif state== 'Spinning' %}
      mdi:washing-machine
      {% else %}
      mdi:washing-machine-off
      {% endif %}
    icon_color: |-
      {% set state=states(entity) %}
      {% if state=='Pre-Washing' %}
      purple
      {% elif state== 'Washing' %}
      blue
      {% elif state== 'Rinsing' %}
      light-blue
      {% elif state== 'Spinning' %}
      orange
      {% else %}
      grey
      {% endif %}
    primary: |2-
       {% set d ={
        'Pre-Washing': 'Pre Wash',
        'Washing': 'Washing', 
        'Rinsing': 'Rinsing',
        'Spinning': 'Spinning'
        } %}
        {{ d.get(states(entity)) }}
    secondary: |
      {{states('sensor.electrolux_sawa_washing_machine_wm1_timetoend_2')}} Min
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    fill_container: true
    multiline_secondary: false
    entity: sensor.electrolux_sawa_washing_machine_wm1_cyclephase_2
    card_mod:
      style: null
      mushroom-shape-icon$: |
        ha-icon {
              {{ '--icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite; transform-origin: 50% 110%;' if is_state(config.entity, 'Running') }}
               }
               @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); }
             }
  - type: custom:mushroom-chips-card
    alignment: center
    chips:
      - type: template
        icon: mdi:tshirt-crew-outline
        entity: sensor.electrolux_sawa_washing_machine_wm1_programuid
        double_tap_action:
          action: none
        tap_action:
          action: none
        hold_action:
          action: none
        content: '{{states(''sensor.electrolux_sawa_washing_machine_wm1_programuid'') }} '
      - type: template
        icon: mdi:thermometer
        entity: sensor.electrolux_sawa_washing_machine_wm1_analogtemperature
        double_tap_action:
          action: none
        tap_action:
          action: none
        hold_action:
          action: none
        content: >-
          {{states('sensor.electrolux_sawa_washing_machine_wm1_analogtemperature')
          }}°C 
      - type: template
        icon: mdi:alpha-s-circle-outline
        entity: sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed
        double_tap_action:
          action: none
        tap_action:
          action: none
        hold_action:
          action: none
        content: >-
          {{states('sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed')
          }}
      - type: template
        entity: binary_sensor.electrolux_sawa_washing_machine_wm1_doorlock_2
        double_tap_action:
          action: none
        tap_action:
          action: none
        hold_action:
          action: none
        content: >-
          {% set d ={ 'off': 'Locked', 'on': 'Unlocked',  } %} {{
          d.get(states(entity)) }}
        icon: |-
          {% set state=states(entity) %}
          {% if state=='off' %}
          mdi:lock
          {% else %}
          mdi:lock-open-outline
          {% endif %}

Any tips or help appreciated!

[edwardtich]

Thank you very much! Updated Chrome

[rhysb (Rhys)]

You can make full-width Mushroom Chips like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
    content: Mushroom
    card_mod:
      style: |
        ha-card {
          justify-content: center;
        }
alignment: center
card_mod:
  style: |
    .chip-container * {
      width: 100%;
      margin-right: 0px !important;
    }

Multiple Chips will stack vertically.

[wgumaa (Waleed)]

Update:
So I have managed to add the other entity

How can reduce the white space in the card?

[Mattia2399]

Post your code, please

[maniac365]

Thank you very much. It looks amazing now.

[akkaria (Adam)]

After doing some further reading in the card_mod documentation i’ve managed to work it out.

For anyone interested you need to do the following:

card_mod:
  style:
    mushroom-cover-buttons-control$: |
      mushroom-button {
        --bg-color: red;
      }

[wgumaa (Waleed)]

I’ll post the code in a bit

[Mattia2399]

Hey @rhysb , can we create a footer similar to this?

maybe using sticky cards.

[wgumaa (Waleed)]

@Mattia2399 Hi,

Here is my code but the animation is running despite the condition I put. Any ideas?

Should i put the animation in the icon section?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: |-
      {% set state=states(entity) %}
      {% if state=='Running' %}
      mdi:washing-machine
      {% elif state== 'Delayed start' %}
      mdi:washing-machine
      {% elif state== 'Cycle is finished' %}
      mdi:washing-machine-alert
      {% else %}
      mdi:washing-machine-off
      {% endif %}
    icon_color: blue
    entity: sensor.electrolux_sawa_washing_machine_wm1_appliancestate_2
    primary: |2-
       {% set d ={
        'Delayed start': 'Delayed Start',
        'Running': 'Running', 
        'Cycle is finished': 'Cycle Ended',
        'Off': 'Off'
        } %}
        {{ d.get(states(entity)) }}
    secondary: |
      {{states('sensor.electrolux_sawa_washing_machine_wm1_timetoend_2')}} Min
    card_mod:
      style:
        icon: |-
          {% set state=states(entity) %}
          {% if state=='Running' %}
          mdi:washing-machine
          {% else %}
          mdi:washing-machine-off
          {% endif %}
        mushroom-shape-icon$: |
          ha-icon {
          {{ '--icon-animation: shake 400ms ease-in-out infinite;' if is_state(config.entity, 'Running') }}
            transform-origin: 50% 58%;
            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);
          }
          @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); }
          }
  - type: custom:mushroom-template-card
    icon: mdi:washing-machine
    icon_color: red
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: spin 1s linear infinite;
            transform-origin: 50% 58%;
            clip-path: circle(21.7% at 50% 58%);
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 80px;
            top: -82px;
          }
  - type: custom:mushroom-chips-card
    alignment: center
    chips:
      - type: template
        icon: mdi:tshirt-crew-outline
        entity: sensor.electrolux_sawa_washing_machine_wm1_programuid
        double_tap_action:
          action: none
        tap_action:
          action: none
        hold_action:
          action: none
        content: '{{states(''sensor.electrolux_sawa_washing_machine_wm1_programuid'') }} '
      - type: template
        icon: mdi:thermometer
        entity: sensor.electrolux_sawa_washing_machine_wm1_analogtemperature
        double_tap_action:
          action: none
        tap_action:
          action: none
        hold_action:
          action: none
        content: >-
          {{states('sensor.electrolux_sawa_washing_machine_wm1_analogtemperature')
          }}°C 
      - type: template
        icon: mdi:alpha-s-circle-outline
        entity: sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed
        double_tap_action:
          action: none
        tap_action:
          action: none
        hold_action:
          action: none
        content: >-
          {{states('sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed')
          }}
      - type: template
        entity: binary_sensor.electrolux_sawa_washing_machine_wm1_doorlock_2
        double_tap_action:
          action: none
        tap_action:
          action: none
        hold_action:
          action: none
        content: >-
          {% set d ={ 'off': 'Locked', 'on': 'Unlocked',  } %} 
          {{d.get(states(entity)) }}
        icon: |-
          {% set state=states(entity) %}
          {% if state=='off' %}
          mdi:lock
          {% else %}
          mdi:lock-open-outline
          {% endif %}

[SteffenDE (Steffen)]

Hi,

I think the icon: is wrong. I have a similar card and here is my part withe the animation:

      - type: custom:mushroom-template-card
        card_mod:
          style:
            mushroom-shape-icon$: |
              {% if is_state('sensor.miele_waschmaschine_status', 'running') %}
                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); }
                }
              {% endif %}
        entity: sensor.miele_waschmaschine_status
...

You do not need the different on off icons because they are at the icon part already.

Steffen