Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

I think whatā€™s breaking it all is the background removal. Cus individually it works, but not on the complete card setting. No issue, Iā€™ll rebuild them with the proper code, specifically with the " mushroom-template-chip:nth-child(1)$: |" options.
Thank you.

Another one for you, Iā€™m able to make the background follow the state with this bit of code:

      {% if is_state('light.lightstrip_kitchen_light', 'on') %}
         background: rgba({{ (state_attr('light.lightstrip_kitchen_light', 'rgb_color') | join(',')) }},0.1)

How would this work for ā€œicon_colorā€ inside a custom:mushroom-template-card?

    icon_color: >-
      {% if states('light.candeeiro_cozinha') == 'on' %}

      #F5C02F

      {% elif states('light.lightstrip_kitchen_light') == 'on' %}

      'rgba({{ (state_attr('light.lightstrip_kitchen_light', 'rgb_color') |
      join(',')) }},0.1)'

      {% endif %} 

This is returning me a white icon. Would be pretty cool if I was able to make the icon follow the LED RBG Color IF on. Thank you again.

You canā€™t use CSS there. It can only be used in card_mod.

Oh, I see.

So thereā€™s no way to change the icon color dynamically?
Or thereā€™s a different template to be added in the card_mod part?

Yes, something like this:

type: custom:mushroom-template-card
primary: Desk Light
icon: mdi:led-strip-variant
entity: light.office_desk_light
card_mod:
  style: |
    mushroom-shape-icon {
      {% if is_state(config.entity, 'on') %}
        {% set light_color = (state_attr(config.entity, 'rgb_color') | join(',')) %}
        --icon-color: rgb({{ light_color }}) !important;
        --shape-color: rgba({{ light_color }}, 0.1) !important;
      {% endif %}
    }

Does anyone know if this card has been adapted for the switch from Polymer to Lit?
Canā€™t find anything in the release notes.

1 Like

Thank you again.

Unfortunetely, still doesnā€™t work, in fact, itā€™s breaking all the other code with it.
The background ā€œdivisorā€ stopped showing, the icon size reduced size instead of being a little bigger too. Iā€™m sorry for being so annoying, but this is harder than it seemed lol.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: input_boolean.room_kitchen
    primary: Cozinha
    secondary: >-
      {{ states('sensor.temp_kitchen') | round(1) }}Ā°C | {{
      states('sensor.humd_kitchen') | round(0) }}%
    icon: mdi:fridge-outline
    icon_color: blue
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    tap_action:
      action: navigate
      navigation_path: cozinha
    hold_action:
      action: call-service
      service: light.turn_off
      data:
        transition: 3
      target:
        area_id: kitchen
    double_tap_action:
      action: toggle
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 80px;
          height: 65px;
          margin-left: -18px !important;
        }
        mushroom-shape-icon {
          {% if is_state(config.entity, 'on') %}
            {% set light_color = (state_attr(config.entity, 'rgb_color') | join(',')) %}
            --icon-color: rgb({{ light_color }}) !important;
            --shape-color: rgba({{ light_color }}, 0.1) !important;
          {% endif %}
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: |-
          {% if states('input_boolean.vacuum_kitchen') == 'off' %}
          mdi:sprout-outline
          {% endif %}
        icon_color: pink
        tap_action:
          action: none
        hold_action:
          action: none
        content_info: none
      - type: template
        icon_color: red
        icon: |-
          {% if states('input_boolean.vacuum_kitchen') == 'off' %}
          mdi:sprout-outline
          {% endif %}
        entity: sensor.washing_machine
      - type: template
        icon_color: red
        icon: |-
          {% if states('input_boolean.vacuum_kitchen') == 'off' %}
          mdi:sprout-outline
          {% endif %}
        entity: sensor.trockner
    alignment: end
    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
          ha-icon {
            animation: spin 6s ease 1.5s infinite;
          }
          @keyframes spin {
            100% { transform: rotate(360deg); }
          }
        mushroom-template-chip:nth-child(2)$: |
          ha-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); }
          }
        mushroom-template-chip:nth-child(3)$: |
          ha-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); }
          }
        .: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: 0;
            margin-right: 6px;
          }
card_mod:
  style: |
    ha-card {
      height: 100px;

      {% if is_state('light.lightstrip_kitchen_light', 'on') %}
         background: rgba({{ (state_attr('light.lightstrip_kitchen_light', 'rgb_color') | join(',')) }},0.1)
      {% elif is_state('light.candeeiro_cozinha', 'on') %}
         background: rgba(245, 192, 47, 0.1);
      {% endif %}
    }

@EDIT:
I managed to fix the ā€œconditionalā€ part. Instead of using conditions, Iā€™m using ā€œtemplatesā€ with states on the icons to show. It works. And letā€™s me animate.
I just really need the Icon State thing to work if thatā€™s possible. ALMOST THERE. :smiley:

