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

Share your Projects!
,
1029

You definitely have to add configurtion details to the swiper card. In an unconfigured way you’ll get like nothing than a centered card.

As I only dived into this swipe-card topic to steal ideas - :wink: - maybe this code will get you a base to tinker around:

    type: custom:swipe-card
    card_width: 155px
    start_card: 2
    parameters:
      effect: cover slide
      grabCursor: true
      centeredSlides: true
      slidesPerView: auto
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Home
            secondary: ''
            icon: mdi:home
            icon_color: blue
            tap_action: null
            action: navigate
            navigation_path: '1'
            layout: vertical
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Licht
            secondary: ''
            icon: mdi:lightbulb
            icon_color: yellow
            layout: vertical
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Jalousie
            secondary: ''
            icon: mdi:window-shutter
            icon_color: green
            layout: vertical
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Sonos
            secondary: ''
            icon: mdi:cast-variant
            icon_color: red
            layout: vertical

The accompanying thread for the swiper-card should give you more ideas.

Aunt Edith says:
Cut the code cause it contained the view and header of a new dashboard.

1030

Could you share your code for this, looks really nice!

1 Like
1031

Sure thing!

type: horizontal-stack
cards:
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    cards:
      - type: custom:mushroom-template-card
        primary: Thermostat
        secondary: |
          Currently: {{ state_attr('climate.3family_room', 'hvac_action') }}
        icon: |-
          {% set mode = states('climate.3family_room') %}
          {% if mode == 'cool' %}
          mdi:snowflake
          {% else %}
          mdi:fire
          {% endif %}
        icon_color: |-
          {% set status = state_attr('climate.3family_room','hvac_action') %}
          {% if status == 'cooling' %}
          blue
          {% elif status == 'heating' %}
          orange
          {% else %}
          grey
          {% endif %}
        tap_action: none
        style: |
          ha-card {
            padding-bottom: 1px !important;
          }
      - type: custom:simple-thermostat
        style: |
          ha-card {
            --st-font-size-xl: 28px;
            --st-font-size-m: 20px;
            --st-font-size-title: 20px;
            --st-font-size-sensors: 14px;
            --st-font-size-toggle-label: 6px
            --st-spacing: 0px;
            --st-default-spacing: 1px;
          }
        entity: climate.3family_room
        header: false
        hide:
          temperature: true
          state: true
        layout:
          mode:
            headings: false
            icons: true
            names: false
          step: row
        decimals: '0'
        step_size: '1'
        control:
          - hvac
      - type: custom:mushroom-chips-card
        alignment: justify
        chips:
          - type: entity
            entity: sensor.3family_room_humidity
            icon: mdi:water-percent
            icon_color: cyan
          - type: entity
            entity: sensor.3family_room_temperature
            icon: mdi:home-thermometer
        style: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
          }
      - type: custom:mushroom-chips-card
        alignment: justify
        chips:
          - type: template
            entity: climate.3family_room
            content: |
              {{ state_attr(entity, 'fan_mode') }}
            icon: mdi:fan
            icon_color: cyan
          - type: entity
            entity: weather.home
            icon: mdi:cloud
            icon_color: cyan
        style: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
          }
3 Likes
1032

Thank you. But I tried different configurations. The cards stayed always the same size. No matter if I used “px” or “%”. Also removing horizontal-Stack before each card didn’t changed anything.

1033

Hi everyone.
I travel a lot for work and was wondering if there was a template I could use to update the mushroom-person-card location to the current location from the Companion App (locality)

Screenshot_20220602-112133
Screenshot_20220602-1121331395×2738 186 KB

in real-time without having to edit the zones in the config yaml file. 2022-06-04_03-05-52

1 Like
1034

I thought I would give back and share my Mushroom graph card. It uses stack-in-card to combine mushroom-entity-card with mini-graph-card. This is the dual version, but it is easy to modify for a single graph.

Mushroom Graph
Mushroom Graph813×343 22.1 KB 

