Entity Icon color & custom icon color based on state (customise icon_color)

[DrBlokmeister]

I’m having a bit of trouble trying to get this to work. I have installed the plugin, and it is working with this sensor:

    sensor.speedtest_download:
      templates:
        icon_color: >
          if (state > 500) return 'rgb(0, 255, 0)';
          if (state > 400) return 'rgb(100, 255, 0)';
          if (state > 300) return 'rgb(150, 255, 0)';
          if (state > 200) return 'rgb(200, 255, 0)';
          if (state > 150) return 'rgb(255, 255, 0)';
          if (state > 100) return 'rgb(255, 200, 0)';
          if (state > 50) return 'rgb(255, 150, 0)';
          if (state > 30) return 'rgb(255, 100, 0)';
          if (state == 'unknown') return 'rgb(50, 50, 50)';
          return 'rgb(255, 0, 0)'

The color of the entity changes depending on the internet speed. Pretty great and I’m very happy with it! However, I want to do it in a smarter way, continuously changing the color without creating all these if statements. I’m trying to do that with this template:

    sensor.speedtest_upload:
      icon: mdi:speedometer-slow
      templates:
        hs_color: >
          var hue = Math.round(Number(state)/1000*240);
          return '['hue ',80]'

However, this is not working. I tried many variants of this code, for example using:

    sensor.speedtest_upload:
      icon: mdi:speedometer
      templates:
        hs_color: >
          '[{{states.sensor.speedtest_upload.state|int/1000*240}}, 80]'

But both are not working, and I don’t really know how to fix it. I found a topic of someone who tried the same thing, but cannot find that anymore. Is what I’m doing simply not possible, or is there something wrong with my syntax?

What should the language of the code be by the way?

[Mariusthvdb (Marius)]

use icon_color: and not hs_color:

and correct your templates to be valid JS. (your second template is using Jinja)
and end with a ;

[DrBlokmeister]

Thanks for the reply! I’m now trying the code below, which also doesn’t work. Should I specify that I’m using hsv colors?

    sensor.speedtest_upload:
      icon: mdi:speedometer-slow
      templates:
        icon_color: >
          var hue = Math.round(Number(state)/1000*240);
          return '['hue ',80]';

[Mariusthvdb (Marius)]

@DrBlokmeister

    sensor.speedtest_upload:
      icon: mdi:speedometer-slow
      templates:
        icon_color: >
          var hue = Math.round(Number(state)/1000*240);
          return '['hue ',80]';

you should at least use the correct notation for the color, try something like:

    sensor.speedtest_upload:
      icon: mdi:speedometer
      templates:
        icon_color: >
          var hue = Math.round(Number(state)/1000*240);
          return 'hsl(hue,80,50)';

Colors HWB

edit

my example above doesnt work, sorry, the var isnt injected in the hsl().

trying:

      templates:
        icon_color: >
          var hue = Math.round(Number(state)/1000*240);
          return 'hsl(' + hue + ',80,50)';

[DrBlokmeister]

You’re right. Didn’t work. However with your edit, I updated the code, and now the value is correctly parsed to the icon_color, as I also see in the sensor properties (icon_color: hsl(185,80,50)).

    sensor.speedtest_upload:
      icon: mdi:speedometer-slow
      templates:
        icon_color: >
          var hue = Math.round(Number(state)/1000*240);
          return 'hsl(' + hue.toString() + ',80,50)';

However, I still don’t see an icon color. It can be because the color hsl(185,80,50) is really close to the default icon color in home assistant, but I really don’t see a difference between several sensor icons. Can it be that home assistant or my browser doesn’t support this color type?

I’ll do some troubleshooting in the meantime.

[Mariusthvdb (Marius)]

not really sure, colorizer.org uses % for the second and third argument, maybe that would help?

using:

      templates:
        icon_color: >
          var r = Math.round(Number(state)/1000*240);
          return 'rgb(' + r + ',80,50)';

for testing purposes colorizes alright, so it might indeed be a hsl() thing not supported. (havent tried the % yet, so maybe give that another go?)

since they are used here too, that would seem logical thing to do
https://htmldog.com/references/css/values/color/

yup:

[DrBlokmeister]

