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

Sure, use stack-in-card.

I tried but the result is not as I would like, I would like all the information to be shown on a single chip card

Can you share your code ?

Hi all,

Hoping someone can help me clean this one up, so I donā€™t have a large gap on the second column. Wanting to make the light go essentially 90% of the way, and then the icons make up the last part so they site on the side when they should be displayed.

Then hoping I can do two of these cards together in a horizontal stack to have them 2x2 down the page.

Just struggling with the spacing, canā€™t get it quite how it needs to be.

This is it at the moment:

You can see for some reason it is pulled to the left and off-screen. Can someone help in pulling it back so it is not cut-off?!
Additional expand the box with ā€œPlay Roā€¦ā€ so it takes up the width across to the vertical icons.

type: horizontal-stack
cards:
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    cards:
      - type: custom:layout-card
        layout_type: masonry
        layout: {}
        cards:
          - type: grid
            square: false
            columns: 2
            style: ''
            cards:
              - type: custom:mushroom-template-card
                primary: Play Room
                secondary: 'TV: {{ states(''media_player.google_tv'')| string | upper }}'
                icon: mdi:lightbulb-group
                entity: light.playroom_lights
                icon_color: |-
                  {% if is_state('light.playroom_lights', 'on') %}
                    orange
                  {% endif %}
                fill_container: false
                multiline_secondary: true
                tap_action:
                  action: navigate
                  navigation_path: /home
                hold_action:
                  action: toggle
                double_tap_action:
                  action: none
              - type: custom:layout-card
                layout_type: custom:vertical-layout
                layout:
                  width: 20
                  max_width: 20
                  max_cols: 1
                  height: 30
                cards:
                  - type: custom:mushroom-chips-card
                    style: |
                      ha-card {
                        --chip-box-shadow: none;
                        --chip-background: none;
                        --chip-spacing: 0px;
                        --chip-padding: 0 0.2em;
                      }
                    chips:
                      - type: template
                        icon_color: light-blue
                        icon: mdi:door-open
                        tap_action: none
                        entity: binary_sensor.ranch_slider_sensor_contact
                        style: |
                          ha-card {
                            animation: blink 2s linear infinite;
                          }
                          @keyframes blink {
                            50% {opacity: 0;}
                          }
                      - type: conditional
                        conditions:
                          - entity: light.playroom_lights
                            state: 'on'
                        chip:
                          type: template
                          icon_color: orange
                          icon: mdi:lightbulb-group
                          tap_action: none
                          entity: light.playroom_lights
          - type: custom:mushroom-chips-card
            alignment: left
            style: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-spacing: 0px;
                --chip-padding: 0 0.15em
              }
            chips:
              - type: template
                content: '{{states(entity)}} Ā°C'
                entity: sensor.play_room_sensor_temperature
                icon: mdi:thermometer
                tap_action:
                  action: more-info
                icon_color: |-
                  {% set state=states(entity) %}
                  {% if state >= '19' %}
                  red
                  {% elif state < '19'%}
                  blue
                  {% else %}
                  grey
                  {% endif %}
              - type: template
                double_tap_action:
                  action: none
                content: >-
                  {{ states(entity) }}{{ state_attr(entity,
                  "unit_of_measurement") }} 
                entity: sensor.humidity
                icon: mdi:water
                icon_color: blue
                tap_action:
                  action: none
                hold_action:
                  action: none
              - type: template
                double_tap_action:
                  action: none
                content: >-
                  {{ states(entity) }} {{ state_attr(entity,
                  "unit_of_measurement") }}
                entity: sensor.average_indoor_pressure_downstairs
                icon: mdi:gauge
                icon_color: grey
                tap_action:
                  action: none
                hold_action:
                  action: none
    card_mod:
      style: |
        ha-card {
          padding: 2px;
          background: rgba(200,200,200,0.02);
        }
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    cards:
      - type: custom:layout-card
        layout_type: masonry
        layout: {}
        cards:
          - type: grid
            square: false
            columns: 2
            cards:
              - type: custom:mushroom-template-card
                primary: Play Room
                secondary: 'TV: {{ states(''media_player.google_tv'')| string | upper }}'
                icon: mdi:lightbulb-group
                entity: light.playroom_lights
                icon_color: |-
                  {% if is_state('light.playroom_lights', 'on') %}
                    orange
                  {% endif %}
                fill_container: false
                multiline_secondary: true
                tap_action:
                  action: navigate
                  navigation_path: /home
                hold_action:
                  action: toggle
                double_tap_action:
                  action: none
              - type: custom:layout-card
                layout_type: custom:vertical-layout
                layout:
                  width: 20
                  max_width: 20
                  max_cols: 1
                  height: 30
                cards:
                  - type: custom:mushroom-chips-card
                    style: |
                      ha-card {
                        --chip-box-shadow: none;
                        --chip-background: none;
                        --chip-spacing: 0px;
                        --chip-padding: 0 0.2em;
                        --chip-width: 100%;
                      }
                    chips:
                      - type: template
                        icon_color: light-blue
                        icon: mdi:door-open
                        tap_action: none
                        entity: binary_sensor.ranch_slider_sensor_contact
                        style: |
                          ha-card {
                            animation: blink 2s linear infinite;
                          }
                          @keyframes blink {
                            50% {opacity: 0;}
                          }
                      - type: conditional
                        conditions:
                          - entity: light.playroom_lights
                            state: 'on'
                        chip:
                          type: template
                          icon_color: orange
                          icon: mdi:lightbulb-group
                          tap_action: none
                          entity: light.playroom_lights
          - type: custom:mushroom-chips-card
            alignment: left
            style: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-spacing: 0px;
                --chip-padding: 0 0.15em
              }
            chips:
              - type: template
                content: '{{states(entity)}} Ā°C'
                entity: sensor.play_room_sensor_temperature
                icon: mdi:thermometer
                tap_action:
                  action: more-info
                icon_color: |-
                  {% set state=states(entity) %}
                  {% if state >= '19' %}
                  red
                  {% elif state < '19'%}
                  blue
                  {% else %}
                  grey
                  {% endif %}
              - type: template
                double_tap_action:
                  action: none
                content: >-
                  {{ states(entity) }}{{ state_attr(entity,
                  "unit_of_measurement") }} 
                entity: sensor.humidity
                icon: mdi:water
                icon_color: blue
                tap_action:
                  action: none
                hold_action:
                  action: none
              - type: template
                double_tap_action:
                  action: none
                content: >-
                  {{ states(entity) }} {{ state_attr(entity,
                  "unit_of_measurement") }}
                entity: sensor.average_indoor_pressure_downstairs
                icon: mdi:gauge
                icon_color: grey
                tap_action:
                  action: none
                hold_action:
                  action: none

