Custom UI - icon color change

[PianSom]

Hi @andrey

Loving Custom UI - just started using it. Thanks for the work.

You hinted on github that it is possible to change an icon color depending on state using rgb_color. I have a sensor that I would like to start using with Custom UI and I am not sure how to implement the color change - please can you help?

I would like the icon to be red if the door is open, and I intend to use Custom UI template attributes. Here is my current (pre Custom UI code):

- platform: template
  sensors:
    door_back_status:
      friendly_name: 'Back door'
      value_template: >-
        {% if is_state('binary_sensor.door_back_sensor', 'on') %}
          Open
        {% else %}
          Closed
        {% endif %}
      icon_template: >-
        {% if is_state('binary_sensor.door_back_sensor', 'on') %}
          mdi:login
        {% else %}
          mdi:logout
        {% endif %}

I intend to move to:

customize:
    binary_sensor.door_back_sensor:
      if (attributes.state = 'on') return 'Open'; else return 'Closed';

but I don’t really know where to start on the icon and it’s color. Any hints?

[andrey]

First, even without CustomUI you can use device_class to show a specialized on/off status and icon:

customize:
    binary_sensor.door_back_sensor:
      device_class: door # Also try window for another set of icons

If you want to use CustomUI to change icon color:

customize:
    binary_sensor.door_back_sensor:
      templates:
        rgb_color: "if (state === 'on') return [200, 100, 30]; else return [10, 20, 30];"

[PianSom]

Hi

Many thanks for the response

I’m not sure that device_class quite does it. The only manual entry I can find is here and that neither mentions “door” (nor “window”) for binary_sensors, nor - more importantly - any possibility of changing color with rgb_color

But the template you sent works perfectly - thanks!

[andrey]

The documentation is stale.
See the list here: https://github.com/home-assistant/home-assistant-polymer/blob/27d343b4888a0678d8cb828b05a3ac47e29424f1/src/util/hass-util.html#L216

It affects the on/off icons and on/off text in the frontend.

[PianSom]

Hi

Thanks

