The andrey-git custom ui icon_color template has ceased to function with V88
There is an issue opened on github
https://github.com/andrey-git/home-assistant-custom-ui/issues/168
Any chance the icon_color option can be added as a customisable entry native into HA?
custom-button-card does this. I agree it should be in the core entity-button though. I think it eventually will beā¦
Iām just talking entity Icon colour, so you could change icon colour from the default, or based on state value. For example on a sensor entity icon.
sure but that custom button does that. Itās actually the only reason I use that instead of the core button so an input boolean I have shows a different colour when itās switched on.
Mmm. But why complicate things by displaying a sensor and itās value as a button?
For example. Temperature icon to display yellow when above 26. Then display red when above 27.
Well hereās an example of how I use it here:
- type: horizontal-stack
cards:
- type: entity-button
entity: switch.sonoff51083
tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.sonoff51083
- type: entity-button
entity: switch.sonoff63719
tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.sonoff63719
- type: custom:button-card
entity: input_boolean.alarmgaragedoor
icon: mdi:security
color_type: icon
color: var(--secondary-text-color) # rgb(251, 210, 41)
color_off: var(--paper-item-icon-color) # rgb(54, 95, 140)
name: Exit-Enter
show_state: false
action: service
service:
domain: input_boolean
action: toggle
data:
entity_id: input_boolean.alarmgaragedoor
So itās a horizontal-stack with 3 buttons. The first 2 buttons are the core button and when I tap it it changes to yellow (on)
If you do that with an input boolean, it does not change colour and show the state.
Using the custom button it does.
and on:
If you have a better way of doing this Iām all ears.
Note also the entity displayed can be totally different to the entity in the actionā¦ That button can do a lot more but itās the only way of doing what I want that I know of. As I say, Iām open to better waysā¦
I too use the custom button to display different colour depending on state. For switches for example where the button toggles between on and off state. Yellow for on, grey for off. Iām talking about sensors which serve no purpose being a button per say
But it doesnāt have to have an action even if itās a buttonā¦ it could just display the state as a colourā¦ Iām not following what you are after I guess.
ok, lets see if i can explain
I display an āentitiesā card in lovelace which contains sensors (not switchable entities that would require a button)
for example
- type: entities
title: Solar & Elec
show_header_toggle: false
entities:
- sensor.modbus_sb_pv_production
- sensor.mqtt_sm_grid_feed_in
- sensor.mqtt_calcfin_feed_earn_per_hour_elec
- sensor.mqtt_sm_purchased_electricity
- sensor.mqtt_calcfin_consumption_cost_per_hour_elec
- sensor.mqtt_calcfin_consumption_elec
Iād like to colour these entity icons according to their state.
with custom ui loaded (prior to ver 88 when it stopped functioning), i can add the following to my entity entry in my customize.yaml
sensor.modbus_sb_pv_production:
friendly_name: PV Generation
templates:
theme: >
icon: mdi:flash-circle
icon_color: >
if (state > 500) return 'rgb(0,255,0)';
if (state > 300) return 'rgb(0,0,255)';
if (state > 150) return 'rgb(255,255,0)';
if (state < 150) return 'rgb(120,120,120)';
defning the icon used (in this case mdi:flash-circle)
and the icon color
for example if i wanted to make the entity icon a static red it would be
icon_color: red
or in the above example, ārgb(0,255,0)ā or green for above a value of 500
or ārgb(0,0,255)ā blue if above 300 etc
Correct me if im wrong, In themes you can change the icon color across the board, but not on a per entity basis
Andrey who wrote custom ui seems to be off the air, but for me the ability to customise an icon color of an entity would be a nice core feature to have without having to rely on a custom element and its associated administration
So I seem to remember doing that with entity pictures that I changed with the stateā¦ kludgey thoughā¦
Thanks for explaining what you meant. I see what you mean now and agree this is useful.
Agree. Seems like an essential feature in a fully customizable UI.
My work around this problem is to use multiple SVG images of different colors for each state and call them using similar code that you use for the color template. Hope it helps cheers
So to use multiple svg icons in different colors I would need 24 different icons for my 6 sensors shown in my solar example above. I get it, but seems like a lot of backend coloured icons required for this solar example above.
I used to have with custom ui the ability to state change icon color for a.c., countdown timers, fuel price, transport time to arrive, Solar etc. I can see I would pretty quickly need 100s of icons and their associated colors
If and when custom ui is updated to function with v88 and above, Iād be fine with continuing to use. However it seems that having the ability to at least change and define the colour an icon from the default in the Lovelace ui, or at the entity customisation level seems like a nice option to have
I know i use to do it that way but since it broke i reverted to my work around anyway i use animated svg already to enhance the visibility of active states so for me the change was little
sensor.door_front:
templates:
hs_color: >
if (state === 'Open') return [0,100,50];
return [120,100,19];
This works for me
Is that now built in to HA or are you still using Custom-UI to get that effect?
Still using custom ui.
which is rather remarkable, since before icon_color was introduced, rgb_color was used, (suppose hs_color too) but that has been replaced.
That this would work now is surprising to say the least (though very welcome indeed).
My interface would be nowhere without icon_color templates, so my main setup is still on 84.3ā¦
yes this is remarkable as i remember a discussion about a year ago about not using hs_color in favour of rgb when using icon_color with custom ui (youāre name rings a bell to me on this one)
I can confirm however this is functioning using hs_color, although choosing a hs color value is frought with a bit of complexity
the best guess i can see is that this uses HSB HSV value which i found a color picker from here
much easier defining rgb values
custom ui version i am using is 20190113
and Hass 88.2
for example
templates:
hs_color: >
if (state > 2500) return [0,100,100];
else if (state > 1500) return [60,100,100];
else if (state > 1000) return [240,100,100];
else if (state > 200) return [120,100,50];
else return [120,100,20];