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

[nonamejuju (Julien H)]

Well that’s perfectly working !

You are a boss ! Thanks a lot.

Another question unrelated is there a way to have the same code color highlight as in the forum in the card configuration ?

This is way better to understand :

than this :

I guess the 1st one is in CSS style and the other one in yaml ?

[dimitri.landerloos]

Nope. You could do your coding in vs code maybe and then transfer it over. But when you add it to homeassistant it will look the way it does.

[nonamejuju (Julien H)]

@dimitri.landerloos

I can also guarantee you that this section does not work as intended:

@nonamejuju

> card_mod:
  style: |
    mushroom-template-chip:nth-child(1)$: |
     ha-state-icon {
       {{ 'animation: clip 2s linear infinite;'}}
     }
     @keyframes clip {
       50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
     }
     ha-card {
    --chip-box-shadow: none;
    --chip-background: none;
    --chip-spacing: -0.5em;
    --chip-icon-size: 0.5em}
    }
> ```

The mushroom-template-chip:nth-child(1)$ :| is now not seen as being a drilled down object but rather just an object to style directly and that just wont work because you now cant access the ha-state-icon that is inside the chip object.

Regarding this, you are right, the code was a leftover from the numerous tests I did, the .content in the conditional was doing everything

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions: []
    chip:
      type: template
      entity: binary_sensor.kitchen_motion_sensor_occupancy
      icon: |-
        {% if is_state(config.entity, 'on') %}
          mdi:motion-sensor
        {% else %}
          mdi:motion-sensor-off
        {% endif %}
      icon_color: |-
        {% if is_state(config.entity, 'on') %}
        primary
        {% else %}
        grey
        {% endif %}
      tap_action:
        action: more-info
      card_mod:
        style: |
          .content {
            animation: clip 2s linear infinite; if is_state(binary_sensor.kitchen_motion_sensor_occupancy,on)
          }
          @keyframes clip {
            75% { clip-path: polygon(0 0, 30% 0, 100% 100%, 0 100%); }
            }
  - type: template
    entity: sensor.kitchen_cooktop_current_comsumption
    icon: mdi:stove
    icon_color: |-
      {% set consumptiontion_level = states(entity) | float(0) %}
      {% if consumptiontion_level > 0 %} 
        primary
      {% else %}
        grey
      {% endif %}
  - type: template
    icon: |-
      {% if is_state(config.entity, 'on') %}
        mdi:window-open-variant
      {% else %}
        mdi:window-closed-variant
      {% endif %}
    icon_color: |-
      {% if is_state(config.entity, 'on') %}
      primary
      {% else %}
      grey
      {% endif %}
    entity: binary_sensor.window_sensor_kitchen_contact
alignment: end
card_mod:
  style: |
    ha-card {
     --chip-box-shadow: none;
     --chip-background: none;
     --chip-spacing: -0.5em;
     --chip-icon-size: 0.5em}
     }

[Mar1us]

thank you for all your combined cards (also your explanation) really like them!

[masterfink (Taylor Finklea)]

Does anyone know how to access things like “last_changed” within a template? I tried accessing it directly with {{ states.sensor.sensor.last_updated }}, but it gives me a timestamp rather than showing something like 9 minutes ago. Example below, the first is using the Entity card, the 2nd is using a template

[dimitri.landerloos]

This is my favourite code for it.

{%- set time = (as_timestamp(now()) - as_timestamp(states.device_tracker.car.last_changed)) | int  %}
    {%- set minutes = ((time % 3600) // 60) %}
    {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
    {%- set hours = ((time % 86400) // 3600) %}
    {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
    {%- set days = (time // 86400) %}
    {%- set days = '{}d '.format(days) if days > 0 else '' %}
    {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago

Reason being is that it works with multiple days rather than just resetting at 24 hours like most templates you find do.

[jiteshpatel]

Would this work for when an automation was last run?

[dimitri.landerloos]

Yes. Replace

states.device_tracker.car.last_changed

with

state_attr('automation.yourautomation', 'last_triggered')

So for one of my automations would look like this:

{%- set time = (as_timestamp(now()) - as_timestamp(state_attr('automation.batteries_low_notification', 'last_triggered'))) | int  %}
    {%- set minutes = ((time % 3600) // 60) %}
    {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
    {%- set hours = ((time % 86400) // 3600) %}
    {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
    {%- set days = (time // 86400) %}
    {%- set days = '{}d '.format(days) if days > 0 else '' %}
    {{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago

[paddy0174 (Patrick)]

There is a great template extension from Petro, that works with Jinja (=template) macros. Makes it super easy to work with time things in templates, and saves a lot of code repetition.

GitHub - Petro31/easy-time-jinja: Easy Time calculations for Home Assistant...

You should check it out!

[dimitri.landerloos]

How did i never know about this!
Thanks for the link, that is getting used and recommended for ever from now on!

[paddy0174 (Patrick)]

Oh! I’m so sorry, I thought you (of all people) would know about this. But it’s not that long “on the market”, not even half a year… Really if I’d have known, I’d have posted a link earlier.

It’s really a nifty little extension and the idea with Jinja macros is something, I’m thinking about using. Haven’t found something to use it meaningful, but that will not be like that for long.

[Bieniu (Maciek)]

@dimitri.landerloos

Maybe try and ping your ha instance from the client and look at your latency instead of the bandwidth.

Latency is about 81 microseconds (ping from WSL on Windows 10):

root@Stacjonarny:/home/maciek# ping 192.168.2.15 -c 1000 -i 0.010
PING 192.168.2.15 (192.168.2.15) 56(84) bytes of data.
64 bytes from 192.168.2.15: icmp_seq=1 ttl=63 time=0.852 ms
...
64 bytes from 192.168.2.15: icmp_seq=1000 ttl=63 time=0.685 ms

--- 192.168.2.15 ping statistics ---
1000 packets transmitted, 1000 received, 0% packet loss, time 16010ms
rtt min/avg/max/mdev = 0.472/0.814/5.024/0.251 ms
                            ^^^^^^^

@paddy0174

To investigate that further, we need to know what browser/app you’re running and on what device.

Windows 10 + Firefox 117 (ethernet)
Windows 11 + Edge 116 (WiFi)
iOS companion app 2023.4 (WiFi)

It doesn’t seem to be device or browser dependent

[jiteshpatel]

Hi, I can not find this in HACS at all

[dimitri.landerloos]

You have to add it as a custom repository

[jiteshpatel]

Sorry to be a pain @dimitri.landerloos, but are you able to share the url, as GitHub - Petro31/easy-time-jinja: Easy Time calculations for Home Assistant templates did not work for me

[dimitri.landerloos]

Here you go, this is better to explain the installation steps

Easy Time Macros for Templates!

Hello community! As you may know, 2023.4 offers a new global template macro option in Home Assistant. How does this benefit you? The introduction of this feature allows me to easily share all the templates I’ve helped you create over the years in a single easy-to-use template library! All in your native language! Introducing… Easy Time Jinja A 1-stop-shop for easy time calculations. Get it from HACS! These templates are now available in HACS, with a caveat. In order to see templat…

you need experimental features turned on for HACS

[andyblac (Andy Blackburn)]

you can also use the built in relative_time, no add-on required ie

{{relative_time(states['fan.bathroom_extractor'].last_changed)}}

this returns like 12 hours, this is what the normal Lovelace cards use.

[dimitri.landerloos]

This is definitely a solution. But the reason i liked my template and now the add-on is because it can returns more complex strings like 6d 4h 23m. Or even seconds if needed

Im a sucker for having all of the info available. But i can definitely see relative_time being useful for a lot of people

[dimitri.landerloos]

Definitely not your latency either then. Must just be the type and quantity of modifications you have

[paddy0174 (Patrick)]

^^ What he says!

Anyway, I’d open a new topic, as helping here in this overcrowded place is kinda difficult (and not the scope of this topic). If you decide to do so, please tag me, so I don’t miss it (hopefully).