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

anon33484932 · September 15, 2022, 9:42am

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"

michalstanczyk · September 15, 2022, 11:04am

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 }}

Moss · September 15, 2022, 11:36am

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

michalstanczyk · September 15, 2022, 11:49am

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.

Moss · September 15, 2022, 12:36pm

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

michalstanczyk · September 15, 2022, 1:24pm

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

Vlad_August · September 15, 2022, 1:57pm

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

michalstanczyk · September 15, 2022, 2:04pm

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

Vlad_August · September 15, 2022, 2:54pm

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

Moss · September 15, 2022, 3:11pm

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

michalstanczyk · September 15, 2022, 4:58pm

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.

Moss · September 15, 2022, 8:52pm

Works perfectly, thanks for your help

Greetings
Moss

j.loewen · September 15, 2022, 9:05pm

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

rossiluis22 · September 15, 2022, 9:43pm

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

antonio1475 · September 15, 2022, 9:59pm

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

antonio1475 · September 15, 2022, 10:00pm

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

Sddawson · September 16, 2022, 6:42am

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.

flemmingss · September 16, 2022, 6:43am

Can anyone spot why this icon is green when it should be red?
looks like it is green no mater what I replace “on” with

type: custom:mushroom-template-card
primary: Full
secondary: ''
icon: mdi:emoticon-poop
layout: vertical
icon_color: >-
  {% if is_state('binary_sensor.cat_toilet_need_emptying', 'on') %} red {% else %} green {% endif %}
multiline_secondary: false
fill_container: false

I use this exact code for another binary sensor, and there it is working

michalstanczyk · September 16, 2022, 7:59am

Did you create binary_sensor based on this input_boolean you presented in history? If not, I think you have answer

flemmingss · September 16, 2022, 8:07am

yes