Frontend: replace custom-ui, allow for customizing entities globally

[Mariusthvdb]

The request

Since from ha0.110 on custom-ui is no longer able to customize icon and icon_color (maybe more, but I haven't tested that yet), and core Lovelace up to now offers no way of customizing entities icons and icon_colors, other than per theme or using eg state_color, the request is to

offer some way for replacing custom-ui in core HA

The alternatives

we can use custom cards, but they too only offer customizations per card

Additional information

using things like:

homeassistant:
  customize_domain:

    automation:
      templates: &state_color
        icon_color: >
          if (state == 'on') return 'gold';
          return 'steelblue';

    switch:
      templates:
        icon: >
          if (state == 'on') return 'mdi:toggle-switch';
          return 'mdi:toggle-switch-off';
        <<: *state_color

  customize_glob:

    light.hue_ambiance_spot_*:
      icon: mdi:spotlight-beam

    switch.*motion_sensor:
      assumed_state: false

    device_tracker.*_bt:
      templates:
        icon: >
          if (state == 'home') return 'mdi:bluetooth';
          return 'mdi:bluetooth-off';
        icon_color: >
          if (state == 'home') return 'blue';
          return 'grey';

    sensor.*_temperature:
      templates:
        icon_color: >
          if (state < -20) return 'black';
          if (state < -15) return 'navy';
          if (state < -10) return 'darkblue';
          if (state < -5) return 'mediumblue';
          if (state < 0) return 'blue';
          if (state < 5) return 'dodgerblue';
          if (state < 10) return 'lightblue';
          if (state < 15) return 'turquoise';
          if (state < 20) return 'green';
          if (state < 25) return 'darkgreen';
          if (state < 30) return 'orange';
          if (state < 35) return 'crimson';
          return 'firebrick';

#icon example
    sensor.owm_wind_bearing:
      friendly_name: Wind bearing
      templates: &direction_icon
        icon: >
          var icons = ['mdi:arrow-down','mdi:arrow-bottom-left','mdi:arrow-left',
                       'mdi:arrow-top-left','mdi:arrow-up','mdi:arrow-top-right',
                       'mdi:arrow-right','mdi:arrow-bottom-right'];
          var quadrant = Math.round(Number(state)/45);
          if (quadrant < icons.length) return icons[quadrant];
          return 'mdi:arrow-down';
#used for all other  wind-direction/bearing sensors, only define once using an anchor...

#untested yet, but hope this will still be possible setting custom images:

    sensor.dark_sky*icon*:
      templates:
        entity_picture: >
          return '/local/weather/icons/' + state + '.png';

makes it dead easy to have these entities show with a meaningful icon and icon_color in the frontend, and doesn't enforce styling these entities individually in the Lovelace card configs. Be it core or custom.

example of an issue the now defunct custom-ui throws at the user:

a mere custom:auto-entities card with all temp sensors in the system will become a flat and meaningless card, since without a lot of trouble, and yet again another custom card, like card-mod, we can't style these. Even if we could, these stylings are only refreshed upon reload of the page, and not of the state of the entity.

As they are now, using custom-ui.

examples:

      - type: custom:auto-entities
        card:
          type: entities
          style: |
            ha-card {
              box-shadow: none;
              margin: 0px 0px 0px -36px;
            }
        filter:
          include:
            - group: group.github_repos_in_use
              options:
                tap_action:
                  action: more-info
                hold_action:
                  action: navigate #url
                  navigation_path: weblinks
#        #              url_path: >
#        #                {{ state_attr(config.entity,'latest_release_url') }}
                type: custom:template-entity-row
                style: |
                  :host {
                    --paper-item-icon-color:
                      {% set id = config.entity.split('.')[1] %}
                      {% set repo = 'input_boolean.' + id %}
                      {{'gold' if is_state(repo,'on') else 'green'}}
                      ;

forgive me the complexity of this, but that is really the purpose of the post:

Without functional Custom-ui and no core Lovelace alternative for customizing these entities and properties users are forced to create terribly complex configs. Or be satisfied with/ use a rather pale Homeassistant Lovelace interface...

color is a most striking aspect of system feedback. Using custom icons too.
Please don't do away with that option.

Of course, if at all possible, and a change/edit of the current custom-ui files would be possible, I'd be glad to try and help realizing that. It's only about changing 1 file, so must be doable...?

thanks for considering.

some discussion in the community

[Krocko]

icon is still working.
But +1 for this!

[Mariusthvdb]

a yes, that's correct, some relief!
still, doing this in a 'core' way would be much better, so the FR stands ;-)

[bramkragten]

This can be done in a custom card, on an entity level, on state change, the templates are javascript templates and not Jinja templates.

We never deprecated custom-ui, it was never in core. The maintainer decided not to develop it anymore.

[Mariusthvdb]

This can be done in a custom card, on an entity level, on state change, the templates are javascript templates and not Jinja templates.

exactly, not globally.. only per custom card.
which is the whole point of this feature request of course. I wouldn't have asked if it were already possible.

I know HA didn't deprecate custom-ui actively, that's why I started out saying:

custom-ui is no longer able to customize

I rephrased the other sentence.

HA changed the way icons are used from 110 on, which kills the custom-ui functionality for that.

This is a feature request to allow for setting icon_color on a HA global way, so whenever an entity is used in which ever Lovelace card, core or custom, it shows that color.

And yes the shown templates are JS, of course, since custom-ui uses that. I was merely illustrating what custom-ui can do, and what the feature request is about..

I dont ask to re-enable custom-ui (though wouldn't mind, maybe that's easily feasible with the change of 1 or 2 lines). I am asking for a way to have core Lovelace set icon and icon_color globally.

[bramkragten]

I don't think this will ever make it into core. But what I'm saying is that a custom script should be able to do the same as custom-ui did.

[Krocko]

@bramkragten could you please explain it a little bit?

[Mariusthvdb]

thanks Bram, that at least sounds like an option going forward. Would still hope for it to be in core, so would be interested why you would say it wont ever make it to core.

Having said that, and for swiftness sake.... how should we proceed with this custom script? What kind of script would that be? (knowing custom-ui also had scripts).

Or would they be regular backend scripts, and if so, how should we begin to create these? (or do you refer to the resources like custom-cards, and eg create a custom-ui.js we load like that.)

thanks if you can find a moment to help us on the way.

Thing is, icon templates still work fine (hope nothing will change there) so it must be something you changed in HA that wont let templates on icon_color do their job. Could you explain what it is that stops allowing customization there?
Or how we could make it work again for that matter?

[Mariusthvdb]

btw, forgot to mention, a big disadvantage of only being able to customize the entities in the Lovelace cards, is the more-info on these entities is un-customized. While when using the current custom-ui, the more-info is nicely updated and reflecting the state the entity is in.

with custom-ui (and a simple entities card without any modding in style):

and more-info:

with Lovelace card and card-mod:

and more-info:

config of the card:

  - type: custom:auto-entities
    card:
      title: Test auto coloring light level (lux) sensors
      type: entities
    filter:
      include:
        - entity_id: sensor.*_sensor_light_level_raw
          options:
            style: |
              :host {
                --paper-item-icon-color:
                 {% set level = states(config.entity)|float %}
                 {% if level == 0 %} black
                 {% elif level < 1 %} maroon
                 {% elif level < 300 %} firebrick
                 {% elif level < 10000 %} orange
                 {% elif level < 17000 %} green
                 {% elif level < 22000 %} gold
                 {% elif level < 25500 %} teal
                 {% elif level < 28500 %} dodgerblue
                 {% elif level < 33000 %} lightskyblue
                 {% elif level < 40000 %} lightblue
                 {% elif level < 40000 %} lightcyan
                 {% else %} azure
                 {% endif %}
                 ;
               }

Hope this illustrates the further need for a true way of customizing entities, globally in HA, opposed to the individual or card-wise config Lovelace now offers.

[bramkragten]

A simple entities card without modding in style === Lovelace? So the problem isn't Lovelace then? I don't understand, but I've never looked at custom-ui or custom style plugins etc.

[Mariusthvdb]

A simple entities card without modding in style === Lovelace? So the problem isn't Lovelace then?

well, not really sure what you are saying here, sorry. the 'problem' is that the new way of treating icons has caused the 'old' custom-ui to stop being functional in setting the attribute icon_color on entities.

Ive tried above to show you what custom-ui can do. As I have tried to show what pure Lovelace, or Lovelace with card-mod can not do (yet).

I am trying to bridge the gap, and request a 'new' way of setting an attribute icon_color, on entities, globally. So we don't have to 1) use card_mod's style on each and every card/entity, and 2) see that color also in more-info.

