Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

someone by any chance knows how to template a friendly_name?

something like '{{entity('friendly_name')}}'

Try {{ state_attr(entity, 'friendly_name') | title }}
The title part capitalizes the first letter in the name, you can use that or not.

trying to use this as a secondary: on a mushroom-template-card, however i get ā€œbad indentation of a mapping entry (6:32)ā€ in the editor. so i guess that one doesnĀ“t work

If youā€™re doing it in YAML, try it like this. It works for me.
secondary: '{{ state_attr(entity, ''friendly_name'') | title }}

1 Like

there we go, thanks!

I can see you have your cats on dashboard. What kind of device you are using to track them?

Surepetflap.
I donā€™t really know where they are. Just if they are inside or outside.

Is it possible to template the icon element of a mushroom slider? I want to change the icon & colours, based on the status of another entity, but have failed miserabely looking at the examples on this thread.

Any help/ direection is appreciated!

Is it possible to change icon color of the cover card?
icon_color:
Doesnā€™t seems to work.

Have a look here:

1 Like

What card are you wanting to do this with?

Great work.
I have been searching for the cover card for a whileā€¦ very few posts.

Could you please share your scripts , automations & helpers (whatever is involved) to get the card working? I have been searching for a few days in different postsā€¦ couldnā€™t get a proper one to work with and implementā€¦

ok !! whatever i am going to say ahead might sound crazyyā€¦
i dont have a cover element in my setup yetā€¦ need to purchase one soon. i was trying to implement the functionality using a virtual setup. i could do it successfully for the alarm card using manual alarm template, dummy sensor templates, dummy helpers etc.

Now I need to make a similar for the cover card using this.. i know this is not the right place, i have been searching in different topics, but couldnā€™t get a good answer.

Edit::
In simpler wordsā€¦ can someone help me how to use the mushroom cover card

I will be using a DIY motor to roll the shades up and down. (not the tilt type). so it will not be having a positional sensor. I intend to virtually create a position number depending on how much time the motor operatesā€¦ (Like 1 second of motor rotation closes the blind by 4 % ā€¦ so it takes 25 seconds to fully close the blind). This percentage will be fed into an input number to retain the position of the blind.

can someone please direct me in the right directionā€¦

Also, I just started with the cover card, and when I move the position slider it says

I searched many topics over the daysā€¦ but couldnā€™t find a suitable topic that uses mushroom card for blinds. all of the topics use either an external switch / individual switches, not an inbuilt switch like the mushroom cover card

The color variable --rgb-indigo-color was removed from HA after briefly being added. You will need to replace var(--rgb-indigo-color) with var(--mush-rgb-indigo, 63, 81, 181).

You can use a darker background color to blend with, such as --secondary-background-color. Like this:

background: url('{{ state_attr("media_player.currently_playing", "entity_picture") }}'), linear-gradient(to left, transparent, var(--secondary-background-color) 50%);
1 Like

ā€œtryingā€ to achieve this using the mushroom-number-card

Sorry to bump.

Is it even possible to dynamically create a card like this?

Hi!
Is there some way to translate this content to Spanish?

content: '{{ now().strftime("%A, %-d %B") }}'

I would like to avoid an if-else, but if there is no other choiceā€¦

do things like this:

      - unique_id: volgende_afval_ophaal_dag
        name: Volgende afval-ophaal dag
        state: >
          {%- set next = as_timestamp(strptime(states('sensor.afvalwijzer_next_date'),
                         '%d-%m-%Y',none),none) %}
          {%  set months = ['Januari','Februari','Maart','April','Mei','Juni','Juli',
                            'Augustus','September','Oktober','November','December'] %}
          {%- set wdays = ['Zondag','Maandag','Dinsdag','Woensdag','Donderdag',
                           'Vrijdag','Zaterdag'] %}
          {%- set wday = next|timestamp_custom('%w',default=none)|int(default=0) %}
          {%- set month = next|timestamp_custom('%m',default=none)|int(default=0) %}
          {{next|timestamp_custom(wdays[wday] ~ ' %-d ' ~ months[month-1],default=none)}}

strftime is only in English.

above is a template sensor. Ofc you can use that in Markdown too:

