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

[miketarg]

Many thanks

Just one small question, I know that the

|float)|round(0)

would be used to change the decimal to want I want but I am at a loss as how to apply it to the code you very kindly provided.

I’m looking to get rid of the decimal and the zero after 371:

I really appreciate your help!

[miketarg]

Never mind I figured it out!

{% elif states('sensor.solis_s6_solis_battery_charge_power') | float |round(0)  != 0 and states('sensor.solis_s6_solis_battery_discharge_power') | float |round(0)  != 0 %} W
{{states('sensor.solis_s6_solis_battery_charge_power') | float |round(0)  }} W
{{states('sensor.solis_s6_solis_battery_discharge_power') | float |round(0)  }} W
{% elif states('sensor.solis_s6_solis_battery_charge_power') | float |round(0)  != 0 and states('sensor.solis_s6_solis_battery_discharge_power') | float |round(0)  == 0 %}
{{states('sensor.solis_s6_solis_battery_charge_power') | float |round(0)  }} W
{% elif states('sensor.solis_s6_solis_battery_charge_power') | float |round(0)  == 0 and states('sensor.solis_s6_solis_battery_discharge_power') | float |round(0)  != 0 %} 
{{states('sensor.solis_s6_solis_battery_discharge_power') | float |round(0)  }} W
  {% endif %}

[paddy0174 (Patrick)]

Just to add to this, you could make that better readable by using “set” in your template.

{% set charge = states('sensor.solis_s6_solis_battery_charge_power') | float | round(0) %}
{% set discharge = states('sensor.solis_s6_solis_battery_discharge_power') | float | round(0) %}
[...]
{% elif charge != 0 and discharge != 0 %} W
{{ charge }} W
{{ discharge }} W
[...]

And I’d try to use int(0) instead of float(0) | round(0), as you wouldn’t need to round that later on.

No need to do this, but it makes it much better readable.

[dimitri.landerloos]

Absolutely agree with using set.

Just keeping in mind for the second bit that:

| int(0)

Will convert a value such as 9.9 to 9. The (0) just refers to a default value you are giving if the state of the entity is not a number. Like unknown, unavailable, or None, etc.

| round(0)

Converts a value like 9.9 to 10, as it does proper rounding. But it may still display as 10.0 depending on the use. The (0) here does Not refer to a default, but rather the decimals to round to.

So IMO, one is not better than the other, it really depends on the accuracy you want.

To illustrate what i mean by the default value:

I had to add the | float(0) with a default in front of the | round(0), otherwise it fails:

You can also do this instead to have a default for the | round(0) without using | float(0) in front.

[stephanschleichstr13]

Is it possible to use Labels Like in badge in a Chips Card?

[TillitschScHocK (Till)]

Hello everyone,

I’m having an issue with the animations in my Mushroom Cards. The cards display correctly, but the animations no longer work. I was using the templates from rhysb. Link to his Part

Does anyone have any idea what might be causing this or how I can fix the problem?

Thank you in advance for your help!

[Frosty]

@dimitri.landerloos updated all the animations which can be found here

[TillitschScHocK (Till)]

Thanks, I found it on Github too. Big thanks for the great animations.

[aniboii]

Hi everyone,

I am working on my first dashboard and wanted to use some features from both the mushroom light card as well as the custom room card made by Everything Smart Home for Minimalist.

Essentially what I want is to merge features from both cards. I would like the slider and brightness/temp/color slider and controls to be at the same row as the Bedroom text (like the default minimalist light card) but then also be able to add a label showing temperature and more buttons at the bottom row for things like heating etc.

I can’t seem to find any yaml templates for mushroom to use as a base for adding more items and I have no idea where to get started if I want to port the slider and temp/brightness/colour functionality over to minimalist so I’m pretty stuck.
Here’s a crappy drawing of what I want to do the bottom buttons are just examples of buttons.

[miketarg]

Hello

Great work on this its fantastic,

Just a quick question, can I use these animations on Mushroom Template Badges?

I can’t get it to work.

This is my code

type: custom:mushroom-template-badge
content: |-
  {% set state=states('binary_sensor.kitchen_camera_person_occupancy') %}
  {% if state=='off' %}
  Clear
  {% elif state=='on' %}
  Detected
  {% endif %}
icon: |-
  {% if is_state('binary_sensor.kitchen_camera_person_occupancy', 'on') %}
    mdi:motion-sensor
  {% else %}
    mdi:motion-sensor-off
  {% endif %}
color: |-
  {% if is_state('binary_sensor.kitchen_camera_person_occupancy', 'on') %}
    yellow
  {% else %}
    grey
  {% endif %}
entity: binary_sensor.kitchen_camera_person_occupancy
tap_action:
  action: more-info
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: motion 2s linear infinite;
      }
      @keyframes motion {
        0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); }
        50% { --shape-color: rgba(var(--rgb-blue), 0.2); }
      }
    .: |
      ha-state-icon {
        animation: clip 2s linear infinite;
      }
      @keyframes clip {
        50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
      }

thanks

[Faecon (Jo)]

I just want to have a tittle with the name of the person who is logged in

          - type: custom:mushroom-template-card
            primary: {{user}}

I found this on the forum, but that is not working for me. Do I miss something ?

[Frosty]

it’s built into the standard example for a template card?

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: ''
icon: ''

[Faecon (Jo)]

yes, I get invalid key: “{‘user’: None}”

[Frosty]

post your full code

[Faecon (Jo)]

  - type: custom:swipe-card
    cards:
      - square: false
        type: grid
        columns: 1
        cards:
          - type: custom:mushroom-template-card
            primary: {{user}}
            card_mod:
              style:
                mushroom-state-info$: |
                  .container {
                    text-align: center !important;
                    
                .: |
                  ha-card {
                    --card-primary-font-size: 18px;
                    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
                    background-color: rgba({{ states("input_text.kleur_iconen")}},0.2) !important;
                    width: 80%;
                    margin-left: 40px;
                    height: 55px !important;
                    }

[Frosty]

primary: '{{user}}'

[Faecon (Jo)]

I found it…

you cannot use

primary: {{user}}

you have to put some text before

primary: hi {{user}}

[Frosty]

you can like I showed with single quotes

[Faecon (Jo)]

next question

is it possible to make a card where the entity is dynamic ?

f.e.

              - type: custom:mushroom-chips-card
                chips:
                  - type: entity
                    entity: ('input_text.XXXXXX ')

and the input_text has to be followed by {{user}} ?

so depending on the user who is logged in I get a different value shown ?

[Frosty]

possibly, but easier with conditional card i guess.

type: conditional
conditions:
  - condition: user
    users:
      - ccc83b18ee8d4c498fcac9df2436b493
card:
  type: custom:mushroom-chips-card
  chips:
    - type: entity
      entity: input_text.xxxxx