Hi folks! I have a question for someone who’s got the inclination to answer it.
I used to have a badge modified by card-mod to dynamically show colors related to battery state. I used the CSS hsl function and some math to weight this somewhat more towards green than red, because I don’t want it to visually start turning yellow until below 50%.
That broke after HA and/or card-mod changed some stuff, but also, HA’s default / new ‘color:’ attribute took over, just with a different color scheme. That was good enough, but I’d like to change it if possible.
So, is there some kind of equivalent to HSL that I can use? My basic idea would be:
type: entity
show_name: false
show_state: true
show_icon: true
entity: sensor.classic_soc
name: Battery
color: |
# using variables here to make things as clear as possible
{% set weight = states('sensor.classic_soc')|int / 100 %}
{% set factor = 0.6 %}
# 0 is the red hue, 120 is green
{% set hue = weight + (1 - weight)) * factor * 120 %}
# I know the following is wrong, this is what I'm trying to figure out
{{ hsl((, "70%", "50%") }}
Any ideas? Basically, I’m looking to get a #rrggbb value between red and green, based on the SOC percentage, weighted towards green by some factor. The math stuff above works fine if I didn’t typo, but the templating is off, and I don’t think hsl even works here.
Ideal solution: a way to call hsl or use a python/jinja equivalent to hsl, or working card_mod code (which hasn’t worked for me, either, using the card_mod docs and examples found on the forum)
Currently badges in stock cards (Heading card, view Badge element) do not accept jinja templates.
Post a SHORT simplified code for styling a badge color which you used before (not needed to post an actual code with hsl() etc, just a short example w/o jinja).
You can easily style --state-icon-color var which will be used by icon. No need to go into shadowRoot
Card-mod accepts templates for style.
Templates need {# #} style comments, not YAML #.
My SOC example is 1 to 100 so I removed the / 100 in my test. You will need to reinstate.
Update your hue calc removing weight + which was not working for me? Not sure but once you get card_mod working you can update your calc as needed and check output with debug.
To make the style output by card-mod neat in DOM, I used Jinja Whitespace control technique (e.g. {%- -%}
I have used {# card_mod.debug #} technique to spit out logging to console which will show when template is updated and if it has errors (4.2.0-beta).
type: entity
show_name: false
show_state: true
show_icon: true
entity: sensor.dcd_browser_browser_battery
name: Battery
card_mod:
style: |
:host {
{#- card_mod.debug -#}
{#- using variables here to make things as clear as possible -#}
{%- set weight = states(config.entity)|int -%}
{%- set factor = 0.6 -%}
{#- 0 is the red hue, 120 is green -#}
{%- set hue = (1 - weight) * factor * 120 -%}
{# I know the following is wrong, this is what I'm trying to figure out -#}
--state-icon-color: hsl({{hue}}, 70%, 50%);
}
Giving people ready solutions is not better than helping them to learn on simpler examples, than letting them to try to sort out things by themselves. Tutorials here mean something, not just posting a ready code which then be shared in network/used by AI/used by people without understanding & willingness to learn.
and that means that lines starting with “#” will go inside a string:
style: "xxx # some comment xxx"
and thus this comment will not be a “comment” - but a part of a code.
So - use {# comment #} as was suggested above or /* comment */.
The {# comment #} will be treated as a comment due to internal processing of jinja since this {# ... #} pattern is considered as a comment in jinja template.
The /* comment */ will be treated as a comment in CSS style since it is considered correspondingly in CSS.