Custom UI - icon color change

check, Ive tested it too, this works just the same as before:

  - type: custom:auto-entities
    card:
      type: entities
      title: Test Icon color Buttons
    filter:
      include:
        - entity_id: sensor.*_actueel
          options:
            type: custom:button-card
            template: template__support_custom_ui

so not an issue with double underscore.

Same error:

  - type: custom:button-card
    template: support_custom_ui
    entity: sensor.netwerk_library_actueel

how odd…

how did you set a customization on the entity?

I wrote it earlier:

homeassistant:
  customize_glob:

    sensor.battery_*:
      templates:
        icon_color: >
          if (state == 'unavailable') return 'brown';
          if (state == 'unknown') return 'brown';
          if (state <= Number(entities['input_number.battery_level_critical'].state)) return 'red';
          if (state <= Number(entities['input_number.battery_level_warning'].state)) return 'rgb(250,218,67)';
          return 'green';
      hide_attributes:
        - templates
        - icon_color

hmm, it might stumble on the global entity reference (using ‘entities’ ) then. for the sake of testing could you replace those 2 input_numbers with actual numbers please

    sensor.battery_*:
      templates:
        icon_color: >
          if (['unavailable', 'unknown'].includes(state)) return 'brown';
          if (state < 50) return 'orange';
          if (state < 10) return 'red';
          return 'green';

if this helps, (and it is in fact the global entity reference) we need to ask Romrider to review the template and see if the global referencing can be mitigated

Also, after adding this:

      hide_attributes:
        - templates
        - icon_color

I noticed a strange difference:

  1. Go to Settings → Entities, select some "sensor.battery_*" entity:


    Here the icon’s color is NOT customized, the “template” data is displayed.

  2. Go to some Lovelace dashboard, tap on some icon for the same entity:


    Here the icon IS customized, but the “template” data are flickering.

yes, that is expected, and on my wish list. It is caused by the new attributes box in 2021.6 and the new filters for that.

the hide attributes done on the event click of the dropdown.

Leaving no attribute to display, hence the empty box. Bram has implemented an attribute filter for the more-info, (many of the attributes are now filtered, see: frontend/hass-attributes-util.ts at 7bc27082595f943d15ca35ae948c766184a93eed · home-assistant/frontend · GitHub
and frontend/ha-attributes.ts at 2d5ae78521c4e3f8a8af410aef347b2eebe4d032 · home-assistant/frontend · GitHub )

I am trying too find a way to have the hide_attributes attributes be included in that list, so an empty box will be a thing of the past…

Now it works:


Does that mean that the button-card template does not support the "entities" ?
Now I think that we should ask RomRider to revise the code…

great. It apparently chokes on the

if (state <= Number(entities['input_number.battery_level_critical'].state)) return 'red';

line. in JS that is a global variable, opposed to the state which is local (to the template).

I’ll tag @romrider here to please have him check if anything can be done? Hey Rom, if you have a moment, could you please have a look at the support_custom_ui code you wrote for me earlier? Would be great if you could make it support the global entities[].state too?
thanks if you would

here’s what you wrote earlier:

# https://github.com/custom-cards/button-card/issues/419
support_custom_ui:
##  icon: |
##    [[[
##      if (entity && entity.attributes && entity.attributes.templates) {
##        const tpl = entity.attributes.templates;
##        if (tpl.icon) {
##          return new Function('state', `'use strict'; ${tpl.icon}`).call(this, entity.state);
##        }
##      }
##      return null;
##    ]]]
  styles:
    icon:
      - color: |
          [[[ if (entity && entity.attributes && entity.attributes.templates) {
                const tpl = entity.attributes.templates;
                if (tpl.icon_color) {
                  return new Function('state', `'use strict'; ${tpl.icon_color}`).call(this, entity.state);
                }
              }
              return null; ]]]

And regarding the hide_attribute feature - if I add some attribute to my "sensor.battery_*" template sensor - will it help?
I mean will it work:

  1. Settings → Entities → select some "sensor.battery_*" entity: colored icon + no custom_UI things are displayed.
  2. Lovelace dashboard → select some "sensor.battery_*" entity: same as above.

Must confess I am not entirely sure I understand what you are asking now :wink:

if you ask whether adding an extra attribute will show the box with that attribute, the answer is yes. eg I have tested:

homeassistant:

##########################################################################################
# Domain
##########################################################################################

  customize_domain:
    binary_sensor:
      templates:
        <<: *state_color
        <<: &last_updated
          last_updated: return entity.last_updated;

to have it show an attribute last updated on all entities :wink: thus preventing an empty box.

Added last_updated, got same flickering:
zzzzzzzzzzzzzzzzzzzz

homeassistant:
  customize_glob:

    sensor.battery_*:
      templates:
