Mariusthvdb
commented
9 months ago first things first: did you install custom-ui? (show inspector console to be sure)
next: where did you add this customization? it should be in the correct hierarchy compared to homeassisant, see the docs.
if above is correct, please add a simple and direct (no templates) customization like
homeassistant:
customize:
sensor.pirateweather_apparent_temperature:
icon_color: redto see if its working as it should
if yes, simplify that mapper, not sure where you got that from.... I didnt yet meet a beginner on custom-ui with a syntax as complex as that.
try a simpler version like:
icon_color: >
if (state === 'unknown') return 'grey';
if (state < -20) return 'black';
if (state < -15) return 'navy';
if (state < -10) return 'darkblue';
if (state < -5) return 'mediumblue';
if (state < 0) return 'blue';
if (state < 5) return 'dodgerblue';
if (state < 10) return 'lightblue';
if (state < 15) return 'turquoise';
if (state < 20) return 'lightgreen';
if (state < 25) return 'darkgreen';
if (state < 30) return 'orange';
if (state < 35) return 'crimson';
return 'firebrick';fwiw, I changed the JS a bit, and this does work as expected (though missing the catch for 'unknown'):
temp_color: &temp_color
hide_attributes: templates
templates:
icon_color: >
const val = parseInt(state);
const valColorMap = [
{ value: -20, color: 'black' },
{ value: -15, color: 'navy' },
{ value: -10, color: 'darkblue' },
{ value: -5, color: 'mediumblue' },
{ value: 0, color: 'blue' },
{ value: 5, color: 'dodgerblue' },
{ value: 10, color: 'lightblue' },
{ value: 15, color: 'turquoise' },
{ value: 20, color: 'lightgreen' },
{ value: 25, color: 'darkgreen' },
{ value: 30, color: "orange" },
{ value: 35, color: "crimson" }
];
return valColorMap.find(mapping => val < mapping.value)?.color || 'firebrick';can even leave out the const val = parseInt(state); and use state directly in the return:
further simplification of the mapping can be done using using array destructuring
temp_color: &temp_color
hide_attributes: templates
templates:
icon_color: >
const valColorMap = [
[-20,'black'],
[-15,'navy'],
[-10,'darkblue'],
[-5,'mediumblue'],
[0,'blue'],
[5,'dodgerblue'],
[10,'lightblue'],
[15,'turquoise'],
[20,'lightgreen'],
[25,'darkgreen'],
[30,'orange'],
[35,'crimson']
];
if (state === 'unknown') return 'grey';
return valColorMap.find(([threshold]) => state < threshold)?.[1]
|| 'firebrick';
SiriosDev
bratanon
After adding
icon_colorviacustomizationit doesn't appear in attributes, i.e. unusable with templates, the most I got isicon_colorundertemplatesbut it's just the js codebelow are respectively:
customization