Adaptive Mushroom

[Zenia (Yevgeniy)]

No luck with Frog card.

Any idea where else I screwed? TY

[ArenaCloser]

Can you send a screenshot of the frog sensor states like mine here?

[Zenia (Yevgeniy)]

Thank you for quick respond. I don’t have my PC with me, here is screenshots from my phone:

[eric1905]

Did you already Post the Code of your Card? The entities Look good in my opinion

[Zenia (Yevgeniy)]

I copy @ArenaCloser code:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: 'Nu: {{states("sensor.openweathermap_weather")}}'
    secondary: '{{states("sensor.openweathermap_temperature")| round(1) }} °C'
    icon: mdi:weather-partly-cloudy
    entity: sensor.openweathermap_condition
    picture: >-
      {% set entity = states("sensor.openweathermap_condition") %} {% set cloud
      = states("sensor.openweathermap_cloud_coverage")|int %}  {% set rain =
      states("sensor.openweathermap_precipitation")|float %}  {% if entity ==
      "exceptional" %}
        {% set slug = "isolated_scattered_tstorms_day" %}
      {% elif entity == "fog" %}
        {% set slug = "haze_fog_dust_smoke" %}
      {% elif entity == "hail" %}
        {% set slug = "wintry_mix_rain_snow" %}
      {% elif entity == "lightning" or entity == "lightning-rainy"%}
        {% set slug = "strong_tstorms" %} 
      {% elif entity == "snowy" %}
        {% set slug = "flurries" %}
      {% elif entity == "snowy-rainy" %}
        {% set slug = "wintry_mix_rain_snow" %}
      {% elif rain > 0 and rain <= 0.5 %}
        {% set slug = "drizzle" %}
      {% elif rain > 0.5 and rain <= 1.5 %}
        {% set slug = "showers_rain" %}
      {% elif rain > 1.5 %}
        {% set slug = "heavy_rain" %}
      {% elif states("sun.sun") == "below_horizon" %} 
        {% if cloud < 20 %}
        {% set slug = "clear_night" %}
        {% elif cloud < 40 %}
        {% set slug = "mostly_clear_night" %}
        {% elif cloud < 60 %}
        {% set slug = "partly_cloudy_night" %}
        {% elif cloud < 80 %}
        {% set slug = "mostly_cloudy_night" %}
        {% elif cloud <= 100 %}
        {% set slug = "cloudy" %}
        {% endif %}
      {% else %}  
        {% if cloud < 20 %}
        {% set slug = "sunny" %}
        {% elif cloud < 40 %}
        {% set slug = "mostly_sunny" %}
        {% elif cloud < 60 %}
        {% set slug = "partly_cloudy" %}
        {% elif cloud < 80 %}
        {% set slug = "mostly_cloudy_day" %}
        {% elif cloud <= 100 %}
        {% set slug = "cloudy" %}
        {% endif %}
      {% endif %}
      http://www.gstatic.com/images/icons/material/apps/weather/2x/{{slug}}_dark_color_96dp.png
    multiline_secondary: false
    icon_color: grey
    tap_action:
      action: navigate
      navigation_path: /dashboard-view/nieuws
    badge_icon: ''
    badge_color: ''
    card_mod:
      style: |
        ha-card {
          background: none;
          box-shadow: none;
           --primary-text-color: rgb(240,240,240);
           --secondary-text-color: rgb(220,220,220);
        }
card_mod:
  style: |
    ha-card {
      height: 13em !important;
      background: linear-gradient(to top, transparent, rgba(var(--frog-rgb-{{states('sensor.weather_frog_status')}})) 10%), url({{states('sensor.weather_frog_image_wide')}});
      background-size: cover, 200% auto;
      background-position: bottom left {% if is_state("sensor.weather_frog_location", "field") %}20%{% elif is_state("sensor.weather_frog_location", "hills") %}40%{% else %}10%{% endif %};
      background-repeat: no-repeat;
      background-blend-mode: saturation;
    }

[ArenaCloser]