type: custom:vertical-stack-in-card
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.family_room_sensor_temperature
        primary_info: state
        secondary_info: name
        name: Temperature
        icon_color: green
      - type: custom:mushroom-entity-card
        entity: sensor.family_room_sensor_humidity
        primary_info: state
        secondary_info: name
        name: Humidity
        icon_color: blue
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.family_room_sensor_temperature
        name: Temperature
        color: var(--green-color)
      - entity: sensor.family_room_sensor_humidity
        name: Humidity
        color: var(--blue-color)
        y_axis: secondary
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade

Edit 13-1-23: Change to vertical-stack-in-card to remove border lines.

74 Likes
1035

I got it almost working, except for the “Currently”.

secondary: |
  Currently: {{ state_attr('climate.kantoor', 'hvac_action') }}

I don’t exactly know what it does, but my cliemate unit doens’t have ‘hvac_action’ as an attribtue:

image
image1009×369 29.3 KB

So I think i have to do something with ‘state’, could you help me out?

1036

As you can see in your attributes your state is ‘hvac_modes’ and not like davidnestico ‘hvac_action’. Change that in your template to that.

image

1 Like
1037

Yes tried that but it then lists the value of that. So I get an enumeration of the array.

1038

I’m not sure if you do what I said or if I get what you say. :wink:

{{ state_attr('climate.kantoor', 'hvac_modes') }}

Should get you whatver state attribute you hvac has right now.

If you’re fine with the state for itself you could just use:

{{ states('climate.kantoor') }}

Check these outcomes in Developer Tools and maybe have another look to understand what what means.

1039

just the state is perfect for me. Thanks. and I will fiddle with the templating a bit just de educate myself a bit, thanks!

What I mean by the first part is the following, if I do:

{{ state_attr('climate.kantoor', 'hvac_modes') }}

This shows:

image

Never the less; it is solved. tnx

1040

Do you have a nest thermostat? That’s what I have so it displays that.

1041

Have you tried the code a posted?

Here are two screeshots with just the code from above an changed px.

300px:

image
image1440×769 27.8 KB

150px:

image
image1440×851 42.9 KB

1042

The person card is not templatable but you can pretend to do it.

I’ve built this card combination the other day that should fit your needs:

  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-person-card
        entity: person.YOU #<-- your person entity here
        use_entity_picture: true
        layout: vertical
        hold_action:
          action: none
        hide_name: true
        hide_state: true
        fill_container: true
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            content: >-
              {{ state_attr('sensor.hd1913_geocoded_location', 'locality') }} #<--your geocode entity
            card_mod: null
            style: |
              ha-card {
                --chip-box-shadow: 0px 0px;
              }

image

The green icon is still depending on the home/away status for your person entity. And of course you could mix up the template to show special state for ‘home’.

image

6 Likes
1044

You are awesome man. It worked like a charm. Thank you very much for your help.

1045

Thanks Mate. I´m stupid.

Yes i used this code. But: I copied the title with it which of course didnt worked :man_facepalming:

Saved the day!

1046

Here is my combination welcome card. Tried to find a good way to display family status with more than two members. I will be adding better away & location status once I work that out.

Light mode:

Welcome-light
Welcome-light890×686 62.6 KB

Dark mode:

Welcome-dark
Welcome-dark897×696 56.2 KB 

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: menu
          - type: alarm-control-panel
            entity: alarm_control_panel.home_alarm
            content_info: none
            name: Alarm
          - type: template
            entity: lock.front_door
            icon: >-
              {{ 'mdi:lock' if is_state('lock.front_door', 'locked') else
              'mdi:lock-open' }}
            icon_color: '{{ ''green'' if is_state(''lock.front_door'', ''locked'') else ''red'' }}'
            content: null
            tap_action:
              action: more-info
          - type: conditional
            conditions:
              - entity: group.all_lights
                state: 'on'
            chip:
              type: template
              icon: mdi:lightbulb
              content: >-
                {{ expand(states.group.all_lights) | selectattr( 'state', 'eq',
                'on') | list | count }}
              tap_action:
                action: more-info
              entity: group.all_lights
              icon_color: grey
          - type: conditional
            conditions:
              - entity: group.all_windows
                state: 'on'
            chip:
              type: template
              icon_color: grey
              icon: mdi:window-open
              content: >-
                {{ expand(states.group.all_windows) | selectattr( 'state', 'eq',
                'on') | list | count }}
              tap_action:
                action: more-info
              entity: group.all_windows
          - type: conditional
            conditions:
              - entity: group.external_doors
                state: 'on'
            chip:
              type: template
              icon_color: grey
              icon: mdi:door-open
              content: >-
                {{ expand(states.group.external_doors) | selectattr( 'state',
                'eq', 'on') | list | count }}
              tap_action:
                action: more-info
              entity: group.external_doors
          - type: conditional
            conditions:
              - entity: group.water_leak
                state: 'on'
            chip:
              type: template
              icon_color: light-blue
              icon: mdi:water-alert
              tap_action:
                action: more-info
              entity: group.water_leak
              card_mod:
                style: |
                  ha-card {
                    animation: blink 1s linear infinite;
                  }
                  @keyframes blink {
                    50% {opacity: 0;}
                  }  
          - type: conditional
            conditions:
              - entity: group.smoke_alarm
                state: 'on'
            chip:
              type: template
              icon_color: red
              icon: mdi:fire-alert
              tap_action:
                action: more-info
              entity: group.smoke_alarm
              card_mod:
                style: |
                  ha-card {
                    animation: blink 1s linear infinite;
                  }
                  @keyframes blink {
                    50% {opacity: 0;}
                  }  
        card_mod:
          style: |
            :host {
              --ha-card-background: var(--card-background-color);
            }
      - square: false
        columns: 2
        type: grid
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: person.rhys
                        state: home
                    chip:
                      type: entity
                      entity: person.rhys
                      content_info: nam
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                              --chip-background: rgba(var(--rgb-state-person-home), 0.4);
                              margin-top: 5px;
                              margin-bottom: 10px;
                          } 
                  - type: conditional
                    conditions:
                      - entity: person.sarah
                        state: home
                    chip:
                      type: entity
                      entity: person.sarah
                      content_info: none
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                              --chip-background: rgba(var(--rgb-state-person-home), 0.4);
                              margin-top: 5px;
                              margin-bottom: 10px;
                          } 
                  - type: conditional
                    conditions:
                      - entity: person.elijah
                        state: home
                    chip:
                      type: entity
                      entity: person.elijah
                      content_info: none
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                              --chip-background: rgba(var(--rgb-state-person-home), 0.4);
                              margin-top: 5px;
                              margin-bottom: 10px;
                          } 
                  - type: conditional
                    conditions:
                      - entity: person.michaela
                        state: home
                    chip:
                      type: entity
                      entity: person.michaela
                      content_info: none
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                              --chip-background: rgba(var(--rgb-state-person-home), 0.4);
                              margin-top: 5px;
                              margin-bottom: 10px;
                          } 
                alignment: start
                card_mod:
                  style: |
                    ha-card { 
                      margin-left: 8px;
                    }
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: person.rhys
                        state_not: home
                    chip:
                      type: entity
                      entity: person.rhys
                      content_info: none
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                            {% if is_state('person.rhys', 'not_home') %}
                              --chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
                            {% elif is_state('person.rhys', 'unknown') %}
                              --chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
                            {% else %}
                              --chip-background: rgba(var(--rgb-state-person-zone), 0.4);
                            {% endif %} 
                              margin-top: 5px;
                              margin-bottom: 10px;
                          } 
                  - type: conditional
                    conditions:
                      - entity: person.sarah
                        state_not: home
                    chip:
                      type: entity
                      entity: person.sarah
                      content_info: none
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                            {% if is_state('person.sarah', 'not_home') %}
                              --chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
                            {% elif is_state('person.sarah', 'unknown') %}
                              --chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
                            {% else %}
                              --chip-background: rgba(var(--rgb-state-person-zone), 0.4);
                            {% endif %} 
                              margin-top: 5px;
                              margin-bottom: 10px;
                          } 
                  - type: conditional
                    conditions:
                      - entity: person.elijah
                        state_not: home
                    chip:
                      type: entity
                      entity: person.elijah
                      content_info: none
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                            {% if is_state('person.elijah', 'not_home') %}
                              --chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
                            {% elif is_state('person.elijah', 'unknown') %}
                              --chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
                            {% else %}
                              --chip-background: rgba(var(--rgb-state-person-zone), 0.4);
                            {% endif %} 
                              margin-top: 5px;
                              margin-bottom: 10px;
                          } 
                  - type: conditional
                    conditions:
                      - entity: person.michaela
                        state_not: home
                    chip:
                      type: entity
                      entity: person.michaela
                      content_info: none
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                            {% if is_state('person.michaela', 'not_home') %}
                              --chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
                            {% elif is_state('person.michaela', 'unknown') %}
                              --chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
                            {% else %}
                              --chip-background: rgba(var(--rgb-state-person-zone), 0.4);
                            {% endif %} 
                              margin-top: 5px;
                              margin-bottom: 10px;
                          } 
                alignment: end
                card_mod:
                  style: |
                    ha-card { 
                      margin-right: 8px;
                    }
      - type: custom:mushroom-title-card
        title: |-
          {% set time = now().hour %}
          {% if (time >= 18) %} 
           Good Evening, {{user}}!
          {% elif (time >= 12) %}
           Good Afternoon, {{user}}!
          {% elif (time >= 5) %}
           Good Morning, {{user}}!
          {% else %}
           Hello, {{user}}
          {% endif %}
        subtitle: ''
      - type: custom:simple-weather-card
        entity: weather.dark_sky
        name: in Auckland
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              background: none;
            }
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: ''
            secondary: House
            icon: mdi:home
            layout: vertical
            icon_color: blue
            tap_action:
              action: navigate
              navigation_path: house
            card_mod:
              style: |
                ha-card { 
                  background: var(--card-background-color);
                  width: 66px;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: Lights
            icon: mdi:lightbulb
            icon_color: amber
            layout: vertical
            tap_action:
              action: navigate
              navigation_path: lights
            card_mod:
              style: |
                ha-card { 
                  background: var(--card-background-color);
                  width: 66px;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: Secure
            icon: mdi:shield
            icon_color: green
            layout: vertical
            tap_action:
              action: navigate
              navigation_path: security
            card_mod:
              style: |
                ha-card { 
                  background: var(--card-background-color);
                  width: 66px;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: Media
            icon: mdi:speaker
            layout: vertical
            icon_color: red
            tap_action:
              action: navigate
              navigation_path: media
            card_mod:
              style: |
                ha-card { 
                  background: var(--card-background-color);
                  width: 66px;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: Net
            icon: mdi:lan
            layout: vertical
            icon_color: cyan
            tap_action:
              action: navigate
              navigation_path: media
            card_mod:
              style: |
                ha-card { 
                  background: var(--card-background-color);
                  width: 66px;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                }
card_mod:
  style: |
    ha-card {
      padding: 2px;
      background: rgba(var(--rgb-primary-text-color), 0.01);
    }

Edit: Tidy up code a bit

57 Likes
1047

This is amazing and exactly what I’ve wanted, and not had the ability to do, so I’ve stolen it.

Got your dashboard on GitHub?

6 Likes
1048

No sorry, not yet. I’ll keep posting more Mushroom cards as I refine them :slight_smile:

4 Likes
1049

This tweak adds color to the card background. The color light version will adjust with the light color.

It looks great in dark mode, but not so much in light mode. Does anyone know how to detect the dark/light mode of lovelace?

Lights - Dark
Lights - Dark878×470 20.9 KB

Normal light version:

      - type: custom:mushroom-light-card
        entity: light.elijahs_light
        name: Light
        fill_container: false
        hide_state: false
        use_light_color: false
        show_brightness_control: true
        show_color_temp_control: false
        show_color_control: false
        collapsible_controls: true
        card_mod:
           style: |
             ha-card {
               {% if is_state(config.entity, 'on') %}
                  background: rgba(255, 152, 0, 0.1);
               {%- else -%}
               {%- endif %}
             }

Colored light version:

      - type: custom:mushroom-light-card
        entity: light.elijahs_night_light
        name: Night Light
        use_light_color: true
        show_brightness_control: true
        show_color_temp_control: false
        show_color_control: true
        collapsible_controls: true
        tap_action:
          action: toggle
        card_mod:
           style: |
             ha-card {
               {% 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] %}
               background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
             }
21 Likes