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

Try like this:

hold_action:
  action: call-service
  service: script.reset_reminder
  data: {}
  target:
    entity_id: input_datetime.reminder_date
alias: Reset Reminder
sequence:
  - service: input_datetime.set_datetime
    data:
      datetime: "{{ now() + timedelta(days=30) }}"
    target:
      entity_id: "{{ entity_id }}"
mode: single

Yes, you can set the Mushroom Chip background like this:

Mushroom Chip Background

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
    content: Mushroom
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(var(--rgb-green), 0.2);
        }
5 Likes

Ah okay so it’s passed in during the hold action. Thanks

1 Like

Anyone know why my camera feed looks normal on desktop (rounded corners)

And on mobile it gets boxed

Really stands out when it looks boxed, its a grid card with picture entity, render cards as squares is disabled

Looks like you have a different theme enabled on mobile. Buttons have box-shadow.

@rhysb
can chip card have a secondary line, i would like to have my temperature below “Climate”

Skärmavbild 2022-11-23 kl. 06.21.56

Tried using different themes. Didn’t find a specific mushroom theme. tried default, minimalist etc

Same issue. No matter what I use on desktop. Default, minimalist etc it works

You can also clearly see that before loading the stream the box are rounded but when it starts playing it gets squared

Lastly I don’t have minimalist installed anymore but this is what I have listed under themes. No mushroom specific one

You can make the Chip multiline like this.

Mushroom Multiline Chip:

Mushroom Multiline Chip

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: climate.office_air_conditioner
    icon: mdi:thermometer
    icon_color: red
    content: |-
      Climate
      {{ state_attr(entity, 'temperature') | round(1) }} °C  
    card_mod:
      style: |
        .content {
          white-space: pre-wrap;
        }
21 Likes

Did you solve this?

Figured out the issue with squared camera feed, i had to set theme under picture entity, for some reason, it seems that overwrites the theme set on the user level for that specific resource

1 Like

I figured this video would be of interest to people on this thread - Create Stunning ANIMATED MUSHROOM CARDS On Your Dashboard NOW! - YouTube - it’s really good

3 Likes

Trying to use rooms per device instead of per rooms since we got a big house. Dont know if i like it yet. However, in thermostat view i want to make a power graph at the bottom, but only count based on the thermostats that is on. Do i have to use something like transform and -parsfloat for that?

Edit; figured it out, can use transform/parsefloat if i have a unit that covers all my elelctricy, but easier just to make a new template sensor based on all thermostats. so i figured it out

Wow. You like it warm :wink: Nice dash!

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

15 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…