Customize Dimming Light Icon

DevScientist · February 13, 2019, 12:11am

I am trying to customize the icon for the dimmable MQTT light I have configured. I have the customizer in my configuration.yaml file and have used the templates method in customize.yaml to successfully change icons based on states. However, I cannot get the color of my dimmable light icon to change color based on the brightness level in it’s state.

This is what I have for the light’s state:

{
  "brightness": 50,
  "friendly_name": "Master Bedroom",
  "supported_features": 1,
  "icon": "mdi:lightbulb",
}

My customize.yaml looks like this:

light.master_bedroom:
  icon: mdi:lightbulb
  templates:
    rgb_color: >
      if (brightness < 25) return 'rgb(255,255,255)';

I am just trying to get it to turn a specific color if the brightness is less than 25% as a test.
I have also tried:

light.master_bedroom:
  icon: mdi:lightbulb
  templates:
    rgb_color: >
      if (brightness < '25') return 'rgb(255,255,255)';

light.master_bedroom:
  icon: mdi:lightbulb
  templates:
    icon_color: >
      if (brightness < '25') return 'rgb(255,255,255)';

light.master_bedroom:
  icon: mdi:lightbulb
  templates:
    icon_color: >
      if (brightness === '25') return 'rgb(255,255,255)';

None of which has worked. I still get the stock gradient of a horrible looking brown all the way up to a bright yellow based on the brightness level of the light in my light card.

Does anyone have any ideas?

Thanks!

Tdw · February 13, 2019, 12:19am

try:

templates:
  icon_color: if (brightness === '25') return 'rgb(255, 255, 255)'; else return 'rgb(x,
      y, z)';

Mariusthvdb · February 13, 2019, 12:27am

the correct usage for icon_color is:

  templates:
    icon_color: >
      if (state > 1500) return 'rgb( 192, 39, 30 )';
      if (state > 150) return 'rgb( 244, 101, 35 )';
      if (state > 70) return 'rgb( 255, 194, 15 )';
      if (state > 0) return 'rgb(251, 210, 41)';
      return 'rgb(54, 95, 140)';

and in your setting you need the attributes.brightness, and an ‘else’ which you can set by simply using return after the semicolon:

templates:
    icon_color: >
      if (attributes.brightness === '25') return 'rgb(255,255,255)';
      return 'rgb(1,2,3)';

DevScientist · February 13, 2019, 12:43am

Tried this:

light.master_bedroom:
  icon: mdi:lightbulb
  templates:
    icon_color: >
      if (attributes.brightness < 150) return 'rgb(255,255,255)';
      return 'rgb(255,255,255)';

and this with the single quote around the brightness value (turns out it’s 0-255).

light.master_bedroom:
  icon: mdi:lightbulb
  templates:
    icon_color: >
      if (attributes.brightness < '150') return 'rgb(255,255,255)';
      return 'rgb(255,255,255)';

No joy…Still the standard light card color that scales with brightness.

Mariusthvdb · February 13, 2019, 12:46am

did you install custom-ui according to https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/installing.md?

btw, this is code for regular HA, not Lovelace. I don’t know if these can be customized at all.
Maybe you can check on another entity to see if the template is correct? The lights have their own way of coloring the icons.

DevScientist · February 13, 2019, 12:49am

I believe so. I have the customizer in the custom_components directory:

And I have the hosted customizer configured in my configuration.yaml:

I have custom entity pictures configured for my device trackers based on states and they are working just fine…

DevScientist · February 13, 2019, 1:33am

So I tried the following: (adding state before the attribute)

light.master_bedroom:
  icon: mdi:lightbulb
  templates:
    icon_color: >
      if (state.attributes.brightness < 150) return 'rgb(255,255,0)';
      return 'rgb(255,0,255)';

And it seemed like it did something.

But still not the desired customized colors…Just a default yellow ‘on’ color.

DevScientist · February 13, 2019, 1:40am

Also, the brightness attribute is only available when the light is on.

{
  "brightness": 255,
  "friendly_name": "Master Bedroom",
  "supported_features": 1,
  "icon": "mdi:lightbulb",
  "templates": {
    "icon_color": "if (state.attributes.brightness < 150) return 'rgb(255,255,0)'; return 'rgb(255,0,255)';\n"
  }
}

If the light is off, the attribute is gone…So when the light is turned off home assistant crashes and the following shows up in my log:

ERROR (MainThread) [frontend.js.latest.201901211] https://raw.githubusercontent.com/andrey-git/home-assistant-custom-ui/master/state-card-custom-ui.html:27:15155 Uncaught TypeError: Cannot read property ‘brightness’ of undefined

So I might have to figure out if there is a way to conditionally format the icon. i.e. if the light is on and brightness is less than X make the icon color Y. If the light is off make the icon color Z.

Mariusthvdb · February 13, 2019, 7:22am

add |int, to trick it into when Off 0

DevScientist · February 13, 2019, 11:34am

Thanks! Where should I add the |int in my code?

Mariusthvdb · February 13, 2019, 11:58am

usually behind the ((state.attributes.brightness)|int < 150)

though I havent done this myself in this setting. You might have better chances adding a if state == ‘on’ to the template so if its not on, it will go to the else.

try:

if (state === 'on' && state.attributes.brightness < 150)

DevScientist · February 16, 2019, 6:05pm

Okay, finally got the icon color changing.

customize.yaml:

light.master_bedroom:
  icon: mdi:lightbulb
  templates:
    icon_color: >
      if (state === 'on' && attributes.brightness < 51) return 'rgb(255,255,204)';
      if (state === 'on' && attributes.brightness < 102) return 'rgb(255,255,153)';
      if (state === 'on' && attributes.brightness < 153) return 'rgb(255,255,102)';
      if (state === 'on' && attributes.brightness < 204) return 'rgb(255,255,51)';
      if (state === 'on' && attributes.brightness < 255) return 'rgb(255,255,0)';
      return 'rgb(128,128,128)';

The Lovelace light card still has the default color, but I don’t really like the light card anyways.

I’d much rather have a linear horizontal input slider, described in this post: Tutorial for new Custom State Card UI?

But it’s from quite a long time ago, and even still it’s not super clear what the step by step instructions would be to get there. Have a moment to point me in the right direction?

Thanks for all the help! This is awesome!

DevScientist · February 16, 2019, 6:17pm

I am trying to get the custom state card working with no success:

light.master_bedroom:
  custom_ui_state_card: custom_light
  state_card_mode: single-line
  slider_theme:
    min: 10
    max: 255
    pin: true
    off_when_min: false
    report_when_not_changed: false
  icon: mdi:lightbulb
  templates:
    icon_color: >
      if (state === 'on' && attributes.brightness < 51) return 'rgb(255,255,204)';
      if (state === 'on' && attributes.brightness < 102) return 'rgb(255,255,153)';
      if (state === 'on' && attributes.brightness < 153) return 'rgb(255,255,102)';
      if (state === 'on' && attributes.brightness < 204) return 'rgb(255,255,51)';
      if (state === 'on' && attributes.brightness < 255) return 'rgb(255,255,0)';
      return 'rgb(128,128,128)';

SeLLeRoNe · February 19, 2019, 3:18pm

For future references to the same question, check this out: https://github.com/thomasloven/lovelace-slider-entity-row