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

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

very nice stuff!

I also Think I’m finally done - what I need is still to finish the Media Player card


image

image
image


image

First welcome message has a Calendar Holiday at the end - Active only when there is a holiday
Second is calendar:
TOday’s event
Next Event in the calendar

then simple buttons smart plugs and consumption, media, ha updates, system monitoring and vacuum

and room cards at the bottom

6 Likes

Can we ajdust font size of the chips ? And also I wonder if we can make chips looks a little big bigger ?

yes, check here

piitaya/lovelace-mushroom-themes: Additional themes for Lovelace Mushroom Cards :mushroom: (github.com)

you have all these styles to play with.

Chip

mush-chip-spacing: 8px
mush-chip-padding: 0 0.25em
mush-chip-height: 36px
mush-chip-border-radius: 18px
mush-chip-font-size: 0.3em
mush-chip-font-weight: bold
mush-chip-icon-size: 0.5em
mush-chip-avatar-padding: 0.1em
mush-chip-avatar-border-radius: 50%
mush-chip-box-shadow: var(--ha-card-box-shadow)
mush-chip-background: var(--ha-card-background)

works well
image

there are plenty of comments in the above posts about how to use card_mod to do this, or if you are using vertical-stack-in-card, how to do it.

I am no card_mod expert, as I am just learning, from the other smart people here, but something like this would do it.
they come out nice and big. Use the chip-icon-size to make the icon bigger too.
image

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.family_room_heater_air_temperature
    icon_color: orange
    use_entity_picture: false
    content_info: state
    card_mod: null
    style: |
      ha-card 
      {
      --chip-font-size: 0.8em;
      --chip-height: 50px
      }
  - type: light
    entity: light.garage_lights
    content_info: none
    card_mod: null
    style: |
      ha-card 
      {
      --chip-height: 50px
      }
  - type: entity
    entity: binary_sensor.porsche_garage_door
    icon_color: blue
    content_info: none
    card_mod: null
    style: |
      ha-card 
      {
      --chip-height: 50px
       }
5 Likes

Thanks for all the info, great looking dashboard. I’m working to replicate it on my Samsung Family Hub refrigerator, so far its working well. I’ve had to make some of the fonts smaller and use card mod to resize the cards (family hub display uses like a 200% factor). Any pointers on making the font smaller on the Title Card, so far this is the only one I can modify? Thanks.

cant you use card_mod on the title card styles? or in the theme?, making your own theme, and apply that to your fridge.

# Title
mush-title-padding: 24px 12px 16px
mush-title-spacing: 12px
mush-title-font-size: 24px
mush-title-font-weight: normal
mush-title-line-height: 1.2

I used these to change the spacing and padding to remove space, and have that nicely on my family hub too.
image

3 Likes

It’s posible to have the entity-filter card functionality with the mushroom card UI?

I’ve failed at the first hurdle on this. I go to HACS, click on the frontend tab, click on the blue “Explore and add repositories” button and search. No results found :frowning:

were you code please

Are you sure you haven’t installed it already? I have and don’t get it as a result again.

image

…and then scroll down to the installed frontend stuff.

Nope. Not there either

1 Like