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

[LiQuid_cOOled]

This should work for you

type: custom:mushroom-template-card
entity: climate.thermostat
icon: mdi:fan
icon_color: |-
   {{ 'grey' if state_attr(config.entity, 'fan_mode') == 'off' else 'blue'}}
primary: |-
   {{ 'Not Running' if state_attr(config.entity, 'fan_mode') == 'off' else 'Running'}}
tap_action:
  action: navigate
  navigation_path: /lovelace/temperature
card_mod:
  style: |
    ha-state-icon {
      {{ 'animation: spin 1s linear infinite;' if state_attr(config.entity, 'fan_mode') == 'off' else 'animation: none;' }}
       }

[anline]

I’ve been trying to recreate this thermostat card for a long time, especially this variant (there are several variants) - New Thermostat card based on Lovelace Style - #11 by spencersmb, Because I think it’s a very beautiful design, so far I’ve only succeeded mediocrely.
Unfortunately the project is dead and was not generic (only for Honeywell), it would be great if someone with experience could help here.

[Martin_Granger]

I’m trying to get my dashboards all working with the new sections view. All seems pretty good, but I’m having an issue where conditional chips are leaving a gap when they shouldn’t be in view.

You can see the large gap that shouldn’t really be there in the image.

The second image is in edit view to show the chips.

Anyone else having this issue?

[Chykan (Andrew)]

Yes when I cast to a nest hub the gap shows up but not on the home assistant app or a browser. I have a pixel tablet hub as well, same behaviour cast gap is there, app displays as it should.

[fugley]

pretty much that exact layout is here in one of these mushroom threads as i used to use it myself … sorry not sure where but i do remember getting there code from here

[Coolie1101 (Coolie)]

Is it possible to animate the stove icon?

[LiQuid_cOOled]

All Mushroom Icons can be animated in some form. You’ll have to describe what animation you’d like the stove to have.

Check out this thread

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

Works! This was pretty good actually. I already had an if for lightbulb chip to appear at the bottom when the light is on but this is good to know that I could add a second if as well. Makes sense.

[Coolie1101 (Coolie)]

Happy Birthday!

Been browsing that thread but can’t figure out how to animate when the stove top or oven is in use.

[LiQuid_cOOled]

Definitely something I can assist with. Do you have 2 different sensors that tell you when the oven and stove top are on/off?

As an example

Thanks for the birthday wishes

[Coolie1101 (Coolie)]

Yes
“sensor.range_cooktop_burner” which is either “run”, or “ready”
“sensor.range_oven_job_state” which is either “preheat”, “cooking”, or “ready”

[LiQuid_cOOled]

Ok, give me a bit, and I’ll put together a solution. Do you have an idea how you’d like each section represented with activity? Colors, animation?

[Coolie1101 (Coolie)]

for the cooktop maybe animate the flame for “mdi:gas-burner”

for the oven maybe animate the middle section similar to the dryer without the shaking, or maybe add the flame as you did with the fireplace.

[LiQuid_cOOled]

That’s doable!

[anline]

I went through the thousand posts from parts 1 and 2 several times and didn’t find anything similar. Help for the minimized tile would be great…

[jeromarsan]

@rhysb is it possible to resize the cover of media player ?

Other question, when i listen music on Spotify, i have all the buttons, but on Plexamp, i can’t have the buttons Any idea please ? Thanks

[Vlad_August]

Hi, how can i change the color for light chips? All examples with card don’t work(

[Frosty]

type: custom:mushroom-chips-card
card_mod:
  style: 
    mushroom-light-chip:nth-child(1)$: |
      ha-state-icon {
        --card-mod-icon: mdi:lightbulb;
        --icon-color: blue;
      }
chips:
  - type: light
    entity: light.lights_off
    

examples work fine for me

[Martin_Granger]

It’s a shame as this conditional gap for me makes it unusable. I’m hoping a fix for this comes soon somehow!

[Zenia (Yevgeniy)]

Happy birthday!!! All good wishes to you.

[LiQuid_cOOled]

How you feel about these animations? The animations will react to the state of each sensor.

Both

Oven only

Stove Top Only