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

edwardtich · June 9, 2023, 9:12am

Запись экрана

type: custom:stack-in-card
cards:
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.pogoda_ulitsa_pressure
        name: Давление
        color: var(--blue-color)
    height: 60
    hours_to_show: 24
    line_width: 1
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
    card_mod:
      style: |
        ha-card {
          position: absolute !important;
          height: 100%;
          width: 100%;
          top: 0px;
          --ha-card-border-width: 0;
        }
        ha-card:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, var(--card-background-color) 0%, transparent);
        }
  - type: custom:mushroom-template-card
    primary: '{{ states(''sensor.time'') }}'
    secondary: '{{ states(''sensor.date'') }}'
    card_mod:
      style: |
        mushroom-card {
          text-align: center;
          --primary-text-color: orange;
          --secondary-text-color: orange;
          --card-primary-font-size: 20px;
          --card-secondary-font-size: 15px;
        }  
  - type: custom:simple-weather-card
    custom:
      - temp: sensor.pogoda_ulitsa_temperature
    entity: weather.prognoz
    name: []
    card_mod:
      style: |
        .weather__icon {
          {% set condition = states(config.entity) %} 
          {% if condition == 'partlycloudy' and is_state('sun.sun', 'below_horizon') %}
            {% set condition = condition + '-night' %}
          {% endif %}
          background-image: url("/local/weather_icons/anim/{{ condition }}.svg") !important;
        }
        .weather__icon--small {
          background-image: url("/local/weather_icons/anim/rainy.svg") !important;
        }
        ha-card {
          position: absolute !important;
          height: 100%;
          width: 100%;
          top: 0px;
          --ha-card-border-width: 0;
        }
        ha-card:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;

This is what I use thanks to @rhysb

weppa · June 9, 2023, 1:05pm

This is what I use thanks to @rhysb

type: custom:stack-in-card
cards:
  - type: custom:mushroom-entity-card
    entity: sensor.ups_load
    primary_info: name
    secondary_info: state
    name: Load
    icon_color: cyan
    card_mod:
      style: |
        ha-card {
          z-index: 1;
          --ha-card-border-width: 0;
        }
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.ups_load
        name: Temperature
        color: var(--cyan-color)
    height: 50
    hours_to_show: 24
    line_width: 3
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
    card_mod:
      style: |
        ha-card {
          position: absolute !important;
          height: 100%;
          width: 80%;
          right: 0px;
          bottom: 0px;
        }
        ha-card:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, var(--card-background-color), transparent);
        }

Andrea_Ciullini · June 9, 2023, 1:53pm

Hello, can I have more than one badge on a person card? Thank you

danwooller · June 9, 2023, 3:00pm

See @rhysb’s answer in this thread

paddy0174 · June 9, 2023, 8:20pm

I’m throwing this in here, as it seems useful and can reduce the waiting time for an answer drastically:

Did you know, that you can search only in this thread via the search icon in the header bar?

Eg if you look for “person”:
ha_230609_topic_search

I find that very useful, especially in a thread like this, where chances are high, that someone has asked a similar question before. And with, at the time of writing, over 6800 posts…

I constantly stumble upon nice new-for-me ideas with such searches and can only recommend to use it. Just to be clear, this is in no way meant to stop you from writing/asking in this thread, but as I said, sometimes one wants to have a quick answer or is just looking for some ideas. Feel free to try it!

fugley · June 10, 2023, 3:04am

this page Mushroom Inspiration! may also be very handy for ideas / code

