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

[tfmeier (Thomas Meier)]

Media integration in mushroom is one of my main projects now and I’m trying to learn from the great masters here…

While I’m trying to get my head around this one thing I don’t seem to see in any of the posts here is the replacement of the remote for UI navigation. Say I have a Google TV media player. How do you navigate the UI to select the program/video/episode with the various media players featured on this page?

Do you guys still use the remote for this? If not how do you control it from the mushroom UI, e.g. simple up/down/left/right/confirm etc. commands etc.?

[Vandana (Vandana Dass)]

Guys plz help me how can I design the same using mushroom cards.

I am a beginner plz help

[rhysb (Rhys)]

Here you go.

Mushroom Light Card with animated icon:

type: custom:mushroom-light-card
entity: light.office_light
show_brightness_control: true
card_mod:
  style: |
    mushroom-shape-icon {
      {% if is_state(config.entity, 'on') %}
        --card-mod-icon: 
        {% set light_level = ((state_attr(config.entity, "brightness") / 255) * 10) | round(0) * 10 %}
        {% if light_level == 100 %}
          mdi:lightbulb-on
        {% elif light_level > 0 %}
          mdi:lightbulb-on-{{ light_level }}
        {% else %}
          mdi:lightbulb-on-outline
        {% endif %};
      {% else %}
        --card-mod-icon: mdi:lightbulb-outline;
      {% endif %}
    }

[rhysb (Rhys)]

Here’s an iOS styled Mushroom Card for you:

type: custom:mushroom-template-card
primary: Apple-ish Mushroom
icon: mdi:apple
icon_color: green
layout: vertical
card_mod:
  style:
    .: |
      mushroom-shape-icon {
        display: block;
        margin-left: auto;
        width: 96px;
      }
      mushroom-state-info {
        text-align: start;
      }
      ha-card {
        width: 120px;
        height: 120px;
        margin: auto;
      }
      mushroom-state-item {
        height: 96px;
      }
    mushroom-state-info$: |
      .primary {
        white-space: normal !important;
        overflow: hidden;
      }

[tobpet]

Icon animation like the radiator.
“icon animation using clip-path”

[Sylwester (Sylwester Olik)]

You are the best @rhysb !!! Amazing.

[rhysb (Rhys)]

Yes, you can do that like this:

Mushroom Chip clip-path animation:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: template
    icon: mdi:radiator
    icon_color: orange
  - type: template
    icon: mdi:snail
    icon_color: green
card_mod:
  style:
    mushroom-template-chip:nth-child(2)$: |
      ha-icon {
        animation: clip 1s linear infinite;
      }
      @keyframes clip {
        0% {
          clip-path: inset(50% 0 0 0);
        }
        100% {
          clip-path: inset(0 0 0 0);
        }
      }

[Sylwester (Sylwester Olik)]

Did you find solution for that?

[tobpet]

Great! Thanx alot!

[rhysb (Rhys)]

You can change the colors used for the Mushroom Alarm Card/Chip by adding these values to you theme:

    mush-rgb-red: 244, 67, 54
    mush-rgb-green: 76, 175, 80
    mush-rgb-yellow: 255, 235, 59

    mush-rgb-state-alarm-disarmed: var(--mush-rgb-green)
    mush-rgb-state-alarm-armed: var(--mush-rgb-red)
    mush-rgb-state-alarm-triggered: var(--mush-rgb-yellow)

Or you can change it using CSS like this:

type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.downstairs
states:
  - armed_home
  - armed_away
card_mod:
  style: |
    :host {
      --mush-rgb-state-alarm-disarmed: var(--rgb-green);
      --mush-rgb-state-alarm-armed: var(--rgb-red);
      --mush-rgb-state-alarm-triggered: var(--rgb-yellow);
    }

[Vandana (Vandana Dass)]

Can you plz guide how can I have the same design with mushroom card. This screenshot is from room-card.

Kindly guide

[buche11 (Sebastian)]

Great, thank you! Works perfekt!!!

[image969 (James Scialdone)]

Any idea what I’m doing wrong yet with the slider?

[Dirkdejong81 (D de Jong)]

Is it possible to get more information by the name or create something like this? now i did used the light card. Can i use an entity bij the name: field?

[hawaiian_pumpkin (Raj)]

@FreakLikeMe

WiFi: Picture element

Hi Can you post the code snipet pls ? newbie here having trouble integrating picture element within the mushroom chip card. thanks again.

[image969 (James Scialdone)]

Ok sorry to keep bugging you with this, but I have the code working. The fan speed changes as I drag the slider up and down

However if I drag it all the way to 0, it kills it, the animation code won’t work anymore unless I redo the code . Any idea why?

[image969 (James Scialdone)]

Anddd I fixed it. In case anyone has the same
Issue….had to change input_number slider minimum value to 1 instead of 0. 0 broke the code you gave me.

Thanks for the help

[rhysb (Rhys)]

Yes, you can add text to both the primary and secondary info text. This should work for any Mushroom Card and you can apply separate styling to the text.

Mushroom Card - Before primary text:

type: custom:mushroom-light-card
entity: light.office_light
layout: vertical
card_mod:
  style:
    mushroom-state-info$: |
      .primary:before {
        content: "({{ states('sensor.rhys_office_sensor_temperature') | round(1) }} °C / {{ states('sensor.rhys_office_sensor_humidity') | round(1) }} %) ";
        color: rgb(var(--rgb-orange));
        font-weight: 400;
      }

Mushroom Card - After primary text:

type: custom:mushroom-light-card
entity: light.office_light
layout: vertical
card_mod:
  style:
    mushroom-state-info$: |
      .primary:after {
        content: " ({{ states('sensor.rhys_office_sensor_temperature') | round(1) }} °C / {{ states('sensor.rhys_office_sensor_humidity') | round(1) }} %)";
        color: rgb(var(--rgb-red));
        font-weight: 400;
      }

Mushroom Card - Before secondary text:

type: custom:mushroom-light-card
entity: light.office_light
layout: vertical
card_mod:
  style:
    mushroom-state-info$: |
      .secondary:before {
        content: "({{ states('sensor.rhys_office_sensor_temperature') | round(1) }} °C / {{ states('sensor.rhys_office_sensor_humidity') | round(1) }} %) ";
        color: rgb(var(--rgb-blue));
        font-weight: 400;
      }

Mushroom Card - After secondary text:

type: custom:mushroom-light-card
entity: light.office_light
layout: vertical
card_mod:
  style:
    mushroom-state-info$: |
      .secondary:after {
        content: " ({{ states('sensor.rhys_office_sensor_temperature') | round(1) }} °C / {{ states('sensor.rhys_office_sensor_humidity') | round(1) }} %)";
        color: rgb(var(--rgb-green));
        font-weight: 400;
      }

[Robshot (robbie demaegdt)]

I think you will have to use roomcard for a feature to make this.
I have the same design and I’m also using room-card.

[Vandana (Vandana Dass)]

ok thank you for the reply