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

IMG_3960
IMG_3959
Top is now, other is before

So the words Partly Cloudy are missing?

Or sunny or cloudy yes, but also if rain is forecast it would say 22mm, rain for example

Where is the link to the original location you got this card config from?

Rain is definitely an issue

It’s not the card, the weather integrations have changed. They are polling in a different manner to reduce the overall impact on the system’s performance.

The closest thing I can find in Tomorrow.io for rain is a precipitation type sensor sensor.tomorrow_io_home_precipitation_type its current state is None when I open it. If you click on the 1 Service the integration runs from the Devices and Services Page, you can enable the sensor and see if that fixes it.

Try change the top {% set intensity = states('weather.tomorrow_io_home_daily') %} to
{% set intensity = states('sensor.tomorrow_io_home_precipitation_type') %}

      - type: custom:mushroom-template-card
        primary: '{{ state_attr(entity, ''temperature'') | round(1) | float(0) }} °C'
        secondary: >-
          {% set condition = state_attr(entity, 'forecasts')[0]['conditions'] %}
          {% set intensity = states('sensor.tomorrow_io_home_precipitation_type') %}

          {% if intensity != 'None' %}
            {% set condition = intensity + "mm" ' Rain' %}
          {% endif %}

          {{ condition }}
        icon: ' '
        entity: weather.tomorrow_io_home_daily
        picture: >-
          {% set condition = states(entity)  %}

          {% set intensity = states('weather.tomorrow_io_home_daily') |
          replace(" ", "-") | lower %}

          {% if condition == 'partlycloudy' and is_state('sun.sun',
          'below_horizon') %}
            {% set condition = condition + '-night' %}
          {% endif %}

          {% if intensity != 'none' and condition != 'lightning' %}
            {% set condition = intensity %}
          {% endif %}

          /local/weather_icons/anim/{{ condition }}.svg

Rain is measured in mm/h. It can change significantly in minutes and it can differ significantly in a 100m area. Therefore, a rain sensor is the only meaningful way of detecting current rain.

The next best thing are the condition or the precipitation per hour.
Condition can be accurate to half an hour, but it’s often much worst.

In all cases, it is good to know how your favorite weather service works. Does it show the weather of the closest weather station or does it calculate an average for your exact location based on several weather relations.

A animated weather radar image can also be useful and would be my recommendation for must UI related things.

1 Like

I am not sure why you replied to me? I was simply sharing the fact the weather integrations have gone through significant changes. This topic and your reply is not Mushroom related.

I would suggest creating a Feature Request(FR) or new thread.

Appreciate you sharing, here is a grill animation I created a while back.

chrome-capture-2024-6-21

type: custom:mushroom-template-card
primary: Grill
icon: mdi:grill
icon_color: black
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --icon-color: black !important;
        --icon-symbol-size: 30px;
        background: rgba(220, 220, 220, .3)
        !important;
        }
      .shape:before {
         content: "";
         height: 15px;
         width: 21px;
         border-width: 0;
         position: absolute;
         background: linear-gradient(to top left, #FFFF11 40%, red 57%);
         margin-top:-15px;
         filter: blur(1px);
         clip-path: polygon(71% 83%, 78% 73%, 81% 64%, 80% 55%, 76% 47%, 69% 41%, 63% 36%, 59% 30%, 56% 22%, 59% 14%, 62% 7%, 50% 15%, 44% 20%, 39% 28%, 35% 40%, 36% 49%, 38% 58%, 33% 57%, 30% 51%, 31% 35%, 24% 44%, 19% 59%, 21% 50%, 22% 66%, 26% 76%, 35% 85%, 48% 88%, 61% 86%);
         animation: fire 400ms ease-in-out infinite;
                    }
       @keyframes fire {
       0%, 100% { transform: translate(0, 0) rotate(0); }
       20%  { transform: translate(0.4px, -0.4px) rotate(4deg); }
       40%  { transform: translate(-0.4px, 0.4px) rotate(-4deg); }
       60%  { transform: translate(0.4px, 0.4px) rotate(4deg); }
        }
    .: |
      ha-state-icon {
           clip-path: polygon(15% 30%, 86% 30%, 100% 100%, 0% 100%); }
         }
3 Likes

I have the bad habit of sharing useless facts. Maybe it is interesting to someone.

1 Like

I found it of interest.

1 Like

As did I, but still not Mushroom related. It’s best to keep topics within the appropriate thread to make it easier for future users to locate solutions based on the topic.

Cross posting just adds complexity to a search and we should do our part to improve the forum’s search engine…

2 Likes

I agree but a certain amount of cross posting actually helps especially when related to an issue. The search engine rarely gets you close, I find myself scrolling through an entire thread just to find my answer. Main thing is the information is there and leads off in the right direction help. I digress this is also not mushroom related. BTW I appreciate your posts here and various other places on the forum, very helpful.

Hello, I’m using the media player card to make a volume bar. I was wondering if there’s a way to make another bar which control the playback position/progress of the media player?

type: custom:mushroom-media-player-card
volume_controls:
  - volume_set

Check out the Mini-media-player You can add and hide a ton of features.

Using a stack card would make it easy to add to a Mushroom card if you are sticking with a particular style.

Hi guys, can you advise how can I add the " graus" and " min" after the value in mushroom-number-card ? I tried secondary but did not work. secondary: '{{ states(entity) }} graus'

download

This is one method

type: custom:mushroom-number-card
entity: input_number.apex
card_mod:
 style: 
   mushroom-state-info$: |
    .secondary:after {
     content: "graus"; }   

2 Likes

don’t work

it does work you just haven’t added it correctly!
look at this guide

especially the

What the $ and .: | symbols do

1 Like