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

Hello Steffen,

it is a really nice personal card that I would really like to use in my system as well. What I run into are the sensors you use. Would you please tell me how you managed this. See the sensors below that I am having trouble configuring.

1, sensor.tmp_person_time_arrived_home_YourName
2, sensor.tmp_person_time_left_home_YourName
3, sensor.tmp_person_distance_from_home_YourName
4, sensor.tmp_person_lastseen_YourName
5, sensor.tmp_person_zonestatus_YourName
6, sensor.tmp_person_lastseenlocation_YourName

Would you please tell us how you processed this data.

Nope! I will post if I find the solution.

Some people ask @alexandrechoske @gillymoreno

Here we are, new version with some optimisations.

Picture:
Screen_20221123-154650

Card:

      - type: custom:vertical-stack-in-card
        mode: vertical
        card_mod:
          style: |
            ha-card {
              height: 220px;
            }
        cards:
          - type: custom:mushroom-chips-card
            card_mod:
              style: |
                ha-card {
                  --chip-font-size: 0.3em;
                  --chip-icon-size: 0.6em;
                  --chip-border-width: 0;
                  --chip-box-shadow: none;
                  --chip-background: none;
                  --chip-border: none;
                  --chip-font-weight: normal;
                }
            alignment: justify
            chips:
              - type: template
                entity: person.yourname
                content: |-
                  {% if is_state('person.yourname','home') %}
                    {% set last_changed = states('sensor.tmp_person_time_arrived_home_yourname') | as_datetime %}
                  {% else %}
                    {% set last_changed = states('sensor.tmp_person_time_left_home_yourname') | as_datetime %}
                  {% endif %}  {% if last_changed == None %}
                    {{ '-' }}
                  {% else %}
                    {% if last_changed < today_at() - timedelta(days=1) %}
                      {{ as_timestamp(last_changed) | timestamp_custom('%d.%m. %H:%M') }}
                    {% elif last_changed < today_at() %}
                      {{ as_timestamp(last_changed) | timestamp_custom('G. %H:%M') }}
                    {% else %}
                      {{ as_timestamp(last_changed) | timestamp_custom('%H:%M')}}
                    {% endif %}
                  {% endif %}
                icon: |-
                  {% if is_state('person.yourname','home') %}
                    mdi:airplane-landing
                  {% else %}
                    mdi:airplane-takeoff
                  {% endif %}
                icon_color: |-
                  {% if is_state('person.yourname','home') %}
                    green
                  {% else %}
                    red
                  {% endif %}
                tap_action:
                  action: none
              - type: template
                entity: sensor.tmp_person_distance_from_home_yourname
                content: >-
                  {{- states('sensor.tmp_person_distance_from_home_yourname') -}}
                  {{- " " -}}  {{-
                  state_attr('sensor.tmp_person_distance_from_home_yourname','unit_of_measurement')
                  -}}
                icon: mdi:map-marker-distance
                icon_color: >-
                  {% set km =
                  states('sensor.tmp_person_distance_from_home_yourname') | int
                  %} {% if km > 50 %} red {% elif km > 10 %} orange {% elif km >
                  5 %} yellow {% elif km >= 0 %} green {% else %} grey {% endif
                  %}
                tap_action:
                  action: more-info
          - type: custom:mushroom-template-card
            card_mod:
              style: |
                ha-card {
                  --icon-size: 5em;  
                  --badge-icon-size: 1.2em;
                  --badge-size: 1.4em;
                  --spacing: none;
                  --card-secondary-font-size: 0.8em;
                  --card-secondary-font-weight: normal;
                }
                mushroom-badge-icon {
                  --icon-color: rgb(var(--rgb-card-background-color));
                }
            fill_container: true
            entity: person.yourname
            layout: vertical
            multiline_secondary: true
            picture: /local/pictures/EmojiYourName.png
            primary: '{{- states(''sensor.tmp_person_zonestatus_yourname'') -}}'
            secondary: >-
              {{- states('sensor.tmp_person_lastseen_yourname') -}} {{- " | "
              -}}  {{- states('sensor.tmp_person_lastseenlocation_yourname') -}}
            badge_icon: '{{- state_attr(''sensor.tmp_person_zonestatus_yourname'',''icon'') -}}'
            badge_color: >-
              {% if is_state('sensor.tmp_person_zonestatus_yourname','Home') %}
                green
              {% elif
              is_state('sensor.tmp_person_zonestatus_yourname','Unbekannt') %}
                red
              {% else %}
                orange
              {% endif %}
            tap_action:
              action: more-info
            hold_action:
              action: navigate
              navigation_path: /home/view_yourname
          - type: custom:mushroom-chips-card
            card_mod:
              style: |
                ha-card {
                  --chip-font-size: 0.3em;
                  --chip-icon-size: 0.6em;
                  --chip-border-width: 0;
                  --chip-box-shadow: none;
                  --chip-background: none;
                  --chip-border: none;
                  --chip-font-weight: normal;
                }
            alignment: center
            chips:
              - type: template
                entity: sensor.iphone_battery_state
                icon: >-
                  {% if
                  is_state('sensor.iphone_battery_state','Charging')
                  %}
                    mdi:power-plug
                  {% else %}
                    mdi:power-plug-off
                  {% endif %}
                icon_color: >-
                  {% if
                  is_state('sensor.iphone_battery_state','Charging')
                  %}
                    green
                  {% else %}
                    grey
                  {% endif %}
                tap_action:
                  action: more-info
              - type: template
                entity: sensor.iphone_battery_level
                icon: >-
                  {% set bl = states('sensor.iphone_battery_level') |
                  int %} {% if bl < 10 %} mdi:battery-outline {% elif bl < 20 %}
                  mdi:battery-10 {% elif bl < 30 %} mdi:battery-20 {% elif bl <
                  40 %} mdi:battery-30 {% elif bl < 50 %} mdi:battery-40 {% elif
                  bl < 60 %} mdi:battery-50 {% elif bl < 70 %} mdi:battery-60 {%
                  elif bl < 80 %} mdi:battery-70 {% elif bl < 90 %}
                  mdi:battery-80 {% elif bl < 100 %} mdi:battery-90 {% elif bl
                  == 100 %} mdi:battery {% else %} mdi:battery-unknown {% endif
                  %}
                icon_color: >-
                  {% set bl = states('sensor.iphone_battery_level') |
                  int %} {% if bl < 10 %} red {% elif bl < 20 %} red {% elif bl
                  < 30 %} orange {% elif bl < 40 %} orange {% elif bl < 50 %}
                  yellow {% elif bl < 60 %} yellow {% elif bl < 70 %} green {%
                  elif bl < 80 %} green {% elif bl < 90 %} green {% elif bl <
                  100 %} green {% elif bl == 100 %} green {% else %} grey {%
                  endif %}
                tap_action:
                  action: more-info
              - type: template
                entity: sensor.tmp_person_homewlan_yourname
                icon: |-
                  {% if is_state('sensor.tmp_person_homewlan_yourname','on') %}
                    mdi:wifi
                  {% else %} 
                    mdi:wifi-off
                  {% endif %}
                icon_color: |-
                  {% if is_state('sensor.tmp_person_homewlan_yourname','on') %}
                    green
                  {% else %} 
                    grey
                  {% endif %}
                tap_action:
                  action: none

