Custom UI - icon color change

cavern · January 16, 2021, 9:50am

card-mod did the trick. thanks again @Mariusthvdb. Although I’m not too acquainted yet to JavaScript and CSS so I more or less copied examples.

I believe there is a way to better optimize my code as it mostly duplicates three times :

    badges:
      - entity: person.anne_laure
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                .: |
                  :host {
                    {% if is_state('person.anne_laure','home') %} --label-badge-red: green;
                    {% else %} --label-badge-red: red;
                    {% endif %}
                   }
      - entity: person.emmanuel
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                .: |
                  :host {
                    {% if is_state('person.emmanuel','home') %} --label-badge-red: green;
                    {% else %} --label-badge-red: red;
                    {% endif %}
                   }
      - entity: person.valentine
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                .: |
                  :host {
                    {% if is_state('person.valentine','home') %} --label-badge-red: green;
                    {% else %} --label-badge-red: red;
                    {% endif %}
                   }

Mariusthvdb · January 16, 2021, 3:05pm

exactly, hence my request above if we could use entity instead of the entity name in the template. If so, we could simply use a yaml anchor:

    badges:
      - entity: person.anne_laure
        style: &badge_style
          ha-state-label-badge:
            $:
              ha-label-badge:
                .: |
                  :host {
                    {% if is_state(entity,'home') %} --label-badge-red: green;
                    {% else %} --label-badge-red: red;
                    {% endif %}
                   }

      - entity: person.emmanuel
        style: *badge_style

      - entity: person.etc
        style: *badge_style

we might have to ask Thomas Loven or Kendell about this, since they wont be reading along here
see 🔹 Card-mod - Super-charge your themes! for the relevant thread

NM! Found it already: use config.entity

even 1 line shorter:

badges:
  - entity: person.me
    <<: &badge
      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $: |
                .label-badge .label span{
                  {% if is_state(config.entity,'home') %} color: purple;
                  {% else %} color: black;
                  {% endif %}
                }
          .: |
            :host {
              {% if is_state(config.entity,'home') %} --label-badge-red: gold;
              {% else %} --label-badge-red: grey;
              {% endif %}
            }

  - entity: person.she
    <<: *badge

depending on what you want to define under the anchor.

cavern · January 16, 2021, 3:37pm

I understand the syntax (never used the &myvariable/*myvariable scheme before) and discover the config.entity possibility. Have to read a bit about that config.entity way of doing.

HA is an infinite montain of knew knowledge for me

Mariusthvdb · January 16, 2021, 3:52pm

yeah these are Yaml Anchors, and can be defined ‘on the fly’ so to speak. Anything written after the definition character <<: &anchor_name will be copied (‘merged’ in anchor lingo) when you put <<: *anchor_name

anchors are defined per yaml file. Meaning, if you need the same anchor in another file you need to recreate it first.

here’s a Yaml primer by Thomas, read all the way down: http://www.thomasloven.com/blog/2018/08/YAML-For-Nonprogrammers/

since examples can be easier to understand than the above primer, (there are 2 different ways to create Anchors) have a look at more examples in https://github.com/Mariusthvdb/custom-ui/blob/2ba4168e9554e9290bc3f2c872316a522639f2e4/examples.md

cavern · January 16, 2021, 4:04pm

thanks, I’ll read that.

the anchor syntax is simple yet powerful. I’ll probably reuse it as I hate repeating code.

basti4k · January 31, 2021, 12:15pm

Change the ICON Color dont work for me

customize:

binary_sensor.office_window_xiaomi_1_openclose:
  friendly_name: Büro Fenster
  device_class: window
  templates:
    rgb_color: "if (state === 'on') return [200, 100, 30]; else return [10, 20, 30];"

But this Example dont work

if i open the Window, the icon color is the Frontend Style:

ha-icon[data-domain="binary_sensor"][data-state="on"]
color: var(--paper-item-icon-active-color, #fdd835);

default Color.

What I need, is when the window is open, then change the color: --color-red-error-1
or RGB

i hope you an help me! Thanks all

Mariusthvdb · January 31, 2021, 1:04pm

You should use icon_color: and not rgb_color:

Also, check the correct color format to use, you can find many examples in the examples ;-)-

basti4k · January 31, 2021, 1:38pm

yes, i test so many ways, but nothing works.

here the new Test in customize File:

binary_sensor.office_window_xiaomi_1_openclose:
  friendly_name: Büro Fenster
  device_class: window
  icon_color: "{% if is_state('binary_sensor.office_window_xiaomi_1_openclose', 'on') %}rgb(255, 214, 10){% else %}rgb(255, 255, 255){% endif %}"

Mariusthvdb · February 1, 2021, 3:38pm

icon_color can only be set using custom-ui, which uses javascript templates, and not jinja templates like you use.

did you install custom-ui?

basti4k · February 1, 2021, 6:09pm

yes i install custom-ui

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

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

is that okay?

the yaml in customize:

binary_sensor.office_window_xiaomi_1_openclose:
  friendly_name: Büro Fenster
  device_class: window
  templates:
    icon_color: '{% if is_state("binary_sensor.office_window_xiaomi_1_openclose", "on") %}rgb(255, 214, 10){% else %}rgb(255, 255, 255){% endif %}'

yaml office:

- type: glance
        show_name: true
        style: !include ../includes/style_entities.yaml
        entities:
          - entity: light.light1test
            name: Licht
          - sensor.buro_dect301_1_temperature
          - entity: binary_sensor.office_window_xiaomi_1_openclose
            name: Fenster

window

window2

Mariusthvdb · February 2, 2021, 9:00am

this is not ok. As I said before.

please check the many examples… you started out well Custom UI - icon color change - #159 by basti4k but somehow changed from a JS template to a jinja template… why?

try:

  templates:
    icon_color: >
      if (state == 'on') return 'rgb(200, 100, 30)'; 
      return 'rgb(10, 20, 30)';

and you should be set

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