Really appreciate the help :slight_smile:

How do you fix it when you go back to color_temp color? The background stay at the RGB color, because the RGB is not changing when you change kelvin (color_temp)

The code is (for example):

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: weather
        entity: weather.forecast_meteonetwork
        show_conditions: true
        show_temperature: true
      - type: weather
        entity: weather.forecast_meteonetwork
        show_conditions: true
        show_temperature: true

The result obtained is the following (I have an active custom theme):
Immagine 2022-06-12 133212

Both TV On and Off scripts work if I run them seperatly so I know those are workingā€¦

Itā€™s the switch after testing thatā€™s not working :frowning: Trying to figure out whyā€¦ I was trying to create a button that works for both off and onā€¦

The switch is reporting ā€˜onā€™ and itā€™s not ā€¦ so making them into a switch is probably not the way to goā€¦ :slight_smile:

Thank you!

For example


type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
      }
    chips:
      - type: conditional
        conditions:
          - entity: light.indoor_lights
            state: 'on'
        chip:
          type: entity
          entity: light.indoor_lights
          icon_color: amber
          tap_action:
            action: call-service
            service: light.turn_off
            service_data: {}
            target:
              entity_id: light.indoor_lights
          content_info: none
          icon: mdi:lamps
      - type: conditional
        conditions:
          - entity: light.outdoor_lights
            state: 'on'
        chip:
          type: entity
          entity: light.outdoor_lights
          icon_color: amber
          tap_action:
            action: call-service
            service: light.turn_off
            service_data: {}
            target:
              entity_id: light.outdoor_lights
          content_info: none
          icon: mdi:outdoor-lamp
      - type: conditional
        conditions:
          - entity: light.all_lights
            state: 'on'
        chip:
          type: entity
          entity: sensor.count_lights_on
          icon_color: amber
          icon: mdi:lightbulb-group
          tap_action:
            action: call-service
            service: light.turn_off
            service_data: {}
            target:
              entity_id: light.all_lights
    alignment: center

