🔹 Card-mod - Add css styles to any lovelace card

[FragMenthor (Pedro Roque)]

Nevermind, I found a way to suit my needs, in case someone needs this:

Example code for the Temperature:

      - entity: sensor.openweathermap_temperature
        name: Temperatura
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge {
                    border: solid 3px;
                    color: orange;
                    background-color:
                      {%- from 'interpolate_rgb.jinja' import interpolate_rgb -%}
                      {%- set temp = states(config.entity) | float(0) -%}
                      {%- set temp_map = {
                                           0: "3498db",
                                           22: "70a03c",
                                           26: "ff9800",
                                           32: "e74c3c"
                                         }  -%}
                      {%- set keys = temp_map | sort -%}
                      {%- set index = keys | select("lt", temp) | list | length -%}
                      {%- if index == 0 -%}
                        #{{ temp_map[keys | first] }}
                      {%- elif index == keys | length -%}
                        #{{ temp_map[keys | last] }}
                      {%- else -%}
                        {%- set start = (keys[index - 1], temp_map[keys[index - 1]]) -%}
                        {%- set stop = (keys[index], temp_map[keys[index]]) -%}
                        {{ interpolate_rgb(temp, start, stop) }}
                      {%- endif -%};
                   }
                  .badge-container .label-badge .value {
                    color: white;
                   }
                  .badge-container .label-badge .label span {
                    background-color: orange;
                   }
          .: |
            :host {
              --ha-label-badge-border-radius: 30%;
              --ha-label-badge-size: 50px;
              --ha-label-badge-title-width: 56px;
              --ha-label-badge-font-size: 22px;
            }

PS: Using macro interpolate_rgb() in a separate file, interpolate_rgb.jinja, inside custom-templates folder, with:

