Yeah, so add a unit_of_measurement. Do you make any attempt at searching for answers?
This doesn’t help. I can’t see the current state value (or the one at the time of the previous screen shots).
But again, I’ve given you something to test with the badge. Only you would know with the information you have whether the colour and state value is correct. I can’t tell with what I have.
Yes the colours are correct. But later on I can change that.
No. Not if I am “told” something.
T.b.o. I have no clue on how to achieve what I want… this every little tip I take and add it to the total at which I hope I can create it with.
For clarity: what I do bot know is how to create a coloir changing “thing” (entity?) and be able to use that in a picture elements card…
I did not realize I created an entity with unit W (or other). I was thinking the way I created a template entity that just “colours” along with a value.
As that is what I need…
I have serious problems understanding how to achieve that and what the options are in homeassistant.
Can you really not understand that’s what you have when you look at your screen shots? You have a template sensor, which as its main value has the original W value and an attribute for the matching colour. I’m honestly failing to understand at this point how that’s not clear.
I’ve given you a real example, which is the badge. Applying this in other visual ways is a topic for a card-mod thread as previously stated. The badge uses card-mod. You can apply card-mod customisations almost everywhere, but it can take a lot of effort to get right. It’s not reasonable to expect anybody here to build your whole dashboard for you.
The biggest favour you can do yourself at this point is to in detail work through everything I’ve given you and to fully understand it.
You need to work modular: you have a sensor with the right info now. Separately, build the layout of your dashboard or picture elements card without worrying about the dynamic colours: just get your layout right and use static, plain colours. After that, you can combine the pieces.
Pieter, I really appreciate you pointing me in the right direction. And I do understand what I have created, I just said i did not realize it.
It is hard for me to understand how to give “color” to an entity and specially how to display that.
Also I do no expect you to make me a dashboard, of course not! Only thing I hoped to get a real life example of an entity icon/“something” I could place on a picture entity card and so forth I can work thing out further. A badge is not something I can place easily. As you see above I have tried.
My issue is I do not fully understand the combination of a “color” entity combined with an element card (car-mod?).
If I would get it I would already have it running (and share it in this topic).
so I think you are a little too hard for me:
Again, really thanks for all you have pointed me so far, I will try to work from there but I need some more help probably.
Thanks!
Of course, and that’s also why I suggested the right place to ask for further help or to start a separate post, because we’re really dealing with a secondary issue given this topic’s focus and where the original request has been answered (at least in my view).
Again, I promise you: I’m sure that if you work through every bit of detail you have up to now, something will click (I say this as encouragement), but figuring out exactly where to apply a customisation in HA’s CSS can be very tricky.
Your problems with placement is exactly why I avoid the picture elements card, but I have seen people make extensive use of badges with it.
Card-mod isn’t a card. It merely applies custom styling to most HA cards. That’s why I said: Break your problem down. Take one small thing and tweak it. Pick something you want to put on your dashboard. Forget about dynamic colours. Just figure out how change one element of what you’ve chosen by setting a static colour. Then combine.
EDIT: I saw you post on the card-mod thread. I’ll keep an eye there and will add where I can.
Here is a refactored version of my original macro and other template helpers for more general use. This can be installed under your custom_templates directory as per the 2023.4 release.
{# https://www.home-assistant.io/docs/configuration/templating/#reusing-templates #}
{# A (sensible) temperature map in °C for human-felt living conditions (subjectively so). #}
{% set temp_degrees_c_human_map =
{
5: "#3498db",
15: "#70a03c",
22: "#ff9800",
30: "#e74c3c"
}
%}
{# A map of a discrete 5-point scale from green (1) to red (5). #}
{% set discrete_5_point_map =
{
0: "",
1: "#40b100",
2: "#ffe500",
3: "#ffa800",
4: "#ff5800",
5: "#aa0000"
}
%}
{# A map of percentages where low means bad and high means good. #}
{% set reserve_percentage_map =
{
10: "#aa0000",
50: "#ffa800",
90: "#40b100"
}
%}
{#
Calculate a color value between two RGB colors using the difference between the given start and stop values for each color channel.
For the `(state, color)` tuples, the state must be of the same unit as the first `state` parameter. The color must be a hex RGB value (with a `#`). See the `temp_degrees_c_human_map` variable in this file for an example.
:param state: A numeric state to determine a color for.
:param start: A `(state, color)` tuple for the start of the range.
:param stop: A `(state, color)` tuple for the end of the range.
:returns: A CSS color value (specifically an RGB value, but that shouldn't matter).
#}
{% macro _interpolate_color(state, start, stop) %}
{% set (start_state, start_color) = start %}
{% set (stop_state, stop_color) = stop %}
{% set (start_r, start_g, start_b) = (int(start_color[1:3], base=16), int(start_color[3:5], base=16), int(start_color[5:7], base=16)) %}
{% set (stop_r, stop_g, stop_b) = (int(stop_color[1:3], base=16), int(stop_color[3:5], base=16), int(stop_color[5:7], base=16)) %}
{% set s = ((state - start_state)/(stop_state - start_state)) %}
{# 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 %}
{#
Map a state to a color on a smooth range given a map of gradient stops. The lowest and highest state values in the map will serve as clipping values (i.e. below and above those values the color will be fixed at that stop's value).
:param state: A numeric state to determine a color for.
:param state_map: A dictionary where the key is a specific state value and the value is a for a color at that specific state value. The keys must be numeric and of the same type as the `state` parameter. The color must be a hex RGB value (with a `#`). See the `temp_degrees_c_human_map` variable in this file for an example. If an alpha value is included, it will be discarded.
:returns: A CSS color RGB value.
#}
{% macro gradient_color(state, state_map) %}
{% set keys = state_map | sort %}
{% set index = keys | select("lt", state) | list | length %}
{% if index == 0 %}
{{ state_map[keys | first] }}
{% elif index == keys | length %}
{{ state_map[keys | last] }}
{% else %}
{% set start = (keys[index - 1], state_map[keys[index - 1]]) %}
{% set stop = (keys[index], state_map[keys[index]]) %}
{{ _interpolate_color(state, start, stop) }}
{% endif %}
{% endmacro %}
{#
Map a state to a color given a discrete set of colors (i.e. the state value must exist in the map).
:param state: A state to determine a color for. It can be of any type, as long as it exists in the `state_map`.
:param state_map: A dictionary alpha
:returns: A CSS color value.
#}
{% macro mapped_color(state, state_map) %}
{{ state_map[state] if state in state_map else "" }}
{% endmacro %}
Current version on GitHub.
Updated example:
- entity: sensor.living_room_temperature
name: Living Room
card_mod:
style: |
:host {
--label-badge-text-color:
{%- from 'dynamic_colors.jinja' import temp_degrees_c_human_map, gradient_color -%}
{%- set state = states(config.entity) | float(0) -%}
{{ gradient_color(state, temp_degrees_c_human_map) }}
}
2 Likes
Thank you so much for sharing! Exactly what I looked for!
And example for percentage value:
- entity: sensor.terasz_humidity
name: ''
card_mod:
style: |
:host {
--label-badge-text-color:
{%- from 'dynamic_colors.jinja' import reserve_percentage_map, gradient_color -%}
{%- set state = states(config.entity) | float(0) -%}
{{ gradient_color(state, reserve_percentage_map) }}
1 Like
Glad you find it useful, thanks!