thomasloven / lovelace-template-entity-row

🔹 Display whatever you want in an entities card row.
MIT License
210 stars 16 forks source link

HA 2022.12 color scheme not inherited, still using paper-item-icon-active-color #95

Closed Mariusthvdb closed 4 months ago

Mariusthvdb commented 1 year ago

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 takes

paper-item-icon-active-color: gold from the theme I set before the new color schemes were introduced.

  - type: entities
    state_color: true
    entities:
      - binary_sensor.ha_dev_update_available

      - 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')}}
Scherm­afbeelding 2022-12-09 om 16 09 51

taking out paper color from the theme, leaves us with:

Scherm­afbeelding 2022-12-09 om 16 14 27

even though the more info is correctly showing the blue:

Scherm­afbeelding 2022-12-09 om 16 15 18

to be 100% certain it isnt an issue with the config.entity var, I also tried

active: >
    {{is_state('binary_sensor.ha_dev_update_available','on')}}

lastly, when taking out the full t-e-r config, and only leaving the auto-entities section

  - type: custom:auto-entities
    card:
      type: entities
      title: Binaries update available
      card_mod:
        class: class-header-margin
      state_color: true
    show_empty: false
    filter:
      include:
        - entity_id: binary_sensor.*_update_available
          state: 'on'
#           options:
#             type: custom:template-entity-row
#             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')}}

the blue is shown alright:

Scherm­afbeelding 2022-12-09 om 16 23 31

independent from the paper color. so it is the t-e-r preventing the inheritance of the new color scheme

btw, exchanging

#   paper-item-icon-color: var(--primary-color)
  state-icon-color: '#636B75'

doesnt make a difference, in this case the state-icon-color is used, and still not the supposed binary color

alexives commented 1 year 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.

Mariusthvdb commented 1 year ago

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.

Scherm­afbeelding 2022-12-15 om 09 20 14

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';
Scherm­afbeelding 2022-12-15 om 09 41 10
keeema commented 1 year ago

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. image

ildar170975 commented 1 year ago

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.

chemelli74 commented 1 year ago

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

ildar170975 commented 1 year ago

It may be changed any time.

bcutter commented 1 year ago

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 grafik

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.

emufan commented 1 year ago

I have now way to overwrite --paper-item-icon-active-color or (the here relevant) --state-icon-active-color using style or even card_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;}
bcutter commented 1 year ago

"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.

chadbaldwin commented 1 year ago

@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

image

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.

Mariusthvdb commented 1 year ago

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.

adi90x commented 1 year ago

@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

Mariusthvdb commented 1 year ago

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)

Scherm­afbeelding 2023-03-14 om 08 17 43

after: (with fork Roger)

Scherm­afbeelding 2023-03-14 om 08 18 50

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:

Scherm­afbeelding 2023-03-14 om 08 35 23

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..

TheHolyRoger commented 1 year ago

@Mariusthvdb what happens if you set the entity parameter in your card config to a binary sensor?

Mariusthvdb commented 1 year ago

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

TheHolyRoger commented 1 year ago

@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?

Mariusthvdb commented 1 year ago

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)

TheHolyRoger commented 1 year ago

@Mariusthvdb sorry I meant that I need to add those as css classes in the plugin

Mariusthvdb commented 1 year ago

Ah I see well, yes, maybe ;-)

fwiw: Inspector on the t-e-r icon:

Scherm­afbeelding 2023-03-14 om 10 17 34

and on the binary:

Scherm­afbeelding 2023-03-14 om 10 18 03

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.

TheHolyRoger commented 1 year ago

@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

Mariusthvdb commented 1 year ago

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?

TheHolyRoger commented 1 year ago

@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.

Mariusthvdb commented 1 year ago

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 ;-)

TheHolyRoger commented 1 year ago

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.

Mariusthvdb commented 1 year ago

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:

Scherm­afbeelding 2023-03-14 om 12 56 02

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

TheHolyRoger commented 1 year ago

Please look closely at the variable names which end with on-color:

https://github.com/home-assistant/frontend/blob/1a9b9da0db5678890a4306ec412e6cdee1e6a27d/src/resources/ha-style.ts#L138

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:

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.

Mariusthvdb commented 1 year ago

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.

TheHolyRoger commented 1 year ago

@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

Mariusthvdb commented 1 year ago

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:

Scherm­afbeelding 2023-03-14 om 16 59 33

and tested on both Safari and Chrome Mac browsers, obviously refreshed cache.

TheHolyRoger commented 1 year ago

@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

Screenshot 2023-03-14 at 16 04 06
Mariusthvdb commented 1 year ago

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..

Scherm­afbeelding 2023-03-14 om 17 11 30

looks a bit different in my Chrome inspector but this is it:

Scherm­afbeelding 2023-03-14 om 17 10 02
TheHolyRoger commented 1 year ago

@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

Mariusthvdb commented 1 year ago

thats more like it:

Scherm­afbeelding 2023-03-14 om 17 31 23

to the right, there's also another card, using auto-entities to filter available updates.

TheHolyRoger commented 1 year ago

Cool :) so is it working as intended with your css rules?

Mariusthvdb commented 1 year ago

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?

TheHolyRoger commented 1 year ago

Good stuff 👍 opened a PR now, we'll see if it passes Thomas' standards ;)

Mariusthvdb commented 1 year ago

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

Scherm­afbeelding 2023-03-27 om 23 17 31

while the more-info shows the color in the theme:

Scherm­afbeelding 2023-03-27 om 23 20 20

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:

Scherm­afbeelding 2023-03-28 om 08 17 28

bur still not the new state-color which is shown in the more-info:

Scherm­afbeelding 2023-03-28 om 08 17 36
ildar170975 commented 1 year ago

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

image With even a default theme the 2nd row is supposed to be shown as "active" - which does not happen.

Using the latest card. image

TheHolyRoger commented 1 year ago

@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

Mariusthvdb commented 1 year ago

Sure! You're previous version already did... what did you change now?

TheHolyRoger commented 1 year ago

@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

Mariusthvdb commented 1 year ago

before (using official release)

Scherm­afbeelding 2023-04-07 om 21 28 52

your 1.3.3:

Scherm­afbeelding 2023-04-07 om 21 29 15

cool. thx.

TheHolyRoger commented 1 year ago

Noice 👍 no worries

Mariusthvdb commented 1 year ago

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?

TheHolyRoger commented 1 year ago

@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

Mariusthvdb commented 1 year ago

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 %};
                  }
TheHolyRoger commented 1 year ago

@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.

TheHolyRoger commented 1 year ago

@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 ;)

Mariusthvdb commented 1 year ago

did the update to HolyRoger 1.3.4 and can confirm the battery colors to be shown as per HA design:

Scherm­afbeelding 2023-05-07 om 16 25 02

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
alanmilinovic commented 7 months ago

@TheHolyRoger why the PR is not merged? I guess it is not what @thomasloven is expecting or?