Entity Icon color & custom icon color based on state (customise icon_color)

[SeanMyth (Sean)]

I can confirm that replacing

Object.assign(this._icon.style,{color:s.attributes.icon_color,filter:""})

with

this._showIcon=true,this._iconStyle={color:s.attributes.icon_color}

fixes the issue and my icons have color again!

[costy]

I made the change in state-card-custom-ui.html but the color change didn’t work.

What else should I do?

[walaj (Jon Waland)]

see https://github.com/Mariusthvdb/custom-ui

[Mariusthvdb (Marius)]

@costy

What else should I do?

take out the state: template. that will lead to unexpected, and/or undesired effects.

if you change the actual state, (which is what this does) the template above it won’t work anymore, since you have them evaluate ‘on’ and ‘off’…

you will have to wait until we manage to re-introduce _stateDisplay or, use template-entity-row to make it show whatever you want.

and yes, follow https://github.com/Mariusthvdb/custom-ui#installing-is-super-easy.

[costy]

Refresh cache …
Works

THX

[dave_sausages]

To help myself out (and others trying to work out how to have an icon colour change on state):

I’m running Home Assistant (previously called hassio on a pi. After hours of trying to work out what to do reading forum posts, finding Custom-UI got broken, then fixed, the broken etc and running round in circles. Should we use the HACS plugin you’ve linked instead of the normal copy files and edit configuration.yaml chaos?

[djansen1987 (Daniel Jansen)]

Also have a look here:

Change icon by state Lovelace

Okey, now i really feel stupid. After posting i did a final read and tested the links. After another quick scroll on the page i found the option ‘Using state icons’ where i found this option. Also directly answered my own bonus question on how to change the color, as it follow the style sheet. And after removing the color line in my own lovelace code this worked as well. going to leave this thread as it is as it may help others. For those who already were searching. Thanks! state_ic…

[walaj (Jon Waland)]

either or.

If you are starting from scratch, https://github.com/Mariusthvdb/custom-ui is clearer as it is up to date with the way lovelace works today

If you have HACS installed, all you need to do is add https://github.com/Mariusthvdb/custom-ui as custom repository

[dave_sausages]

Yeah I’m currently conversing with the creator in an issue on his github trying to get it installed, as his instructions definitely don’t work for me (and probably others)

It looks like he’s annoyed by my noobness and just giving me the old “check the docs” lines, despite me going to quite thorough lengths to document my steps with text and screenshots (standard for forums though, so I don’t mind ).

Can you provide any insight as to where I’m going wrong?

https://github.com/Mariusthvdb/custom-ui/issues/2

[Mariusthvdb (Marius)]

As I was trying to explain some basic stuff for you on the repo, and you’ve now taken it to this fine community, it might be wise to focus on 1 place, so I’ll close the issue in the repo then ok?

continue here.

[dave_sausages]

I look forward to someone helping me, and it helping you to improve the installation instructions to help others too

[Mariusthvdb (Marius)]

thanks for chiming in!
this wont help though, question is about icon_color, not icon based on state. There’s but 1 way to do that globally (Lovelace of course allows styling of Icon and its color, but only per entity or per card) and that is using custom-ui, which adds the attribute icon_color.

[djansen1987 (Daniel Jansen)]

Okey, i then misunderstood the question

[Mariusthvdb (Marius)]

@dave_sausages

improve the installation instructions

sure, that’s always on my mind, improve HA keep us informed about your ongoings.

[dave_sausages]

Nothing has really changed this end. I’ve gone over your instructions multiple times, tried a new install of HA on a spare pie, and even had a Linux savvy friend team viewer into my computer to try and help.

All roads lead to your documentation missing something critical. And given the extensive screenshots I posted in the issue on your GitHub, I’m quite surprised you can’t instantly diagnose the issue. Although my instincts tell me that you probably don’t want to.

Can anyone lend a hand to me and others like me?

[M1ke]

That is quite disrespectful imho - it’s not even his own component (originally). He was kind enough to research all the changes introduced in 110, even contacted other developers to help. I had 0 problems to install this and it works perfectly fine. So it’s definitely user error!

Anyway, I will try to help you:

• did you restart HA?
• did you clear cache?
• did you try in incognito mode?

Otherwise, try to rename the folder to customui (no dash), change the resources to represent this and repeat above steps.

[Mariusthvdb (Marius)]

well yeah, thanks @M1ke, that would be my assessment too.

had another look at the ‘extensive screenshots’, and seems the file size is wrong. My local file is 58 kb,

repo reports 56.6 kb

while sausages file is 10 times the size:

don’t know what happened there.

@dave_sausages

Although my instincts tell me that you probably don’t want to.

still trying to as you see… against better judgement, who knows. Maybe follow the docs, and not your instincts would be better after all…

[M1ke]

Good catch - didn’t see that!
I tried to investigate how one could even get such a file size, here are my observations:

• custom-ui-master.zip: 479 kb
• custom-ui-master: 631 kb
• right-click on custom-ui.js in github and then ‘save link as…’ (see below): 647 kb

I made the mistake from point 3 far too often when I started so I gave it a try, but doesn’t seem to be the case.

---

So @dave_sausages, the solution will be re-install it. Please follow these steps:

1. Download the whole zip from github

2. unzip the downloaded file and open the folder
3. move only! the freshly downloaded custom-ui.js into /www/custom-ui folder to replace the old one
4. restart HA
5. clear cache a few times or try incognito mode

[walaj (Jon Waland)]

OR, as you have hacs installed,

HACS->FrontEnd, select the three dots/hamburger/right top menu button -> custom repositories
enter https://github.com/Mariusthvdb/custom-ui as a lovelace entry, click add

close the repositories window, and you should have a new CustomUI /New repository on the screen. Select install. wait a few seconds for it to download, and select install

( i had a couple of issues of two instances appearing here)

Now select the main configuration side menu->LoveLace Dashboards->Resources
and make sure you have /hacsfiles/custom-ui/custom-ui.js listed.

IF you don’t, add it as a javascript module.

Refresh page
Select developer tools side menu item -> info.

make sure you have somethign like

Custom UIs:
JS 20200528-adapted-for-HA110+

[dave_sausages]

@Mariusthvdb

while sausages file is 10 times the size:

Aha! Nailed it! I did indeed make the mistake of a direct single file download and not download the whole project zip file and extract it from there. I did make the same mistake a long time ago too, but obviously enough time has passed for me to repeat it.

@Mariusthvdb do you have a “donate a beer facility”? I can’t see one on your repo. Having a nice looking Dashboard on my system because you’ve ported Custom-ui is well worth a beer or two (when/if your local pub reopens after the Corona Pirates have gone).

Thanks

*edit and thanks to others as well that pointed out how to get the correct file size. That parts wasn’t needed by me as I’d already gone “Oh! I’ve done that stupid github mistake again”, but I’m sure it will help others.