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

Share your Projects!
,
9149

Not sure if this helps but I combined attributes to create a sensor that was based off the direction and speed. That helped pair down the if then results.

sensor:
  - platform: template
    sensors:
     fan_direction:
       friendly_name: "Fan Direction"
       unique_id: fan1
       value_template: "{{ state_attr('fan.bedroom_fan', 'direction') }}"
     fan_direction_speed:
       friendly_name: "Fan Direction Speed"
       unique_id: fan2
       value_template: |
         {% set direction = state_attr('fan.bedroom_fan', 'direction')  %}
         {% set speed = state_attr('fan.bedroom_fan', 'percentage')  %}
         {{[direction,speed]|join("")}}
9150

mushroom-slider support min max properties so this should be possible to add. Don’t have any workaround we can do right now and have to wait for the feature to be added. I need this feature as well so might create a PR to add this when I get the time.

Edit: actually, there’s already a pending PR that add this exact feature:

1 Like
9151

That really looks insane!!!
Would love to create this for my (47) Hue devices, wow!
If you’re ever able to document how you achieved this, that would be awesome.
Thanks for sharing!

9152

you are the best!!! :rofl: :rofl: :rofl: :rofl:

9153

its basically just this:
image

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: none;
        {% if states(config.entity) == 'on' %}
          filter: drop-shadow(rgba{{state_attr(config.entity, 'rgb_color') + (1,)}} 0px 6px 10px);
        {% endif %}
      }

and then some custom hue icons from HACS

looks like this section is also being used to color the inside of the custom icons. clearly handmade sizing 1 by 1. Well done on that btw, that takes some effort @LiQuid_cOOled :
image

      {% if is_state(config.entity, 'on') %}
        ha-state-icon:before {
          content: "";
          width: 27px;
          height: 20px;
          transform: rotate(13deg) skew(-10deg);
          background: {{"#%02x%02x%02x" % state_attr(config.entity, "rgb_color") }};
          border-radius: 0px;
          border-width: 0px;
          margin-top: 13.5px;
          margin-left: 10.5px;
          position: absolute;
        }
      {% endif %}
9154

Yes indeed, this is my conclusion as well:

“clearly handmade sizing 1 by 1”

Unfortunately not a simple read, copy/paste and learn.

But when I take your example, which lines do I need to “play with”, to color inside of the custom icons (and only that)? margin-top / margin-left ?

      {% if is_state(config.entity, 'on') %}
        ha-state-icon:before {
        content: "";
        width: 27px;
        height: 20px;
        transform: rotate(13deg) skew(-10deg);
        background: {{"#%02x%02x%02x" % state_attr(config.entity, "rgb_color") }};
        border-radius: 0px;
        border-width: 0px;
        margin-top: 13.5px;
        margin-left: 10.5px;
        position: absolute;
      }
      {% endif %}
9155

transform: rotate() skew()
and margin-top, margin-left

you can use negative values in all of these i believe too.

9156

Wow, that looks really cool. Thanks for the tag, I will definitely incorporate that. I can’t wait to see how it looks. It’s just too bad for you that it doesn’t work with HTTPS again. Unfortunately, I still haven’t found another solution. I have the same problem on my companion app via HACloud, too

1 Like
9157

Thanks.
I think I would be thankful forever, if @LiQuid_cOOled wants to share his formatted code, although I would understand it is just too much work to “just share”…

:ok_hand:

9158

Hi again :grinning:

How i put now one card side by side, with a little space between

Capture d’écran 2023-12-13 à 18.35.28
Capture d’écran 2023-12-13 à 18.35.281374×842 103 KB

type: custom:stack-in-card
mode: horizontal
style: |
  ha-card {
    width: 370px;
    height: 80px!important;
    border: none;
    background-color: #FAFAFA!important;   
    margin-left: -6px;
   }
cards:
  - type: custom:stack-in-card
    style: |
      ha-card {
        width:120px;
      }
    cards:
      - type: custom:mushroom-template-card
        primary: Banca
        secondary: '{{ states("binary_sensor.contact_sensor")}}'
        icon: mdi:window-closed-variant
        entity: binary_sensor.contact_sensor_2
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-color: red!important;
                --shape-color: #FBD7D4!important;
               }
            .: |
              ha-card {
                width: 120px;
                border-style: none;
                background-color: #E2E2E2!important;
              }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: JanelaFogao
        secondary: '{{ states ("binary_sensor.contact_sensor_3")}}'
        icon: mdi:window-closed-variant
        entity: binary_sensor.contact_sensor_3
        card_mod: null
9159

Here is my finished and working popup for my pellet stove. :smiley:

1000707537
10007075371080×1512 87.1 KB

4 Likes
9160

Any reason you cant just use a grid with your 2 cards rather than a bunch of stack cards?

type: grid
columns: 2
square: false
cards:
  - type: custom:mushroom-template-card
    primary: Banca
    secondary: '{{ states("binary_sensor.contact_sensor")}}'
    icon: mdi:window-closed-variant
    entity: binary_sensor.contact_sensor_2
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --icon-color: red!important;
            --shape-color: #FBD7D4!important;
          }
        .: |
          ha-card {
            border-style: none;
            background-color: #E2E2E2!important;
          }
  - type: custom:mushroom-template-card
    primary: JanelaFogao
    secondary: '{{ states ("binary_sensor.contact_sensor_3")}}'
    icon: mdi:window-closed-variant
    entity: binary_sensor.contact_sensor_3
9162

more simple :grinning:

where i can use stack card?

9163

Why do you need a stack card here?
You had only 1 card in each stack anyway, can you try and explain your usecase better?

9164

I learned like that, maybe i do wrong, and there are better ways to do it

9165

So the stack in cards are specifically used for making cards look like they are contained together in the same card. So like this:

No stack in card, but a regular stack instead:

SmartSelect_20231213_202545_Home Assistant
SmartSelect_20231213_202545_Home Assistant1068×235 33 KB

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Hello, {{user}}
    secondary: How are you?
    icon: mdi:home
  - type: custom:mushroom-template-card
    primary: Hello, {{user}}
    secondary: How are you?
    icon: mdi:home

Stack in card (in horizontal mode):

SmartSelect_20231213_202724_Home Assistant
SmartSelect_20231213_202724_Home Assistant1064×221 35.4 KB

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: Hello, {{user}}
    secondary: How are you?
    icon: mdi:home
  - type: custom:mushroom-template-card
    primary: Hello, {{user}}
    secondary: How are you?
    icon: mdi:home
9166

Ok, now i understood

Thanks a lot

1 Like
9167

@dimitri.landerloos how we can add another icons to HomeAssistant?

9168

Which ones? The Hue ones i mentioned? Just download them from HACS.

SmartSelect_20231213_212015_Home Assistant
SmartSelect_20231213_212015_Home Assistant1080×541 50.6 KB

9169

Nice find with the pending PR, I’ll hope that gets implemented.
Looking at it though, it seems like it’s been left un-merged, likely because the change in behaviour would be a breaking change.

Maybe the PR could be modified to have a toggle switch for minimum value of 1 instead of zero?