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

Hi all

I have a problem with my mushrrom cards, the card itself cutā€™s the text instead of increase the size as you can see in the image :

the code is this :

square: false
columns: 1
type: grid
cards:
  - type: horizontal-stack
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:mushroom-template-card
            primary: Deco Living Room
            picture: /local/wifi.png
            layout: vertical
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    picture: /local/ip.png
                    icon_color: yellow
                    content: '{{state_attr('''', ''ip'') }}'
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                  - type: template
                    picture: /local/internet.png
                    icon_color: blue
                    content: >-
                      {{state_attr('device_tracker.living_room_deco',
                      'internet_online')}}
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                  - type: template
                    picture: /local/connected.png
                    icon_color: blue
                    content: >-
                      {{ device_entities('966a1db5ec1a0fbd78bd3eec7f1cb447') |
                      map('state_attr', 'friendly_name') | list}}
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                alignment: center
                card_mod:
                  style: |
                    ha-card {
                      position: center;
                      margin: 0px 0px 0px 0px;
                      left: 0px;
                      top: calc(25% - px);
                      }
                      .chip-container {
                      flex-flow: column !important;
                      }
                    }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:mushroom-template-card
            primary: Deco Office
            picture: /local/wifi.png
            layout: vertical
            icon_color: yellow
            tap_action:
              action: navigate
              navigation_path: /lovelace/quarto
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    picture: /local/ip.png
                    icon_color: yellow
                    content: '{{state_attr('''', ''ip'') }}'
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                  - type: template
                    picture: /local/internet.png
                    icon_color: blue
                    content: '{{state_attr(''device_tracker.office_deco'', ''internet_online'') }}'
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                  - type: template
                    picture: /local/connected.png
                    icon_color: blue
                    content: '{{ device_entities(''89e54cf6074785d49b935749cdb3c8b5'') |
          map(''state_attr'', ''friendly_name'')  
                              | list }}'
                    card_mod:
                      style: |
                        ha-card {
                          --chip-box-shadow: none;
                          --ha-card-box-shadow: none;
                          --chip-border-width: 0;
                        }
                alignment: center
                card_mod:
                  style: |
                    ha-card {
                      position: center;
                      margin: 0px 0px 0px 0px;
                      left: 0px;
                      top: calc(25% - px);
                      }
                      .chip-container {
                      flex-flow: column !important;
                      }
                    }

What im missing or doing wrong?

Thanks all

Template card use Jinja2 template which are rendered server side. Thatā€™s why you can use the same template syntax with your automations, template sensors, markdown card and mushroom template cards.

If you use a many templates and ,have a lot of entities this can significantly increase your cpu.

1 Like

Can you share the template that you use in your card? There may have some optimization to do.

It is a bit random and not specific to these cards, but here is an exmaple that causes high CPU:

square: true
columns: 3
type: grid
cards:
  - type: custom:mushroom-template-card
    primary: Idag
    secondary: >-
      {{
      (states('sensor.elforbrukning_totalt_dag')|float-states('sensor.elforbrukning_laddning_dag')|float)|round(0)
      }} kWh / {{ states('sensor.elkostnad_huset_dag')|round(0) }} kr
    icon: mdi:calendar-outline
    icon_color: blue
    layout: vertical
    entity: sensor.elkostnad_huset_dag
    tap_action:
      action: more-info
  - type: custom:mushroom-template-card
    entity: sensor.elkostnad_huset_manad
    primary: MĆ„nad
    secondary: >-
      {{
      (states('sensor.elforbrukning_totalt_manad')|float-states('sensor.elforbrukning_laddning_manad')|float)|round(0)
      }} kWh / {{ states('sensor.elkostnad_huset_manad')|round(0) }} kr
    icon: mdi:calendar-month-outline
    icon_color: blue
    layout: vertical
    tap_action:
      action: more-info
    style: |
      ha-card {
         margin: 0px -5px 0px -5px;
       }
  - type: custom:mushroom-template-card
    primary: Faktura {{ (now().timestamp() | timestamp_custom('%B'))[:3]|lower }}
    secondary: >-
      {{ states('sensor.elkostnad_huset_manad')|round(0) +
      states('sensor.elkostnad_laddning_manad')|round(0) }} + 707 kr
    icon: mdi:cash-multiple
    icon_color: blue
    layout: vertical