After a long time away Iā€™m back to further improving my dashboard - still the best looking one out there in my mind.

A simple request I canā€™t find the answer to. For the various rooms I only show temp and humidity on the home page (and eventually light the icon if the light in the room is on.

image

The code to show this is šŸŒ”ļø{{ states('sensor.atc_9c32_temperature') | round(1) }}Ā°C šŸ’§{{ states('sensor.atc_9c32_humidity') | round(0) }}%

Where can I find the library of the icons (thermometer and water drop in this case) as Iā€™m adding the battery level as well. I had a look at the mdi website but can only find the code to display the icons. I need the actual icons to copyā€¦

https://emojipedia.org

1 Like

Exactly what I was looking for

Thanks :slight_smile:

1 Like

Can you tell me what exactly I need to check? Which developer tools tab should I use?

You should go to Developer Tools > States > Search for binary_sensor.lumi_lumi_sensor_motion_aq2_iaszone and check what does it list.

Youā€™re looking for itā€™s state. So whatā€™s under the State Column, is the ā€œOnā€ youā€™re looking for. If it isnā€™t on, you can see what it is there, and thatā€™s what you need to type on the conditional.

Thanks for the quick reply. Its state is off, but when motion is detected, it changes to on. Tell me if Iā€™m doing everything right? I choose the condition chip, and then in the condition tab I choose the required entity and specify the state on

image

If you intend that to only show if itā€™s ON that exactly what you should be doing, yes.
When itā€™s OFF isnā€™t gonna show anything. When itā€™s ON itā€™ll pass the condition.

The same would work for any other state. Imagine it was an alarm - for example - and you wanted it to show when you were away, youā€™d put away there, so it would only show when the alarm state is away. If youā€™re home it doesnā€™t show cus the state is another.

You can even complicate it (I do that with some stuff), you can add states of TWO different entities. ā€œIf lights AND motion onā€ for example, will show something, but both need to be on, otherwise it doesnā€™t show cus not all conditions are met.

1 Like

Thanks for your advice. What you said is very interesting. This worked for me. The only thing I will add in the chip tab is to add the same entity as in the condition tab

Hi @rhysb, I did and it works. However trying to use the same logic for a washing machine card and its not working.

Here is the code; where am I going wrong?

type: horizontal-stack
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
      {% else %}
      mdi:washing-machine-off
      {% endif %}
    secondary: |
      Washing Machine
    icon_color: |-
      {% set state=states(entity) %}
      {% if state=='Running' %}
      green
      {% elif state== 'Delayed start' %}
      orange
      {% elif state== 'Cycle is finished' %}
      purple
      {% else %}
      grey
      {% endif %}
    primary: |2-
       {% set d ={
        'Delayed start': 'Delayed Start',
        'Running': 'Running', 
        'Cycle is finished': 'Cycle Ended',
        'Off': 'Off'
        } %}
        {{ d.get(states(entity)) }}
    tap_action:
      action: more-info
    hold_action:
      action: none
    double_tap_action:
      action: none
    fill_container: true
    entity: sensor.electrolux_sawa_washing_machine_wm1_appliancestate_2
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
          {{ '--icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite' if is_state(config.entity, 'Running') }}
       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); }
       }

Also would want to create weather button with multiple animations based on condition.

Hello,
Really love these cards. Did someone manage to get multiple entities in the same card like the default ha entities card?


Would be great for me to have something like this.

Thanks in advance

This is how I made a title with chips

With Subtitle
image

No Subtitle
image

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: auto 1fr
  grid-template-areas: |
    "title chips"
    "subtitle subtitle"
  margin: '-4px 0 -4px 0'
cards:
  - type: custom:mushroom-title-card
    title: Title
    view_layout:
      grid-area: title
  - type: custom:mushroom-title-card
    subtitle: Subtitle
    view_layout:
      grid-area: subtitle
    card_mod:
      style:
        .: |
          h2 {
            transition: all 0s;
            padding: 0 16px 12px;
          }
          .header {
            transition: all 0s;
            --title-padding: 0;
          }
  - type: custom:mushroom-chips-card
    view_layout:
      grid-area: chips
    alignment: end
    card_mod:
      style: |
        ha-card {
          transition: all 0s;
          transform: translateY(30%);
        }
    chips: []

I split the title and subtitle so the subtitle can be longer than the title space. You can adjust translateY to move the chips up and down if needed.

4 Likes

Still having massive trouble with this.

