Custom UI - icon color change

Mariusthvdb · July 5, 2021, 7:36am

  customize_glob:
    # All Entities - Hide Templates & Icon Color
    # Note that yaml keys can't start with an asterisk. Use quotes in that case:
    "*.*":
      hide_attributes:
        - templates
        - icon_color
        - all # <-- this hides, well, all customizations ;-)

note that the new more info box causes some new and unexpected effects when using this: if no attributes left to show, the box is still showing… This is because of the way HA now checks if there are any attributes left. I am trying to work out how to add these templates and icon_color attributes to the filter list in the ha more-info logic, but need Bram to help me out, and he is very busy.

yes,I have a permanent test on my test page:

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

so I can see if it keeps working, which it does all my power sensors colored nicely

I know… this why I have 2 or 3 cards actually using card_mod for coloring the icons. In a rather large setup with 3 very fledged out dashboards. So that isn’t too bad

the first 2 line can be replaced by:

 if (['unavailable', 'unknown'].includes(state))

EDIT:
and this is indeed not working as expected in my setup…:

    sensor.*_battery_level:
      templates: &battery_color
        icon_color: >
          if (['unavailable', 'unknown'].includes(state)) return 'brown';
          if (state <= entities['input_number.battery_alert_level'].state) return 'red';
          return 'green';

It has some strange results, especially on slider 100% and 0 %. So Number() is indeed necessary. I did take out the ‘=’, because of the mentioned edge threshold cases.

Ive also added your template to the examples in the custom-ui repo

Ildar_Gabdullin · July 5, 2021, 12:54pm

Tryed to test this template, got an error:

type: custom:button-card
entity: sensor.battery_life360_ildar
template: button_card_template__support_custom_ui

The template:

button_card_templates:
  button_card_template__support_custom_ui:
    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; ]]]

All jinjia2 templates we can test in the Templates tab - but here we have to use JS, we cannot test it in HA ((((

Mariusthvdb · July 5, 2021, 1:10pm

what can I say, working here:

don’t understand the error though, mentioning ‘entities’

just for brevity, rename the template to support_custom_ui ? I don’t know if a double underscore causes trouble

yeah, but once you get the hang of it, it gets easier

Ildar_Gabdullin · July 5, 2021, 1:13pm

Renamed it, does not help. Double underscores work good in my setup for button-card templates.

Mariusthvdb · July 5, 2021, 1:16pm

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.

Ildar_Gabdullin · July 5, 2021, 1:17pm

Same error:

Mariusthvdb · July 5, 2021, 1:22pm

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

how odd…

how did you set a customization on the entity?

Ildar_Gabdullin · July 5, 2021, 1:28pm

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

Mariusthvdb · July 5, 2021, 1:31pm

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

Ildar_Gabdullin · July 5, 2021, 1:43pm

Also, after adding this:

      hide_attributes:
        - templates
        - icon_color

I noticed a strange difference:

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

image403×692 13.7 KB

Here the icon’s color is NOT customized, the “template” data is displayed.
Go to some Lovelace dashboard, tap on some icon for the same entity:

qqqqqqqq408×744 821 KB

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

Mariusthvdb · July 5, 2021, 1:48pm

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…

Ildar_Gabdullin · July 5, 2021, 1:53pm

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…

Mariusthvdb · July 5, 2021, 1:55pm

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

Ildar_Gabdullin · July 5, 2021, 1:58pm

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:

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

Mariusthvdb · July 5, 2021, 2:02pm

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

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 thus preventing an empty box.

Ildar_Gabdullin · July 5, 2021, 2:22pm

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.

Mariusthvdb · July 5, 2021, 2:24pm

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.

Ildar_Gabdullin · July 5, 2021, 2:26pm

Does it explain that difference too?

Mariusthvdb · July 5, 2021, 2:28pm

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

Ildar_Gabdullin · July 5, 2021, 2:31pm

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