Hi Iā€™m trying to make something similar.
Will you share your code?

This is what I ended up with

1 Like

Pretty much all of it :slight_smile:

Hi !

I asked the same question on the other post, but I think it better fits hereā€¦

I love the idea and the compact and efficient use of the space.

I will probably use and modify it a lot !

On the other hand, I am trying to remove as much as possible cardmod and stack-in-card in order to stay closer to mushroom initial idea and be capable to use UI only.

I am thus trying to bring the same simplicity using only mushroom template and chips, but I have one problem remaining : Removing card mod is easy (despite less beautifull), but I struggle to find the equivalent of grid or horizontal/vertical stack that would allow to merge borders of cards while not breaking UI. Does this exist ?

Dear all, especially @piitaya .

While I love the concept behind mushroom, I am very frequently struggling with the fact that in order to tune it more you need stack-in cards or cardmod and thus breaks the UI philosophy.

Is there a solution to create a sort of grid of mushroom card and chips, unified with the same background, while keeping the UI management?
I am currently strugling on 3 aspects:

  • creating a grid with cards of diffrents sizes
  • setting mushroom chips in a vertical column (this could be done chips by chips, but losing the capacity to rearrange dynamicaly with conditionnal chips)
  • re-unite all this into a single card with unified background

image

Thanks for the work performed, and congratulation to all the yaml and cardmod experts that create wonderfull dashboards !

5 Likes

Hi, did you find a solution for this?

I donā€™t believe it does.

Iā€™m missing something obvious hereā€¦ the ā€œsound machineā€ chip is not orange even though the template code run in dev tools will return ā€œorangeā€. If i remove the templating syntax and just set icon_color to orange the chip icon turns orange.

what is wrong with this code?

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.kids_room_temperature
  - type: entity
    entity: binary_sensor.kids_room_motion
  - type: entity
    entity: sensor.kids_room_humidity
  - type: entity
    entity: switch.kids_room_sound_machine
    double_tap_action:
      action: none
    tap_action:
      action: toggle
    hold_action:
      action: none
    icon_color: |
      {% if is_state("switch.kids_room_sound_machine", "on") %}
        orange
      {% else %}
        #44739e
      {% endif %}

A warning about version 2023.2.0
In this PR, all of the --rgb-{color}-color CSS variables were replaced with this format --{color}-color. Anything that uses these variables will no longer have a color. Also, they are now in hex format instead of R, G, B. If you used these in rgba() there is no replacement other than adding the variables to a theme. It looks like mushroom still has --rgb-{color} variables, but they do not work outside of mushroom cards.

As a temporary fix, I added this to the themes I am using.

  rgb-amber-color: 255, 193, 7
  rgb-black-color: 0, 0, 0
  rgb-blue-grey-color: 96, 125, 139
  rgb-blue-color: 33, 150, 243
  rgb-brown-color: 121, 85, 72
  rgb-cyan-color: 0, 188, 212
  rgb-deep-orange-color: 255, 87, 34
  rgb-deep-purple-color: 103, 58, 183
  rgb-green-color: 76, 175, 80
  rgb-grey-color: 158, 158, 158
  rgb-indigo-color: 63, 81, 181
  rgb-light-blue-color: 3, 169, 244
  rgb-light-green-color: 139, 195, 74
  rgb-lime-color: 205, 220, 57
  rgb-orange-color: 255, 152, 0
  rgb-pink-color: 233, 30, 99
  rgb-purple-color: 156, 39, 176
  rgb-red-color: 244, 67, 54
  rgb-teal-color: 0, 150, 136
  rgb-white-color: 255, 255, 255
  rgb-yellow-color: 255, 235, 59
2 Likes

try this instead:

{% if is_state('switch.kids_room_sound_machine', 'on') %}

Thanks again.
i assume as this card isnā€™t mushroom isnā€™t possible animate the chevron?