I don't understand, but I've never looked at custom-ui

I can hardly believe you have never looked at custom-ui before... It has been (and for many functionality still is) 1 of the main plugins for years on HA.
You are right, in saying it was the author who has not kept up with developments. It was of course designed for States, and not Lovelace.

Hence my FR to 'replace custom-ui', and allow for customizing entities globally, now Lovelace has become the single Frontend.

Maybe I can illustrate the need in another way:
Say, I desire to have my battery sensors, grouped per room in 1 card, and have these sensors colored as per state of %.

We now can only do that with a rather complex and non-core set of cards. And, as a downside, none of these entities are colored in the more-info pane. None of these stylings are global, and only in that specific set of cards.

With custom-ui, all we need to do in the back-end is:

homeassistant:
  customize:
    sensor.*_battery_level:
      templates: &battery_color
        icon_color: >
          if (state > 75) return 'green';
          if (state > 50) return 'gold';
          if (state > 25) return 'orange';
          if (state > 10) return 'brown';
          return 'red';

and we can follow that up with:

    sensor.*_bewegingssensor:
      templates: 
       <<: *battery_color

    sensor.*_dimmer:
      templates:
        <<: *battery_color

    sensor.*_afstandsbediening*:
      templates:
        <<: *battery_color

    sensor.*_remote:
      templates:
        <<: *battery_color

    sensor.*_battery:
      templates:
        <<: *battery_color

    sensor.battery*:
      templates:
        <<: *battery_color