{%- macro interpolate_rgb(temp, start, stop) -%}
  {%- set (start_temp, start_color) = start -%}
  {%- set (stop_temp, stop_color) = stop -%}
  {%- set (start_r, start_g, start_b) = (int(start_color[0:2], base=16), int(start_color[2:4], base=16), int(start_color[4:6], base=16)) -%}
  {%- set (stop_r, stop_g, stop_b) = (int(stop_color[0:2], base=16), int(stop_color[2:4], base=16), int(stop_color[4:6], base=16)) -%}
  {%- set s = ((temp - start_temp)/(stop_temp - start_temp)) -%}
  {# some channels might be negative; most browsers are probably tolerant, but in case not #}
  {%- set r = max(int(start_r + s*(stop_r - start_r)), 0) -%}
  {%- set g = max(int(start_g + s*(stop_g - start_g)), 0) -%}
  {%- set b = max(int(start_b + s*(stop_b - start_b)), 0) -%}
  rgb({{ r }}, {{ g }}, {{ b }});
{%- endmacro -%}

(copied from onother post here: Dynamic badge label (text) colours by parautenbach. )

[parautenbach (Pieter Rautenbach)]

@FragMenthor

interpolate_rgb

Dynamic badge label (text) colours

Here’s a little something I’ve wanted to do for a long time: I wanted to create temperature badges that apply colour according to the temperature value. [temp1] [temp2] And here’s the code, using card-mod: badges: - entity: sensor.living_room_ht_temperature name: Living Room card_mod: style: | :host { --label-badge-text-color: {%- macro interpolate(temp, start, stop) -%} {%- set (start_temp, start_color) = start -%} …

[FragMenthor (Pedro Roque)]

Yeah, thanks for you post, that’s what I’m using!
With the new general macro function available it makes everything shorter and more tidy, because I can make your function available everywhere.
Thanks again!

[Ildar_Gabdullin]

Interesting, could you explain in 2 words what does interpolate_rgb do?

[FragMenthor (Pedro Roque)]

For that you can see the post by parautenbach refered above, that’s his work, and a pretty good one too.

[Ildar_Gabdullin]

Oh, exactly, I forgot that we discussed it earlier…

Very nice & useful.

[parautenbach (Pieter Rautenbach)]

It’s a linear interpolation in RGB space, so it takes a state (temperature at the time of writing) and a start and stop colour with corresponding states. Those are tuples that are unpacked. The three channels are then separated. A scalar (s) is then calculated do determine where the input state is in the given range of the start and stop states. This is then used to calculate a channel value for each channel, before recombining it into an RGB value.

[Ildar_Gabdullin]

Will take it for experimenting, very promising! Thanks a lot!

[falco1717]

How can I change the align-item option for the entity?

        - type: entity-filter
          entities:
            - person.falco1717
          state_filter:
            - home
          card:
            type: glance
            title: People at home
            show_state: false
            show_name: false
            card_mod:
              style:
                $: |
                  .card-header {
                    font-size: 15px !important;
                  }
                  :host {
                    border-style: none !important;
                  }

[homeassken]

Hi, can someone break this down for me. I see a lot of things after style, but I don’t know why it needs to be one or the other. Here are some:

1. hui-generic-entity-row $: |

2. .: |

3. ha-card {

4. :host {

I seem to always get it wrong. Please help me. Thanks

[Mariusthvdb (Marius)]

yeah its amazingly beautiful indeed

however, reading Pieter’s explanation there, I fear it will be costly if applied widely? @parautenbach any numbers on that? can you see any increase in resource usage?

[falco1717]

If I change my code to below the entity align correctly but then the .card-header font size no longer works.

        - type: entity-filter
          entities:
            - person.falco1717
          state_filter:
            - home
            - not_home
          card:
            type: glance
            title: People at home
            show_state: false
            show_name: false
            style: |
              .entity {
                align-items: baseline !important;
              }
              ha-card {
                border: none;
              }
              .card-header {
                font-size: 10px !important;
              }

[falco1717]

@falco1717

.entity {
                align-items: baseline !important;
              }

I was able to fix it with the below code

        - type: entity-filter
          entities:
            - person.falco1717
          state_filter:
            - home
            - not_home
          card:
            type: glance
            title: People at home
            show_state: false
            show_name: false
            card_mod:
              style:
                .: |
                  ha-card {
                    border: none;
                  }
                  .entity {
                    align-items: baseline !important;
                  }
                $: |
                  .card-header {
                    font-size: 15px !important;
                    padding: 1px 16px 1px;
                  }

[parautenbach (Pieter Rautenbach)]

@Mariusthvdb

yeah its amazingly beautiful indeed

Thank you.

@Mariusthvdb

@parautenbach any numbers on that? can you see any increase in resource usage?

You’re right, it’s important to keep the processing overhead of complex templating code in mind.

In this case I haven’t seen a noticeable increase in server load. It’s remained on 0.05 on average (Unix load). Maybe it goes up to 0.1 for a moment, but it’s hard to isolate something like this. I think I use this macro in about 10 places. Page loads feel pretty instant.

[Mariusthvdb (Marius)]

was thinking whether this macro wouldn’t be a good example for the new custom_templates functionality? so we can call it form anywhere in the config, either back-or frontend

[parautenbach (Pieter Rautenbach)]

Indeed, I’ve moved that to my custom templates directory. I haven’t added it to HACS though, because I don’t want to enable experimental features (it kind of borks my system for some reason). I’ll do that once this becomes mainstream.

[arganto]

@homeassken

Please help me.

You should start reading this and then this and afterwards try out and investigate the examples from here and you will see, where and why is what used where. And ofc turn on Browser-Developer tools to see the html dom.

[FragMenthor (Pedro Roque)]

That’s exactly how I did, as in 4-5 posts above. Don’t notice any delays, and already using for other things all over my HA. I have a low end machine for HA, it’s almost allways at least at 35% of processor usage, but I think this kind of computation requires more from the browser/app than from the processor, so I don’t notice any more load because of this

[Mariusthvdb (Marius)]

@FragMenthor

but I think this kind of computation requires more from the browser/app than from the processor,

yeah well, thats a bit of mixed bag.
Jinja templates are evaluated in the backend, serverside, while (custom cards mostly using) JS templates are evaluated in the Frontend, so ‘screen device’ side.

Some custom cards do allow for jinja templates, like card_mod, or template-entity-row, and Ive never been able to be 100% where this all goes.

I would suspect these to be extra heavy on both systems as they not only require evaluating power, but also cause a lot of traffic to and fro.

Hence: always reduce as much as possible, and simply be vigilant (also meaning to write correct templates, there’s nothing more dangerous for a Frontend then depend on those templates that will enter a never ending evaluation…)

having said all that:

@parautenbach

In this case I haven’t seen a noticeable increase in server load. It’s remained on 0.05 on average (Unix load). Maybe it goes up to 0.1 for a moment, but it’s hard to isolate something like this. I think I use this macro in about 10 places. Page loads feel pretty instant.

makes me want to try

[fxv]

Is it possible to round the value shown on a card to 0 decimals and not show the unit of measurement via card_mod?