Okay. I now tried the percentages in combination with the degree sign. That doesn’t work, neither does hsv. I now tried the percentages without the degree sign and IT WORKS!

    sensor.speedtest_download:
      templates:
        icon_color: >
          var hue = Math.round(Number(state)/1000*240);
          return 'hsl(' + hue.toString() + ',80%,50%)';

I’m really happy with this. Thanks so much for your help. Maybe it’s a good idea to add this to the list of examples?

[Mariusthvdb (Marius)]

@DrBlokmeister

Maybe it’s a good idea to add this to the list of examples?

ok, will add both rgb and hsl examples.
done: custom-ui/examples.yaml at 078fbaa4c558cc7f9d7cf3689f3245cb03510244 · Mariusthvdb/custom-ui · GitHub

[DrBlokmeister]

Maybe it’s also a good idea to add this example. It’s really simple and really pretty!

  customize_glob:
    sensor.nas_disk_ada*_temperature:
      templates:
        icon_color: >
          var hue = Math.round(480 - Number(state)/20*240);
          return 'hsl(' + hue.toString() + ',80%,50%)';

[KameDomotics]

Hi, please could you explain me in a simple way how to get this?

Do i have to use hacs add-ons?

I have an entity with 3 states, and I would like to change the icon color for each of them…
Could you explain me how to do it? thanks

[walaj (Jon Waland)]

Entity Icon color & custom icon color based on state (customise icon_color)

OR, as you have hacs installed, HACS->FrontEnd, select the three dots/hamburger/right top menu button -> custom repositories enter https://github.com/Mariusthvdb/custom-ui as a lovelace entry, click add close the repositories window, and you should have a new CustomUI /New repository on the screen. Select install. wait a few seconds for it to download, and select install ( i had a couple of issues of two instances appearing here) Now select the main configuration side menu->LoveLace Dashboa…

as a starting point.
there are a lot of examples at custom-ui/examples.yaml at a91a056b6e1c4471a55e1f5fa0e2824278410d28 · Mariusthvdb/custom-ui · GitHub

[DrBlokmeister]

Hey Kame! Did you get it to work? A user-friendly way to change the color range is to use the example below:

        icon_color: >-
          var maxval = 60;
          var minval = 30;
          var maxhue = 0;
          var minhue = 140;
          if (state > maxval) return 'hsl(' + maxhue.toString() + ',80%,50%)';
          if (state < minval) return 'hsl(' + minhue.toString() + ',80%,50%)';
          var hue = Math.round((Number(state) - minval) / (maxval - minval) * (maxhue - minhue) + minhue );
          return 'hsl(' + hue.toString() + ',80%,50%)';

You can find the full file in my github repository: https://github.com/DrBlokmeister/HASS_NUC/blob/ccb7f83ed2c7c661e4a73a66e96ce5c33f4d351a/packages/system/nas_monitor.yaml

[KameDomotics]

Thanks, but what add-on did you install?
I would like to do it directly in esphome…

[DrBlokmeister]

You would need to install the custom-ui plugin through HACS (Home Assistant Community Store). Simply follow the guide in the link and then install through the additional tab in the Home Assistant UI.

It has nothing to do with ESPHome, you cannot configure anything there.

[tmkmarius (Marius T.)]

Hello.
I lost a few hours trying to change “icon”, “icon_color” and “state” to entities using custom ui.
Then I realized that everything I put in the “customize.yaml” file had no effect.
There is no errors.
I do not know what to do.
Opinions please.

[DarrenHill]

Your configuration.yaml entry looks wrong. Mine is simply:

homeassistant: !include customui.yaml

where all my custom ui entries are in the customui.yaml file (the equivalent of your customize.yaml I guess).

[Mariusthvdb (Marius)]

no, the configuration is correct, and should read:

homeassistant:
  customize:
    entity_to_customize:
      templates:
        icon:
        icon_color:
        etc:

of course, if all customizations are in a dedicated file (an include file) it should be listed in the configuration.yaml. Important thing is the hierarchy of the listing.

[KameDomotics]

Hi!
with card-mod can I change the color of an icon based on the status?

type: entities
entities: 
  - entity: switch.sonoff_s20_01
    name: Sonoff S20
    icon: ‘mdi:power-socket-eu’
title: Power Socket
state_color: true

I would like to learn how, I would like a color for ON and a color for OFF
Thanks guys

[parautenbach (Pieter Rautenbach)]

Have you tried searching the card-mod thread?

[KameDomotics]

Yes but… I’m not very expert with these mod