And never think again about the battery_level icons. Throughout the full frontend, in any card, custom-card and more-info pane.

it would be so very welcome to see that return (it can be done up to 109.6) in HA 0.110 and be a huge improvement on the visual feedback Lovelace gives the user.

btw, its not that the templates aren't there, it's the way Lovelace changed handling things internally:

As you can see the icon is still customized (please don't change that too...), and we would only need to know of a way to get that icon_color template in effect again.

[bramkragten]

Just checked the code of custom-ui it is not the new icons that break it, it is because of changes I made to state-badge it would be easy to make custom-ui work again.

Replace:
https://github.com/andrey-git/home-assistant-custom-ui/blob/489c634adb17ca88c0be9da225c51a84d9d1e0cf/src/utils/hooks.js#L507-L510
With:

    this._showIcon = true;
    this._iconStyle = {color: stateObj.attributes.icon_color;}

[Mariusthvdb]

o wow, that would be so very great! thank you!

only 1 gripe.... the only file doing the works in the HA instance is state-card-custom-ui.html....

could you please have a look at that too? As that is a file we all have in our systems, and can change manually locally.

would that be line 27, char 12997:

Object.assign(this._icon.style,{color:s.attributes.icon_color,filter:""}))

?

[bramkragten]

the second one of that line yeah.

[Mariusthvdb]

we cross posted, sorry,

like this?
change to:

Object.assign(this._showIcon, true,this._icon.style,{color:s.attributes.icon_color,filter:""}))

completely unsure about the nesting here...

if its of any help, this is the error I get using the unchanged file:

[bramkragten]

No, replace Object.assign(this._icon.style,{color:s.attributes.icon_color,filter:""}) with this._showIcon=true,this._iconStyle={color:s.attributes.icon_color}

[Mariusthvdb]

yesss!
thanks you so much @bramkragten this is such a huge relief. Magic!
if you ever can make this into a modern resource loaded as a script .js, don't hold back ;-)

[bramkragten]

I could do that, the problem is people will expect me to maintain it, and I don't have the time for that 🙈

[Mariusthvdb]

I could do that, the problem is people will expect me to maintain it, and I don't have the time for that 🙈

appreciate that of course. It would be the final clinch and to a modernized Lovelace though, and stop the need for legacy custom-ui....

As the main front-end dev, it really would have to be you ;-)

or simply promise you wont nibble from custom-ui's options any more...
thanks again. Ive filed a PR to the original custom-ui in the meantime, but I don't think it will be merged, since Andrey hasn't been seen for a long time, sorry to say.

[Mariusthvdb]

Hi Bram, please allow one more followup on this:
Ive installed 110 and open the frontend on mu iPhone 11pro, and see the icons are not colored (they are customized).

Originally we also had a state-card-custom-ui-es5.html but I had thought we didnt need that any longer... in that file an almost identical piece of code is available

Object.assign(this._icon.style,{color:e.attributes.icon_color,filter:""})):n.call(this,t)}

would you think we need to correct that too and reinstate the file especially for iPhone devices? Or would this be a cache thing. Note: I open a regular Safari browser on the iPhone, not the App.

On my iPad, all is well without the extra file, so unless they use different settings, I would think my iPhone needs a cache update.

Using Chrome on the iPhone also show the colored icons... maybe a iOS Safari bug then?

please have a look if you can find a moment. (no hurry!)

[bramkragten]

An iPhone 11 will not use the ES5 build, for older devices you would need it.
My guess would be cache.

[Mariusthvdb]

ok thx for confirming, Ill wait some more. all other browser do seem to work, so its Chrome for now ;-)

update:

after clicking refresh vehemently and restarting a few times, the icon_color has returned!
cache it was.

[jhbcosta]

Hi guys!

I didnt find hook.js in my system. Where I should put it?

Thanks,
José Henrique.

[Mariusthvdb]

you shouldn't...

only use the adapted state-card-custom-ui.html (it's the only file you need in www/custom_ui)

install either by using the frontend method, or customizer.

[jhbcosta]

I am already using adapted state-card-custom-ui.html but no success at all.

[Mariusthvdb]

since this is a closed issue, maybe we should take this elsewhere. Continue on the community, or on the custom-ui GitHub?
anyways, please post how you install custom-ui, and show also show the developer-tools/info of the custom-ui install

and you can take out all .gz files, and the es5 file.

this is all that is needed:

[poudenes]

They cut down this for a reason? Because many many icons I have add with their own customization.... Entity level, not global...

[Mariusthvdb]

Any customization using custom-ui is Ha global. Meaning, anywhere you use the entity, it is customized.

customize_glob is something else, that is used for customizing many entities at once, using wildcard *