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

miketarg · August 10, 2024, 8:54am

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 · August 10, 2024, 12:29pm

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 · August 10, 2024, 3:21pm

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 · August 11, 2024, 3:22pm

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

TillitschScHocK · August 12, 2024, 1:01pm

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 · August 12, 2024, 1:08pm

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

TillitschScHocK · August 13, 2024, 8:28am

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

aniboii · August 13, 2024, 1:18pm

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 · August 13, 2024, 4:03pm

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 · August 13, 2024, 4:55pm

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 · August 13, 2024, 5:20pm

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

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

Faecon · August 13, 2024, 5:23pm

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

Frosty · August 13, 2024, 5:24pm

post your full code

Faecon · August 13, 2024, 5:24pm

  - 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 · August 13, 2024, 5:30pm

primary: '{{user}}'

Faecon · August 13, 2024, 5:31pm

I found it…

you cannot use

primary: {{user}}

you have to put some text before

primary: hi {{user}}

Frosty · August 13, 2024, 5:33pm

you can like I showed with single quotes

Faecon · August 13, 2024, 5:38pm

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 · August 13, 2024, 5:47pm

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

justinstreet · August 14, 2024, 4:43am

Hey ya’ll… I have a mushroom template card that uses a 20pt font for the primary text with no secondary text. It cuts off all lower case letters that go below the normal line the text is written on, ie. letters g, j, p, q, y. Can someone help me expand the primary text area? Not having much luck googling. Thanks.