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

I didn’t do a fresh install. It’s basically anything I change now. I changed a badge icon with card-mod, I changed icon size of a couple things in the picture with card mod, and I added the climate card when it finll became available with mushroom. I cleared the cache and all works perfect…

everyone once and a while I go back to my computer Or my iphone and its all the way it was before I cleared cache.

I cleare cache again in browser, or I simply pull down to refresh on my phone and everything looks perfect again. But it keep srevertting back randomly. Sometimes 5 minutes later. sometimes 2 hours later. The old cache seem sto still be there some how(at least thats my guess)

Ok. I guess it’s time to get your detective hat on.
Keen to know what you have tried. If I was trying to figure this out, bearing in mind I am a network guy and not software I would try

  • a few other browsers
  • from a different address, ie use the IP address instead of honeassistsnt.local or Vice versa
  • change the IP address of ha and try again
  • delete mushroom and reinstall
  • turn off any proxy’s like adguard or pihole
  • change ssid or network, if on wifi try on lan, and also if on lan try on wifi.
  • reboot everything including aps
  • make sure everything is on latest firmware in your network and devices
  • install cloudflared and try from a remote link
  • check in dev tools and see what files your browser are saying is missing and then go and download them again from GitHub and replace your ones

I am sure others will have other suggestions. Once your say what you have tried

2 Likes

Based on my questions you’d be able to figure out that I’m still struggling with my media setup. But I had another idea I wouldn’t mind getting your input.

Given mushroom is built on minimalist is it possible to use (any) minimalist code (Welcome to the UI-Lovelace-Minimalist wiki! - UI Lovelace Minimalist) in a mushroom dashboard. Why? I have asked in an earlier comment on this thread whether it’s possible to show a pop-up via a tap-hold function (select AVR source from source_list and sound from sound_mode_list). I just saw that minimalist has pop-ups.

If this is possible how can I use minimalist code in mushroom?

Probably using browser mod and a combo of conditional cards. You can add a drop down select to any card using card mod and layout card and then create helpers for all your sources.

1 Like

Txs. I’ll try this as I have all the helpers already.

Have you been able to disable the 'more page dialogue?

Also @rolfokevin this may answer another query I had. Where do you add this code to? A blank YAML card or a particular mushroom card?

Might be obvious but how are refreshing?

Have your seen this post?

it was already here, but wanted to share the FINAL dashboard of mine, i spent days and nights to work on the shadowing, borders, backgrounds etc, and I hope this is the final one!

PS please stop sharing new ideas in this topic :smiley: !!! (joking of course)

7 Likes

