So I have over 70 smart entities in my house and the only way to make everything evidently accessible, is through a picture-elements cards, which have very limited icon customization, therefore I’m using custom-ui to have a more complete view of the states of the entities that are showed. For example, this is the custom-ui for my dishwasher.
sensor.dishwasher:
templates:
icon: >
return 'mdi:dishwasher';
icon_color: >
if (attributes.process_state === 'Washibg') return 'rgb(255,114,92)';
if (attributes.process_state === 'Rinsing') return 'rgb(164,99,242)';
if (attributes.process_state === 'Dry') return 'rgb(255,138,183)';
if (attributes.process_state === 'Night Dry') return 'rgb(108,197,176)';
if (attributes.process_state === 'Standby') return 'rgb(244,189,94)';
return 'rgb(66, 105, 208)';
friendly_name: >
return attributes.process_state + " - " + attributes.remain_time + " left"
Now I’m trying to do something similar to a Hue motion sensor. I want it to show the movement/no movement icon and to have different colors depending if there is motion, no motion and if the illuminance is below a certain threshold (a light turns on if it’s dark enough when motion is detected). This is what I have and it doesn’t work:
binary_sensor.hue_motion_sensor_cave_motion:
icon: >
if (state == 'on') return 'mdi:motion-sensor';
return 'mdi:motion-sensor-off';
icon_color: >
if (state == 'unavailable') return 'rgb(193,193,193)';
if (state == 'on') return 'rgb(251,210,41)';
var illuminance = entities['sensor.hue_motion_sensor_cave_illuminance'];
if (illuminance && illuminance.state > 8) return 'rgb(0,255,0)';
return 'rgb(66, 105, 208)';
In this version of the template, the icon doesn’t even appear (although clicking its location shows its card). If I don’t template the icon itself (just the color), the color choice are ignored and the default colors are used (which I confirmed by using unrelated colors, which never showed up).
So how can I make this work, if possible? Thanks.