Oh, exactly, I forgot that we discussed it earlierā¦
Very nice & useful.
1 Like
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.
2 Likes
Will take it for experimenting, very promising! Thanks a lot!
1 Like
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;
}
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:
-
hui-generic-entity-row $: |
-
.: |
-
ha-card {
-
:host {
I seem to always get it wrong. Please help me. Thanks
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?
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;
}
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;
}
Thank you.
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.
1 Like
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
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.
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.
1 Like
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
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:
makes me want to try 
2 Likes
Is it possible to round the value shown on a card to 0 decimals and not show the unit of measurement via card_mod?
Possible. But not recommended.
Use a more appropriate tool instead. Like template-entity-row.
Hey, thanks. I figured some things out by just reading the card-mod github more slowly. I still donāt think I have it completely, but it definitely helped.
I have a custom mod card i want to have on the bottom of my screen (5px or 10 doesnt matter)
card_mod:
style: |
:host {
bottom: 10;
}
ha-card {
display: flex;
background: none;
--ha-card-border-width: 0px;
--ha-card-box-shadow: none;
justify-content: center;
}
why is this not working ?
Trying to center the controls on this card but canāt get it workingā¦ pls help
Code I tried:
type: custom:climate-mode-entity-row
entity: climate.3family_room
name: ' '
icon: none
secondary_info: none
modes:
- hvac_mode: heat
- hvac_mode: cool
- hvac_mode: heat_cool
- hvac_mode: 'off'
card_mod:
style: |
:host {
display: contents !important;
}
The code is just above youā¦