3 Likes

Hi all,

Ive currently got a dashboard using the stack in card and mushroom cards and I have created a room card with multiple sensors stacked into it and one being a motion sensor. My question is : How can I make the icon flash when motion is detected. Ive managed to make it change icon and colour when motion is detected but I havenā€™t managed to get it to flash or blink.

My code is here : Blinking Icons - Pastebin.com

in my code some things are blank such as binary sensors not being there and this is just due to me not putting them in :slight_smile:

Rhys did a decent job with a blinking alarm here. Maybe you can adapt that.

so Iā€™ve tried to incorporate this into my code and I donā€™t seem to be getting anything to happen.

here: Blinking Icons 2 - Pastebin.com

Although a template switch is probably a good idea but it helps nothing if ainā€™t workingā€¦

Just an idea as Iā€™ve done that successfully:
Keep those two scripts and build a third one with a template that chooses on of the first two script as a service depending on the state of an entity that is part of the on-script.

Template:

If TV is already on
Call service script_off
Else
Call service script_on

Than you can call that script via chip, button or whatever.

Hereā€™s my third script to give you an idea:

alias: 'Arbeitszimmer --> Bad: join/unjoin'
sequence:
  - service: |-
      {% if is_state_attr('media_player.arbeitszimmer', 'group_members',
      [
        "media_player.arbeitszimmer",
      ]) %}
        script.bad_join
      {% elif is_state_attr('media_player.arbeitszimmer',
      'group_members', [
        "media_player.arbeitszimmer",
        "media_player.bad"
      ]) %} 
        script.bad_unjoin_group
      {% endif %}
mode: single
icon: mdi:sync

I call that service on a chip to join/unjoin some sonos players with a player in my office.

1 Like

Please paste your code here as pastebin messes up the indentation.

- type: custom:vertical-stack-in-card
  horizontal: true
  cards:
    - type: custom:mushroom-template-card
      entity: switch.radiator_light_strip
      layout: vertical
      icon: |-

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

          mdi:lightbulb-group

        {% else %}

          mdi:lightbulb-group-off

        {% endif %}
      icon_color: |-

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

          yellow

        {%else%}
          transparent

        {% endif %}
      card_mod: null
      style: |
        ha-card {
          box-shadow: 0px 0px;
          }  
    - type: custom:mushroom-template-card
      entity: null
      layout: vertical
      icon: |-

        {% if is_state('binary_sensor.', 'on')%}

          mdi:motion-sensor

        {% else %}

          mdi:motion-sensor-off

        {% endif %}
      icon_color: |-

        {% if is_state('binary_sensor.','on')%}

          red

        {%else%}
          transparent

        {% endif %}
      card_mod: null
      style: |
        ha-card {
            box-shadow: 0px 0px;
            }
        mushroom-shape-icon {
          animation: blink 1s linear infinite;
        }
        @keyframes blink {
          50% {opacity: 0;}
        }

Just copied your code and it is blinking as expected. But of course you now have to add a template for the state of the sensor into that card-mod part as it should only blink if motion is detected.

Iā€™m on my mobile right now itā€™s kinda hard to tinker with code. Have a look above at my code for the wobbling washing machine to get an idea.

2 Likes

Thank you! Iā€™ll play with that tonight!!! Something so simpleā€¦isnā€™t going quite so simple LOL

It must depend on the integration because it is working OK for me with both Yeelight and Zigbee RGBW lights. What issue are you seeing?

Just a note on the correct use of card_mod. Iā€™ve updated all my examples to use card_mod correctly. Doing this allows you to continue using the GUI to edit your Mushrooms. It also provides better performance.

The correct syntax is:

card_mod:
   style: |
      ha-card {
      }

Not:

card_mod: null
style: |
   ha-card {
   }

Or:

style: |
   ha-card {
   }
10 Likes

A funny thing happened on the way to writing a script LOL

I put both the on and off in the same script and itā€™s working with one buttonā€¦ :rofl:

1 Like

Thanks! I hadnā€™t really gone back to that since it doesnā€™t display on my mobile, which is where I do everything but edit, but it was definitely bothering me lol. Iā€™m terrible with Card Mod