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

Without Node red you won’t be able to do this because an extra sensor is created.
You can see it at the bottom of the code.
I don’t use node red either, just use an older version of Rhys’s Media Player Card.
I promise you the music will play just as good as with this one :grin:

or change it to:

    :host {
      margin-top: 50px !important;
      --album-art-color: var(--rgb-indigo-color);

    }

Greetings
Marco

2 Likes

Hi @seanmccabe
So beautiful :slight_smile:
Can you tell me why I get circles around my stuff?
I use the code you have listed further down.Screenshot 2023-01-25 171849

Because HA updated their material design implementation, and by default it adds the stupid border around things.
The majority of us all hate that.

You will need to set the border to 0 to remove, or use a theme where the border is off by default.

1 Like

Hi!

Anyone knows if it’s possible to change the arrow icons in Mushroom Cover Card??

I have a Shelly2.5 to control a Projection Screen and the behaviour is reversed in comparison with a cover :sweat_smile:.

image

When the screen is closed, only the upper (right) arrow is available to push.

Maybe with stack-in-card, but i’m also interested in the % slider.

Thx!

Thanks for this. It works for the cover card. How would I change it to work for the mushroom entity card?

I like a simplistic view. This is my “lights and fans” dashboard:

Only about 1/2 shown … has lights, switches, LEDs, Light groups

And my media center view:

And my Roborock:

Slowly coming together!

Observations:

  1. mushroom-media-player needs a source selection!!!
  2. mushroom-select should support putting everything on one line, too much wasted real-estate to have it on a separate line (I see very little difference here between that and volume control or a light brightness.
  3. same comment to the fan control, why would someone need a huge, fill size scroll bar for a fan?
4 Likes

You can use template covers to “invert” your covers according to when they are open or closed.

I’ve heard people have been having issues with the swipe card but so far I haven’t had any issue with it. This is the one I currently have installed

1 Like

Thanks but a little too chunky for what I was after.

Can you make it look the same as a mushroom card? I am thinking maybe I need a template sensor that does it all and then just put that in the mushroom card.

Since Primary & Secondary Info are most text based, is it possible to use a template for these values on any card without using the template card? In using the new select card, I get the following error when trying to use a template.

At path: secondary_info -- Expected one of `"name","state","last-changed","last-updated","none"`, but received: "{{ state_attr('light.wled', 'effect') }}"

Is it possible to set a custom name that the mushroom climate card displays for hvac_modes?

hvac_modes:
  - heat_cool
  - fan_only
  - 'off'

With our ducted system, the zone control has its own climate.entity which controls the duct damper.
The states are Auto, Open and Closed, where auto varies the damper based on the set temperature of that zone.

Yes, the left button is a Template Card (since I wanted to have the room temperature as the secondary info) and the right button is an Entity Card.

image

1 Like

mushroom-select should support putting everything on one line

Use option layout: horizontal to do that

Me again… still trying to get icon colours working the way I want, this time with an entity card (again)

I have this but it doesn’t work, I no icon colours at all.

entity card
      - type: custom:mushroom-entity-card
        entity: sensor.paradox_alarm_status
        fill_container: false
        name: Paradox Alarm
        icon_color: |
          {% if states('sensor.paradox_alarm_status', 'triggered') %}
            red
          {% elif states('sensor.paradox_alarm_status', 'armed_away') %}
            orange
          {% elif states('sensor.paradox_alarm_status', 'armed_home') %}
            blue
          {% elif states('sensor.paradox_alarm_status', 'disarmed') %}
            green
          {% else %}
            yellow
          {% endif %}

I also tried using a template card:

template card
      - type: custom:mushroom-template-card
        secondary: "{{ states('sensor.paradox_alarm_status') }}"
        fill_container: false
        primary: Paradox Alarm
        icon: mdi:alarm-light
        icon_color: |
          {% if states('sensor.paradox_alarm_status', 'triggered') %}
            red
          {% elif states('sensor.paradox_alarm_status', 'armed_away') %}
            orange
          {% elif states('sensor.paradox_alarm_status', 'armed_home') %}
            blue
          {% elif states('sensor.paradox_alarm_status', 'disarmed') %}
            green
          {% else %}
            yellow
          {% endif %}

Still no icon colouring…

Is there a way to get this idea to work?

Try using

          {% if is_state('sen…..
1 Like

Excellent! that works. Thank you

Has anyone split their lovelace file?
last time i tried the “auto-refresh” sense did’t worked.

Is it this one?

Hi folks, I just joined your family only couple days ago and having good time to create my home assistant. So I got stuck on a problem. Could you help me out.

type: horizontal-stack
    cards:
      - type: custom:mushroom-person-card
        entity: person.can
        icon_type: entity-picture
        tap_action:
          action: more-info
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod:
          style: |
            ha-card {
              margin-top: -12px;                                                                                         
            }
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-chips-card
                    chips:
                      - type: template
                        card_mod:
                          style: |
                            ha-card {
                              margin-top: 2px; 
                              margin-left: -90px;
                              --chip-box-shadow: none;
                              --chip-background: none;
                              border: none;
                              }
                        entity: sensor.iphone_battery_level
                        icon: |2-

                              {% set bl = states('sensor.iphone_battery_level') | int %}
                              {% if bl < 10 %} mdi:battery-outline
                              {% elif bl < 20 %} mdi:battery-10
                              {% elif bl < 30 %} mdi:battery-20
                              {% elif bl < 40 %} mdi:battery-30
                              {% elif bl < 50 %} mdi:battery-40
                              {% elif bl < 60 %} mdi:battery-50
                              {% elif bl < 70 %} mdi:battery-60
                              {% elif bl < 80 %} mdi:battery-70
                              {% elif bl < 90 %} mdi:battery-80
                              {% elif bl < 100 %} mdi:battery-90
                              {% elif bl == 100 %} mdi:battery
                              {% else %} mdi:battery-unknown
                              {% endif %}
                        double_tap_action:
                          action: none
                        icon_color: |2-

                              {% set bl = states('sensor.iphone_battery_level') | int %}
                              {% if bl < 10 %} red
                              {% elif bl < 20 %} red
                              {% elif bl < 30 %} red
                              {% elif bl < 40 %} orange
                              {% elif bl < 50 %} orange
                              {% elif bl < 60 %} green
                              {% elif bl < 70 %} green
                              {% elif bl < 80 %} green
                              {% elif bl < 90 %} green
                              {% elif bl < 100 %} green
                              {% elif bl == 100 %} green
                              {% else %} grey
                              {% endif %}
                              
                        tap_action:
                          action: none
                        hold_action:
                          action: none
                        content: >-
                          {{states('sensor.iphone_battery_level') | round(0) }}%
                          Battery Levelype or paste code here

So is there any way to get personal card & battery status from current user information who is login at the moment. I dont like to add another personal card look so much crowded. Thank you :pray:t2:

No, it is this one. It’s one of Mushrom Cards built-in cards: lovelace-mushroom/template.md at 6da1eb32e60b59324412539cde427e7036ae3155 · piitaya/lovelace-mushroom · GitHub

1 Like