###          if (['unavailable', 'unknown'].includes(state)) return 'brown';   ###Короткий вариант (Мариус)
        # icon_color: >
        #   if (state == 'unavailable') return 'brown';
        #   if (state == 'unknown') return 'brown';
        #   if (state <= Number(entities['input_number.battery_level_critical'].state)) return 'red';
        #   if (state <= Number(entities['input_number.battery_level_warning'].state)) return 'rgb(250,218,67)';
        #   return 'green';

        icon_color: >
          if (['unavailable', 'unknown'].includes(state)) return 'brown';
          if (state < 50) return 'orange';
          if (state < 10) return 'red';
          return 'green';
        last_updated: return entity.last_updated;

      hide_attributes:
        - templates
        - icon_color
####        - all

Is it normal?

Well, at least now I see SAME behaviour in Settings->Entities & Lovelace->dashboard.
Before adding the attribute, the behaviour was different.

as explained: yes, unfortunately. The box is only calculated upon clicking the dropdown box.

Until I can get some better logic to include the hide_attributes into the filter I linked to, this cant be helped.

Does it explain that difference too?

again, I am not sure what you mean. the vertical size of the temporary dropdown?

Settings → Entities: icon’s color is NOT customized, the “template” data is displayed.
versus
Lovelace dashboard: icon IS customized, but the “template” data are flickering

if I go to Settings, entities, select a battery entity and then click the slider icon top right, I see the icon, customized and the customized dropdown.

However, I am using YAML mode, so clicking an entity in the entities list on most items gives me the warning I can manage them in the UI.

I guess the answer is NO, I don’t see a difference…

In my case there is a difference:

  1. Here no differences:
homeassistant:
  customize_glob:

    sensor.battery_*:
      templates:
        icon_color: >
          if (['unavailable', 'unknown'].includes(state)) return 'brown';
          if (state <= Number(entities['input_number.battery_level_critical'].state)) return 'red';
          if (state <= Number(entities['input_number.battery_level_warning'].state)) return 'rgb(250,218,67)';
          return 'green';
        last_updated: return entity.last_updated;

      hide_attributes:
        - templates
        - icon_color
  1. Here there is a difference:
homeassistant:
  customize_glob:

    sensor.battery_*:
      templates:
        icon_color: >
          if (['unavailable', 'unknown'].includes(state)) return 'brown';
          if (state <= Number(entities['input_number.battery_level_critical'].state)) return 'red';
          if (state <= Number(entities['input_number.battery_level_warning'].state)) return 'rgb(250,218,67)';
          return 'green';

      hide_attributes:
        - templates
        - icon_color

So, only adding "last_updated: return entity.last_updated;" removes the differences.

OK, could it be a cashing issues? I cleared the browser’s cashe, restarted HA & tried to reproduce the same condition - now I do NOT see these differences.

1 Like

ah yes, the wonderful cache issues…

what you can do too, is only hide the templates, and not the icon_color. I always like to have it in the more-info anyways

OK, so now we have 2 issues to solve:

  1. Support "entities" inside button-card (waiting for RomRider).
  2. Rectify that flickering with “attributes” dropdown menu.

May I ask you about one more thing?
You proposed to add a "last_updated" attribute above.
Does it mean that ANY attribute may be added to a set of entities?

Particularly, lets consider this example:
I have a set of "binary_sensor.battery_charging_life360_*" entities keeping a battery’s state (charging or not).

Examples of names:

  • battery_charging_life360_mama
  • battery_charging_life360_papa

Each sensor has an attribute "location" (equal to the associated Life360 device_tracker's state):

      battery_charging_life360_mama:
        value_template: ......
        device_class: battery_charging
        attribute_templates:
          location: "{%  set SOURCE_DEVICE = 'mama' -%}
                     {%- set SOURCE_SENSOR_FULL = 'device_tracker.life360_' + SOURCE_DEVICE -%}
                     {%- set LOCATION = states(SOURCE_SENSOR_FULL) -%}
                     {%- if LOCATION == 'home' -%}
                     {{ 'Home' }}
                     {%- elif LOCATION == 'not_home' -%}
                     {{ 'Away' }}
                     {%- else -%}
                     {{ LOCATION }}
                     {%- endif %}"

Currently I have to repeat the same code for the attribute for each sensor.
Is it possible to specify smth like this:


homeassistant:
  customize_glob:

    binary_sensor.battery_charging_life360_*:
      templates:
        location: "{%  set SOURCE_DEVICE = SOMETHING EXTRACTED FROM THE ENTITY'S NAME -%}
                   {%- set SOURCE_SENSOR_FULL = 'device_tracker.life360_' + SOURCE_DEVICE -%}
                   {%- set LOCATION = states(SOURCE_SENSOR_FULL) -%}
                   {%- if LOCATION == 'home' -%}
                   {{ 'Home' }}
                   {%- elif LOCATION == 'not_home' -%}
                   {{ 'Away' }}
                   {%- else -%}
                   {{ LOCATION }}
                   {%- endif %}"