Created custom colorizable hue icons as a lovelace resource

[Andy_Allsopp]

…and here’s the second half:

Icon	Name	Icon	Name
	hue:friends-of-hue-20042LEDSWACDMG-BLRFR		hue:friends-of-hue-arke-round
	hue:friends-of-hue-arke		hue:friends-of-hue-aurora-dimmer-switch-alt
	hue:friends-of-hue-aurora-dimmer-switch		hue:friends-of-hue-eikon
	hue:friends-of-hue-flat-p-alt		hue:friends-of-hue-flat-p
	hue:friends-of-hue-iq-flush		hue:friends-of-hue-iq-pendant
	hue:friends-of-hue-marbul-suspended		hue:friends-of-hue-retrotouch-black-chrome
	hue:friends-of-hue-retrotouch-black-plain		hue:friends-of-hue-retrotouch-white-chrome
	hue:friends-of-hue-retrotouch-white-plain		hue:friends-of-hue-rigel
	hue:friends-of-hue-senic		hue:go-group-off
	hue:go-group		hue:go-off
	hue:gradient-lightstrip-wrap		hue:gradient-lightstrip
	hue:gradient-tube-long		hue:gradient-tube-short
	hue:iris-group		hue:liane
	hue:lightstrip-off		hue:lightstrip-tv-alt
	hue:lightstrip-tv-off		hue:lightstrip-tv
	hue:lightstrip-wrap		hue:lily-two-off
	hue:lily-two		hue:lily-xl
	hue:lily		hue:logo-alt
	hue:logo		hue:motion-sensor-luminance-alt
	hue:motion-sensor-luminance		hue:motion-sensor-temperature
	hue:outdoor-motion-sensor-temperature		hue:pedestal-econic
	hue:pendant-being		hue:pendant-cher-off
	hue:pendant-cher		hue:pendant-devote-solid
	hue:pendant-devote-three-solid		hue:pendant-devote-three
	hue:pendant-devote-two-solid		hue:pendant-devote-two
	hue:pendant-devote		hue:pendant-long-up
	hue:pendant-muscari		hue:pendant-round-off
	hue:phoenix-pendant		hue:phoenix-plafond
	hue:phoenix-semiflush		hue:phoenix-table
	hue:pillar-impress-short		hue:pillar-impress
	hue:pillar-nyro		hue:pillar-spot-2
	hue:pillar-spot-3		hue:pillar-spot-double
	hue:pillar-spot		hue:pillar-tuar
	hue:pillar-turaco-short		hue:pillar-turaco-tall
	hue:play-bar-off		hue:play-bar-three
	hue:play-bar-two		hue:play-bar-v-alt
	hue:play-bar-v-off		hue:play-bar-v-two-in
	hue:play-bar-v-two-out		hue:play-bar-v-two
	hue:play-bar-v		hue:plug-eu-alt
	hue:plug-eu-group-off		hue:plug-eu-group
	hue:plug-eu-off		hue:plug-eu
	hue:plug-group		hue:plug-uk-group-off
	hue:plug-uk-group		hue:plug-uk-off
	hue:plug-uk		hue:plug-us
	hue:qr		hue:room-attic-alt-off
	hue:room-attic-alt		hue:room-attic-off
	hue:room-balcony-off		hue:room-bathroom-off
	hue:room-bbq-off		hue:room-bedroom-off
	hue:room-carport-off		hue:room-closet-off
	hue:room-computer-off		hue:room-dining-off
	hue:room-driveway-off		hue:room-front-door-off
	hue:room-games-off		hue:room-garage-off
	hue:room-guestroom-off		hue:room-gym-off
	hue:room-hallway-off		hue:room-kids-off
	hue:room-kitchen-off		hue:room-laundry-off
	hue:room-living-off		hue:room-lounge-off
	hue:room-nursery-off		hue:room-office-off
	hue:room-other-off		hue:room-outdoors-off
	hue:room-pool-off		hue:room-porch-off
	hue:room-recreation-off		hue:room-stairs-off
	hue:room-storage-off		hue:room-studio-off
	hue:room-terrace-off		hue:room-toilet-off
	hue:sana-alt		hue:sana
	hue:signe-gradient-floor		hue:signe-gradient-table
	hue:signe		hue:socket-eu
	hue:socket-uk		hue:socket-us
	hue:struana-alt		hue:struana
	hue:sync-box-alt-off		hue:sync-box-alt
	hue:sync-box-off		hue:sync-box
	hue:sync-high-off		hue:sync-high
	hue:sync-intense-off		hue:sync-intense
	hue:sync-moderate-off		hue:sync-moderate
	hue:sync-music-alt-off		hue:sync-music-alt
	hue:sync-music-off		hue:sync-music
	hue:sync-subtle-off		hue:sync-subtle
	hue:tap		hue:wall-appear-group
	hue:wall-appear		hue:wall-attract
	hue:wall-econic-lantern-base		hue:wall-econic-lantern-top
	hue:wall-econic-lantern		hue:wall-econic
	hue:wall-flood		hue:wall-fuzo-h
	hue:wall-fuzo		hue:wall-impress-narrow-three
	hue:wall-impress-narrow-two		hue:wall-impress-narrow
	hue:wall-impress		hue:wall-inara-alt
	hue:wall-inara		hue:wall-lucca-alt-below
	hue:wall-lucca-alt		hue:wall-lucca
	hue:wall-nyro		hue:wall-resonate
	hue:wall-runner		hue:wall-spot-off
	hue:wall-switch-module		hue:wall-tuar
	hue:wall-turaco		hue:wellner-solid-off
	hue:wellner-solid		hue:wellner
	hue:wellness-off		hue:wellness

