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

Share your Projects!
,
6765

how to apply a style so that it only works when the sensor status is on

{% if is_state(config.entity, 'on') %}

    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;;
          }
          @keyframes ping {
            0% { box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0.7); }
            100% { box-shadow: 0 0 5px 15px transparent; }
          }
          @keyframes blink {
            100% {opacity: 0;}
          }
6766

Hi

Since the HA 2023.5.x update I have problems with my header:

First, my fixed card goes up on the top header of HA
header1

Second, when I want to modify the card, I see it appear on top
header2
edit: second problem solved while playing with z-index. I changed the value 9 to 4

    :host {
      position: sticky;
      z-index: 4;
      top: 0px;
    }

An idea of ​​the problem ?

2 Likes
6767

had the same. On my side it was theme topic

I have set this in my theme.yaml

masonry-view-card-margin: 0px 20px

fixed the issue for me

1 Like
6768

it doesn’t change anything for me :frowning:
I cleared the browser cache just in case.

6769

what is the name of your sensor?
'cause something like

{{states('sensor.temperatuursensor2_temperature') }}

should show the exact state is current lights on a counter / is it a sensor?

6770

I just might have solved it.

In fact, the latest releases (2023.5 and onwards) have fixed the problem that started occurring as of more or less 2023.4: back then, based on input from this very thread, I replaced
top: var(--header-height); by top: 0px; to stop the same problem from occurring.
The solution now then is to just change it back to top: var(--header-height); (at least, that’s what worked in my case. I reverted z-index: 9; to z-index: 1; as well, but didn’t have the impression that changed matters).

Hth

2 Likes
6771

Thank you for your answer.
I looked on my side, replacing:
top: 0px;
by
top: var(--header-height);

It works for me! Thank you so much.

I had found another solution by modifying the value:
top: 0px;
by
top: 56px;

:slight_smile:

6772

How to prevent the title text from breaking into two lines? I would prefer the text to be shorten.

obraz

type: vertical-stack
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr auto
      grid-template-areas: |
        "title chips"
      margin: '-4px'
    cards:
      - type: custom:mushroom-title-card
        title: Lorem ipsum lorem ipsum lorem
        view_layout:
          grid-area: title
      - type: custom:mushroom-chips-card
        view_layout:
          grid-area: chips
        chips:
          - type: entity
            entity: sensor.temperature_goscinny
            icon_color: amber
          - type: template
            content: ''
            icon_color: |-
              {% if is_state(entity, "on") %}
                amber
              {% else %}
                default
              {% endif %}
            icon: |-
              {% if is_state(entity, "on") %}
                mdi:window-open
              {% else %}
                mdi:window-closed
              {% endif %}
            tap_action:
              action: more-info
            entity: binary_sensor.window_goscinny
          - type: template
            entity: binary_sensor.motion_goscinny
            icon: |-
              {% if is_state(entity, "on") %}
                mdi:motion-sensor
              {% else %}
                mdi:motion-sensor-off
              {% endif %}
            icon_color: |-
              {% if is_state(entity, "on") %}
                amber
              {% else %}
                default
              {% endif %}
            tap_action:
              action: more-info
        alignment: end
        card_mod:
          style: |
            ha-card {
              transform: translateY(43%);
            }
  - type: conditional
    conditions:
      - entity: input_boolean.heating_season
        state_not: 'off'
    card:
      type: custom:mushroom-climate-card
      entity: climate.thermostat_goscinny
      show_temperature_control: true
      collapsible_controls: false
      hvac_modes: []
      layout: horizontal
      tap_action:
        action: more-info
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-light-card
        entity: light.lamp_goscinny
      - type: custom:mushroom-light-card
        entity: light.ceiling_goscinny
        show_brightness_control: false
        collapsible_controls: true
        show_color_temp_control: false
        layout: horizontal
        use_light_color: false
        show_color_control: false
    columns: 2
1 Like
6773

Thank you for your reply. I could not display the text in the badge. But was able to display the icon.

{% if states('sensor.current_lights_on')|int > 0 %} 
            {{ 'mdi:numeric-' + states('sensor.current_lights_on') + '-circle' }}
          {% endif %}

Now my problem is that the number of the lamps does not change when I turn off the light with the switch. Can I say not to display the color of the badge when light.lumi_lumi_switch_b2lc04_light_2 and light.lumi_lumi_switch_b2lc04_light off?

6774

Question for @rhysb or other members who can help: I’m trying to get the beautiful media player cards from this thread to work with what’s playing on my nVidia Shield, but it seems this is not making the entity_picture available, which means I can’t see the artwork of whatever is playing (nor can it be used to define colours). When I change the media player to e.g. ‘my’ Spotify, all works perfectly, so it really doesn’t seem to be the code itself but the ‘pass through’ capability of the artwork by the nVidia Shield (or Android TV?) integration.

I read that some people are using the Universal Media player but I don’t quite see how that would help as besides Spotify, I also use YoutTube, Kodi etc on the same device…

Some guidance would be strongly appreciated. Thanks in advance!

6775

hello @rhysb i have since the last update that these 2 things don’t go too well anymore so i can’t get into my menu properly how could i solve this i already deleted the cache & back ha restarted the app but this doesn’t help?

