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

[rhysb (Rhys)]

Here is another Mushroom Media Player Album Art option and probably my favorite so far.

Mushroom Media Player Blended Blurred Album Art:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.currently_playing
    icon: mdi:play
    use_media_info: true
    use_media_artwork: false
    show_volume_level: false
    media_controls:
      - play_pause_stop
      - previous
      - next
    volume_controls:
      - volume_buttons
      - volume_set
    fill_container: false
    card_mod:
      style: |
        mushroom-shape-icon {
          display: flex;
          {% set media_type = state_attr(config.entity, 'media_content_type') %}
          {% if media_type == 'tvshow' %}
            --card-mod-icon: mdi:television-classic;
            animation: flicker 1s linear infinite alternate;
          {% elif media_type == 'movie' %}
            --card-mod-icon: mdi:movie-roll;
            animation: spin 2s linear infinite reverse;
          {% elif media_type == 'music' %}
            --card-mod-icon: mdi:music;
            animation: beat 1.3s ease-out infinite both;
          {% elif media_type == 'playlist' %}
            --card-mod-icon: mdi:music;
            animation: beat 1.3s ease-out infinite both;
          {% else %}
            --card-mod-icon: mdi:play;
          {% endif %}

          {{ 'animation: none;' if not is_state(config.entity, 'playing') }}

        }
        @keyframes flicker {
          0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
          32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
        }
        @keyframes beat {
          0%, 60% { --icon-symbol-size: 21px; }
          5%, 17%, 57% { --icon-symbol-size: 22px; }
          10%, 20%, 51% { --icon-symbol-size: 23px; }
          25%, 45% { --icon-symbol-size: 24px; }
          30%, 39% { --icon-symbol-size: 25px; }
          33% { --icon-symbol-size: 26px; }
        }
        ha-card {
          --ha-card-border-width: 0;
        }
  - type: conditional
    conditions:
      - entity: media_player.currently_playing
        state_not: 'off'
      - entity: media_player.currently_playing
        state_not: idle
    card:
      entity: media_player.currently_playing
      hide:
        icon: true
        name: true
        runtime: true
        source: true
        power: true
        state_label: true
        volume: true
        info: true
        progress: false
        controls: true
      more_info: false
      type: custom:mini-media-player
      toggle_power: false
      group: true
      card_mod:
        style:
          mmp-progress$: |
            paper-progress {
              {{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
            }
          .: |
            ha-card {
              margin: 0px 12px 12px;
              --mmp-progress-height: 12px !important;
              height: var(--mmp-progress-height);
              --mmp-accent-color: rgb(var(--rgb-indigo-color));
              --mmp-border-radius: 12px !important;
              --ha-card-border-width: 0;
            }
card_mod:
  style: |
    ha-card::before {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      {% if not is_state('media_player.currently_playing', 'idle') %}
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
        filter: blur(150px) saturate(400%);
        background-size: 100% 100%;
      {% endif %}
    }
    ha-card {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      --ha-card-border-width: 0;
      {% if not is_state('media_player.currently_playing', 'idle') %}
        background: url( '{{ state_attr("media_player.currently_playing", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);

        {% if state_attr('media_player.currently_playing', 'media_content_type') == 'tvshow' %}
          background-size: auto 100%, cover;
        {% else %}
          background-size: 50% auto, cover;
        {% endif %}

        background-position: right;
        background-repeat: no-repeat;
        background-blend-mode: saturation;
      {% endif %}
    }

[Menthe]

I always wanted to use the mushroom media card for music. I use raspberry pi’s with squeezelite functionality and have not managed to get the multiroom buttons to work nicely with the media card.
At the moment i use mini-mediaplayer.

[Boostin4HP]

I love them and wish I could use them but it’s another one that doesn’t work on iOS. Here’s how the 2 new media cards you posted look on iOS.

[cob94440 (chris)]

Nice but whats is your entity currently playing?

[rhysb (Rhys)]

Have a look here:

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

I combine all my media players using a Universal Media Player: media_player: - platform: universal name: Currently Playing children: - media_player.lounge_tv - media_player.lounge - media_player.family_room_tv - media_player.family_room - media_player.office - media_player.bedroom - media_player.garage - media_player.elijahs_bedroom I then conditionally display the Universal Media Player when it is not off: type: conditional conditions…

[Tyfoon]

Yes! Thanks to this post

[Djowie]

</s> <s>type: custom:mushroom-chips-card</s> <s>chips:</s> <s> - type: template</s> <s> entity: sensor.dsmr_day_consumption_total_cost</s> <s> icon: mdi:currency-eur</s> <s> content: '{{ (states("sensor.dsmr_day_consumption_total_cost")) }}'</s> <s> - type: template</s> <s> entity: sensor.dsmr_day_consumption_electricity_merged</s> <s> icon: mdi:sine-wave</s> <s> content: >-</s> <s> {{ (states("sensor.dsmr_reading_electricity_currently_delivered") | float)</s> <s> * 1000 }} W</s> <s> - type: template</s> <s> entity: sensor.dsmr_consumption_gas_currently_delivered</s> <s> icon: mdi:gas-burner</s> <s> icon_color: >-</s> <s> {% set gas = (states("sensor.dsmr_consumption_gas_currently_delivered") |</s> <s> float ) %} </s> <s> {% if gas > 0 %}</s> <s> white</s> <s> {% else %}</s> <s> disabled</s> <s> {% endif %}</s> <s> content: >-</s> <s> {% set gas = (states("sensor.dsmr_consumption_gas_currently_delivered") |</s> <s> float ) %} </s> <s> {% if gas > 0 %}</s> <s> {{ gas }} m³</s> <s> {% else %}</s> <s> </s> <s> {% endif %}</s> <s> - type: template</s> <s> entity: sensor.hacs</s> <s> content: ''</s> <s> icon_color: |-</s> <s> {% if states('sensor.hacs') == "0" %}</s> <s> disabled</s> <s> {% else %}</s> <s> orange</s> <s> {% endif %}</s> <s> icon: mdi:store</s> <s> tap_action:</s> <s> action: navigate</s> <s> navigation_path: /hacs</s> <s>card_mod:</s> <s> style:</s> <s> mushroom-template-chip:nth-child(1)$: |</s> <s> mushroom-chip { </s> <s> {% set daily_cost = (states("sensor.dsmr_day_consumption_total_cost") | float) %}</s> <s> --text-color:</s> <s> {% if daily_cost >= 20 %}</s> <s> rgb(var(--rgb-red))</s> <s> {% elif daily_cost >= 15 %}</s> <s> rgb(var(--rgb-orange))</s> <s> {% else %}</s> <s> rgb(var(--rgb-white))</s> <s> {% endif %};</s> <s> }</s> <s> mushroom-template-chip:nth-child(2): |</s> <s> mushroom-chip { </s> <s> {% set watt = (states("sensor.dsmr_reading_electricity_currently_delivered") | float) * 1000 %}</s> <s> --text-color:</s> <s> {% if watt >= 500 %}</s> <s> rgb(var(--rgb-red))</s> <s> {% elif watt >= 300 %}</s> <s> rgb(var(--rgb-orange))</s> <s> {% else %}</s> <s> rgb(var(--rgb-green))</s> <s> {% endif %};</s> <s> }</s> <s> mushroom-template-chip:nth-child(3): |</s> <s> mushroom-chip {</s> <s> --text-color: orange</s> <s> }</s> <s>
Sorry for bothering you, but changing it to this doesn’t do anything as well. I must be missing something…

nvm it works <3
Don’t forget the $

[henrikrox]

Is there a way to show temperaturea AND humdity for like a room overview page? Just have figured out how to do one of them

[Steffen1988]

Hi guys out there.

I need some help from you to animate an icon. I want to cut off the uper half of the mdi:fountain when it’s off.

The state I want (upper half is missing):

The state thats now after the animation stops (icon is full restored):

I created a second keyframe inspired by the awesome solution from rhysb called no-fountain and find the right clip-path. How is it possible to get this clipping at the end of the animation? After 3 seconds blinking it stays with the default, full visible icon.

card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {% if is_state('switch.bewasserung', 'on') %}
          --icon-animation: fountain 1.5s ease infinite;
        {% else %}
          --icon-animation: no-fountain 1s linear 3;
        {% endif %}
      }
      @keyframes fountain {
        0%, 100 { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); }
        50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
        60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
        70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
        80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
      }
      @keyframes no-fountain {
        50% { clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%); }
      }