Ok I have another idea. Indeed the entities are correct now, but did you add the theme variables? Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1) - #8657 by ArenaCloser
If you’re using Mushroom theme, go to your themes folder and add it to your active mushroom[…].yaml, then call the service frontend.reload_themes.

[Zenia (Yevgeniy)]

Yes, I did
I use Mashroom Shadow Square theme and added your code to yaml file.
If I want to use a different theme, do I have to add this to thet yaml file to?

[ArenaCloser]

Yes, otherwise the background will not work. You can also define the background colors in the yaml of the card code itself, instead of in the theme, but it is easier to have it in the theme.

When I copied your code I got the frog background. I only didn’t get a cloud/sun/rain Google icon in the top left. But we can fix it later

[Zenia (Yevgeniy)]

It was my stupid mistake. I use same theme for all pages on my frontend, except this one . I create this page only for experiments and forgot to change theme, after I did it’s start working

Thank you so much for your nice job and for your help
Just curios, what NU mean?

[ArenaCloser]

You’re welcome. Your frog looks happy too

One more thing: in your card you use sensor.openweathermap_precipitation, which doesn’t exist. Replace it with sensor.openweathermap_rain and the correct Google weather icon should show up. That’s what I meant

[Zenia (Yevgeniy)]

Thank you
I will
I mean Nu which you have in front of weather

[ArenaCloser]

It’s Dutch for ‘now’

[http_edo13]

Hi, thank you for this theme, very nice! Can you please share the settings cards like system backups, updates, and developer tools? Also the details for sensors/scripts? Thank you!

[ArenaCloser]

Thanks for your kind words. You can find the code for all cards on github, but here are some:

Backup card

type: custom:mushroom-template-card
primary: Back-ups
secondary: >-
  {{state_attr('sensor.backup_state', 'backups_in_google_drive')}} back-ups,
  totaal {{state_attr('sensor.backup_state', 'size_in_google_drive')}}

  Vorige: {% if state_attr('sensor.backup_state', 'last_backup') == "Never"
  %}onbekend{% else %}{% set delta = (now().timestamp() -
  as_timestamp(state_attr('sensor.backup_state', 'last_backup')))/86400 %}{% if
  delta < 1 %}vanmorgen{% elif delta < 2 %}gisteren{% else %}{{delta | round(0,
  "floor")}} dagen geleden{% endif %}{% endif %}

  Volgende: {% set delta = (as_timestamp(state_attr('sensor.backup_state',
  'next_backup')) - now().timestamp())/86400 %}{% if delta < 1 %}vannacht{% elif
  delta < 1.5 %}morgen{% else %}over {{delta | round(0, "floor")}} dagen{% endif
  %}
icon: |-
  {% if states('binary_sensor.backups_stale') == "off" %}
    mdi:cloud-check
  {% else %}
    mdi:cloud-question
  {% endif %}
multiline_secondary: true
icon_color: |-
  {% if states('binary_sensor.backups_stale') == "off" %}
    green
  {% else %}
    red
  {% endif %}
tap_action:
  action: navigate
  navigation_path: /cebe7a76_hassio_google_drive_backup

HACS update card: Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1) - #4125 by ArenaCloser

What specific sensors/scripts would you be interested in?

[Zenia (Yevgeniy)]

Good Day. I modify a little bit @ArenaCloser frog card and it’s look great

type: custom:stack-in-card
cards:
  - type: markdown
    style:
      .: |
        ha-card {
           background-color: rgba(0,0,0,0) !important;
           box-shadow: none;
           margin-left:0rem
        }

         ha-markdown-element:second-of-type h1 {
            background-color: rgba(0,0,0,0);
            color: var(--primary-text-color);
            font-weight: normal;
            font-size: 3px;
            line-height: 3px;
          }
    content: >
      ### {{ states('input_select.frontend_greeting')}},{{user}}.<br/>  Today is
      {{ now().strftime('%A') }}, {{ now().strftime('%B') }} {% set suffix =
      ['st', 'nd', 'rd'] %}{% set day = now().day %}{% set index = 3 if day //
      10 == 1 or day % 10 == 0 else (day % 10) - 1 %} {{ day~'th' if index > 2
      else day~suffix[index] }} and it's {{ states('sensor.time_2')}}. <br/> 
      Temperature today {{states('sensor.openweathermap_forecast_temperature')
      }}°C <br/>  {{states('sensor.openweathermap_condition') }}.