yuval221183 · June 10, 2023, 8:31am

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: group.master_bedroom
    icon: mdi:bed
    icon_color: |
      {% if is_state(entity, 'on') %}
        #03A9F4
      {% else %}  
        grey
      {% endif %}
    primary: Master Bedroom
    secondary: >-
      {{ states('sensor.0x00158d00049fddee_device_temperature') | round(0) }}°C
      | {{ states('sensor.0x00158d00049fddee_device_temperature') | round(0) }}%
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: /mobile-dashboard/master-bedroom
    double_tap_action:
      action: navigate
      navigation_path: /dashboard-masrom/master-bedroom
    hold_action:
      action: toggle
    badge_icon: |
      {% if is_state_attr('climate.parents', 'hvac_action', 'heating') %}
        mdi:radiator
      {% elif is_state_attr('climate.parents', 'hvac_action', 'cooling') %}
        mdi:snowflake
      {% else %}  {% endif %}
    badge_color: |
      {% if is_state_attr('climate.parents', 'hvac_action', 'heating') %}
        red
      {% elif is_state_attr('climate.parents', 'hvac_action', 'cooling') %}
        #03A9F4
      {% else %} {% endif %}
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            font-size: 16px !important;
            position: relative;
            top: -50px;
            left: -155px;
            overflow: visible !important;
            white-space: normal !important;
          }
          .secondary {
            position: relative;
            overflow: visible !important;
            top: -52px;
            left: -155px;
          }
        mushroom-shape-icon$: |
          .shape {
            position: relative;
            left: -43px;
            top: 55px;
          }
        .: |
          :host {
            --mush-icon-size: 146px;
            --secondary-text-color: 
              {% if is_state_attr('climate.parents', 'hvac_action', 'heating') %}
                red
              {% elif is_state_attr('climate.parents', 'hvac_action', 'cooling') %}
                #03A9F4
              {% else %}
                #6c6c75
              {% endif %}
          }
        style: |
          mushroom-badge-icon {
            left: 69px;
            top: 25px;
          }
  - type: custom:mushroom-template-card
    primary: none
    icon_color: disabled
    icon: mdi:lightbulb
    secondary: none
    entity: light.fan_parents_room
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Master Bedroom Lights
          content:
            type: vertical-stack
            cards:
              - type: custom:mushroom-light-card
                entity: light.fan_parents_room
                name: Master Bedroom Light
                use_light_color: true
                show_brightness_control: true
                show_color_temp_control: false
                show_color_control: false
                collapsible_controls: true
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-width: 0;
                    }
              - type: custom:mushroom-light-card
                entity: light.fan_parents_room
                use_light_color: true
                show_brightness_control: true
                show_color_temp_control: false
                show_color_control: false
                collapsible_controls: true
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-width: 0;
                    }
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-width: 0;
                }
    hold_action:
      action: toggle
    double_tap_action:
      action: more-info
    badge_color: ''
    badge_icon: ''
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            {% if is_state(config.entity, 'on') %}
              {% if state_attr(config.entity, 'rgb_color') == none %}
                --icon-color: rgb(255,190,137) !important;
                --shape-color: rgb(255,190,137, 0.2 ) !important;
              {% else %}
                {% set r = state_attr(config.entity, 'rgb_color')[0] %}
                {% set g = state_attr(config.entity, 'rgb_color')[1] %}
                {% set b = state_attr(config.entity, 'rgb_color')[2] %}
                --icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
                --shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
              {% endif %}
            {% endif %}
          }
        .: |
          ha-card {
            width: 66px;
            margin-left: 68%;
            top: -178px;
            background: none;
          }
          :host {
            --mush-icon-size: 38px;
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: input_boolean.parents_sleep_mode
            state: 'on'
        chip:
          type: entity
          entity: input_boolean.in_bed
          icon: mdi:bed
          icon_color: blue
          content_info: none
      - type: conditional
        conditions:
          - entity: input_boolean.parents_room_occupancy
            state: 'on'
        chip:
          type: entity
          entity: input_boolean.parents_room_occupancy
          icon: mdi:motion-sensor
          icon_color: blue
          content_info: none
      - type: conditional
        conditions:
          - entity: fan.fan_parents_room
            state: 'on'
        chip:
          type: entity
          entity: fan.fan_parents_room
          icon: mdi:fan
          icon_color: blue
          content_info: none
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Master Bedroom Fan
                content:
                  type: custom:mushroom-fan-card
                  entity: fan.fan_parents_room
                  name: Master Bedroom Fan
                  icon_animation: true
                  fill_container: false
                  show_percentage_control: true
                  show_oscillate_control: false
                  collapsible_controls: true
                  card_mod:
                    style: |
                      ha-card {
                        --ha-card-border-width: 0;
                      }
    card_mod:
      style:
        .: |
          ha-card {
            width: 66px;
            margin-left: 76%;
            top: -186px;
            background: none;
            --chip-border-width: 0;
          }
          :host {
            --mush-icon-size: 20px;
            --mush-chip-spacing: -2.9px
          }
card_mod:
  style: |
    ha-card {
      height: 178px !important;
      width: 178px !important;
    }

Help, how can I make the icon of the fan rotate if the power of the fan is for example a green icon if the number is 3.

edwardtich · June 10, 2023, 8:36am

                          .shape {
                            {{ '--shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;' if states(config.entity) > '29' }}
                          }

rhysb · June 10, 2023, 8:40am

Try like this:

!type: custom:stack-in-card
cards:
  - type: custom:mushroom-fan-card
    entity: fan.bathroom_fan
    icon_animation: true
    card_mod:
      style: |
        ha-card {
          --ha-card-border-width: 0px;
        }
  - type: custom:mushroom-number-card
    entity: input_number.bathroom_fan_timer
    display_mode: buttons
    primary_info: none
    secondary_info: none
    icon_type: none
    card_mod:
      style: |
        ha-card {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 54px;
          width: calc(50% - 54px);
          --ha-card-border-width: 0px;
          --control-height: 30px;
          transition: all 0s;
          font-size: calc(var(--control-height) / 2);
        }
  - type: custom:mushroom-entity-card
    entity: script.bathroom_fan_timer
    primary_info: none
    secondary_info: none
    icon: mdi:power
    card_mod:
      style: |
        ha-card {
          position: absolute;
          top: 0px;
          right: 0px;
          width: fit-content;
          --ha-card-border-width: 0px;
        }
card_mod:
  style: |
    ha-card {
      {{ '--ha-card-background: color-mix(in srgb, var(--teal-color) 10%, var(--card-background-color));' if is_state('fan.bathroom_fan', 'on') }}
    }

yuval221183 · June 10, 2023, 8:43am

      style:
        ha-tile-icon$: |
          ha-svg-icon {
            {% if is_state(config.entity,'off') %}
              animation: ;
            {% elif is_state_attr(config.entity,'percentage',33) %}
              animation: rotate 1.2s linear infinite;
            {% elif is_state_attr(config.entity,'percentage',66) %}
              animation: rotate 0.7s linear infinite;
            {% elif is_state_attr(config.entity,'percentage',100) %}
              animation: rotate 0.5s linear infinite;
            {% elif is_state_attr(config.entity,'mode','auto') %}
              animation: rotate 1.2s linear infinite;
            {% elif is_state_attr(config.entity,'mode','sleep') %}
              animation: rotate 2s linear infinite;
            {%- endif %}
          }
          @keyframes rotate {
            100% { transform: rotate(360deg); }
          }
        ha-tile-info$: |
          .secondary {
            opacity: 80%;
          }

The intention is to insert it into the icon

edwardtich · June 10, 2023, 8:47am

{% if is_state(config.entity, '3') %} 
...
{% endif %}

                    card_mod:
                      style:
                        mushroom-shape-icon$: |
                          {% if is_state(config.entity, 'on') %} 
                          .shape {
                            {{ '--shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;' if states(config.entity) > '29' }}
                          }
                          @keyframes ping {
                            0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 1.7); }
                            100% { box-shadow: 0 0 0.1px 5px transparent; }
                          }
                          ha-icon {
                            --icon-animation: clip 1.5s linear infinite;
                          }
                          @keyframes clip {
                            50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
                          }
                                      {% endif %}
                          }

