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

Excuse my ignorance, but I see some use vertical-stack and someone use the depricated stack-in-card as the first card. What is the difference, and why use a depricated card?

Sorry, was unclear :slight_smile:

Those two:
image

May I ask what is the device you use ? Is this some amazon echo or google nest ?

Hi, I was wondering if it was possible to align different chip cards in the same line differently, for example I would like the first two to be aligned to the left and the other two to be aligned to the right. I tried with a horizontal card but as soon as the chips arrive in the middle of the line they are positioned at the head

I stumbled into this from the Home Assistant release announcement (Congrats!) and installed these cards. Awesome work!

One question though. Are any of these cards capable of showing the state of motion for a motion sensor entity? The HA built in entity card shows whether motion is detected by the sensor. The entity card included here only shows whether the sensor is enable (on) or disabled (off).

If not, maybe you could include a card that shows this correctly like a sensor card or something? It’s the only hole I’ve found in customizing my layout with these.

Thanks for the great work!
Steven

Здравствуйте, не могли бы вы поделиться кодом, это выглядит великолепно

Yes you can.

  1. If in Home Assistant your entity is defined as motion, or door or window … (see class) it wil automatically reflect the state in Mushroom.
  2. If not, you can always use the templates in mushroom icons, icon_color to do this by hand.

Example:

icon: |-
          {% if(states.light.lichten_keuken.state=='on')%}
          mdi:lightbulb-group
          {%elif(states.light.lichten_keuken.state=='unavailable') %}
          mdi:lightbulb-group-off
          {%else%}
          mdi:lightbulb-group
          {%endif%}
        icon_color: |-
          {% if(states.light.lichten_keuken.state=='on')%}
          orange
          {%elif(states.light.lichten_keuken.state=='unavailable') %}
          pink
          {%else%}
          grey
          {%endif%}

Hey there. Thanks very much for the reply! That’s actually exactly what I’m doing, but it was not clear as I did not provide enough of a code sample - sorry about that. I was actually able to make this work after stealing an example from Posreg up-thread. I had my double-quotes all wrong. After fixing, the code below works fantastically, and I can now populate exactly 38 binary_sensors in a “motion detector view” with styling with only one card configuration. But, I’m terrible at aesthetics, so the end result is nothing visually pleasing to look at :slight_smile:

type: custom:auto-entities
filter:
  include:
    - group: binary_sensor.all_door_sensors
      options: 
          type: template
          entity: this.entity_id
          content: '{{ state_attr(''this.entity_id'', ''friendly_name'') }} '
          icon: mdi:door
  exclude: []
  
card:
  type: custom:mushroom-chips-card
show_empty: true
card_param: chips

May I ask what is the device you use ? Is this some amazon echo or google nest ?

I’m using an “Lenovo smart tab m10 fhd plus” with the normal “smart dock”. This gives the tablet a nice looking stand on your tabletop or bookshelves (and you’ll be able to pick up the tablet from the dock). I’m using a Zigbee socket to disable the charger at 80% charge.

I’m running Lovelace using the Fullykiosk app.

1 Like
  • type: custom:mushroom-template-card
    primary: Ванная
    secondary: >-
    {{states(‘sensor.temperatura_pola_su’)}} °C |

    {% if states(‘binary_sensor.datchik_protechki_tualet_water_leak’) ==
    ‘on’%} Вода {%else%} Сухо {%endif%} | {% if
    is_state_attr(‘climate.teplyi_pol_su’, ‘heat’, “ON”) %} Пол включён
    {%else%} Пол выключен {%endif%}
    entity: switch.vykliuchatel_su_right
    tap_action:
    action: navigate
    navigation_path: ванная
    hold_action:
    action: toggle
    card_mod:
    style: >
    {% if states(‘switch.vykliuchatel_su_right’) == ‘on’ or
    states(‘switch.vykliuchatel_su_left’ ) == ‘on’ %}
    ha-card {
    border: solid #B8860B;
    box-shadow: 0px 0px 9px 1px #DAA520;
    background: url(’/local/rooms/vanna.jpg’ ), linear-gradient(to left, transparent, rgb(var(–rgb-card-background-color)) 50%);
    background-size: 50%, 100%;
    background-color: rgba(0, 0, 0, 0.1);
    background-position: right;
    background-repeat: no-repeat;
    background-blend-mode: lighten;
    }
    {%else%}
    ha-card {
    border: solid #A9A9A9;
    box-shadow: 0px 0px 9px 1px #808080;
    background: url(’/local/rooms/vanna.jpg’ ), linear-gradient(to left, transparent, rgba(var(–rgb-card-background-color)) 50% );
    background-size: 50%, 100%;
    background-color: rgba(255, 255, 255, 0.6);
    background-position: right;
    background-repeat: no-repeat;
    background-blend-mode: lighten;
    }
    {%endif%}

Is it possible to make a tap action for the icon on template card (or any card) for a specific action? I want to toggle a rooms lights by tapping the icon but tapping the name will go into the room instead.

I worked out the fact it wasn’t collapsing, still unable to fade into a background colour based on variables in mmp.

Hi friends, please can someone tell me why this isn’t working in my template chip? The sensor correctly report the number of lights on, but the icon stays white all. the time:

  - type: template
    entity: sensor.lights_active
    icon: mdi:lightbulb-group
    icon_color: |-
      {% set lightstate=states('sensor.number_lights_on')}
      {% if lightstate== '0' %}
      black
      {% elif lightstate!= '0' %}
      yellow
      {% endif %}
    content: '{{ (states(''sensor.number_lights_on''))}}'
    tap_action:
      action: none

Thanks

A “%” is missing before “}” at this line:
{% set lightstate=states(‘sensor.number_lights_on’)}

Should be:
{% set lightstate=states(‘sensor.number_lights_on’) %}

Looks like you got the answer. I was looking to count active lights as well. How did you create sensor.lights_active and sensor.number_lights_on?

1 Like

Hello,
does anyone use auto-entities with mushroom-template-card.
Need some help there.

Thanks

Thanks tobpet, I totally missed that! Unfortunately the icon colour is still not changing so I’m really puzzled. Kindest regards, Andrew.

Remove " ’ " from 0 in if…

  • type: template
    entity: sensor.lights_active
    icon: mdi:lightbulb-group
    icon_color: |-
    {% set lightstate=states(‘sensor.number_lights_on’)}
    {% if lightstate== 0 %}
    black
    {% elif lightstate!= 0 %}
    yellow
    {% endif %}
    content: ‘{{ (states(’‘sensor.number_lights_on’’))}}’
    tap_action:
    action: none

Hi Thomas,

In your configuration.yaml add the following:

- platform: template

sensors:

number_lights_on:

friendly_name: Number of Lights On

value_template: >-

{{ states.light

| selectattr('state', 'eq', 'on')

| list | count }}

icon_template: mdi:lightbulb-group

ignore sensor.lights_active, that was wrong.

In your Chips card:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: sensor.number_lights_on
    icon: mdi:lightbulb-group
    icon_colour: |-
      {% set lightstate=states('sensor.number_lights_on')%}
      {% if lightstate== '0' %}
      black
      {% elif lightstate!= '0' %}
      yellow
      {% endif %}
    content: '{{ (states(''sensor.number_lights_on''))}}'
    tap_action:
      action: none

Hope that helps :slight_smile:

2 Likes