Hi, can someone explain to me how to make my mushroom-person-cards responsive?

type: horizontal-stack
cards:
  - type: horizontal-stack
    cards:    
      - type: custom:stack-in-card
        mode: horizontal
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-person-card
                entity: person.ugo
                alignment: left
                style: |
                    ha-card {
                    #   height: 170px !important;
                    #   width: 240px !important;
                    # padding: 12px 20px 12px 20px!important;
                    {
                      --mdc-icon-size: 180px;
                    }
                    {
                     height: 200px !important;
                     }
                use_entity_picture: true
                icon_type: entity-picture
                entity_picture: "/local/pictures/person_ugo.png"
                name: Ugo
                layout: vertical
                tap_action:
                  action: more-info
                  browser_mod:
                    command: popup
                    deviceID: this
                    title: Ugo
                    card:
                      type: custom:mod-card
                      style: |
                        ha-card {
                          padding-right: 5px;
                          padding-left: 5px;
                          padding-bottom: 5px;
                        }
                      card:
                        type: vertical-stack
                        cards:
                          - type: custom:mushroom-entity-card
                            entity: sensor.iphone_8_ugo_geocoded_location
                            primary_info: none
                            icon: mdi:map-marker
                            icon_color: yellow
                          - type: horizontal-stack
                            cards:
                              - type: map
                                entities:
                                  - entity: device_tracker.iphone_8_ugo_2
                                aspect_ratio: '2'
                                use_entity_picture: true
              - type: custom:mushroom-chips-card
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: none;
                    --chip-height: 43px
                  }
                chips:
                  - type: template
                    icon_color: |2-
                          {% set state=states('sensor.iphone_7_gabri_battery_state') %}
                                {% if state=='Charging' %}
                                green
                                {% elif state=='Not Charging' %}
                                #6f6f6f
                              {% endif %}
                    entity: sensor.iphone_8_ugo_battery_state
                    content: '{{ states(entity) }}'
                    icon: mdi:power-plug
                    tap_action:
                      action: more-info
                  - type: template
                    entity: sensor.iphone_8_ugo_battery_level
                    content: '{{ states(entity) }} %'
                    icon: |2
                                {% set bl = states('sensor.iphone_8_ugo_battery_level') | int %}
                                {% if bl < 10 %} mdi:battery-outline
                                {% elif bl < 20 %} mdi:battery-10
                                {% elif bl < 30 %} mdi:battery-20
                                {% elif bl < 40 %} mdi:battery-30
                                {% elif bl < 50 %} mdi:battery-40
                                {% elif bl < 60 %} mdi:battery-50
                                {% elif bl < 70 %} mdi:battery-60
                                {% elif bl < 80 %} mdi:battery-70
                                {% elif bl < 90 %} mdi:battery-80
                                {% elif bl < 100 %} mdi:battery-90
                                {% elif bl == 100 %} mdi:battery
                                {% else %} mdi:battery-unknown
                                {% endif %}
                    icon_color: |2-
                                {% set bl = states('sensor.iphone_8_ugo_battery_level') | int %}
                                {% if bl < 10 %} red
                                {% elif bl < 20 %} red
                                {% elif bl < 30 %} red
                                {% elif bl < 40 %} orange
                                {% elif bl < 50 %} orange
                                {% elif bl < 60 %} green
                                {% elif bl < 70 %} green
                                {% elif bl < 80 %} green
                                {% elif bl < 90 %} green
                                {% elif bl < 100 %} green
                                {% elif bl == 100 %} green
                                {% else %} grey
                                {% endif %}
                    tap_action:
                      action: more-info
                  - type: entity
                    entity: proximity.home
                    icon_color: white
                    card_mod: null
                    style: |
                      ha-card {
                        box-shadow: 0px 0px;
                      }
                
