Custom UI - icon color change

PianSom · January 13, 2018, 1:52pm

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 · January 13, 2018, 3:12pm

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 · January 13, 2018, 4:12pm

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 · January 14, 2018, 6:06am

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 · January 14, 2018, 8:15am

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 · February 19, 2018, 8:01pm

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 · March 8, 2018, 11:18pm

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 · March 9, 2018, 12:08am

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

Tomahawk · March 20, 2018, 9:53am

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 · March 20, 2018, 10:43am

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 · March 20, 2018, 11:30am

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 · March 20, 2018, 11:47am

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 · March 20, 2018, 12:20pm

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 · March 20, 2018, 1:16pm

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 · March 20, 2018, 8:39pm

@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:

Hope that helps!

Tomahawk · March 21, 2018, 10:06am

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 · March 21, 2018, 10:10am

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 · March 21, 2018, 10:21am

can I use this as single package?

davefi · March 21, 2018, 10:41am

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

davefi · March 21, 2018, 10:42am

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