Last point of order, @Mariusthvdb has launched a new repo to hold custom icons that aren’t hue related. I’ve had a few of these requests and have held off diluting the hue icon set, so its great to know that these users can be satisfied!

Thanks again to all.

Andy.

[svenshomelab]

Works great!

[Andy_Allsopp]

That’s a fresh one. That icon only went in today!!

[svenshomelab]

It’s from my own icon request

[Andy_Allsopp]

I know

[KennethLavrsen]

I have installed this very nice pack a few days ago and have updated quite many of my icons that I use in my picture elements card

I also use the bha icons.

I seem to have reached a limit to what the browser is willing to consistantly load.

Here is a screen shot of a loading that went well

And here is how it looks when I refresh the page in Google chrome

It is 50/50 if a reload completes with all icons or it icons are missing. I have cleared the cache. And I see this on multiple computers. The browser is a standard Google Chrome.

I think with the many new mdi icons, the bha, and now hue icons a limit has been reached. But I still wonder why the browser stops midway
And it is always the hue icons that do not load. All the mdi and bha icons load fine

[Andy_Allsopp]

Hey there, @KennethLavrsen. I do wonder if the browser is topping out on memory, or whether there’s a conflict with another plug-in.

Can you look at the developer console messages and see if it tried to load hass hue icons? It would say title and version number if it has.

You may be able to avoid any clash by adding the script as a plug-in resource through the dash. That can force it to load earlier.

Let me know?

[KennethLavrsen]

Not sure what to look for.

Here is screenshot

I tried to move the sequence of the resources loaded so hue is not last. But it still happens

[KennethLavrsen]

Update

Same problem in Firefox.

It seems like a race condition. I can refresh many time. I can get 5 fails in a row and 5 good.

My guess is that it fails if something runs before or after the JS that loads the icons. Or maybe even on server side?

[KennethLavrsen]

And now also seen in Safari on an iPhone. So this is not browser dependent.

[Andy_Allsopp]

Going between browsers and devices I would have to echo your thought that it’s a race condition. Perhaps there’s a common constant or function name that’s causing the issue. I can only suggest backing out one or more other plugins temporarily to see which one won’t cohabit. If I can provide an amend to avoid the clash, I will.

[maxym]

I read you by accident since I’m not using this kind of visualization. I do use my custom gui built entirely on nested custom button cards.

I experience similar thing: some cards are not rendered when opening/refreshing a page. Then after refresh all appear but may disappear after subsequent refresh.
I never experienced it in ios App though. Only browsers (chrome, ff), incl local connection.

Not sure if it’s caused by the same root cause. But looks similar.

[KennethLavrsen]

I just tried to remove the custom component bha icons (I only used one icon from that)

That did not help at all. I though it could have been a race condition between the two but that was not it. I only have one custom icon lib installed now and that is the hue one.

It is not only in picture elements cards. It is also the icons in normal entity cards that are not shown. This never happens to the normal mdi icons. They are always shown. And when the hue icons are not shown - it is all of them. It is all or nothing.

@maxym I can easily reproduce it in the iOS app as well.

[Andy_Allsopp]

Hello again. It doesn’t need to be an icon pack, just a conflict with another plug-in. There is another way to load the plug-in, so let me check that on latest HA and come back to you with the method.

Ultimately, these things tend to go away of their own accord (sometimes a particular HA version or server config) but if we can pinpoint it, that’s so much better.

[Mariusthvdb (Marius)]

Andy, would this be what we saw with my custom_icons the other day? Seems intermittent, and the main functionality stands, no errors at all. Just sometimes not showing…

[Andy_Allsopp]

Could be, @Mariusthvdb. The real check might be to ask the console for window.customIconsets and check that the repo has been integrated and not replaced by anything else. I use
window.customIcons = window.customIcons || {} and window.customIconsets = window.customIconsets || {} as a fallback, to make sure I’m not replacing anything that’s already been loaded, but that doesn’t mean we get away without issue.

@KennethLavrsen, can you use the file editor to add the following lines to your /config/configuration.yaml:

frontend:
  extra_module_url:
    - /hacsfiles/hass-hue-icons/hass-hue-icons.js

You may have to check you don’t already have the frontend section, as it won’t want two. This has always solved any problems I have with intermittent icon packs so it’d be good to know if this solves for you also.

[KennethLavrsen]

I will try that.

Meanwhile I tried to make a short version of the js file with only the 14 icons I use. That did not make a difference.

I’ll be back when I try your proposal. I am at work so it is between meetings

[KennethLavrsen]

The extra_module_url made a huge difference.

After adding that and restarting HA - I have reloaded the pages in 3 different browsers at least 100 times in total and no single failure

[Andy_Allsopp]

Very glad to hear, @KennethLavrsen. This does seem to happen from time to time with some installs. Never quite been sure why. Now that you know it, you’ll spot that this specific case is called out in the readme. I’ve been toying with removing that step (people keep asking if its necessary) so its great to know that it still gets a win.

[pindab0ter (Hans van Luttikhuizen-Ross)]

Last year you posted this video showing the icons. The colour of the icons changed as you dragged the colour temperature slider, as well as when you changed the brightness. I’m looking very hard for the piece of code responsible for determining these colours.

Could you point me in the right direction or do you know who would know?