I am thankful for every help!

[WebPower (Karoly Papp)]

Hello!
Are you using a template card?

type: custom:mushroom-template-card
primary: Living Room
secondary: |-
  {{ states ('sensor.living_room_temp_aqara_temperature') | round(1)}}°C | {{
   states ('sensor.living_room_temp_aqara_humidity')}}%
icon: mdi:sofa
tap_action:
  action: navigate
  navigation_path: /lovelace-home/living-room
icon_color: ''

[henrikrox]

I am, ah im pretty stupid, thanks man greatly appreciate it

Can i also as if you dont mind how you get those icons down to the lower right?

[WebPower (Karoly Papp)]

Hello,

I hope this code helps.

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Gabi Room
    secondary: |-
      {{ states ('sensor.gabi_room_temp_temperature') | round(1)}}°C | {{
       states ('sensor.gabi_room_temp_humidity')}}%
    icon: mdi:bed
    tap_action:
      action: navigate
      navigation_path: /lovelace-home/gabi-room
  - type: custom:mushroom-chips-card
    alignment: end
    chips:
      - type: light
        entity: light.table_lamps_gabi_room
        content_info: none
        icon: mdi:lamp
        use_light_color: true
      - type: entity
        entity: media_player.homepod_gabi_room
        icon: phu:homepod-mini
        content_info: none
      - type: conditional
        conditions:
          - entity: binary_sensor.gabi_room_ms_iaszone
            state: 'on'
        chip:
          type: entity
          entity: binary_sensor.gabi_room_ms_iaszone
          icon_color: red
          content_info: none
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: 0px;
        --chip-padding: 0 0.2em
      }