card_mod:
  style: |
    ha-card {
      height: 20em !important;
      background: linear-gradient(to top, transparent, rgba(var(--frog-rgb-{{states('sensor.weather_frog_status')}})) 10%), url({{states('sensor.weather_frog_image_wide')}});
      background-size: cover, 200% auto;
      background-position: bottom left {% if is_state("sensor.weather_frog_location", "field") %}20%{% elif is_state("sensor.weather_frog_location", "hills") %}40%{% else %}10%{% endif %};
      background-repeat: no-repeat;
      background-blend-mode: saturation;
      font-size: 10px;
    }

Only one thing I can’t figure it out how to do, is how to add navigation to my Weather card?
I tried to add:

            tap_action:
              action: navigate
              navigation_path: weather

but it’s not doing anything. Any idea why? It’s work with other cards. Thank you

[ArenaCloser]

I always add navigation actions through the UI but this is what it then looks like in YAML:

tap_action:
  action: navigate
  navigation_path: /dashboard-view/nieuws

So I guess you may have to add /URL-of-your-dashboard/ in front of the page name.

[Zenia (Yevgeniy)]

Thank you for your quick response. I did all this.
What you see in navigation code, this is what I use in all my cads to navigate to the different pages and its working fine, but when I add this code to your card nothing happens.
I now its something with my code, but couldn’t figure it out what and where.

[ArenaCloser]

Did you check it is in the correct indentation? Otherwise I honestly don’t know.

[Zenia (Yevgeniy)]

So, what I decided to do for now is added a picture card and it’s working fine with navigation:

type: custom:stack-in-card
cards:
  - type: markdown
    tap_action:
      action: navigate
      navigation_path: dashboard-experimental-1/weather
    style:
      .: |
        ha-card {
           background-color: rgba(0,0,0,0) !important;
           box-shadow: none;
           margin-left:0rem
        }

         ha-markdown-element:second-of-type h1 {
            background-color: rgba(0,0,0,0);
            color: var(--primary-text-color);
            font-weight: normal;
            font-size: 3px;
            line-height: 3px;
          }
    content: >
      ### {{ states('input_select.frontend_greeting')}},{{user}}.<br/>   Today
      is {{ now().strftime('%A') }}, {{ now().strftime('%B') }} {% set suffix =
      ['st', 'nd', 'rd'] %}{% set day = now().day %}{% set index = 3 if day //
      10 == 1 or day % 10 == 0 else (day % 10) - 1 %} {{ day~'th' if index > 2
      else day~suffix[index] }} and it's {{ now().strftime('%-I:%M %p') }}.
      <br/>  Temperature  {{states('sensor.openweathermap_forecast_temperature')
      | int  }}°C <br/>  {{states('sensor.openweathermap_condition') }}.
  - type: picture
    image: .
    tap_action:
      action: navigate
      navigation_path: weather
    card_mod:
      style: |
        ha-card { 
          background-color: transparent !important;
          picture-color: green !important;
        }      
card_mod:
  style: |
    ha-card {
      height: 20em !important;
      background: linear-gradient(to top, transparent, rgba(var(--frog-rgb-{{states('sensor.weather_frog_status')}})) 10%), url({{states('sensor.weather_frog_image_wide')}});
      background-size: cover, 200% auto;
      background-position: bottom left {% if is_state("sensor.weather_frog_location", "field") %}20%{% elif is_state("sensor.weather_frog_location", "hills") %}40%{% else %}10%{% endif %};
      background-repeat: no-repeat;
      background-blend-mode: saturation;
      font-size: 10px;
    }

I would like to make this picture transparent, but no luck so far.
Again thank you for your hard work, quick respond and proffecional response.

[ArenaCloser]

Slightly hacky suggestion: perhaps upload a transparent image and use that one?