Custom UI - icon color change

basti4k · February 2, 2021, 9:36am

Hi and many thanks for your help!!

Unfortunately I have no idea where and what the difference is to JS template or jinja template i test the examples
What is the right way for installation?

Can I see if everything is installed correctly and Custom UI is working properly?

binary_sensor.office_window_xiaomi_1_openclose:
  friendly_name: Büro Fenster
  device_class: window
  templates:
    icon_color: >
      if (state == 'on') return 'rgb(200, 100, 30)';
      return 'rgb(10, 20, 30)';

the new code dont work
Your code is simple and I understand it. But it does not work

Mariusthvdb · February 2, 2021, 9:39am

apparently it isnt

did you read the readme… ? It’s all in there.

btw:

  extra_module_url:
    - /local/custom-ui/custom-ui.js
/usr/share/hassio/homeassistant/www/custom_ui/custom-ui.js

you are not using the same dash/underscore in the path. use either ‘_’ or ‘-’ in both

basti4k · February 2, 2021, 10:30am

OMG THANKS, yes in the Readme is the foldername: custom_ui

i rename the folder:
/usr/share/hassio/homeassistant/www/custom-ui/custom-ui.js

configuration.yaml

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/custom-ui/custom-ui.js

The file is now loaded in the developer tool:
CUSTOM-UI (JS) Version 20201218 adapted for HA 2020.X.X +

After “restart” it work

QA: if i edit a “icon_color: >” part, the color. Then always have to restart the completely HA?

Mariusthvdb · February 2, 2021, 11:12am

no, as a rule of thumb, all customizations are reloaded if you click config/server_control RELOAD LOCATION & CUSTOMIZATIONS.

Sometimes a refresh of the browsers helps. On occasion, none of this kicks in and the next restart it will be fine.

basti4k · February 2, 2021, 11:30am

Thanks it works perfect!

i see in the example the way, for the color varible:

configuration.yaml

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/custom-ui/custom-ui.js

themes/ing_dark.yaml

# Status Color
alert_red:
  paper-item-icon-color: "var(--color-red-1)"
alert_blue:
  paper-item-icon-color: "var(--color-blue-1)"

# Theme
ING Dark:
  # Fonts
  color-red-1: "rgba(247,53,67,1)"
  color-blue-1: "rgba(6,169,244,1)"

customize:

templates:
    icon_color: >
      if (state == 'on') return 'alert_red';
      return 'alert_blue';

But it does not work

Mariusthvdb · February 2, 2021, 12:09pm

where?

as stated, any valid css color value can be used. Not sure if that variable you created in your theme is causing your issue, please check this:

        icon_color: >
          if (state == 'on') return 'var(--primary-color)';
          return 'steelblue';

which works fine.

You can’t though use the theme name for the color_name, which is what you are doing.

basti4k · February 2, 2021, 12:39pm

hehe, why is it so easy ?
Thanks a lot ! Works great !

maybe you can still include this example for others:

github.com

Mariusthvdb/custom-ui/blob/12714d7980e62c47b63c75c2488d0524118c4a11/examples.md

# Some examples using custom-ui.

This is an excerpt of my own package, and can be used
directly if you copy it to your own homeassistant structure and activate packages. Of
course other methods work also, like pointing to a dedicated customize file, and
referencing that in your configuration.yaml

Note that the triple `===` which is used throughout the community and examples on the
original repo are not necessary. `==` suffices. Secondly, always use a guard for unexpected states.
Of course this holds for Jinja templates in HA too...
The guard is used by setting the `else` clause, which in the examples below are on the
last lines, starting with 'return'. Dont need to use the word `else` itself, though it
will be valid if you do.

Lastly, remember to delimit the lines with a `;` .

Why use custom-ui? 2 huge reasons:

# Icon color

This file has been truncated. show original

binary_sensor.office_window_xiaomi_1_openclose:
  friendly_name: Büro Fenster
  device_class: window
  templates:
    icon_color: >
      if (state == 'on') return 'var(--color-red-1)';
      return 'var(--paper-item-icon-color)';

zgadson · March 3, 2021, 4:40pm

What about when you need to change the icon color based on the state of an entirely separate entity?

I have a button to execute a script on my dashboard, but because a script has no state the script toggles a boolean on or off. So even though my button entity is for a script, the script icon needs to changed based on the state of the associated boolean.

Here’s what I have in my customization file but it’s not working:

script.script_fan_speed_0:
  friendly_name: 'Off'
  icon: mdi:fan-off
  templates:
    icon_color: >
      if is_state('input_boolean.boolean_fan_speed_0','on') return 'green';
      return 'white';

Mariusthvdb · March 3, 2021, 4:51pm

did you read the docs and check the examples…?
Guess not, because you use a mix between Jinja and JS templates, and not the required pure JS.

also, there are a couple of ‘global’ examples.

