Mushroom Inspiration!

Room card “mushroom style”

I had quite a struggle to adapt a room card to mushroom style without too mush modification. Hereafter the state I currently keep.

Massive use of pop-ups with tap actions on the buttons, and hold action on buttons allows quick control of functions…

All description and code are available (and updated…) on the French forum here: [Carte] Mise en forme de ma mushroom room-card et tuto - Interface / Lovelace / Thème / Custom Card - Home Assistant Communauté Francophone

Plus a simpler variation with step by step tuto to install there (room card for dummies): [Carte] Mise en forme de ma mushroom room-card et tuto - #12 par BBE - Interface / Lovelace / Thème / Custom Card - Home Assistant Communauté Francophone

Picture of the cards:
Basic format :
image
image

Horizontal format:
image
image

11 Likes

You must have missed my post above or the first post in this topic, unfortunately. That’s no problem, I’ll quote it again for you:

To resolve this, I took the liberty to report your post as off-topic. Please use the aformentioned topic to ask questions or send a PM to the user.

The topic is here:

And this is the link to @ingo.niehues profile summary, where you can send a PM to him, in the top right corner is a button “Message”.

Thank you very much for your understanding

7 Likes

I read the code but the cards are duplicated in two sites desktop and mobile, how are managed in desktop version?

Hello can you share this card, please? i can’t find them on the forums.

image

Thanks!

Sorry for a very late response. But if you still are interested here’s the code for the card.

  type: tile
  entity: fan.ceiling_fan
  vertical: false
  name: Pultvifte
  features:
    - type: fan-speed

Here it is with the animated fan.

    type: tile
    entity: fan.ceiling_fan
    vertical: false
    name: Pultvifte
    features:
      - type: fan-speed
    card_mod:
      style: |
        ha-state-icon {
          {% if is_state(config.entity, 'on') %}
          animation: rotate .5s infinite linear}
        @keyframes rotate {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(-359deg);
            }
          }
          {% endif %}

Might be a niche use case:
I wanted a way to see the fluid level in my watering tank, so I used the background to represent the fluid level:
Bildschirmfoto 2024-07-08 um 17.53.42

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: linear-gradient(0deg, rgba(96, 125, 139, 0.3) calc( {{ states('sensor.wassertank') }}% / 0.62 ), rgba(96, 125, 139, 0.12) 0.1%) !important;
      }

This effectively sets the background to a gradient with minimal transition. !important is used as usual to overwrite the background color.

9 Likes

Might also be a nice way to show percentage progress of something, e.g. washing machine or similar. Thank you!

By modifying the angle (0deg → 90deg) this would work nicely as a progress indicator. Correct.