#-------------------------------------------------------------------------------
        #   - type: 'custom:mushroom-person-card'
        #     entity: person.gabriella_2
        #     name: Gabriella
        #     template: sensor_person
        #     use_entity_picture: true
        #     entity_picture: "/local/pictures/person_gabriella.png"
        #     variables:
        #       battery_entity: sensor.iphone_7_gabri_battery_level 

      - type: horizontal-stack
        cards:    
          - type: custom:stack-in-card
            mode: vertical
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-person-card
                    entity: person.gabriella_2
                    use_entity_picture: true
                    name: Gabriella
                    layout: vertical
                    tap_action:
                      action: more-info
                      browser_mod:
                        command: popup
                        deviceID: this
                        title: Gabriella
                        card:
                          type: custom:mod-card
                          style: |
                            ha-card {
                              padding-right: 15px;
                              padding-left: 15px;
                              padding-bottom: 15px;     
                            }
                          card:
                            type: vertical-stack
                            cards:
                              - type: custom:mushroom-entity-card
                                entity: sensor.iphone_7_gabri_geocoded_location
                                primary_info: none
                                icon: mdi:map-marker
                                icon_color: yellow
                              - type: horizontal-stack
                                cards:
                                  - type: map
                                    entities:
                                      - entity: device_tracker.iphone_7_gabri_2
                                    aspect_ratio: '2'
                                    use_entity_picture: true
                  - type: custom:mushroom-chips-card
                    style: |
                      ha-card {
                        --chip-box-shadow: none;
                        --chip-background: none;
                        --chip-spacing: none;
                        --chip-height: 43px
                      }
                    chips:
                      - type: template
                        icon_color: |2-
                              {% set state=states('sensor.iphone_7_gabri_battery_state') %}
                                    {% if state=='Charging' %}
                                    green
                                    {% elif state=='Not Charging' %}
                                    #6f6f6f
                                  {% endif %}
                        entity: sensor.iphone_7_gabri_battery_state
                        content: '{{ states(entity) }}'
                        icon: mdi:power-plug
                        tap_action:
                          action: more-info
                      - type: template
                        entity: sensor.iphone_7_gabri_battery_level
                        content: '{{ states(entity) }} %'
                        icon: |2
                                    {% set bl = states('sensor.iphone_7_gabri_battery_level') | int %}
                                    {% if bl < 10 %} mdi:battery-outline
                                    {% elif bl < 20 %} mdi:battery-10
                                    {% elif bl < 30 %} mdi:battery-20
                                    {% elif bl < 40 %} mdi:battery-30
                                    {% elif bl < 50 %} mdi:battery-40
                                    {% elif bl < 60 %} mdi:battery-50
                                    {% elif bl < 70 %} mdi:battery-60
                                    {% elif bl < 80 %} mdi:battery-70
                                    {% elif bl < 90 %} mdi:battery-80
                                    {% elif bl < 100 %} mdi:battery-90
                                    {% elif bl == 100 %} mdi:battery
                                    {% else %} mdi:battery-unknown
                                    {% endif %}
                        icon_color: |2-
                                    {% set bl = states('sensor.iphone_7_gabri_battery_level') | int %}
                                    {% if bl < 10 %} red
                                    {% elif bl < 20 %} red
                                    {% elif bl < 30 %} red
                                    {% elif bl < 40 %} orange
                                    {% elif bl < 50 %} orange
                                    {% elif bl < 60 %} green
                                    {% elif bl < 70 %} green
                                    {% elif bl < 80 %} green
                                    {% elif bl < 90 %} green
                                    {% elif bl < 100 %} green
                                    {% elif bl == 100 %} green
                                    {% else %} grey
                                    {% endif %}
                        tap_action:
                          action: more-info
                      - type: entity
                        entity: proximity.home
                        icon_color: white
                        card_mod: null
                        style: |
                          ha-card {
                            box-shadow: 0px 0px;
                          }  

Can the image of the person card be enlarged?

Senza titolo11

Share the rounded apex chart please :wink:

Also with the 4 mushrooms on the left would be great hahah
thanks!

No, unfortunately switching the double to single quotes didnā€™t change/fix anything.

I have a question about the climate card.
Does anyone know if itā€™s possible to achieve the following:

Right now, when you click this button, you get to see the HVAC modes:
afbeelding
Changes to:
afbeelding

Since i only have 1 HVAC mode button enabled, is it possible to make this button visible in the first view?
Like this:
afbeelding