Refresh cache …
Works
THX
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?
1 Like
Also have a look here:
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
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?
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.
I look forward to someone helping me, and it helping you to improve the installation instructions to help others too
1 Like
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.
Okey, i then misunderstood the question
sure, that’s always on my mind, improve HA 
keep us informed about your ongoings.
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?
1 Like
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.
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.
still trying to as you see… against better judgement, who knows. Maybe follow the docs, and not your instincts would be better after all…
1 Like
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:
- Download the whole zip from github
- unzip the downloaded file and open the folder
- move only! the freshly downloaded custom-ui.js into /www/custom-ui folder to replace the old one
- restart HA
- clear cache a few times or try incognito mode
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+
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.
I’m having a bit of trouble trying to get this to work. I have installed the plugin, and it is working with this sensor:
sensor.speedtest_download:
templates:
icon_color: >
if (state > 500) return 'rgb(0, 255, 0)';
if (state > 400) return 'rgb(100, 255, 0)';
if (state > 300) return 'rgb(150, 255, 0)';
if (state > 200) return 'rgb(200, 255, 0)';
if (state > 150) return 'rgb(255, 255, 0)';
if (state > 100) return 'rgb(255, 200, 0)';
if (state > 50) return 'rgb(255, 150, 0)';
if (state > 30) return 'rgb(255, 100, 0)';
if (state == 'unknown') return 'rgb(50, 50, 50)';
return 'rgb(255, 0, 0)'
The color of the entity changes depending on the internet speed. Pretty great and I’m very happy with it! However, I want to do it in a smarter way, continuously changing the color without creating all these if statements. I’m trying to do that with this template:
sensor.speedtest_upload:
icon: mdi:speedometer-slow
templates:
hs_color: >
var hue = Math.round(Number(state)/1000*240);
return '['hue ',80]'
However, this is not working. I tried many variants of this code, for example using:
sensor.speedtest_upload:
icon: mdi:speedometer
templates:
hs_color: >
'[{{states.sensor.speedtest_upload.state|int/1000*240}}, 80]'
But both are not working, and I don’t really know how to fix it. I found a topic of someone who tried the same thing, but cannot find that anymore. Is what I’m doing simply not possible, or is there something wrong with my syntax?
What should the language of the code be by the way?
use icon_color: and not hs_color:
and correct your templates to be valid JS. (your second template is using Jinja)
and end with a ;
1 Like
Thanks for the reply! I’m now trying the code below, which also doesn’t work. Should I specify that I’m using hsv colors?
sensor.speedtest_upload:
icon: mdi:speedometer-slow
templates:
icon_color: >
var hue = Math.round(Number(state)/1000*240);
return '['hue ',80]';
you should at least use the correct notation for the color, try something like:
sensor.speedtest_upload:
icon: mdi:speedometer
templates:
icon_color: >
var hue = Math.round(Number(state)/1000*240);
return 'hsl(hue,80,50)';
edit
my example above doesnt work, sorry, the var isnt injected in the hsl().
trying:
templates:
icon_color: >
var hue = Math.round(Number(state)/1000*240);
return 'hsl(' + hue + ',80,50)';
1 Like