[fastender]

Will this project become obsolete with the release of the December update for Home Assistant?

[chintito4ever]

What’s coming in December update?

[fastender]

The developer of this project now works in the Home Assistant team and in the latest version Mushroom will be integrated more or less ım Lovelace.

Link: 5 New Features in 2022.12 (Home Assistant) - YouTube

[chintito4ever]

Found in the comments

I really like the tile card but I think HA are keeping Mushroom fully separate and it’s own thing. So you will (currently) still need both to get the best of both worlds.
The Tile card is great though for a default card and will be new to lots of people that have never seen or used Mushroom.

[darylosu]

hey, thanks for sharing great card!
Is there a way to resize it in simple way? I would like to make it bigger

[piitaya (Paul)]

Hello

Mushroom will not become obsolete. We want to add the best of Mushroom into official HA cards but it will not be a simple copy paste. Mushroom has grown very quickly and a lot of features have been added. That’s why the editor looks a bit overloaded and development can be complicated due to the amount of copy paste code between cards.

In tile card, the approach is different :

• unique card : the card adapts to the entity domain and supported features.
• editor : the editor is split into sections for easier card editing
• features : additional controls are now in a list to easily add/remove features.
• actions : In Mushroom, the whole card can be clicked with tap, double tap and hold action. In tile card, the icon and text are 2 different zone for action.

With the tile card, we want to improve the default dashboard but also improve the experience for people that love the customize their dashboard.
if you haven’t looked at the state of the open home, I invite you to test the prototype which shows a concept of where we want to go : Figma of the concept.
This dashboard is heavily inspired by Mushroom, Apple Home and Google Home.

Also, we want to improve the more info dialog when clicking an entity. Many people want more control on the mushroom card but the available space is very small. Improving the more info dialog with big slider/button can greatly improve usability.

[Tim_Knowlden]

      .primary:after {
        content: " (Every [[frequency]] days)";
        color: rgb(var(--card-background-color));
        font-style: bold;
        font-size: 9px
      }

Is it possible to nest an If statement in here?

I use a decluttering template and when i define frequency i’d like to achieve something that will for example display as below
frequency: 30

7 Days = Weekly
30 Days = Monthly
90 Days = 3 Monthly
180 Days = 6 Monthly
365 Days = Yearly

I use the frequency to determine which script is used and also the progress for the radial gradient.

[rhysb (Rhys)]

Yes, it dynamically adjusts to the icon size. Just add --icon-size: 80px; to .shape.

Like this:

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-blue)) {{ ((states(config.entity) | as_datetime | as_local - now() | as_local).days + 1) / 10 * 100 }}% 0%, var(--card-background-color) 0% 100%);
        --icon-size: 80px;
      }