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

Hi. I’m struggeling a bit with mushroom template card and the use of (entity).
For getting the value I can use states(entity) to get the entity value. But I would like to use the (entity) for all templates in a card. When it comes to i.e. getting last_uppdated, I can only get it to work if I specify the entity_id itself, not by using xxxxx(entity).

      - type: custom:mushroom-template-card
        primary: '{{ states(entity) }}°C'
        secondary: >-
          Stue

          {% set sec = (as_timestamp(now()) - 

          (as_timestamp(states.sensor.e1_stue_deteksjon_bevegelsessensor_air_temperature.last_changed)))-3600
          %}

          {{ sec|int|timestamp_custom('%H:%M:%S') }}
        icon: >-
          {% set update = (as_timestamp(now()) -
          as_timestamp(states.sensor.e1_stue_deteksjon_bevegelsessensor_air_temperature.last_changed))-3600
          | int %}

          {% if (update > 2880) %}
            mdi:robot-dead
          {% else %}
            mdi:home-thermometer
          {% endif %}
        icon_color: >-
          {% set update = (as_timestamp(now()) -
          as_timestamp(states.sensor.e1_stue_deteksjon_bevegelsessensor_air_temperature.last_changed)).3600
          | int %}

          {% if (update < 720) %}
            green
          {% elif (update < 1440) %}
            yellow
          {% elif (update < 2880) %}
            orange
          {% elif (update > 2880) %}
            red
          {% else %}
            cyan
          {% endif %}
        entity: sensor.e1_stue_deteksjon_bevegelsessensor_air_temperature
        layout: vertical
        badge_icon: |-
          {% set temp = states(entity)|float %}
          {% if temp > 25.0 %}
            mdi:fire
          {% elif temp < 17 %}
            mdi:snowflake-thermometer
          {% else %}
            mdi:hand-okay
          {% endif %}
        badge_color: |-
          {% set temp = states(entity)|float %}
          {% if temp > 25.0 %}
            red
          {% elif temp < 17 %}
           blue
          {% else %}
           green
          {% endif %}
        fill_container: false
        multiline_secondary: true

The above is my code for one card and I would like to come to a place where I do not use entity_id in it at all but it is taken from entity: . I tried using state_attr(entity,‘last_changed’) but with no luck.

I hope what I try to is possible.

The sensor.helper_electricity_consumption_normal has value of 0.000
But, why it is not displayed? The other sensor is displayed fine.

If I changed to a “text”, it is then displayed, obviously:

If I enclosed in quotes, it is displayed, but not nice (the quote characters are displayed as well). And also, the other sensors, they are displayed, even though without quotes (see the first screenshot):

Is there any function to convert that to string (text)?

couldn´t something like this be used to get a navigation bar that sticks to the bottom?

3 Likes

Hi,
i tried copy and paste several card templates and installed the card-mod plugin. But i still get the boarders around each inline element. Do i miss something?
Thanks.

I immediately tried this out at my dashboard. Unfortunately the media player only shows for half a second and then its gone?
Any idea why?

Nevermind, i missed a bit of CSS at the bottom :smiley:
(I disabled --album-art-color because i dont have NodeRed)

Great work as always @Rhysb :clap:

    :host {

      /* Add background to host to prevent transparent card */
      border-radius: var(--ha-card-border-radius, 12px);
      background: var(--card-background-color);

      /* Assign album art color to variable used in sticky media player */
      {% if is_state('media_player.wohnzimmer_mediaplayer_music', ['playing', 'paused']) %}
        /* --album-art-color: {{ states('sensor.muted_color') }};
      {% else %}
      
        /* Hide the sticky media player when it is idle */
        display: none !important;
      {% endif %}

      /* Make the media player sticky at the bottom of the page */
      position: sticky;
      bottom: 12px;
    }
1 Like

try:

:host {

      /* Add background to host to prevent transparent card */
      border-radius: var(--ha-card-border-radius, 12px);
      background: var(--card-background-color);

      /* Assign album art color to variable used in sticky media player */
      {% if is_state('media_player.wohnzimmer_mediaplayer_music', ['playing', 'paused']) %}
        /* --album-art-color: {{ states('sensor.muted_color') }}; */
      {% else %}
      
        /* Hide the sticky media player when it is idle */
        display: none !important;
      {% endif %}

      /* Make the media player sticky at the bottom of the page */
      position: sticky;
      bottom: 12px;
    }

(closing the css comment)

1 Like

Asking here because there seems to be more css / card_mod activity going on here than in the card_mod thread:

Does anyone know how to:

  1. use :host together with card_mod classes
  2. use shadowroot selectors with card_mod classes

For me unfortunately the progress & volume bar aren’t available maybe you can help me. I tested all of your player non of them works

Do you have the flow working in Node-Red?

Can anybody help me? I want to give the rolling shutter card, skin and buttons a better look. Any ideas? Thanks in advance.

I use the mushroom cover card and want to disable the functions for movement (only display the position, but no possibility to open close).
Is this possible?

Have you not tried just using an entity card?

An entity card doesn’t show the position.
Only the up and down arrows for moving the shutters.

sorry, i’m stuck… how do i get Mushroom and the dependencies installed,
tried doing a add on and searching for mushroom.
I’ve posted the code i got to do a dashboard i’m trying into a eskom.yaml and located it in a packages directory which i then pull in under home_assistant section,
G

This should get you going in the right direction,

This is great!!! Looks really good.

I tried to implement that in my dashboard but I get the following in Node-Red.

image

Any ideas?

EDIT: Found that I don’t need the url of my home assistant instance in my case

1 Like

hey,
small functional question:
I’m using a basic musroom entity card to display my current powerconsumption,
it’s working as intended, but I’d like to make it just a bit nicer by giving it a bg color depending on the entity value, is this something that can be done by the card? or will i need more plugins?

I’m using an input_datetime helper to set some times when things should happen.

When i display it using an entity card, it’s formatted as hh:mm

With a template card it shows hh:mm:ss.

How can i adjust the formatting?

Thank you!

whoua! the sticky media player functionnality iis great!!

1 Like