Home Assistant dashboard card: Mushroom
Here you find Home Assistant (lovelace) dashboard examples related to the mushroom cards which you can easily add to your own dashboards.
Mushroom 
is a card which can let you add a small widget on your dashboard.
The git repository is https://github.com/piitaya/lovelace-mushroom
Install it via this button
Table of Contents
Introduction
The mushroom card has a whole set of different card types. In my examples here, I only use two of them. If you want to know more about them all, check this page https://github.com/piitaya/lovelace-mushroom#cards
Cards
I highlight here two cards.
Title card
The title card shows data based on a template and has no background.
Welcome text and weather forecast for today
Welcome text based on the time of the day and the name of the logged-in user.
Show also the minimal and maximum temperature for today and a textual description of the weather.
# Sourcecode by vdbrink.github.io
# Dashboard card code
- type: custom:mushroom-title-card
title: >2
{%- if now().hour < 12 -%}Goeiemorgen
{%- elif now().hour < 18 -%}Goeiemiddag
{%- else -%}Goeieavond{%- endif -%}, {{user}}.
Vandaag is het tussen de {{states('sensor.meteoserver_d0tmin')}} en de
{{ states('sensor.meteoserver_d0tmax') }} °C
met {{ states('sensor.meteoserver_verw').lower() }}.
Time and date with large font
Larger font size to show the time and the full date.
# Sourcecode by vdbrink.github.io
# configuration.yaml
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: '{{now().strftime(''%H:%M'')}}'
alignment: center
card_mod:
style: |
ha-card {
--title-font-size: 90px !important;
}
- type: custom:mushroom-title-card
title: {{states('sensor.date_only_formatted')}}
alignment: center
card_mod:
style: |
ha-card {
--title-font-size: 30px !important;
}
Chips card
Chips cards are small icon that indicates a status.
In my example, I only show them, with a condition, when they are relative.
CO2 colored icon indicator based on a number
Show a green icon, without any text, if the level is less the 800 ppm, less than 1200 ppm yellow, less than 1500 ppm red.
# Sourcecode by vdbrink.github.io
# Dashboard card code
- type: custom:mushroom-chips-card
chips:
- chip:
type: template
icon: mdi:molecule-co2
icon_color: |-
{% if is_state('sensor.senseair_co2_value', 'unavailable') %}
blue
{% elif states('sensor.senseair_co2_value')|int > 1500 %}
red
{% elif states('sensor.senseair_co2_value')|int > 1200 %}
orange
{% elif states('sensor.senseair_co2_value')|int > 800 %}
yellow
{% else %}
green
{% endif %}
entity: sensor.senseair_co2_value
content: ''
Weather alarm state colored icon indicator based on a value
Show a green icon, when the value is Code groen, yellow for Code geel and red for Code rood.
# Sourcecode by vdbrink.github.io
# Dashboard card code
- type: custom:mushroom-chips-card
chips:
- chip:
type: template
icon: mdi:weather-lightning-rainy
icon_color: |-
{% if is_state('sensor.knmi_weercode', 'Code groen') %}
green
{% elif is_state('sensor.knmi_weercode', 'Code geel') %}
yellow
{% elif is_state('sensor.knmi_weercode', 'Code rood') %}
red
{% else %}
gray
{% endif %}
entity: sensor.knmi_weercode
content: ''
tap_action:
action: url
url_path: https://www.knmi.nl/nederland-nu/weer/waarschuwingen/overijssel
card_mod: null
Bigger icon
Show the mushroom icon in a mush bigger size with the card_mod HACS integration, see https://github.com/thomasloven/lovelace-card-mod for more info.
Install card_mod via this button
# Sourcecode by vdbrink.github.io
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- chip:
type: template
icon: mdi:weather-lightning-rainy
icon_color: |-
{% if is_state('sensor.knmi_weercode', 'Code groen') %}
green
{% elif is_state('sensor.knmi_weercode', 'Code geel') %}
yellow
{% elif is_state('sensor.knmi_weercode', 'Code rood') %}
red
{% else %}
1C1C1C
{% endif %}
entity: sensor.knmi_weercode
content: ""
card_mod:
style: |
ha-card {
--chip-icon-size: 80px;
width: 100px !important;
height: 100px !important
}
Nice weather (only an icon)
Show only a green icon, without any text, of a seat when the custom binary sensor `nice_outside` is `on` Otherwise this icon is not visible.
# Sourcecode by vdbrink.github.io
# Dashboard card code
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.nice_outside
state: 'on'
chip:
type: template
icon_color: green
icon: mdi:seat
entity: binary_sensor.nice_outside
content: ''
Outside temperature (custom icon)
Show the outside temperature.
# Sourcecode by vdbrink.github.io
# Dashboard card code
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temperature_outside_feels_like
icon: mdi:sun-thermometer
Person status
Show this icon only when I’m at home.
# Sourcecode by vdbrink.github.io
# Dashboard card code
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.vdbrink
state: home
chip:
type: entity
entity: person.vdbrink
name: Me
use_entity_picture: true
hide_state: true
hide_name: false
Door open (custom picture)
Show a custom picture when the front door is open. Otherwise hide it.
# Sourcecode by vdbrink.github.io
# Dashboard card code
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.contact_front_door_contact
state: 'on'
chip:
type: template
picture: https://img.icons8.com/plasticine/344/door-opened.png
content: Open
More examples
Looking for more examples? Check this link:
<< See also my other Home Assistant pages