yuval221183 · June 10, 2023, 8:59am

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: group.master_bedroom
    icon: mdi:bed
    icon_color: |
      {% if is_state(entity, 'on') %}
        #03A9F4
      {% else %}  
        grey
      {% endif %}
    primary: Master Bedroom
    secondary: >-
      {{ states('sensor.0x00158d00049fddee_device_temperature') | round(0) }}°C
      | {{ states('sensor.0x00158d00049fddee_device_temperature') | round(0) }}%
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: /mobile-dashboard/master-bedroom
    double_tap_action:
      action: navigate
      navigation_path: /dashboard-masrom/master-bedroom
    hold_action:
      action: toggle
    badge_icon: |
      {% if is_state_attr('climate.parents', 'hvac_action', 'heating') %}
        mdi:radiator
      {% elif is_state_attr('climate.parents', 'hvac_action', 'cooling') %}
        mdi:snowflake
      {% else %}  {% endif %}
    badge_color: |
      {% if is_state_attr('climate.parents', 'hvac_action', 'heating') %}
        red
      {% elif is_state_attr('climate.parents', 'hvac_action', 'cooling') %}
        #03A9F4
      {% else %} {% endif %}
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            font-size: 16px !important;
            position: relative;
            top: -50px;
            left: -155px;
            overflow: visible !important;
            white-space: normal !important;
          }
          .secondary {
            position: relative;
            overflow: visible !important;
            top: -52px;
            left: -155px;
          }
        mushroom-shape-icon$: |
          .shape {
            position: relative;
            left: -43px;
            top: 55px;
          }
        .: |
          :host {
            --mush-icon-size: 146px;
            --secondary-text-color: 
              {% if is_state_attr('climate.parents', 'hvac_action', 'heating') %}
                red
              {% elif is_state_attr('climate.parents', 'hvac_action', 'cooling') %}
                #03A9F4
              {% else %}
                #6c6c75
              {% endif %}
          }
        style: |
          mushroom-badge-icon {
            left: 69px;
            top: 25px;
          }
  - type: custom:mushroom-template-card
    primary: none
    icon_color: disabled
    icon: mdi:lightbulb
    secondary: none
    entity: light.fan_parents_room
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Master Bedroom Lights
          content:
            type: vertical-stack
            cards:
              - type: custom:mushroom-light-card
                entity: light.fan_parents_room
                name: Master Bedroom Light
                use_light_color: true
                show_brightness_control: true
                show_color_temp_control: false
                show_color_control: false
                collapsible_controls: true
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-width: 0;
                    }
              - type: custom:mushroom-light-card
                entity: light.fan_parents_room
                use_light_color: true
                show_brightness_control: true
                show_color_temp_control: false
                show_color_control: false
                collapsible_controls: true
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-width: 0;
                    }
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-width: 0;
                }
    hold_action:
      action: toggle
    double_tap_action:
      action: more-info
    badge_color: ''
    badge_icon: ''
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            {% if is_state(config.entity, 'on') %}
              {% if state_attr(config.entity, 'rgb_color') == none %}
                --icon-color: rgb(255,190,137) !important;
                --shape-color: rgb(255,190,137, 0.2 ) !important;
              {% else %}
                {% set r = state_attr(config.entity, 'rgb_color')[0] %}
                {% set g = state_attr(config.entity, 'rgb_color')[1] %}
                {% set b = state_attr(config.entity, 'rgb_color')[2] %}
                --icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
                --shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
              {% endif %}
            {% endif %}
          }
        .: |
          ha-card {
            width: 66px;
            margin-left: 68%;
            top: -178px;
            background: none;
          }
          :host {
            --mush-icon-size: 38px;
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: input_boolean.parents_sleep_mode
            state: 'on'
        chip:
          type: entity
          entity: input_boolean.parents_sleep_mode
          icon: mdi:bed
          icon_color: blue
          content_info: none
      - type: conditional
        conditions:
          - entity: input_boolean.parents_room_occupancy
            state: 'on'
        chip:
          type: entity
          entity: input_boolean.parents_room_occupancy
          icon: mdi:motion-sensor
          icon_color: blue
          content_info: none
      - type: conditional
        conditions:
          - entity: fan.fan_parents_room
            state: 'on'
        chip:
          type: entity
          entity: fan.fan_parents_room
          icon: mdi:fan
          icon_color: green
          content_info: none
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Master Bedroom Fan
                content:
                  type: custom:mushroom-fan-card
                  entity: fan.fan_parents_room
                  name: Master Bedroom Fan
                  icon_animation: true
                  fill_container: false
                  show_percentage_control: true
                  show_oscillate_control: false
                  collapsible_controls: true
          card_mod:
            style:
              mushroom-shape-icon$: |
                {% if is_state(config.entity, 'on') %} 
                .shape {
                  {{ '--shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;' if states(config.entity) > '29' }}
                }
                @keyframes ping {
                  0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 1.7); }
                  100% { box-shadow: 0 0 0.1px 5px transparent; }
                }
                ha-icon {
                  --icon-animation: clip 1.5s linear infinite;
                }
                @keyframes clip {
                  50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
                }
                            {% endif %}
                }
    card_mod:
      style:
        .: |
          ha-card {
            width: 66px;
            margin-left: 76%;
            top: -186px;
            background: none;
            --chip-border-width: 0;
          }
          :host {
            --mush-icon-size: 20px;
            --mush-chip-spacing: -2.9px
          }