Letā€™s go on steps:
The mushroom-template-chip:nth-child(1)$: | works, 2 and 3 donā€™t. Just the first one.
If I use template instead of ā€œconditionā€ it works, but it creates invisible icons disaligning everything.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: input_boolean.room_kitchen
    primary: Cozinha
    secondary: >-
      {{ states('sensor.temp_kitchen') | round(1) }}Ā°C | {{
      states('sensor.humd_kitchen') | round(0) }}%
    icon: mdi:fridge-outline
    icon_color: blue
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    tap_action:
      action: navigate
      navigation_path: cozinha
    hold_action:
      action: call-service
      service: light.turn_off
      data:
        transition: 3
      target:
        area_id: kitchen
    double_tap_action:
      action: toggle
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 80px;
          height: 65px;
          margin-left: -18px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: input_boolean.vacuum_kitchen
            state: 'on'
        chip:
          type: template
          icon: |-
            {% if states('input_boolean.vacuum_kitchen') == 'on' %}

            mdi:robot-vacuum

            {% elif states('input_boolean.vacuum_kitchen') == 'on' and
            states('vacuum.robot_cleaner') == 'returning' %}

            mdi:robot-vacuum

            {% endif %}
          icon_color: |-
            {% if states('input_boolean.vacuum_kitchen') == 'on' and
            states('vacuum.robot_cleaner') == 'cleaning' %}

            pink

            {% elif states('input_boolean.vacuum_kitchen') == 'on' and
            states('vacuum.robot_cleaner') == 'returning' %}

            disabled

            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: none
      - type: conditional
        conditions:
          - entity: input_boolean.vacuum_kitchen
            state: 'on'
        chip:
          type: template
          icon: |-
            {% if states('input_boolean.vacuum_kitchen') == 'on' %}

            mdi:robot-vacuum

            {% elif states('input_boolean.vacuum_kitchen') == 'on' and
            states('vacuum.robot_cleaner') == 'returning' %}

            mdi:robot-vacuum

            {% endif %}
          icon_color: |-
            {% if states('input_boolean.vacuum_kitchen') == 'on' and
            states('vacuum.robot_cleaner') == 'cleaning' %}

            pink

            {% elif states('input_boolean.vacuum_kitchen') == 'on' and
            states('vacuum.robot_cleaner') == 'returning' %}

            disabled

            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: none
      - type: conditional
        conditions:
          - entity: input_boolean.vacuum_kitchen
            state: 'on'
        chip:
          type: template
          icon: >-
            {% if states('input_boolean.vacuum_kitchen') == 'on' %}

            mdi:robot-vacuum

            {% elif states('input_boolean.vacuum_kitchen') == 'on' and
            states('vacuum.robot_cleaner') == 'returning' %}

            mdi:robot-vacuum

            {% endif %}
          icon_color: >-
            {% if states('input_boolean.vacuum_kitchen') == 'on' and
            states('vacuum.robot_cleaner') == 'cleaning' %}

            pink

            {% elif states('input_boolean.vacuum_kitchen') == 'on' and
            states('vacuum.robot_cleaner') == 'returning' %}

            disabled

            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: none
    alignment: end
    card_mod:
      style:
        mushroom-template-chip:nth-child(2)$: |
          ha-icon {
            animation: spin 6s ease 1.5s infinite;
          }
          @keyframes spin {
            100% { transform: rotate(360deg); }
          }
        mushroom-template-chip:nth-child(1)$: |
          ha-icon {
            animation: spin 6s ease 1.5s infinite;
          }
          @keyframes spin {
            100% { transform: rotate(360deg); }
          }
        mushroom-template-chip:nth-child(3)$: |
          ha-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); }
          }
        .: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: 0;
            margin-right: 6px;
          }
card_mod:
  style: |
    ha-card {
      height: 100px;

      {% if is_state('light.lightstrip_kitchen_light', 'on') %}
         background: rgba({{ (state_attr('light.lightstrip_kitchen_light', 'rgb_color') | join(',')) }},0.1)
      {% elif is_state('light.candeeiro_cozinha', 'on') %}
         background: rgba(245, 192, 47, 0.1);
      {% endif %}
    }

Captura de ecrĆ£ 2023-04-23 224211

and on top of that, I canā€™t make the icon follow the RBG still (as I asked on the previous post: Mushroom Cards - Build a beautiful dashboard easily šŸ„ - #6647 by MARTWIN)

Thanks. My config looks like this:

type: vertical-stack
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    cards:
      - type: custom:mushroom-title-card
        title: Salon
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.temperature_salon
            icon_color: amber
          - type: entity
            entity: sensor.humidity_salon
            icon_color: light-blue
          - type: entity
            entity: sensor.co2_salon
            icon_color: green
        alignment: end
        card_mod:
          style: |
            div.chip-container.align-end {
              margin-top: 19px
            }
    layout:
      grid-template-columns: auto 70%
      margin: '-4px'

and this is a result:
obraz

1 Like

FOR THE ICON:

icon_color: |
        {% if is_state(entity, 'on') %}
        {{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
        {% endif %}

FOR ANIMATION:

mushroom-conditional-chip:nth-child(3):
            mushroom-template-chip$: |
                        ha-icon {
                          {{ 'animation: shake 400ms ease-in-out infinite;' if is_state('binary_sensor.input_asciugatrice', 'on') }}
                          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); }
                        }


1 Like