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

Can anyone advise if itā€™s possible to set padding on the mushroom title card using card mod ? - It doesnā€™t seem to have a ha-card element so isnā€™t working like the other cards, and I canā€™t figure out the right selector for it.

image

i put them on vertical stack but chips card are below person card. could u show how to put them together?

thanks a lot.

hej,

here the whole card, there is also a popup window included for detailed location

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-person-card
    entity: person.fabian
    use_entity_picture: true
    hide_name: true
    layout: vertical
    tap_action:
      action: fire-dom-event
      browser_mod:
        command: popup
        deviceID: this
        title: Fabian
        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.places_fabian_locatie
                primary_info: none
                icon: mdi:map-marker
                icon_color: yellow
              - type: horizontal-stack
                cards:
                  - type: map
                    entities:
                      - entity: device_tracker.life360_fabian_verschoor
                    aspect_ratio: '2'
                    use_entity_picture: true
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon_color: |2-
                    {% set state=states('binary_sensor.sm_s21_fabian_is_charging') %}
                    {% if state=='on' %}
                    green
                    {% elif state=='off' %}
                    #6f6f6f
                   {% endif %}
        entity: binary_sensor.sm_s21_fabian_is_charging
        icon: mdi:power-plug
        tap_action:
          action: more-info
      - type: template
        entity: sensor.sm_s21_fabian_battery_level
        icon: |2
                    {% set bl = states('sensor.sm_s21_fabian_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.sm_s21_fabian_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
    alignment: center
8 Likes

How do you make your fan icons spin?

Thanks, had my battery and charge status on my person card but this is more detailed with color change and icon change so stealing it for sure!

1 Like

ā€œStoleā€ the code somewhere in this thread or the card-mod thread.

Hereā€™s my full card that only shows if the fan is running. and icon color depending on wind mode. As itā€™s part of a nested room card a my HA homescreen you maybe have to adjust the itendation.

      - type: conditional
        conditions:
          - entity: fan.MYFAN
            state: 'on'
        chip:
          type: template
          double_tap_action:
            action: none
          icon: mdi:fan
          icon_color: >-
            {% if is_state_attr('fan.MYFAN', 'preset_mode', 'Normal')%}
              blue
            {% elif is_state_attr('fan.MYFAN', 'preset_mode',
            'Nature')%}
              green
            {% else %}
              disabled
            {% endif %}
          tap_action:
            action: more-info
          hold_action:
            action: none
          entity: fan.MYFAN
          content: null
          card_mod: null
          style: |
            @keyframes rotation {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }
            }
            ha-card {
              --chip-box-shadow: 0px 0px;
              animation: rotation linear infinite;
              {% if states('fan.MYFAN') == 'on' %}
               animation-duration: 3s;
              {%- else -%}
              {%- endif %}
              }
3 Likes

oh my god, since weeks I;m trying to get google calendar events other than the current on! this helps!

one question, can you point me how to adjust that subtitle and state_attr to get:
Tomorrowā€™s events
and Tomorrowā€™s event from More Than One calendar ?

Best regards!

While we wait for the official climate card, I decided to have a stab at knocking together something that has the same look and feel. Came up with this:

image

Itā€™s a standard merge of the Mushroom template card, Simple Thermostat card, and optionally the Mushroom Chips card to show extra info (the card on the right).

Icon changes colour to indicate whether HVAC is active or not. Iā€™ve also played around with changing the background colour of the whole card to more immediately indicate that the system is on.

I like how it maintains the Mushroom UX while also being quite compact. Someone with CSS skills could also fiddle the Simple Thermostat card to get the up/down controls properly aligned.

7 Likes

Mind sharing the yaml? Great looking card!

1 Like

Sureā€¦

type: horizontal-stack
cards:
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    cards:
      - type: custom:mushroom-template-card
        primary: Downstairs
        secondary: >
          Currently: {{ state_attr('climate.downstairs', 'current_temperature')
          }}Ā°F
        icon: |-
          {% set mode = states('climate.downstairs') %}
          {% if mode == 'cool' %}
          mdi:snowflake
          {% else %}
          mdi:fire
          {% endif %}
        icon_color: |-
          {% set status = state_attr('climate.downstairs','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.downstairs
        header: false
        hide:
          temperature: true
          state: true
        layout:
          mode:
            headings: false
            icons: true
            names: false
          step: row
        decimals: '0'
        step_size: '1'
        control: false
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    cards:
      - type: custom:mushroom-template-card
        primary: Upstairs
        secondary: >
          Currently: {{ state_attr('climate.upstairs', 'current_temperature')
          }}Ā°F
        icon: |-
          {% set mode = states('climate.upstairs') %}
          {% if mode == 'cool' %}
          mdi:snowflake
          {% else %}
          mdi:fire
          {% endif %}
        icon_color: |-
          {% set status = state_attr('climate.upstairs','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.upstairs
        header: false
        hide:
          temperature: true
          state: true
        layout:
          mode:
            headings: false
            icons: true
            names: false
          step: row
        decimals: '0'
        step_size: '1'
        control: false
      - type: custom:mushroom-chips-card
        alignment: justify
        chips:
          - type: template
            entity: climate.upstairs
            content: |
              {{ state_attr(entity, 'current_humidity') }}%
            icon: mdi:water-percent
            icon_color: cyan
          - type: entity
            entity: sensor.ac_runtime_today_upstairs_cool
            icon: mdi:timer-outline
        style: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
          }
4 Likes

Iā€™m trying to animate the rotation of only the icon in a Mushroom Template Card, but I cannot seem to find the right element to targetā€¦ha-card gets the entire template strip, ha-icon doesnā€™t work at all. What element should I be using to bind the animation to?

great cardā€¦ could customize it for my own heating systemā€¦

2022-05-25 14_50_34-Overzicht ā€“ Home Assistant and 4 more pages - Work - Microsoftā€‹ Edge
2022-05-25 14_54_21-Overzicht ā€“ Home Assistant and 4 more pages - Work - Microsoftā€‹ Edge

me too :slight_smile:
image

20220525_150552

7 Likes

can you show your dashboard please :)? do you have something special for Media and Playlists ?
I;m also adding button for Spotify Playlists, but looking forward how others sees it :slight_smile:

Can you share your code?

No problem :slight_smile:

type: horizontal-stack
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Klimatyzacja Salon
        secondary: >-
          šŸŒ”{{
          state_attr('climate.hmip_wth_2_000a9be9a3e3ae','current_temperature')|float}}Ā°C
          šŸ’§{{
          state_attr('climate.hmip_wth_2_000a9be9a3e3ae','current_humidity')|float}}%
        icon: |-
          {% set mode = states('climate.salon') %}
          {% if mode == 'heat' %}
          mdi:fire
          {% elif mode == 'cool' %}
          mdi:snowflake
          {% elif mode == 'heat_cool' %}
          mdi:sun-snowflaked-
          {% elif mode == 'dry' %}
          mdi:water-percent
          {% elif mode == 'fan_only' %}
          mdi:fan
          {% else %}
          mdi:air-conditioner
          {% endif %}
        icon_color: |-
          {% set status = states('climate.salon') %}
          {% if status == 'cool' %}
          #2b9af9
          {% elif status == 'heat' %}
          #f92b2b
          {% elif status == 'dry' %}
          #efbd07
          {% elif status == 'heat_cool' %}
          orange
          {% elif status == 'fan_only' %}
          #00d11c
          {% else %}
          grey
          {% endif %}
        tap_action: none
        style: |
          ha-card {
            padding-bottom: 0px !important;
          }
      - type: custom:simple-thermostat
        entity: climate.salon
        header: false
        hide:
          temperature: true
          state: true
        layout:
          mode:
            headings: false
            icons: true
            names: false
          step: row
        decimals: '0'
        step_size: '1'
        control:
          hvac:
            'off':
              name: Wyłącz
            heat:
              name: Grzanie
            cool:
              name: Chłodzenie
            heat_cool: false
            dry:
              name: Osuszanie
            fan_only:
              name: Wentylator
        card_mod:
          style: |
            ha-card .mode-item {
              background: #d1d1d1;
              color: white;
              --mdc-icon-size: 22px;
              --st-font-size-title: 20px;
              --st-font-size-sensors: 14px;
              --st-font-size-toggle-label: 6px
              --st-spacing: 0px;
              --st-default-spacing: 0px;
              border-radius: 5px;
              margin: 0px;
            }
            ha-card {
              --st-font-size-xl: 28px;
              --st-font-size-m: 20px;
              --st-font-size-s: 10px;
              padding-bottom: 0px !important;
            }
            ha-card .mode-item.active.heat { 
              background: #f92b2b;
              color: white;
            }
            ha-card .mode-item.active.off {
              background: pink;
              color: ;
            }
            ha-card .mode-item.active.heat_cool {
              --heat_cool-color: blue;
            }
            ha-card .mode-item.active.dry {
              --dry-color: #efbd07;
            }
            ha-card .mode-item.active.fan_only {
              --fan_only-color: #00d11c;
            }
            ha-card.heating .current--value,
            ha-card.heating ha-icon.header__icon {
              color: red;
            }
      - type: horizontal-stack
        cards:
          - type: button
            tap_action:
              action: toggle
            entity: switch.salon_streamer
            show_name: false
            show_icon: true
            show_state: false
            icon_height: 25px
            name: Streamer
          - type: button
            tap_action:
              action: toggle
            entity: input_boolean.wykres_temp1
            show_name: false
            show_icon: true
            show_state: false
            icon_height: 25px
          - type: button
            tap_action:
              action: toggle
            entity: input_boolean.wykres_wilg1
            show_name: false
            show_icon: true
            show_state: false
            icon_height: 25px
          - type: button
            tap_action:
              action: toggle
            entity: input_boolean.zuzy_energ1
            show_name: false
            show_icon: true
            show_state: false
            icon_height: 25px
      - type: custom:stack-in-card
        mode: vertical
        cards:
          - type: conditional
            conditions:
              - entity: input_boolean.wykres_temp1
                state: 'on'
            card:
              type: statistics-graph
              entities:
                - sensor.hmip_wth_2_000a9be9a3e3ae_actual_temperature
              title: Temperatura Salon
              stat_types:
                - mean
              chart_type: line
              days_to_show: 3
          - type: conditional
            conditions:
              - entity: input_boolean.wykres_wilg1
                state: 'on'
            card:
              type: statistics-graph
              entities:
                - sensor.hmip_wth_2_000a9be9a3e3ae_humidity
              title: Wilgotność Sypialni
              stat_types:
                - mean
              chart_type: bar
              days_to_show: 3
          - type: conditional
            conditions:
              - entity: input_boolean.zuzy_energ1
                state: 'on'
            card:
              type: entities
              entities:
                - entity: sensor.sypialnia_daily_cool_energy_consumption
                  name: Dzienne
                - entity: sensor.sypialnia_daily_heat_energy_consumption
                  name: Dzienne
                - entity: sensor.sypialnia_weekly_cool_energy_consumption
                  name: Tygodniowe
                - entity: sensor.sypialnia_weekly_heat_energy_consumption
                  name: Tygodniowe
                - entity: sensor.sypialnia_yearly_cool_energy_consumption
                  name: Roczne
                - entity: sensor.sypialnia_yearly_heat_energy_consumption
                  name: Roczne
              title: Zużycie energii
              show_header_toggle: false
              state_color: false
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Ogrzewanie Salon
        secondary: >-
          šŸŒ”{{
          state_attr('climate.hmip_wth_2_000a9be9a3e3ae','current_temperature')|float}}Ā°C
          šŸ’§{{
          state_attr('climate.hmip_wth_2_000a9be9a3e3ae','current_humidity')|float}}%
        icon: |-
          {% set mode = states('climate.hmip_wth_2_000a9be9a3e3ae') %}
          {% if mode == 'heat' %}
          mdi:fire
          {% elif mode == 'auto' %}
          mdi:fire-circle
          {% else %}
          mdi:radiator
          {% endif %}
        icon_color: |-
          {% set status = states('climate.hmip_wth_2_000a9be9a3e3ae') %}
          {% if status == 'heat' %}
          #f92b2b
          {% elif status == 'auto' %}
          #00d11c
          {% else %}
          grey
          {% endif %}
        tap_action: none
        style: |
          ha-card {
            padding-bottom: 0px !important;
          }
      - type: custom:simple-thermostat
        entity: climate.hmip_wth_2_000a9be9a3e3ae
        header: false
        hide:
          temperature: true
          state: true
        layout:
          mode:
            headings: false
            icons: true
            names: false
          step: row
        decimals: '0'
        step_size: '1'
        control:
          hvac:
            'off':
              name: Wyłącz
            heat:
              name: Grzanie
            auto:
              name: Harmonogram
              icon: mdi:clock-plus-outline
          preset:
            boost:
              name: Szybkie Nagrzanie
              icon: mdi:fire-circle
        card_mod:
          style: |
            ha-card .mode-item {
              background: #d1d1d1;
              color: white;
              --mdc-icon-size: 22px;
              --st-font-size-title: 20px;
              --st-font-size-sensors: 14px;
              --st-font-size-toggle-label: 6px
              --st-spacing: 0px;
              --st-default-spacing: 0px;
              border-radius: 5px;
              margin: 0px;
            }
            ha-card {
              --st-font-size-xl: 28px;
              --st-font-size-m: 20px;
              --st-font-size-s: 10px;
              padding-bottom: 0px !important;
            }
            ha-card .mode-item.active.heat { 
              background: #f92b2b;
              color: white;
            }
            ha-card .mode-item.active.off {
              background: pink;
              color: ;
            }
            ha-card .mode-item.active.auto {
              --auto--color: 00d11c;
            }

            ha-card.heating .current--value,
            ha-card.heating ha-icon.header__icon {
              color: red;
            }

10 Likes

Sure! I havenā€™t integrated music yet, and Iā€™m still just building for mobile since thatā€™s my primary use (though I do have a tablet I need to build something for eventually). My example for the media player was just a quick thrown-together idea on how you could possibly build something. Music/entertainment is on my development list eventually though.

A few details about mine.

  • temp on top right is a link to thermostat pop-up since there isnā€™t a Mushroom thermostat card just yet
  • weather top center is nav to weather page
  • drive to work/home in person card displays based on location (if at work shows drive time home, else shows drive to work)
  • rooms link to individual room pages, and show occupancy on the main page
  • conditional card displays weather alerts via NWS integration on the main page, with a link to weather page.

The blue cards are just for color, still playing with those. Not sure why they show a card line when I emulate them in Chrome, but that isnā€™t there in the mobile view on my phone.

8 Likes

Great idea using the stack-in-card for the welcome scenes, thanks. I was using it on other parts but for some reason did not think of using here. Now I just need to make better room cards and my transition from minimalist lovelace to mushroom is complete.

Itā€™s really a quality of life improvement not having to deal with all the yaml all the time. simple changes are simple once again! I can even make simple tweaks on my mobile.

1 Like

Hi Fabian, I like your radio card at the bottom, could you share your code please?

no mushroom card but a simple one:

type: vertical-stack
cards:
  - type: custom:mini-media-player
    entity: media_player.huiskamer
    style: |
      ha-card { box-shadow: none; 
      ha-markdown { padding-bottom: !important; }
    volume_stateless: true
    info: scroll
    source: icon
    group: false
    toggle_power: true
    hide:
      power: true
    shortcuts:
      columns: 3
      column_height: 10
      hide_when_off: true
      label: Select Input
      align_text: center
      buttons:
        - type: source
          id: Radio 538
          icon: mdi:radio
          name: 538
        - type: source
          id: Radio Veronica
          icon: mdi:radio
          name: Veronica

1 Like