Template:

- trigger:
  - platform: state
    entity_id:
      - person.yourname
  - platform: event
    event_type: event_template_reloaded
  - platform: state
    entity_id:
      - input_boolean.templatetrigger
    to: 'on'
  sensor:
  - unique_id: tmp_person_distance_from_home_yourname
    name: tmp_person_distance_from_home_yourname
    unit_of_measurement: km
    state: >-
      {% set dist = (distance('person.yourname','zone.home') | round(1)) %}
      {% if dist in ("unavailable", "unknown") %}
        {{ "-" }}
      {% else %}
        {{ dist }}
      {% endif %}

- trigger:
  - platform: state
    entity_id:
      - sensor.iphone_connection_type
      - sensor.iphone_ssid
      - device_tracker.iphone_ping
  - platform: event
    event_type: event_template_reloaded
  - platform: state
    entity_id:
      - input_boolean.templatetrigger
    to: 'on'
  sensor:
  - unique_id: tmp_person_homewlan_yourname
    name: tmp_person_homewlan_yourname
    state: >-
      {% if (is_state('device_tracker.iphone_ping','home')
        and is_state('sensor.iphone_connection_type','Wi-Fi')
        and is_state('sensor.iphone_ssid','WLANName')) %}
          on
      {% else %}
        off
      {% endif %}
    icon: >-
      {% if (is_state('device_tracker.iphone_ping','home')
        and is_state('sensor.iphone_connection_type','Wi-Fi')
        and is_state('sensor.iphone_ssid','WLANName')) %}
          mdi:wifi
      {% else %}
        mdi:wifi-off
      {% endif %}