IMG_3877
IMG_38771284×2778 100 KB

IMG_3878
IMG_38781284×2778 220 KB

6776

Hi @rhysb
Great work there! I’d like to ask for your help in something I think you’d like too:
How’s possible instead of navigating each time you press the welcome card buttons to another view (eg. lights, secure etc) to keep the welcome card always on top and show beneath it the appropriate set of cards?
That way you save interface button presses and I guess the UI looks neater!
Any suggestions?
Thank you in advance!

1 Like
6777

Please tell me how you made the square card grid?

6778

Please tell me how to add an image instead of an icon? What formats are supported? What size picture do you need?

6779

Hey @Roflcopterer,

Thanks for your sidebar-card config, very cool. I copied and adapted it for my use case.

I also added icons in the menu items as you did. If my HA dashboard is in dark mode they appear but if it is in day mode (i.e. white background) they are invisible (as they have the same color as the background). Also the 2 separator lines are invisible.

IMG_0033
IMG_0033587×629 27.3 KB

IMG_0032

Do you have an idea if it is possible that the icons (and lines) also follow the automatic day/night mode of HA i.e. that they they change to black in day mode as also the font color does?

Thanks! Hannes

6780

Id once been playing around with an idea for a washing machine card that someone may wish to run with a little more (kinda give up lol)

Is it worth hanging the washing out!

So the first idea was to just add a probability of rain and the forecast high for the day to a washing machine card
BUT the it dawned on me why not combined the two as a percentage rating
the higher the percentage the more likely the washing would get dry outside

found it easier to make two sensors from my weather station here (weather.imosgi10) but you could just change this for HA (weather.weather)
one for probability rain and one for max high

the last sensor is the possibility of drying based off those two sensor
i believe it kinda works but to be fair it needs some more playing around with someone may wish to try … kinda give up
wash

# Drying
  - platform: template
    sensors:
      washing_recommendation:
        friendly_name: "Washing Recommendation"
        unique_id: washing_recommendation
        value_template: >-
          {% set rain_percentage = states('sensor.forecast_total_2')|float %}
          {% set temperature = states('sensor.forecast_total_3')|float %}
          {% set rain_weight = 0.7 %}
          {% set temp_weight = 0.2 %}
          {% set rain_factor = 1 - rain_percentage / 100 %}
          {% set temp_factor = (temperature - 10) / (15 - 10) %}
          {% set combined_percentage = (rain_weight * rain_factor + temp_weight * temp_factor) * 100 %}
          {{ max(min(combined_percentage, 100), 0)|round }}
        unit_of_measurement: '%'
        icon_template: >-
          {% set icon = 'mdi:weather-sunny' %}
          {% if states('sensor.forecast_total_2')|float > 0 %}
            {% set icon = 'mdi:weather-pouring' %}
          {% endif %}
          {% if states('sensor.forecast_total_3')|float < 15 %}
            {% set icon = 'mdi:snowflake' %}
          {% endif %}
          {{ icon }}
        entity_id:
          - sensor.forecast_total_2
          - sensor.forecast_total_3

# Rain Today
  - platform: template
    sensors:
      forecast_total:
        friendly_name: "Proability of Rain"
        unique_id: rain_precipitation_probability
        icon_template: mdi:weather-pouring
        value_template: "{{state_attr('weather.imosgi10', 'forecast')[0].precipitation_probability}}"
        unit_of_measurement: "%"
        device_class: precipitation
        
        
# Max High
  - platform: template
    sensors:
      forecast_total:
        friendly_name: "Max Today"
        unique_id: high_precipitation
        icon_template: mdi:sun-thermometer-outline
        value_template: "{{state_attr('weather.imosgi10', 'forecast')[0].temperature}}"
        unit_of_measurement: "℃"
        device_class: precipitation
1 Like
6781

Does anyone know how to pipe the Source list of a Media Player entity into a Mushroom Select Card? Media Player Entities would definitely benefit from the use of this card. My Apple TVs and my Yamaha AV Receiver both have Source pulldown menus I’d like to leverage directly rather than having to click through the card.

image
image1092×590 42.6 KB

5 Likes
6784

Thanks for posting this!, as of May 2023 it works perfectly

6785

hello i have this card configuration but is not showing the badge, what i am make wrong?

        type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: >-
          {{ 'mdi:window-open-variant' if is_state(entity, 'on') else
          'mdi:window-closed-variant'
           }}
        entity: binary_sensor.senzorgeammedian_contact
        layout: vertical
        badge_color: ''
        icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(states.light.casa) | selectattr( 'state', 'eq', 'on') | list | count }}";
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              font-weight: bolder;
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
              }
6786

@rhysb First thanks a lot for your posting and the knowledge within.

While rebuilding my ui to make it more Family usable i came across your room example. Unfortunately it is not workig as expected. Just copying your code and adapting it to my entities/sensor gives me the following.

image
image750×171 5.54 KB

Compared to your screenshots there are somet of differences.
image
image787×183 14.4 KB

The icon does not cover the edge and i have still borders.

Would you mind posting your actual code, so that i could see the differences to the old one.

Thanks
Thomas

1 Like