CustomUI - discussion thread

yes, thats what I’ve found now, this does work;

icon_color: "if (state > 500) return 'rgb( 192, 39, 30 )';
             if (state > 0) return 'rgb(251, 210, 41)';
             else return 'rgb(54, 95, 140)';"

Don’t really see whats wrong with the formatting, working in all my customizations.

remove the overall quotes and drop it to the next line and remove the else?

icon_color: >
  if (state > 500) return 'rgb( 192, 39, 30 )';
  if (state > 0) return 'rgb(251, 210, 41)';
  return 'rgb(54, 95, 140)';

is that redundant? since no other condition is met, it would be the final formatting? Will try that, thanks.
btw, if not declared i take it the default would be used? Or would that throw an error.

The statements are evaluated sequentially. If any return is encountered, it will stop. The else is not required as that statement will be evaluated only if all the preceding statements are false.

1 Like

thanks, I’ve changed all my templating, icon and icon_color, and am trying your colorings :wink:
very very nice indeed

making progress, changing from rgb to hs_color, Ive customized my lights showing both as extra_data_template, enabling easy translation between the both of them. Im not yet satisfied with the displayed result which i hope you can help me with:

  extra_data_template: >
    if (attributes.hs_color || attributes.rgb_color) 
        return (attributes.hs_color ? attributes.hs_color + ' - Hs ': ' ') 
       + (attributes.rgb_color ? attributes.rgb_color + ' - Rgb ': ' ');
    return null;



Id like the colors to show as:

Hs: 14.648, 83.529, Rgb: 255, 94, 42

What would be the way to adapt the above template to do so? The pat im struggling with is the ': ’ ’ which won’t work if I simply reorder to:

    if (attributes.hs_color || attributes.rgb_color) 
        return ('HS: ' + attributes.hs_color ? attributes.hs_color : ' ') 
       + ('Rgb: ' + attributes.rgb_color ? attributes.rgb_color : ' ');

What you are looking at is a one line if statement:

    if attributes.hs_color
      return attributes.hs_color + ' - Hs '
      return ' '

is eqivalent to:

return (attributes.hs_color ? attributes.hs_color + ' - Hs ' :  ' ') 

where the question mark is what happens if the if statement evaluates to true and the colon is what happens if the if statement evaluates to false.

that single line is typically written like this to make more sense:

return attributes.hs_color 
    ? attributes.hs_color + ' - Hs '
    : ' '

This should work.

  extra_data_template: >
    if (attributes.hs_color || attributes.rgb_color) 
        return (attributes.hs_color ? 'HS: ' + attributes.hs_color: ' ') 
       + (attributes.rgb_color ? 'Rgb: ' + attributes.rgb_color: ' ');
    return null;
1 Like

well thank you, it most certainly does now. Couldn’t find any background on this notation, so this is most educational, as ever. Really appreciate your posts !

I take it I could add a third, attributes.xy_color and add an extra line for this without issues?

btw, is the return null; necessary?
If there is no attribute, it cant be displayed, so adding this might be superfluous?

While i have your expertise at hand, pleas let me ask how to have a scene turn on a light with lets say hs color.

- name: Opstaan
      state: on
      transition: 4
      brightness: 30
      hs_color: [10,100]
#      color_temp: 153
#      rgb_color: [255,93,42]

If i use the rgb_color, the light shows up fine, but using the hs_color somehow won’t go, and confuses the Hue setup…(which is what this is for)

I started out with more detailed hs settings like this:


But i am afraid that is a no go also? Using hs_color: [14.648, 83.529]


I believe the null is necessary because you need to return something, and if that if-statement fails during any circumstances, then null should be returned. It’s for safety.

As for the hs_color, I’m not sure as I don’t have one of those devices.

ok thanks, i will do so.
I asked because many examples here: home-assistant-custom-ui/docs/ at master · andrey-git/home-assistant-custom-ui · GitHub don’t have an ‘else’.

 extra_data_template: >
        "${attributes.power_consumption !== 0 ? (attributes.power_consumption + 'W') : ''}"

finally I understand this one;-) that is, what is the $ for?

tweaked it a little bit further:

  extra_data_template: >
    if (attributes.hs_color || attributes.rgb_color) 
        return (attributes.hs_color ? 'Hs: ' + attributes.hs_color: ' ') 
        + (attributes.rgb_color ? ' | Rgb: ' + attributes.rgb_color: ' ');
    return null;


since there is the return null; safeguard, why wouldn’t this be a valid template:

  extra_data_template: >
    if (attributes.hs_color || attributes.rgb_color) 
        return 'Hs: ' + attributes.hs_color
        + ' | ' +  'Rgb: ' + attributes.rgb_color;
    return null;

this would be in accordance with all other template i use for single attributes like:

  extra_data_template: >
    if (attributes.hs_color) return 'Hs: ' + attributes.hs_color;
    return null;


Is it possible to show the slider only when the switch is on?


There is no built-in support for that, but the system is flexible enough so you can template state_card_mode to be either no-slider or another value depending on state

That’s indeed working like a charm :grinning:

  state_card_mode: if (state === 'on') return 'break-slider'; else return 'no-slider';

does it work with the confirm_controls: true? not showing up here yet.
would be a cool built-in setting though:
hide_when_off: true

hey thank for the suggestion where do i have to put this command in the config? under the customize or before that? thanks

EDIT: Got it Thanks!

HI @andrey,

been trying some customization with group/tab icons.
Changing the icon works just fine, based on a template, changing the color won’t just yet. Isn’t this possible? or do we need a special customization for that.


    icon: >
      if (entities['sensor.home_badge'].state === '0') return 'mdi:account-off';
      return 'mdi:account';
#    icon_color: >
#      if (entities['sensor.home_badge'].state === 1) return 'rgb(37, 145, 60)';
#      if (entities['sensor.home_badge'].state === 2) return 'rgb(142, 198, 65)';
#      if (entities['sensor.home_badge'].state === 3) return 'rgb(202, 219, 43)';
#      if (entities['sensor.home_badge'].state === 4) return 'rgb(255, 194, 15)';
#      if (entities['sensor.home_badge'].state === 5) return 'rgb(244, 101, 35)';
#      if (entities['sensor.home_badge'].state === 6) return 'rgb(151, 26, 30)';
#      return 'rgb(90, 90, 90)';


#     {% if is_state('sensor.home_badge' , '1')%}  rgb(37, 145, 60)
#     {% elif is_state('sensor.home_badge', '2')%} rgb(142, 198, 65)
#     {% elif is_state('sensor.home_badge', '3')%} rgb(202, 219, 43)
#     {% elif is_state('sensor.home_badge', '4')%} rgb(255, 194, 15)
#     {% elif is_state('sensor.home_badge', '5')%} rgb(244, 101, 35)
#     {% elif is_state('sensor.home_badge', '6')%} rgb(151, 26, 30)
#      {%endif%}

How and where to put this inside configurations?
For customize i understand, but for the first lines, where?

Not me, please tell me how you got it…

Not sure what you are trying to do there. For icon you can use icon_template

I am trying to let the ‘menu’-icon change color according to the number of people home. Obviously this is a group with view: true, should have mentioned that, sorry.


it changes when no-one is home to mdi:account-off just fine.(cant show you since lots of people around :wink: ) 49