# using an attribute of another (global) entity
    sensor.power_consumption:
      templates:
        icon_color: >
          if (entities['sensor.smart_meter'].attributes.power > 3000) return 'red';
          return green;

or use the state:

     binary_sensor.ha_update_available:
      templates:
        unit_of_measurement: >
          if (entities['sensor.ha_available_version']) return entities['sensor.ha_available_version'].state;
          return 'starting up';

btw, if you are using buttons in the Lovelace config, you might be better of using card-mod

zgadson · March 3, 2021, 5:06pm

Thanks. I did read. Half the docs supplied with integrations and custom cards still say to include resources in the Lovelace file, and examples are relevant assuming it’s still 2015. I am also using card-mod.

Mariusthvdb · March 3, 2021, 5:08pm

not sure what you are implying here.
Any ways, all provided examples are live in my own current setups, and valid up to 2021.3.b06

zgadson · March 3, 2021, 5:28pm

In general, a lot of documentation is not current. I don’t know which are yours but I’m sure they’re fine given you seem like an active user.

emergent · June 13, 2021, 12:58am

I followed the directions and modified my customize.yaml file, but it doesn’t seem to have worked. Here is my code:

sensor.washing_machine_cycle:
  icon: mdi:washing-machine
  templates:
  icon_color: >
    if (state == 'Idle') return 'rgb(68,115,158)';
    if (state == 'Cleaning') return 'rgb(253,216,53)';
    return 'rgb(73,158,68)';
    
sensor.dryer_cycle:
  icon: mdi:tumble-dryer
  templates:
    icon_color: >
      if (state == 'Idle') return 'rgb(68,115,158)';
      if (state == 'Drying') return 'rgb(253,216,53)';
      return 'rgb(73,158,68)';

Anyone have any ideas why the icon color isn’t changing?

peterho · June 13, 2021, 1:55am

Did you reload customize.yaml?

and refresh webpage or app page after reloading configuration.yaml?

Configuration / server controls / localizations and customizations

if you click on the entity, and select attributes (providing of course you have custom-ui also installed and running), can you see your customized code under attributes

also try (note === rather than == , & else before last ‘return’)


  icon_color: >
    if (state === 'Idle') return 'rgb(68,115,158)';
    if (state === 'Cleaning') return 'rgb(253,216,53)';
    else return 'rgb(73,158,68)';

emergent · June 13, 2021, 3:16am

So it should be === instead of ==? I’ve never seen the three instead of the two.

Not home to try it right now but I did restart after adding it originally.

And I am seeing the template under attributes, but not the individual icon color attribute.

TriStone · June 13, 2021, 6:25am

The syntax seems to be correct.

I was facing yesterday same problem and I realized that simply it does not work for all Lovelace card. Some of them are using their own color handling and in such case custom_ui cannot help.

Eg. glances or entity cards work, button card does not.

So first try to use the sensor.washing_machine_cycle in glances card. If coloring works fine then it is an issue of used Lovelace card.

My disucssion with Marius : https://github.com/Mariusthvdb/custom-ui/issues/41

Mariusthvdb · June 13, 2021, 8:03am

Your templates seem fine. (Top template needs an extra indent though like the one below)
Did you correctly install custom-ui? Check at configuration/info

Ildar_Gabdullin · July 4, 2021, 9:15pm

Marius, I need your help.

There are sensors for battery level customized by Custom UI (this repo):

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

But the icon’s color is not always correct:

type: vertical-stack
cards:
  - type: entity
    entity: sensor.battery_life360_ildar
  - type: entities
    entities:
      - entity: sensor.battery_life360_ildar
  - type: custom:button-card
    entity: sensor.battery_life360_ildar

It is correct in the Entities card, but not in the Entity card & custom:button-card.
What could be a reason of it?

More-info also has a right color:

Mariusthvdb · July 4, 2021, 9:24pm

yes, that is all correct. Not all cards have the same code to display the icon, and you found the most obvious ones.

I can help you with button-card, to ‘import’ the colors set in custom-ui, and it was made by Romrider himself, using this button_card_template:

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

Note the icon is actually imported by button-card, so I commented that bit, but left it in for educational purposes.

Entity card, one shall have to resort to card-mod, as with picture-glance (which you already know as we talked extensively on that with my pond-pumps card )

btw, you can hide the templates and icon_color attributes from the more-info

in you Number() template: I believe you can simply compare the state of the input_number, the JS will figure it out and treat it as a number?
EDIT:
on the Number(): it is indeed necessary, sorry for the confusion. See in the post below for some extra comments on that.

Ildar_Gabdullin · July 4, 2021, 9:34pm

Thank you, I will take a look with attention.

Does it mean that I may use this template whenever I need a Custom UI support for the icon’s color?

Mmm, I wanted to use Custom UI to get rid of card-mod…

Yes, that is my 2nd answer - how to do it???

Tried a lot with different approaches, only this option seemed to work…