PS I was especially delighted to see the following snippet of code. Who knew that “Mice” was a unit??

 if (unit && domain === 'sensor') {
  if (unit === '°C' || unit === '°F') {
    return 'mdi:thermometer';
  } else if (unit === 'Mice') {
    return 'mdi:mouse-variant';
  }

[jimpower]

sensor.ir_blaster_upstairs :
  icon: mdi:remote
  templates:
    rgb_color: "if (state === 'online') return [#5294E2]; else return [#E45E65];"

This doesn’t show up for me, am I right in assuming this will change the text colour depending on state?

[smasongarrison (Mason Garrison)]

I’m having a similar problem.

input_boolean.sun_out:
  templates:
    rgb_color: if (state === 'on') return [200, 100, 30]; else return [10, 20, 30];

[gohassgo]

rgb_color changes icon color and not text. At least how I got it working…

[Tomahawk]

Can’t get this to work, and my “restart keys” are wearing out. Trying to change color deepening on sensor temperature. No result with my code. What am I doing wrong?

sensor.weather_temp_real_feel:
templates:
rgb_color: “if (10 >= state < 0) {
return [230, 230, 0];
} else if (0 => state > -10) {
return [0, 115, 230];
} else {
return [230, 0, 115];
}”

[davefi (Dave)]

I’m doing similar on my temperature badges, rather than the icons, and this works for me - you should be able to adapt it for your use:

"sensor.*_temperature":
  templates:
    theme: >
      if (state > 25) {
        return 'hot';
      } else if (state >= 18 ) {
        return 'comfortable';
      } else {
        return 'cold';
      }

[Tomahawk]

I tried your code, just changed the sensor name. Tried with and witout the " for the sensor name. without it working,

I am on lates Hassio.
The CustomUI works since my other sensor works fine.

Hmm?

[davefi (Dave)]

OK, I added my sensor.bedroom_temperature sensor to my Bedroom group, without making any other changes, and it came up as follows:

So the whole entry was themed with the colour.

I then changed it to make it specific to just the icon, and the following works, so give this a try:

  customize:     
    sensor.bedroom_temperature:
      templates:
        rgb_color: >
          if (state > 25) {
            return [0, 128, 0];
          } else if (state >= 18 ) {
            return [223, 76, 30];
          } else {
            return [35, 76, 99];
          }

[Tomahawk]

Thanks for helping out!

Looks like the rgb_color works only on the icon (-for me) when in a group, not the text. The rgb_color works not for the sensor when on the default view.

Do you know if there are a code for the color within the default sensor view?

[davefi (Dave)]

Yeah if you use “rgb_color” as shown in my second post, it will only change the icon colour when in the group.

If you use “theme” as shown in my first post, it will change the colour of the badges (the circular representations shown in your second image). If you then add it to a group, whilst using theme, it will change the icon, text and value, as I show in the first image of my second post!

To use theme, you need to define the colours under the theme section of the front end - I’m at work now, but when I get home I will post that config for you.

Don’t worry, it confused the hell out of me (I find CustomUI incredibly confusing as it is!), so am happy to help!

[davefi (Dave)]

@Tomahawk right, hopefully this will all be clear enough

To change the badge colour, we use theme, and define the colours as hex:

homeassistant:
  customize:
    sensor.bedroom_temperature:
      templates:
        theme: >
          if (state > 25) {
            return 'hot';
          } else if (state >= 18 ) {
            return 'comfortable';
          } else {
            return 'cold';
          }

frontend:
  themes:
    cold:
      primary-text-color: '#447ebc'
      label-badge-red: '#447ebc'
    comfortable:
      primary-text-color: '#629e51'
      label-badge-red: '#629e51'
    hot:
      primary-text-color: '#bf1b00'
      label-badge-red: '#bf1b00'

That will produce this:

If we then add the sensor to a group, with the above left in place, it will change the text and state to the relevant colour, as shown here:

If we want to just change the icon colour, then we use rgb_color and define the colours as R, G and B values on a 0-255 scale:

homeassistant:
  customize:     
    sensor.bedroom_temperature:
      templates:
        rgb_color: >
          if (state > 25) {
            return [191,27,0];
          } else if (state >= 18 ) {
            return [98,158,81];
          } else {
            return [68,126,188];
          }

You can easily convert between RGB and Hex using this site:

HEX to RGB Converter

Hope that helps!

[Tomahawk]

Thank you so much!

Is it at all possible to change the background color within the sensor circle, when it is displayed on the default view?

[Mariusthvdb (Marius)]

@Tomahawk

Is it at all possible to change the background color within the sensor circle, when it is displayed on the default view?

sure, do anything you like:

well, almost. Havent found a way to distinguish between border colors of the badge and label. Also, no changing of the label text is possible (yet). Other than that, most things can be customized…

for the badges i use my dedicated frontend themes file, you might be able to adapt it to your own likings:

##########################################################################################
# Badge-themes in order of severity, either up or down
##########################################################################################
#source https://github.com/home-assistant/home-assistant-polymer/blob/master/src/resources/ha-style.html

# /* for label-badge */
#    --label-badge-background-color: white;
#    --label-badge-text-color: rgb(76, 76, 76);
#    --label-badge-red: #DF4C1E;

#    --label-badge-blue: #039be5;
#    --label-badge-green: #0DA035;
#    --label-badge-yellow: #f4b400;
#    --label-badge-grey: var(--paper-grey-500);

green_badge:
  label-badge-red: green
  label-badge-border-color: lightgrey
  label-badge-background-color: white
  label-badge-text-color: green
#  label-badge-blue: blue
#  label-badge-green: black
#  label-badge-yellow: yellow
#  label-badge-grey: grey
  
grey_badge:
  label-badge-red: grey
  label-badge-border-color: lightgrey
  label-badge-background-color: white
  label-badge-text-color: grey

black_badge:
  label-badge-red: black
  label-badge-border-color: lightgrey
  label-badge-background-color: white
  label-badge-text-color: black

brown_badge:
  label-badge-red: brown
  label-badge-border-color: brown
  label-badge-background-color: white
  label-badge-text-color: brown

orange_badge:
  label-badge-red: orange
  label-badge-border-color: orange
  label-badge-background-color: white
  label-badge-text-color: orange

blue_badge:
  label-badge-red: blue
  label-badge-border-color: blue
  label-badge-background-color: white
  label-badge-text-color: blue

yellow_badge:
  label-badge-red: grey
  label-badge-border-color: yellow
  label-badge-background-color: lightgrey
  label-badge-text-color: yellow

red_badge:
  label-badge-red: grey
  label-badge-border-color: lightgrey
  label-badge-background-color: white
  label-badge-text-color: red

[anon35356645]

@davefi

homeassistant:
customize:
sensor.bedroom_temperature:
templates:
theme: >
if (state > 25) {
return ‘hot’;
} else if (state >= 18 ) {
return ‘comfortable’;
} else {
return ‘cold’;
}

frontend:
themes:
cold:
primary-text-color: ‘#447ebc’
label-badge-red: ‘#447ebc’
comfortable:
primary-text-color: ‘#629e51’
label-badge-red: ‘#629e51’
hot:
primary-text-color: ‘#bf1b00’
label-badge-red: ‘#bf1b00’

can I use this as single package?

[davefi (Dave)]

You’re welcome - I see @Mariusthvdb already answered the background question. Have fun!

[davefi (Dave)]

Sorry @anon35356645, I’m afraid I have never used packages so am not sure.