vd Brink Home Automations

Home automations: Home Assistant, ESPHome, Node-RED and more.

Follow me on GitHub

Home Assistant dashboard card: Mushroom

Home Assistant logo

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.

mushroom examples

The git repository is https://github.com/piitaya/lovelace-mushroom

Install it via this button Open your Home Assistant instance and show the add-on store.


Table of Contents


Intro

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

mushroom card types

Cards

I highlight here two cards.

Title card

The title card show data based on a template and has no background.

Welcome text and weather forecast for today

mushroom title

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.state}} en de
    {{ states.sensor.meteoserver_d0tmax.state }} °C  
    met {{ states.sensor.meteoserver_verw.state.lower() }}.


Chips card

Chips cards are small icon which indicate a status.
In my example I only show them, with a condition, when they are relative.

Co2 colored icon indicator based on a number

mushroom chips 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

Nice weather (only an icon)

mushroom chips 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)

mushroom chipShow 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

mushroom chipShow if your 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)

mushroom chipShow a custom picture when the front door is open.


# 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:


^^ Top

<< See also my other Home Assistant pages




Remarks or suggestions?

Do you have any remarks or suggestions, please let me know via github issues, or via my social media posts.

Create an issue

Or via a private message on the Tweakers.net forum.


Consider a small donation if you like this blog!

Top | Homepage | Best Buy Tips