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

I want to make a mushroom template card, with which I can make the menu/sidebar visible.
now there is only a chip card with which you can call the menu.

is there a navigation path with which I can do that for example?

Very nice, could you share the code for that?

Hello all,

is it feasible to specify the current position of a shutter as status in the mushroom template card? Open or closed works fine, but if the shutter is only partially closed, it is still listed as open in the status, so I actually need the position.


{{ expand(states.group.rollladen) | selectattr( 'state', 'eq',
                'closed') | list | count }}

This is my current code, but I need position smaller than 100

Am grateful for any help.

Greetings
Moss

Hi all,
How can I align the chip card in the grid?

immagine

type: custom:layout-card
layout_type: grid
cards:
  - type: custom:mushroom-template-card
    primary: >
      {{ states('sensor.temperatura_esterna_meteonetwork')| replace (".",",")}}
      °C
    secondary: '{{ states(''sensor.umidita_esterna_meteonetwork'')}} %'
    icon: ''
    picture: |
      {% set mapper = 
              { 'clear night': 'day',
                'cloudy': 'cloudy',
                'fog': 'cloudy',
                'hail': 'rainy-7',
                'lightning': 'thunder',
                'lightning rainy': 'thunder',
                'mostly cloudy': 'cloudy',
                'partly cloudy': 'cloudy',
                'partlycloudy': 'cloudy-day-3',
                'pouring': 'rainy-6',
                'rainy': 'rainy-5',
                'snowy': 'snowy-6',
                'snowy rainy': 'rainy-7',
                'sunny': 'day',
                'windy': 'cloudy',
                'windy variant': 'cloudy-day-3'} %} 
            {% set state =
            states('weather.forecast_meteonetwork').lower().replace('-',' ') %}
            {{ '/local/meteo/animated/{}.svg'.format(mapper[state]) }}
    layout: vertical
    icon_color: ''
    card_mod:
      style: |
        ha-card {
         background: none;
         --ha-card-box-shadow: 0px;
          --card-primary-font-size: 10px;
          --card-secondary-font-size: 10px;
          --icon-size: 30px; }
  - type: custom:mushroom-template-card
    primary: |
      {{ states('sensor.temperatura_interna')| replace (".",",")}} °C
    secondary: ''
    icon: mdi:home
    picture: ''
    layout: vertical
    icon_color: white
    card_mod:
      style: |
        ha-card {
         background: none;
         --ha-card-box-shadow: 0px;
          --card-primary-font-size: 10px;
          --card-secondary-font-size: 10px;
          --icon-size: 30px; }
  - type: custom:mushroom-template-card
    primary: |-
      {% if states('sensor.qualita_aria') | int(default=0) <= 50 %}

            Buona

            {% elif states('sensor.qualita_aria') | int(default=0) <= 100 %}

            Moderata

            {% elif states('sensor.qualita_aria') | int(default=0) <= 150 %}

            Scadente

            {% elif states('sensor.qualita_aria') | int(default=0) <= 200 %}

            Insalubre

            {% elif states('sensor.qualita_aria') | int(default=0) <= 300 %} 

            Inquinata

            {% elif states('sensor.waqi_arenula_roma_lazio_italy') | int(default=0) >=
            300 %}

            PERICOLOSA

            {% endif %}
    secondary: |
      {{states('sensor.qualita_aria')}} AQI
    icon: mdi:tailwind
    picture: ''
    layout: vertical
    icon_color: |-
      {% if states('sensor.qualita_aria') | int(default=0) <= 50 %}
                      green
                      {% elif states('sensor.qualita_aria') | int(default=0) <= 100 %}
                      yellow
                      {% elif states('sensor.qualita_aria') | int(default=0) <= 150 %}
                      orange
                      {% elif states('sensor.qualita_aria') | int(default=0) <= 200 %}
                      red
                      {% elif states('sensor.qualita_aria') | int(default=0) <= 300 %} 
                      #660099 
                      {% elif states('sensor.waqi_arenula_roma_lazio_italy') | int(default=0) >= 300 %}
                      #7e0023
                      {% endif %}
    card_mod:
      style: |
        ha-card {
         background: none;
         --ha-card-box-shadow: 0px;
          --card-primary-font-size: 10px;
          --card-secondary-font-size: 10px;
          --icon-size: 30px; }
  - type: custom:mushroom-template-card
    primary: ' {{ states(''sensor.assorbimento_elettrico_casa_watt'')}} W '
    secondary: '{{states(''sensor.costo_energia_giornaliero'')}} €'
    icon: mdi:flash
    picture: ''
    layout: vertical
    icon_color: |2-
       {% if states('sensor.assorbimento_elettrico_casa_watt') | float >= 3000 %}
                  red
            {% elif states('sensor.assorbimento_elettrico_casa_watt') | float >= 2000
            %}
                  orange 
            {% elif states('sensor.assorbimento_elettrico_casa_watt') | float >= 500
            %}
                  yellow
            {% elif states('sensor.assorbimento_elettrico_casa_watt') | float < 500 %}
                  green
            {% endif %}
    card_mod:
      style: |
        ha-card {
         background: none;
         --ha-card-box-shadow: 0px;
          --card-primary-font-size: 10px;
          --card-secondary-font-size: 10px;
          --icon-size: 30px; }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        style: |
          ha-card {
          --chip-background: none;
          --chip-box-shadow: 0px 0px 10px yellow;
          --chip-icon-size: 0.5em;
          --chip-height: 50px;
          --chip-border-radius: 100px;

          }
        chips:
          - type: template
            entity: switch.prese_casa
            icon: |-
              {% if is_state('switch.prese_casa', 'on')%}
                mdi:power-socket-de
              {% else %}
                mdi:power-socket-de
              {% endif %}
            icon_color: |-
              {% if is_state('switch.prese_casa', 'on')%}
                yellow
              {% else %}
                white
              {% endif %}
            content: ''
        alignment: center