Sure, it is not mine. I saw it in this thread (I believe) but cannot remember who did this. Thus credits go to John “Mushroom” Doe, kudos man (or woman :smiley: )

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Front Door
    secondary: >-
      {% if is_state('sensor.nuki_frontdoor_door_security_state','Opened &
      Unlocked')%}
        Open and Unlocked
      {% elif is_state('binary_sensor.nuki_frontdoor_door_open','on') %}
        Door Open
      {% elif is_state('lock.nuki_frontdoor_lock','unlocked') %}
        Unlocked
      {% else %}
        Closed & Locked
      {% endif%}
    icon: >-
      {% if is_state('sensor.nuki_frontdoor_door_security_state','Opened &
      Unlocked')%}
        mdi:door-open
      {% elif is_state('binary_sensor.nuki_frontdoor_door_open','on') %}
        mdi:door-open
      {% elif is_state('lock.nuki_frontdoor_lock','unlocked') %}
        mdi:lock-open
      {% else %}
        mdi:door-closed-lock
      {% endif%}
    layout: vertical
    icon_color: >-
      {% if is_state('sensor.nuki_frontdoor_door_security_state','Closed &
      Locked')%}
        green
      {% else %}
        red
      {% endif%}
    badge_icon: >
      {% set battery_level = (states(entity) | int / 10) | round(0) | int * 10
      %} {% if battery_level == 100 %}
        mdi:battery
      {% elif battery_level > 0 %}
        mdi:battery-{{ battery_level }}
      {% else %}
        mdi:battery-alert-variant-outline
      {% endif %}
    badge_color: |-
      {% set battery_level = states(entity) | int %}
      {% if battery_level > 90 %} 
        green
      {% elif battery_level > 60 %}
        light-green
      {% elif battery_level > 50 %}
        lime
      {% elif battery_level > 40 %}
        yellow
      {% elif battery_level > 30 %}
        amber
      {% elif battery_level > 20 %}
        orange
      {% elif battery_level > 10 %}
        deep-orange
      {% else %}
        red
      {% endif %} 
    tap_action:
      action: more-info
    entity: sensor.nuki_frontdoor_battery
    hold_action:
      action: toggle
  - type: custom:mushroom-lock-card
    entity: lock.nuki_frontdoor_lock
    name: Front Door
    primary_info: none
    secondary_info: none
    icon_type: none
    layout: vertical
card_mod:
  style: |
    ha-card {
      {% if is_state('sensor.nuki_frontdoor_door_security_state','Closed & Locked')%}
          background: rgba(101,170,91,0.2);
      {% else %}
          background: rgba(226,84,66,0.2);
      {% endif %}
    }

I use Nuki lock which have the door and lock status in one sensor but it should work with two sensors too.

You can add the player name to the Mushroom Media Card like this:

type: custom:mushroom-media-player-card
entity: media_player.currently_playing
use_media_info: true
icon_type: icon
collapsible_controls: true
show_volume_level: false
volume_controls:
  - volume_set
  - volume_buttons
media_controls:
  - previous
  - play_pause_stop
  - next
icon: mdi:play
card_mod:
  style:
    mushroom-state-info$: |
      .primary:before {
        content: "{{ state_attr(state_attr(config.entity, "active_child"), "friendly_name") }} - ";
      }

This example is based on a Universal Media Player and displays the active players name.

4 Likes

I’ve been tinkering with this. You can blend the album art like this:

Mushroom Media Card with faded album art:

type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
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 {
      {% set media_type = state_attr(config.entity, 'media_content_type') %}
      --card-mod-icon: 
      {% if media_type == 'tvshow' %}
        mdi:television-classic
      {% elif media_type == 'movie' %}
        mdi:movie-open
      {% elif media_type == 'music' %}
        mdi:music
      {% elif media_type == 'playlist' %}
        mdi:music
      {% else %}
        mdi:play
      {% endif %};   
    } 
    ha-card {
      {% if not is_state(config.entity, 'off') and not is_state(config.entity, 'idle') %}
        background: url( '{{ state_attr(config.entity, "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
        background-size: 50%, cover;
        background-position: right;
        background-repeat: no-repeat;
        background-blend-mode: saturation;
      {% endif %}  
    }

Update: Change background-blend-mode to saturation. This looks a bit nicer and allows me to remove the stack-in-card.

23 Likes

Just a little tweak to the Mushroom Climate Card to animate the fan icon:

Mushroom Climate Card - Animated Fan

    type: custom:mushroom-climate-card
    entity: climate.air_conditioner
    name: Air Conditioner
    show_temperature_control: true
    hvac_modes:
      - heat_cool
      - heat
      - cool
      - dry
      - fan_only
    card_mod:
      style: |
        mushroom-shape-icon {
          --card-mod-icon: 
          {% if is_state(config.entity, 'heat_cool') %}
            mdi:autorenew
          {% elif is_state(config.entity, 'heat') %}
            mdi:fire
          {% elif is_state(config.entity, 'cool') %}
            mdi:snowflake
          {% elif is_state(config.entity, 'dry') %}
            mdi:water-percent
          {% elif is_state(config.entity, 'fan_only') %}
            mdi:fan
          {% else %}
            mdi:air-conditioner 
          {% endif %};
          display: flex;
          {% if is_state(config.entity, 'fan_only') %}
            animation: rotation 1s linear infinite;
          {% endif %}
        }
        @keyframes rotation {
          100% {
             transform: rotate(360deg);
          }
        }
18 Likes

Great how the albumart fades across the card. Noticed the entity media_player.currently_playing. You mind elaborating on this as this doesn’t look familiar?

1 Like

Thank you. Most of this has been done, but I’ll give the remaining ideas a try.

Looks great. Out of curiosity is that a slider of sorts on the right? What does it do?

image

it is only sound / voice slider from my phone . while taking the screenshot :smiley:

4 Likes

Hi everyone, this is a great thread to get new ideas. I wanted to show a feature I made for my CCT LED strips. I wanted to have the ability to turn on/off, as well as select the colour temperature without fiddling with a slider. This is what I came up with. Uses a combination of stack-in card, grid cards, and mushroom templates.

Happy to share the YAML if someone is interested.

6 Likes

great!! yes, please YAML. :slight_smile:

Here’s the code for the first entity, the others are a copy-paste with just the entity id changed.

          - type: custom:layout-card
            layout_type: custom:vertical-layout
            layout: {}
            cards:
              - type: custom:stack-in-card
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(28,28,28,0.6)
                    } 
                cards:
                  - type: custom:layout-card
                    layout_type: custom:grid-layout
                    layout:
                      grid-template-columns: 90% 10%
                    cards:
                      - type: custom:mushroom-light-card
                        entity: light.living_room_strip
                        fill_container: true
                        show_brightness_control: true
                        show_color_control: false
                        show_color_temp_control: false
                        use_light_color: true
                        card_mod:
                          style: |
                            ha-card {
                              box-shadow: none;
                              background: none;
                            } 
                      - type: vertical-stack
                        cards:
                          - type: custom:mushroom-chips-card
                            chips:
                              - type: action
                                icon_color: blue
                                tap_action:
                                  action: call-service
                                  service: light.turn_on
                                  data:
                                    color_temp: 154
                                  target:
                                    entity_id: light.living_room_strip
                                icon: mdi:lightbulb
                                card_mod:
                                  style: |
                                    ha-card {
                                      --chip-background: rgba(var(--rgb-blue), 0.2);
                                    } 
                          - type: custom:mushroom-chips-card
                            chips:
                              - type: action
                                icon_color: amber
                                icon: mdi:lightbulb
                                tap_action:
                                  action: call-service
                                  service: light.turn_on
                                  data:
                                    color_temp: 267
                                  target:
                                    entity_id: light.living_room_strip
                                card_mod:
                                  style: |
                                    ha-card {
                                      --chip-background: rgba(var(--rgb-amber), 0.2);
                                    } 
                          - type: custom:mushroom-chips-card
                            chips:
                              - type: action
                                icon_color: orange
                                icon: mdi:lightbulb
                                tap_action:
                                  action: call-service
                                  service: light.turn_on
                                  data:
                                    color_temp: 500
                                  target:
                                    entity_id: light.living_room_strip
                                card_mod:
                                  style: |
                                    ha-card {
                                      --chip-background: rgba(var(--rgb-orange), 0.2);
                                    } 

Here is a visualization to understand the sections of the card:

9 Likes

If my fan has 6 speeds. Is there a way to use the slider on the fan card to choose which speed I want?
I currently have 6 seperate buttons on card

for example 1-16% would be speed 1
17-33% woudl be speed 2
and so on.

1 Like

Another option is to use the template card and media card (whiteout icon, primary info and secondary info) and use the stack card. Than you don’t need to use card mod and are flexible where what info is presented.

for example:

type: custom:stack-in-card
keep:
  margin: true
cards:
  - square: false
    columns: 1
    type: grid
    cards:
      - type: custom:mushroom-template-card
        primary: |-
          {% set s = state_attr(entity, 'source') %}
          {% if s %} Spotify - {{s}}
          {% else %} Spotify
          {% endif %}
        secondary: |-
          {% set a = state_attr(entity, 'media_artist') %}
          {% set t = state_attr(entity, 'media_title') %}
          {% if a %} {{a}} - {{t}}
          {% else %} Beschikbaar
          {% endif %}
        icon: mdi:spotify
        entity: media_player.spotify_secondary
        icon_color: |-
          {% set s = state_attr(entity, 'source') %}
          {% if s %} deep-orange
          {% else %} disabled
          {% endif %}
        fill_container: true
        tap_action:
          action: more-info
      - type: custom:mushroom-media-player-card
        entity: media_player.spotify_secondary
        fill_container: true
        media_controls:
          - shuffle
          - previous
          - play_pause_stop
          - next
          - repeat
        collapsible_controls: true
        icon_type: none
        primary_info: none
        secondary_info: none

image

1 Like