- trigger:
  - platform: state
    entity_id:
      - person.yourname
    to: 'home'
  - platform: state
    entity_id:
      - input_boolean.templatetrigger
    to: 'on'
  sensor:
  - unique_id: tmp_person_time_arrived_home_yourname
    name: tmp_person_time_arrived_home_yourname
    icon: mdi:home-clock
    state: >-
      {% set last_changed = states.person.yourname.last_changed | as_local %}
      {{ as_timestamp(last_changed) | as_datetime() }}

- trigger:
  - platform: state
    entity_id:
      - person.yourname
    from: 'home'
  - platform: state
    entity_id:
      - input_boolean.templatetrigger
    to: 'on'
  sensor:
  - unique_id: tmp_person_time_left_home_yourname
    name: tmp_person_time_left_home_yourname
    icon: mdi:home-clock
    state: >-
      {% set last_changed = states.person.yourname.last_changed | as_local %}
      {{ as_timestamp(last_changed) | as_datetime() }}

- trigger:
  - platform: state
    entity_id:
      - person.yourname
  - platform: event
    event_type: event_template_reloaded
  - platform: state
    entity_id:
      - input_boolean.templatetrigger
    to: 'on'
  sensor:
  - unique_id: tmp_person_zonestatus_yourname
    name: tmp_person_zonestatus_yourname
    state: >-
      {% set output = namespace(state='Unbekannt') %}
      {% for zon in states.zone %}
        {% for pers in expand(zon.entity_id, 'persons') %}
          {% if pers.entity_id == 'person.yourname' %}
            {% set output.state = zon.attributes.friendly_name  %}
          {% endif %}
        {% endfor %}
      {% endfor %}
      {{ output.state }}
    icon: >-
      {% set output = namespace(icon='mdi:crosshairs-question') %}
      {% for zon in states.zone %}
        {% for pers in expand(zon.entity_id, 'persons') %}
          {% if pers.entity_id == 'person.yourname' %}
            {% set output.icon = zon.attributes.icon %}
          {% endif %}
        {% endfor %}
      {% endfor %}
      {{ output.icon }}

- trigger:
  - platform: state
    entity_id:
      - device_tracker.iphone
      - device_tracker.iphone_ping
  - platform: event
    event_type: event_template_reloaded
  - platform: state
    entity_id:
      - input_boolean.templatetrigger
    to: 'on'
  sensor:
  - unique_id: tmp_person_lastseen_yourname
    name: tmp_person_lastseen_yourname
    state: >-
      {% set state1 = states.device_tracker.iphone.last_changed | as_local %}
      {% set state2 = states.device_tracker.iphone_ping.last_changed | as_local %}
      {% if state1 < state2 %}
        {% set statebest = state2 %}
      {% else %}
        {% set statebest = state1 %}
      {% endif %}
      {% if statebest < today_at() - timedelta(days=1) %}
        {{ as_timestamp(statebest) |timestamp_custom('%d.%m. %H:%M') }}
      {% elif statebest < today_at() %}
        {{ as_timestamp(statebest) |timestamp_custom('Gestern %H:%M')}}
      {% else %}
        {{ as_timestamp(statebest) |timestamp_custom('%H:%M')}}
      {% endif %}

- trigger:
  - platform: state
    entity_id:
      - person.yourname
      - sensor.iphone_geocoded_location
  - platform: event
    event_type: event_template_reloaded
  - platform: state
    entity_id:
      - input_boolean.templatetrigger
    to: 'on'
  sensor:
  - unique_id: tmp_person_lastseenlocation_yourname
    name: tmp_person_lastseenlocation_yourname
    state: >-
      {% if ((state_attr('sensor.iphone_geocoded_location', 'ISO Country Code') is not none)
            and (state_attr('sensor.iphone_geocoded_location', 'Locality') is not none)
            and (state_attr('sensor.iphone_geocoded_location', 'Sub Locality') is not none)
            and (state_attr('sensor.iphone_geocoded_location', 'Thoroughfare') is not none)) %}
        {{- state_attr('sensor.iphone_geocoded_location', 'ISO Country Code') -}}
        {{- ", " -}}
        {{- state_attr('sensor.iphone_geocoded_location', 'Locality') -}}
        {{- "\n" -}}
        {% if is_state_attr('sensor.iphone_geocoded_location', 'Sub Locality','N/A') %}
        {% else %}
          {{- state_attr('sensor.iphone_geocoded_location', 'Sub Locality') -}}
          {{- "\n" -}}
        {% endif %}
        {{- state_attr('sensor.iphone_geocoded_location', 'Thoroughfare') -}}
      {% else %}
        {{ 'Unbekannt oder keine Daten' }}
      {% endif %}