layout:
  grid-template-columns: 20% 20% 20% 20% 20%
  grid-template-rows: auto
  grid-template-areas: |

    "main main2 main3 main4 main5"

I’m not sure what do you want to achive. But if you need number of covers with position below 100, you can use this one:

{{ states.cover|selectattr('attributes.current_position','lt',100)|list|length }}

or for number of covers partially opened:

{{ states.cover|selectattr('attributes.current_position','lt',100)|selectattr('attributes.current_position','gt',0)|list|length }}
1 Like

I get displayed when the shutters are closed, but this only works when the shutters are really completely closed.
The status is then closed.
But I would also like to get displayed when they are also partially closed, the status is then from the shutter still open so brings me the status closed nothing.
I have to take the position as status, as soon as the shutter is closed a bit, I want to get this displayed.

I had solved this earlier in my old dasboard by badge, but am now completely switched to Mushroom and get this displayed as a chip, most by condition with status, on, off, open or closed.

Only with the roller shutter I just need something other than closed or open.

Greetings
Moss

So you would like to have a single representation of all of the shutters? I mean something like:

  • all closed or partially closed (icon/state → closed)
  • at least one fully open (icon/state → open)

In that case, you can use some condition from my previous comment. The best would be if you’ll share what you’ve got right now as code and explain on this example what you’d like to alter.

This is my actually code


 - type: conditional
            conditions:
              - entity: group.rollladen
                state: closed
            chip:
              type: template
              icon: mdi:window-shutter
              content: >-
                {{ expand(states.group.rollladen) | selectattr( 'state', 'eq',
                'closed') | list | count }}
              tap_action:
                action: more-info
              entity: group.rollladen
              icon_color: grey

State is closed and Icon is displayed only when the shutter is completely closed. I would like to have the icon displayed when the shutter position is below 100.

I can’t get that to work.

Can also be quiet for individual shutters, does not have to be the group.

Thanks for your help
Moss

Ok, now I got what the issue is. The biggest problem here is that conditional works only on the state. So what you can do is e.g. create a sensor which will reflect your idea

template:  
  - sensor:
        - name: "Is any cover closed"
          state: >
            {{expand(states.group.rollladen)| selectattr('attributes.current_position','lt',100)|list|length|bool }}

This sensor will return True if there will be at least one cover with the position 0-99 (assuming 100 is open). You can adjust this condition for your needs.

And in your card:

 - type: conditional
            conditions:
              - entity: sensor.is_any_cover_closed
                state: "True"
            chip:
              type: template
              icon: mdi:window-shutter
              content: >-
                {{ expand(states.group.rollladen) | selectattr('attributes.current_position','lt',100) | list | count }}
              tap_action:
                action: more-info
              entity: group.rollladen
              icon_color: grey
1 Like

Hi, how can i make chips grey color when off?

1 Like

Here you have a really nice example how you can achieve it:

1 Like

It is for template chips, but I want use entity chips with card mode style.

Thanks for the help, unfortunately I can’t get it to work. Have now tried it with a shutter, which would also make more sense to me than to monitor the group. But I get no icon displayed when the shutter is at 80% position.

My sensor:


- sensor:
    - name: "Rollladen Wohnzimmer Rechts Positionserkennung"
      state: >
        {{expand(states.cover.rollladen_wohnzimmer_rechts)|selectattr('attributes.current_position','ge',0)|list|length|bool }}

and in my card.


>-
                {{ expand(states.cover.rollladen_wohnzimmer_rechts) |
                selectattr('attributes.current_position','ge',0) | list | count
                }}

greets
Moss

I have updated my previous post, as it contained some issues. You can take a look now, I’ve tested it on my covers. It’s not presenting chip only when all covers are fully open (so the position is 100). In any other case, it’s presenting a chip with the number of closed covers.

1 Like

Works perfectly, thanks for your help

Greetings
Moss

Does anyone know how to change Chip - Text and Icon color with Card Mod?

Hi!, I saw your mushroom customization in another topic and I really liked it, do you mind to share your button cards (Despacho) / mushroom

1 Like

That’s unfortunately not Mushroom, but Minimalist UI, Room Card

1 Like

Can you share your yaml for those room cards? I couldn’t find it in previous post but maybe my mobile search is limited. Thank you

New to the cards, and loving them! Is there a way to force a colour on to the text in a Title card? It seems to be black for light themes, and white for dark themes. I’d like it to always be white (I have a background set in my theme, and white works best with it). If it involves card-mod, some sample code would be most welcome! Thanks for any tips.