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
You’re right. Didn’t work. However with your edit, I updated the code, and now the value is correctly parsed to the icon_color, as I also see in the sensor properties (icon_color: hsl(185,80,50)).
sensor.speedtest_upload:
icon: mdi:speedometer-slow
templates:
icon_color: >
var hue = Math.round(Number(state)/1000*240);
return 'hsl(' + hue.toString() + ',80,50)';
However, I still don’t see an icon color. It can be because the color hsl(185,80,50) is really close to the default icon color in home assistant, but I really don’t see a difference between several sensor icons. Can it be that home assistant or my browser doesn’t support this color type?
I’ll do some troubleshooting in the meantime.
not really sure, colorizer.org uses % for the second and third argument, maybe that would help?
using:
templates:
icon_color: >
var r = Math.round(Number(state)/1000*240);
return 'rgb(' + r + ',80,50)';
for testing purposes colorizes alright, so it might indeed be a hsl() thing not supported. (havent tried the % yet, so maybe give that another go?)
since they are used here too, that would seem logical thing to do 
https://htmldog.com/references/css/values/color/
yup:
1 Like
Okay. I now tried the percentages in combination with the degree sign. That doesn’t work, neither does hsv. I now tried the percentages without the degree sign and IT WORKS!
sensor.speedtest_download:
templates:
icon_color: >
var hue = Math.round(Number(state)/1000*240);
return 'hsl(' + hue.toString() + ',80%,50%)';
I’m really happy with this. Thanks so much for your help. Maybe it’s a good idea to add this to the list of examples?
ok, will add both rgb and hsl examples.
done: custom-ui/examples.yaml at 078fbaa4c558cc7f9d7cf3689f3245cb03510244 · Mariusthvdb/custom-ui · GitHub
1 Like
Maybe it’s also a good idea to add this example. It’s really simple and really pretty!
customize_glob:
sensor.nas_disk_ada*_temperature:
templates:
icon_color: >
var hue = Math.round(480 - Number(state)/20*240);
return 'hsl(' + hue.toString() + ',80%,50%)';
1 Like
Hi, please could you explain me in a simple way how to get this?
Do i have to use hacs add-ons?
I have an entity with 3 states, and I would like to change the icon color for each of them…
Could you explain me how to do it? thanks
as a starting point.
there are a lot of examples at custom-ui/examples.yaml at a91a056b6e1c4471a55e1f5fa0e2824278410d28 · Mariusthvdb/custom-ui · GitHub
Hey Kame! Did you get it to work? A user-friendly way to change the color range is to use the example below:
icon_color: >-
var maxval = 60;
var minval = 30;
var maxhue = 0;
var minhue = 140;
if (state > maxval) return 'hsl(' + maxhue.toString() + ',80%,50%)';
if (state < minval) return 'hsl(' + minhue.toString() + ',80%,50%)';
var hue = Math.round((Number(state) - minval) / (maxval - minval) * (maxhue - minhue) + minhue );
return 'hsl(' + hue.toString() + ',80%,50%)';
You can find the full file in my github repository: https://github.com/DrBlokmeister/HASS_NUC/blob/ccb7f83ed2c7c661e4a73a66e96ce5c33f4d351a/packages/system/nas_monitor.yaml
Thanks, but what add-on did you install?
I would like to do it directly in esphome…