16 Likes

Last question from me today, sorry for all the questions but i guess its common when you change themes

I want to have a if with temperature here, so that if its under 0 degrees outside, there is a freezing cold emoji, etc. Im not that familiar with templating, i manged to do it for greetings, but how do i use the state here for

If {{states('sensor.varmepumpe_stue_outside_temperature')}} < 0
The tempeature outside is -1 :freezingemoji:
elif {{states('sensor.varmepumpe_stue_outside_temperature')}} < 10
blablalba
elif {{states('sensor.varmepumpe_stue_outside_temperature')}} < 20
blalbal
elif
{{states('sensor.varmepumpe_stue_outside_temperature')}} > 20
blablalba

Needs to be more like this:

{% set outside_temp = states('sensor.varmepumpe_stue_outside_temperature') | int %}
{% if outside_temp < 0 %}
The tempeature outside is -1 🥶
{% elif outside_temp < 10 %}
blablalba
{% elif outside_temp < 20 %}
blalbal
{% elif outside_temp > 20 %}
blablalba
{% else %}
{% endif %}
1 Like

Is it possible to get this into a mushroom card?
I have the same situation, but i wan’t the color of my entity to change to red if the temperature is below 18c…

have a virtual beer on me, i need to learn templating, thanks a lot

1 Like

Heres what i managed to do in a couple of hours. Anyone got any tips for me on what to look at for some inspiration? Its pretty basic, but it takes time to read trough a forum thread with 3948 posts (as of this writing). For chips im just using basic things, device tracker, one for current electrical price, and the total power draw of the entire house (plugged into electrical box) and a conditional one for lights that are on, and for motion sensors that are triggerd.

I first tried using Room view, but due to having 40+ lights, the home screen got to much rooms, and i tried sorting it inside per device type. I think that is better for me at least, but i do think room is better, but again for me the homescreen got too busy.


5 Likes

If that is the only condition, you would do something like this:

type: custom:mushroom-template-card
primary: Office Temperature
secondary: '{{ states(entity) | round(1) }} °C'
icon: mdi:thermometer
entity: sensor.rhys_office_sensor_temperature
icon_color: '{{ ''red'' if states(entity) | int < 18 else ''green'' }}'

I’m not trying to blow my own horn, but you can filter by person like this.

Filter by person

Do this for people that you find interesting to narrow your search :grin:

21 Likes

Hi,

I try to template the confirmation text of a template card, but do not work - bug or feature?

        double_tap_action:
          action: call-service
          confirmation:
            text: >-
              {% if is_state('timer.timer_conditioning_30min','idle') %}
                {{- "Starten?" -}}
              {% else %}
                {{- "Stoppen?" -}}
              {% endif %}

Thank you.

No sorry, that’s not supported

Hello there,

I’ve upgraded to version 2.4.1 and the cards are not appearing now, i had to downgrade to 2.4.0. Does anyone had this same problem ?

Thanks but sad, do you have any alternative ways for a toggle (first start then stop)?

Thank you so much! But the problem I have is that I can’t show the icon, so I would like the whole text from the entity, “friendly_name” to be red if it’s too cold, yellow if OK and white if as wanted… i have tried experimenting with that piece of code and many others but I can’t get it to work like I want :frowning:

Thanks!

1 Like

works perfect! thanks!

Managed to fix all templates for different devices, but having issue with climate to be used in a condtional chip card, for this i can use hvac_action: heating. When its not heating, the hvac_action: idle. I cant use state, because the thermostats is only in heat mode.

For motion sensors i have previously did this like this

number_of_motion_sensors_on:
        friendly_name: "Number of Motion Sensors On"
        icon_template: mdi:run
        value_template: >-
          {% set count = namespace(value=0) %}
          {% for entity_id in state_attr('binary_sensor.all_motion_sensors','entity_id') %}
            {% if (states(entity_id) == 'on') %}
              {% set count.value = count.value + 1 %}
            {% endif %}
          {% endfor %}
          {{ count.value }}

This gives me almost what i want, but it using the state on climate, since this only have heat available it gets wrong. It will always be 12, but i want the once actually heating.

{{ states.climate | selectattr('state', 'eq', 'heat') | list | length }}


Hi,
Thanks for all the great work in animation. a question about the community posts. How do you make the drop down code?

1 Like

use:
{{ states.climate | selectattr('attributes.hvac_action', 'eq', 'heating') | list | length }}

1 Like

It’s something with iOS, I’ve had to workarounds for issues like this.