card_mod:
  style: |
    ha-card {
      height: 178px !important;
      width: 178px !important;
    }

What did I do wrong, that I don’t see a number inside the icon?

For example like here

And how can you make the lamp blink or have a red mark around that it is on

danwooller · June 10, 2023, 9:57am

It’s all there (if you know where to look for a @rhysb) post.

Andrea_Ciullini · June 10, 2023, 4:25pm

Thank you. I used search and i found this:

it is a template and no person card. So I asked.
Thank you

paddy0174 · June 10, 2023, 7:54pm

I’m sorry if that came of aimed at you! It wasn’t!

I took “person” as a search because I was looking for a person card (still am), and so I thought it might be a good idea to remind people of the thread search. That’s all!

danwooller · June 10, 2023, 9:22pm

I too have been looking for ideas for a person card all over. One thing, I wanted to integrate a map but we don’t go out to work so that seemed redundant, so I can’t up with the idea to have a conditional map card if someone isn’t home. Beyond that, it all seems a bit lacking.

Please post if you are blessed with inspiration.

paddy0174 · June 10, 2023, 10:11pm

Interesting idea, that is my problem, too. My wife an me both do work-from-home, so a map is something I’d only occasionnaly need.

If I stumble upon something, I’ll let you know for sure! For now I’m trying to find a good generator for Memojis, still don’t own any Apple device.

yuval221183 · June 11, 2023, 6:25am

 script.bathroom_fan_timer

script:
  start_fantimer:
    sequence:
    - delay: "00:{{ states('input_number.toiletfan_input') | int }}:00"
    - data:
        entity_id: fan.toilet_fan
      service: fan.turn_off

am I wrong? right?

Vandana · June 11, 2023, 7:47am

Thanks a lot …

danwooller · June 11, 2023, 7:50am

Are you asking about scripting? If so, this isn’t the topic, try searching the forum to see what questions people have asked before.

Best of