content: >
  {% set x = ['unknown','unavailable'] %}
  {% if states('sensor.daylight_savings_times') not in x %}

  <img src = /local/season/{{(now().timetuple().tm_isdst)
                             |iif('summer','winter')}}.png width='80'>

  <img src = /local/season/{{(now().timetuple().tm_isdst)
                             |iif('zomer','winter')}}tijd.png width='80' >

  **Zomertijd - Wintertijd**
  {% set dst = now().timetuple().tm_isdst %}

  DST is {{'actief' if dst else 'niet actief'}} en het is {{'Zomertijd'
            if dst else 'Wintertijd'}}.

  {% set volgende = state_attr('sensor.daylight_savings_times','next') %}
  {% set count = volgende.days_to_event %}
  {%- set next = as_timestamp(volgende.event,0) %}
  {%  set months = ['Januari','Februari','Maart','April','Mei','Juni','Juli',
                    'Augustus','September','Oktober','November','December'] %}
  {%- set wdays = ['Zondag','Maandag','Dinsdag','Woensdag','Donderdag',
                   'Vrijdag','Zaterdag'] %}
  {%- set wday = next|timestamp_custom('%w',default=none)|int(default=0) %}
  {%- set month = next|timestamp_custom('%m',default=none)|int(default=0) %}
  {% set datum = next|timestamp_custom(wdays[wday]  ~ ' %-d ' ~ months[month-1] ~ ' %Y' )%}

  De volgende wissel vindt

  {%- if count == 0 %} vannacht plaats!
  {%- elif count == 1 %} morgen plaats op {{datum}}.
  {%- elif count == 2 %} overmorgen plaats op {{datum}}.
  {%- elif count > 2 %} plaats over {{count}} dagen op:

  **{{datum}}**.
  {%- endif %}

  De klok gaat dan 1 uur {{volgende.motion}} en we {{volgende.result}}.

  {% else %} Calculating
  {% endif %}

we now (2023.4) will have jinja imports, and can store system wide macros. We should probably be able to use that template and reuse it everywhere.

Havent touched that yet (too busy fixing all flukes in the current Dashboards because of core changesā€¦)

1 Like

It would be nice to create a welcome card with the events on my calendar.

Is it possible to use a murhoom card to do that?

thanks

This is a beautiful cardā€¦ really helps plan the job days ahead

but as usual, I might sometimes get lazy & the days may go overdueā€¦ so I am thinking if itā€™s possible to change one entity in this card with an overdue days entity.

is it possible to change the since replaced entity with an days overdue entity conditionally??

I have two sensors, one which gives the days elapsed & other one is days overdue which starts counting when the days elapsed matches the number of days of filter life. The value of the days overdue sensor remains 0 until that time.

I would like to replace the 2nd entity which currently shows days elapsed with the days overdue sensor when the sensor starts counting from 0. I made a conditional statementā€¦ but it doesnā€™t show anything on the card

This is the code for that particular entity

- type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 35% 22% 22% 21%
    cards:
      - type: custom:mushroom-entity-card
        entity: input_datetime.gf_lr_aquarium_filter_last_reset
        icon: mdi:calendar
        name: Last Replaced
        layout: vertical
        primary_info: state
        secondary_info: name
        card_mod:
          style: |
            ha-card { 
              margin-left: auto;
              margin-right: auto;
            } 
      - type: custom:mushroom-entity-card
        entity: > 
          {% if (states('sensor.gf_lr_aquarium_filter_life_overdue') | int > 0) -%}
            sensor.gf_lr_aquarium_filter_life_overdue
          {%- else -%}
            sensor.gf_lr_aquarium_filter_life_elapsed
          {%- endif %}
        name: Elapsed
        layout: vertical
        primary_info: state
        secondary_info: name
        card_mod:
          style: |
            ha-card { 
              margin-left: auto;
              margin-right: auto;
            } 
      - type: custom:mushroom-entity-card
        entity: input_number.gf_lr_aquarium_filter_lifespan
        icon: mdi:calendar-edit
        name: Lifespan
        layout: vertical
        primary_info: state
        secondary_info: name
        card_mod:
          style: |
            ha-card { 
              margin-left: auto;
              margin-right: auto;
            } 
      - type: custom:mushroom-template-card
        primary: Reset
        secondary: Now
        icon: mdi:refresh
        layout: vertical
        tap_action:
          action: call-service
          service: input_button.press
          data: {}
          target:
            entity_id: input_button.gf_lr_aquarium_filter_reset_button
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod:
          style: |
            ha-card { 
              margin-left: auto;
              margin-right: auto;
            }
    card_mod:
      style: |
        ha-card { 
          margin-top: -10px;
          border: none;
        }

it would be even better if it can be replaced in the bar card with number of days overdue bright red colorā€¦

the code for that part is

      - type: custom:bar-card
        entity: sensor.gf_lr_aquarium_filter_life_expected
        height: 38px
        min: 0
        max: 56
        entity_row: true
        severity:
          - color: var(--green-color)
            from: 35
            to: 56
          - color: var(--orange-color)
            from: 18
            to: 34
          - color: var(--red-color)
            from: 0
            to: 17
        positions:
          icon: 'off'
          indicator: 'off'
        card_mod:
          style: |
            ha-card {
              padding: 14px;
              --bar-card-border-radius: 10px;
              border: none;
            }
            bar-card-value {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-name {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-backgroundbar {
              opacity: 0.2;
              filter: brightness(1);
            }

Can someone help me with thisā€¦

1 Like

yea, for some reason using this suggested code makes the icon disappear entirely and I have no clues for why since it does not make any sense to me, is there any way to activate logs for UI to check what could be going on? :thinking: