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

Hi! Here is my yaml:

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: true
  - 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:

2 Likes

I think this is to do with the way the simple-thermostat card displays buttons for controlling the thermostat (and depends on what controls are supported by the thermostat). So the solution should lie with adjusting that ‘control’ setting. Have a look at this section of the card’s config options. By playing around with the options you should be able to make the empty ‘buttons’ go away (I think…).

1 Like

Hi Piitaya.

I have a future request.

I have automations which are connected to the booleans.

I tried to add pictures but unfotunately when displaying the entities with pictures it is not possible to see their state. Within mushroom entity card the only way to do that is to display state as a secondary info like that :

ı would love to see their state like maybe in black and white when they are off. Currently to colorise states of specific entities, the only thing I can do is to use mdi icons.

I can do that with using picture entites but it then doesn’t suit my minimal setup.

Hope this will be available in the near future.

Wow, thanks!

Screen Shot 2022-06-02 at 7.31.04 PM

1 Like

Hi :slightly_smiling_face:
I think there is already a feature request on GitHub for this. That’s a good idea :slightly_smiling_face:

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.

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

1 Like

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

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.

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)


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

1 Like

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.

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

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:

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

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

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

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.

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

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

Have you tried the code a posted?

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

300px:

150px:

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

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