another quest:
trying to reflect several power phases in the icon color, this template doesn’t work unfortunately. What should i change to get it to show the desired colorings"
icon_color: "if (state > 0) return 'rgb(251, 210, 41)';
if (state > 500) return 'rgb( 192, 39, 30 )';
else return 'rgb(54, 95, 140)';"
thanks for having a look,
Marius
First, the logic is incorrect. the second state > 500 will never be evaluated as it will stop after state > 0. As regards the formatting, see my complete example here.
Thanks,
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.
thanks, I’ve changed all my templating, icon and icon_color, and am trying your colorings 
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:
light.dining_corner:
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;
shows:
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 '
else
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.
light.dining_corner:
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;
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
entities:
light.kist:
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]
thanks,
Marius
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/templates.md 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:
light.kist:
extra_data_template: >
if (attributes.hs_color) return 'Hs: ' + attributes.hs_color;
return null;
Hi,
Is it possible to show the slider only when the switch is on?
thanks
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 
templates:
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.
tried:
group.personal:
templates:
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)';
and
# {% 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…