Closed Mariusthvdb closed 4 months ago
I think this is related to #94, I tried replacing light.
in the js with binary_sensor.
and that seems to have fixed it on my instance. I put up #96 that I think should fix this.
just adding another example here:
type: entities
state_color: true
entities:
- type: custom:fold-entity-row
head:
type: section
label: Batterij & verbinding
# group_config:
# state_color: true
entities:
- sensor.master_bedroom_hygro_temp_battery # <--- ok
- type: custom:template-entity-row
entity: sensor.master_bedroom_hygro_temp_battery # <--- not colored
the state_color: true
is working correctly for the regular entity inside the fold, and can even be colored using that option in the top entities card. Also works fine when used as fold option group_config:
.
Does Not work inside the template-entity-row.
as a further way of investigating this, using the custom-ui icon_color template (which actually sets an attribute icon_color per entity) does color the icons correctly and isnt blocked by t-e-r:
homeassistant:
customize_glob:
sensor.*hygro_temp_battery:
hide_attributes:
- templates
templates:
icon_color: >
if (['unavailable','unknown'].includes(state)) return 'steelblue';
if (state > 75) return 'green';
if (state > 50) return 'gold';
if (state > 25) return 'orange';
if (state > 10) return 'brown';
return 'red';
I face the same issue.
type: entities
entities:
- type: custom:template-entity-row
icon: mdi:state-machine
name: '{{ state_attr(''sensor.st_ems_device_info'', ''hybirdWorkMode'') }}'
- type: custom:template-entity-row
icon: >-
{{ is_state('sensor.electricity_settings_gridconnectedunbalancedswitch',
'True') | iif('mdi:scale-unbalanced','mdi:scale-balance') }}
name: >-
Invertor v {{
is_state('sensor.electricity_settings_gridconnectedunbalancedswitch',
'True') | iif('asymetrickém','symetrickém') }} režimu sítě {{
is_state('sensor.electricity_settings_gridconnectedunbalancedswitch',
'True') | iif('','!') }}
active: >-
{{ is_state('sensor.electricity_settings_gridconnectedunbalancedswitch',
'True') }}
In all cases there is highlighted icon.
Before 2022.12: The “—paper-item-icon-active-color” variable was used for all domains to represent an “active” state.
After 2022.12: Different domains got their own variables for an “active” state. The list of these variables is NOT documented. Dev person promised to document them, so far it is not done. Format of these new variables changed TWICE within last month: — first they were of “255,255,255” format, — then I asked “why using this format instead of traditional hex/rgb/names” - the Dev guy did not give a clear explanation and refused to change; — then these variables were silently changed back to a traditional format by this Dev guy.
IMHO, in this unpredictable situation with undocumented variables it is not easy to implement an old logic for an “active” state.
If can be of any help, this is the list I found on the devs_frontend
discord's channel:
state-default-color: '#44739E' # Default (Slate-Grey)
state-alarm-armed-color: '#F44336' # Red
state-alarm-arming-color: '#FF9800' # Orange
state-alarm-disarmed-color: '#4CAF50' # Green
state-alarm-pending-color: '#FF9800' # Orange
state-alarm-triggered-color: '#F44336' # Red
state-alert-color: '#F44336' # Red
state-automation-color: '#FFC107' # Amber
state-binary-sensor-alerting-color: '#F44336' # Red
state-binary-sensor-color: '#FFC107' # Amber
state-calendar-color: '#FFC107' # Amber
state-camera-color: '#FFC107' # Amber
state-climate-auto-color: '#4CAF50' # Green
state-climate-cool-color: '#2196F3' # Blue
state-climate-dry-color: '#FF9800' # Orange
state-climate-fan-only-color: '#00BCD4' # Cyan
state-climate-heat-color: '#FF5722' # Deep Orange
state-climate-heat-cool-color: '#FFC107' # Amber
state-climate-idle-color: '#8A8A8A' # Off (Mid-Grey)
state-cover-color: '#9C27B0' # Purple
state-fan-color: '#00BCD4' # Cyan
state-group-color: '#FFC107' # Amber
state-humidifier-color: '#2196F3' # Blue
state-input-boolean-color: '#FFC107' # Amber
state-light-color: '#FFC107' # Amber
state-lock-jammed-color: '#F44336' # Red
state-lock-locked-color: '#4CAF50' # Green
state-lock-pending-color: '#FF9800' # Orange
state-lock-unlocked-color: '#F44336' # Red
state-media-player-color: '#03A9F4' # Light Blue
state-person-home-color: '#4CAF50' # Green
state-person-not-home-color: '#9E9E9E' # Grey
state-person-zone-color: '#2196F3' # Blue
state-remote-color: '#FFC107' # Amber
state-script-color: '#FFC107' # Amber
state-sensor-battery-high-color: '#4CAF50' # Green
state-sensor-battery-low-color: '#F44336' # Red
state-sensor-battery-medium-color: '#FF9800' # Orange
state-sensor-battery-unknown-color: '#8A8A8A' # Off (Mid-Grey)
state-siren-color: '#F44336' # Red
state-sun-day-color: '#FFC107' # Amber
state-sun-night-color: '#673AB7' # Deep Purple
state-switch-color: '#FFC107' # Amber
state-timer-color: '#FFC107' # Amber
state-update-color: '#4CAF50' # Green
state-update-installing-color: '#FF9800' # Orange
state-vacuum-color: '#009688' # Teal
Simone
It may be changed any time.
My main issue:
Using custom:template-entity-row
for information (fake) entities with explicit active: false
... full example:
- type: custom:template-entity-row
name: Nur ausgewählte
secondary: (wichtige, letzte Stunde)
icon: mdi:information
active: false
... now gives
I have no way to overwrite --paper-item-icon-active-color
or (the here relevant) --state-icon-active-color
using style
or even card_mod
according to https://developers.home-assistant.io/blog/2022/12/07/entity-color-changes/.
Even the example from https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/2170 is not working anymore.
I think this integration needs to fix this, if possible.
So finally an active: false
starting HA Core 2022.12 won't look like a active: true
like before HA Core 2022.12 anymore.
Currently we seem to be out of control, not even applying CSS is working.
I have now way to overwrite
--paper-item-icon-active-color
or (the here relevant)--state-icon-active-color
usingstyle
or evencard_mod
Do you mean now or no? If no, this is wrong, you can do it with card_mod:
- type: custom:template-entity-row
name: Nur ausgewählte
secondary: (wichtige, letzte Stunde)
icon: mdi:information
active: false
card_mod:
style:
state-badge:
$: |
ha-state-icon { color: red !important;}
"No", updated the typo. Thanks for that snippet. I had exactly that styling - except the !important
, which does the trick here.
Anyway, using active: true|false
is still useless, which is the main issue for me.
@bcutter I don't know if this is helpul. But after a bunch of tinkering, this is what I was able to come up with and it works:
type: custom:auto-entities
card:
type: entities
title: Switches
show_header_toggle: false
state_color: true # doesn't actually do anything, but leaving it in just to keep around for troubleshooting
filter:
include:
- domain: switch
options:
type: custom:template-entity-row
toggle: true
active: '{{ is_state(config.entity, ''on'') }}'
name: |
{{
state_attr(config.entity, 'friendly_name')
| replace(' - Switch', '')
}}
card_mod:
# hardcoded the yellow accent color used by HA, good enough for me
style: |
:host {
--paper-item-icon-active-color: #FFC107;
}
exclude:
- state: unavailable
sort:
method: entity_id
It's able to dymamically populate the card with a list of switch entities.
It respects the active:
property.
It works on both browser and mobile app (android).
It removes - Switch
from the name (I like to postfix all entities with their type...battery, leak, contact, etc).
The only thing I found to be problematic is for other entity types. For example, I have another similar card for battery entities. The default state colors are green, yellow, red to indicate battery level. Since there is logic behind the scenes to decide which color to show...you would have to build that in as some sort of template. I'm not sure if card-mod supports templates, but maybe that's an option.
I personally don't want to deal with that, so I'm just leaving it for now.
sure card_mod does support templates, we can do:
- type: custom:template-entity-row
entity: sensor.master_bedroom_hygro_temp_battery
<<: &config
card_mod:
style: |
:host {
--paper-item-icon-color:
{% set state = states(config.entity)|float(0) %}
{% if state > 75 %} green
{% elif state > 50 %} gold
{% elif state > 25 %} orange
{% elif state > 10 %} brown
{% else %} red
{% endif %};
}
name: >
{% if states[config.entity] is not none %}
{% set id = state_attr(config.entity,'friendly_name').split('hygro')[0] %}
{{id}}
{% else %} Initialiseren
{% endif %}
state: >
{{states(config.entity)}} %
secondary: >
{% set id = config.entity.split('_battery')[0] %}
Signal: {{states(id + '_signal_strength')}} dBm
- type: custom:template-entity-row
entity: sensor.dorm_hygro_temp_battery
<<: *config
- type: custom:template-entity-row
entity: sensor.library_hygro_temp_battery
<<: *config
but that is besides the point really.
Still hope template entity row could be set to use the colors set by the entity
it uses, if it uses it.
@chadbaldwin : Is it still working with latest HA version 2023.2 ? As I don't seems to be able to force any colors on my icons
seems @TheHolyRoger forked this and edited the --paper-item-icon-active-color
to --state-active-color
here
I did not test that yet, but the change seems straightforward and very simple... is it too simple? let's try.
before: (with original)
after: (with fork Roger)
clearly using the new default color for update
that is a bit unexpected, because I had set that in my themes to state-update-active-color: '#f44336'
hmm, have to find out why that is happening
Id love to stick to the original though
--edit--
I just discovered that the above template-entity-row card does pickup the new HA defaults, but not the theme setting I have for that variable:
this is a binary_sensor with device_class: update
(and not an update entity, which is what caused my first surprise) so would hopefully have picked up what I have set in my theme for that too:
state-binary_sensor-update-on-color: red #'#f44336'
but it does not..
@Mariusthvdb what happens if you set the entity
parameter in your card config to a binary sensor?
I have that:
- type: custom:template-entity-row
entity: binary_sensor.ha_dev_update_available
name: >
{% if states[config.entity] is not none %}
{{state_attr(config.entity,'friendly_name').split(': Update Available')[0]}}
{% else %} Initializing
{% endif %}
state: >
{% if states[config.entity] is not none %}
{{iif(states(config.entity) == 'on','Update available','Up to date')}}
{% else %} Waiting for state
{% endif %}
secondary: >
{% if states[config.entity] is not none %}
{% set id = states[config.entity].object_id.split('_update_available')[0] %}
{% if states['sensor.' + id + '_newest_version'] is not none %}
New: {{states('sensor.' + id + '_newest_version')}} -
{% endif %}Current:
{{states('sensor.' + id + '_version')}}
{% else %} Initializing
{% endif %}
active: >
{{is_state(config.entity,'on')}}
I also tested it with the verbose entity name in the active:
option, but no change
@Mariusthvdb so what is the custom theme colour you have? Is it state-binary_sensor-update-on-color
or state-update-active-color
?
It would make sense if I just need to add another css class to the icon like state-<DEVICE_CLASS>-active-color
which would then give it the state-update-active-color
class?
I have them both set.
state-binary_sensor-update-on-color: red #'#f44336'
state-update-active-color: red #'#f44336'
which does color the core Ha entity as you can see above.
I can try to also add
state-binary_sensor-update-active-color: red #'#f44336'
....
I just tested that, but the issue remains. template-entity-row does Not pickup the color set in a theme, only uses the default HA color for the entity (binary_sensor class)
@Mariusthvdb sorry I meant that I need to add those as css classes in the plugin
Ah I see well, yes, maybe ;-)
fwiw: Inspector on the t-e-r icon:
and on the binary:
tbh, I fear it might just not be that simple.... the card clearly sees the entity being active, so thats is not the issue. It just doesnt pickup the theme vars, and adding only 1 for this update device_class will probably not fix all of the others too. I haven t tried the yet, but any domain should get it s set color in the theme....
--update--
yes, just tested that with a few domains for which I have set colors in the theme: not picked up, all use the HA default theming with your edits in the original resource.
@Mariusthvdb I've just pushed an update, do you want to try 1.4.1? You need to clear cache manually.
I've done two things - first is to add the domain to the variable it uses internally and the second is I've added a new parameter: device_class
Based on your info it looks like for you this would work device_class: update
keeping your existing theme changes.
Without that it will use the domain of the entity which for you is state-binary_sensor-active-color
(without the update) - unfortunately I can't fetch the device class without the user specifying in config
For reference: https://github.com/TheHolyRoger/lovelace-template-entity-row/commit/bdbbefa9c9ae35a215b2e1ffd63d9e44e1da02d9
are you saying we need to ad a device_class on all of our configs then? what would that do for non class entities, like eg an automation... hope I am not being too critical here, but fixing it only for update isnt really a solution
shouldnt
(`--state-${state_identifier}active-color`)
be
(`--state-${state_identifier}-active-color`)
? and will this pickup the -on-color
variants too?
@Mariusthvdb sorry was just in the middle of a quick fix for sensor
entities.
You only need to add a device_class
if you're using a custom device_class based rule in your theme config.
Otherwise it will use the entity's domain which is binary_sensor
in your case.
I've fixed it for everyone whilst giving you a solution for your specific use-case ;)
It won't pick up any on-color
variants, only active
ones.
thanks, you're doing a wonderful job, appreciated!
and yet.... it nags this card now no longer follows core HA inner workings. As you said, we now need to set the device_class if we have colors set in our themes. These are not available for all themed domains though. And we now need to set 'active' in stead of 'on'. Personally I found the latter to be unintuitive, and I like to follow the actual state of the domain. Could adapt there ofc, as 'active' might even be more encompassing (think group here, which is not always on/off, but can also be home/not_home.. what does happen for the person/zones?
Yet, I'd love t-e-r to follow core coloring schematics, so even though we now have your hacked card, hope Thomas can talk to Paul someday and fix this correctly ;-)
You don't need to set device_class
unless you're using device class based theme colours, if you're using only domain based colours it will pick these variables up automatically.
I'm following https://github.com/home-assistant/frontend/blob/1a9b9da0db5678890a4306ec412e6cdee1e6a27d/src/resources/ha-style.ts#L174 as a reference so not sure what you mean about "no longer follows core HA inner workings"
There are only a few 'on' colour rules defined for various binary sensor warning colours: https://github.com/home-assistant/frontend/blob/1a9b9da0db5678890a4306ec412e6cdee1e6a27d/src/resources/ha-style.ts#L139
"fix this correctly" rubbed me the wrong way a bit so I probably won't follow this thread anymore. Best of luck.
no need to be defensive, all I meant was that I hoped Thomas would fix this in his own repo.
the fact your fix requires
don't need to set device_class unless you're using device class based theme colours
is the extra setting, and hence not the same behavior like the state-color used in core cards, which do use the colors set for device_class in the themes.
those 'on' colors are the former 'alert' class domains, and yes, these are important ofc.
Having said that, yours is a much appreciated effort, and does fix a lot of situations.
testing the latest with:
- type: custom:template-entity-row
entity: binary_sensor.ha_dev_update_available
device_class: update
and theme colors:
state-binary_sensor-update-on-color: red #'#f44336'
state-binary_sensor-active-on-color: red #'#f44336'
state-update-on-color: red #'#f44336'
returns:
so somewhere it must select the orange color.. which is not set in my theming anywhere, and is still related to the color for the update entity probably
Please look closely at the variable names which end with on-color
:
Your custom on-color
variables above do not conform to the current HA style syntax. on-color
is used for situational warnings and not device_class's e.g. warning
, gas
, moisture
, problem
.
To conform to HA syntax your variable should be one of the following:
state-update-active-color
(requires setting device_class parameter as explained above)state-binary_sensor-active-color
I understand your issue with setting the device_class
config option, I don't know if I can retrieve the device class in lovelace as I've not done that before. It's something I can look into but perhaps after you stop claiming I'm not following HA inner workings when it's the reverse.
my 'on' colors follow https://www.home-assistant.io/integrations/frontend/ correctly.
The color rules can be customized using theme variables:
state-{domain}-{device_class}-{state}-color state-{domain}-{state}-color state-{domain}-(active|inactive)-color state-(active|inactive)-color
Note that the variables will be used in the listed order, so if multiple match your entity, the first matching variable (= most specific one) will be used.
the on colors thus even take precedence.
this was introduced after https://community.home-assistant.io/t/2022-12-color-states-are-broken-unusable/499890 was raised and frontend devs allowed coloring according to that schedule.
be aware that we have binary_sensor entities with a device_class: update
using the state-binary_sensor-update
colors,(defaulting to the regular state-binary_sensor
colors if not set), and update entities, using the state-update
colors.
@Mariusthvdb alright fair enough I get you now. I just pushed an update that hopefully follows those rules and will use device class first if available.
I removed the device_class
option as it's available through the entity attributes which I didn't realise before.
Should hopefully use on
css rules if the current state is either true
or On
really sorry to report that
- type: custom:template-entity-row
entity: binary_sensor.ha_dev_update_available
device_class: update
or without device_class: update
still dont show the themed color.
the resource is loaded alright:
and tested on both Safari and Chrome Mac browsers, obviously refreshed cache.
@Mariusthvdb if you inspect the element in dev tools in the browser can you show me the custom state colour css rules which have been added?
See screenshot
top is the plain entity, below the t-e-r, in an entities card using state_color: true
. Taking that out only changes the top entity, not the t-e-r..
looks a bit different in my Chrome inspector but this is it:
@Mariusthvdb I think I can see the problem there... I was using the state of the template entity for the css check instead of the state of the underlying entity.
Try v1.4.4 and see if it fixes it, it will need the active
config option to be set
thats more like it:
to the right, there's also another card, using auto-entities to filter available updates.
Cool :) so is it working as intended with your css rules?
have to give it some more testing, but as far as I can see now, I have 3 domains indeed following the theme colors I set.
you might want to PR the original too?
Good stuff 👍 opened a PR now, we'll see if it passes Thomas' standards ;)
Just noticed there was a new release, with changes to the icon color .
Unfortunately, the this brings back the default color set in the core theme, and does not follow the theme variables set in custom themes:
state-binary_sensor-update-on-color: red #'#f44336'
state-binary_sensor-active-on-color: red #'#f44336'
back to showing
while the more-info shows the color in the theme:
not sure if the updated resource incorporates all changes in @TheHolyRoger Pr?
update
sorry to say 1.3.2 does Not fix that either
does make a difference as it now seems to pickup the default colors for the theme:
bur still not the new state-color which is shown in the more-info:
Sorry, I do not understand the latest fix. Please consider this code:
type: entities
entities:
- entity: input_boolean.test_boolean
- type: custom:template-entity-row
entity: input_boolean.test_boolean
name: test_boolean - active always
active: true
With even a default theme the 2nd row is supposed to be shown as "active" - which does not happen.
Using the latest card.
@ildar170975 @Mariusthvdb would you like to try my latest release to see if it fixes your issues?
https://github.com/TheHolyRoger/lovelace-template-entity-row/releases/tag/1.3.3
@thomasloven I've also rebased my PR if you want to merge it in
Sure! You're previous version already did... what did you change now?
@Mariusthvdb i've just rebased it on top of thomas' latest changes and tidied some bits up - hopefully it should all work the same!
If you find it's broken for you, I moved the old release to 1.3.1rc1 in releases if you need to rollback
before (using official release)
your 1.3.3:
cool. thx.
Noice 👍 no worries
Hey Holy,
can I ask something else? could it be feasible to have T-E-R follow the domain colors of eg device_class: battery
too?
currently I need to set a card mod like:
- type: custom:template-entity-row
entity: sensor.master_bedroom_hygro_temp_battery
<<: &config
card_mod:
style:
div#wrapper:
state-badge $: |
ha-state-icon {
color:
{% set state = states(config.entity)|float(0) %}
{% if state > 75 %} green
{% elif state > 50 %} gold
{% elif state > 25 %} orange
{% elif state > 10 %} brown
{% else %} red
{% endif %};
}
name: >
{% if states[config.entity] is not none %}
{% set id = state_attr(config.entity,'friendly_name').split('hygro')[0] %}
{{id}}
{% else %} Initialiseren
{% endif %}
state: >
{{states(config.entity)}} %
secondary: >
{% set id = config.entity.split('_battery')[0] %}
Signal: {{states(id + '_signal_strength')}} dBm
I use this because it is more granular than the core colors. Yet, I would love the T-E-R to be able to follow those core colors without anything further. I ofc did set state_color:true on the entities card, and on the group_config of this fold, so that is not working.
Please have a look?
@Mariusthvdb i've got some time in a few days, send me a PM on the forum to remind me if you can, or if you're on discord, telegram etc
PM sent.
I did forget to mention that because of the move to state-icon-color in the previous update (of this resource) this card_mod now also works, targeting that element:
card_mod:
style: |
:host {
--state-icon-color:
{% set state = states(config.entity)|float(0) %}
{% if state > 75 %} green
{% elif state > 50 %} gold
{% elif state > 25 %} orange
{% elif state > 10 %} brown
{% else %} red
{% endif %};
}
@Mariusthvdb good sir, do you wanna try the latest release?
https://github.com/TheHolyRoger/lovelace-template-entity-row/releases/tag/1.3.4
I realised it's actually a lot simpler to get the entity state colours :)
Make sure entity
is pointing to the correct entity, leave the following fields blank: active
, color
and it should use the underlying entity colour correctly now.
@thomasloven imo it's worth you trying out my version in your hass yourself with the above "problem" configs ;) my PR is still open and can be cleanly merged ;)
did the update to HolyRoger 1.3.4 and can confirm the battery colors to be shown as per HA design:
using:
- type: custom:template-entity-row
entity: sensor.master_bedroom_hygro_temp_battery
<<: &config
# card_mod:
# style: |
# :host {
# --state-icon-color:
# {% set state = states(config.entity)|float(0) %}
# {% if state > 75 %} green
# {% elif state > 50 %} gold
# {% elif state > 25 %} orange
# {% elif state > 10 %} brown
# {% else %} red
# {% endif %};
# }
name: >
{% if states[config.entity] is not none %}
{% set id = state_attr(config.entity,'friendly_name').split('hygro')[0] %}
{{id}}
{% else %} Initialiseren
{% endif %}
state: >
{{states(config.entity)}} %
secondary: >
{% set id = config.entity.split('_battery')[0] %}
Signal: {{states(id + '_signal_strength')}} dBm
@TheHolyRoger why the PR is not merged? I guess it is not what @thomasloven is expecting or?
As title, the template-entity-row can not be set to inherit the new color schemes, see below for an example using the new binary-color which colors blue when on https://github.com/home-assistant/frontend/blob/3c8c1260b172cb2ef01328070e1c900b2cd3d4dc/src/resources/ha-style.ts#L145
in this case the top entity (unmodded, only needs
state_color: true
) the bottom speaks for itself, the active is also set, but it takespaper-item-icon-active-color: gold
from the theme I set before the new color schemes were introduced.taking out paper color from the theme, leaves us with:
even though the more info is correctly showing the blue:
to be 100% certain it isnt an issue with the config.entity var, I also tried
lastly, when taking out the full t-e-r config, and only leaving the auto-entities section
the blue is shown alright:
independent from the paper color. so it is the t-e-r preventing the inheritance of the new color scheme
btw, exchanging
doesnt make a difference, in this case the state-icon-color is used, and still not the supposed binary color