HA 0.108.1

[nolenjohan]

After update to 0.108 and further to 0.108.1 no colors based on CustomUI is visible, all is the deafult blue/grey.

Google Chrome Version 80.0.3987.163

CustomUI: 20190518

Home Assistant 0.108.1

Examples of non-working:

homeassistant:
customize:
sensor.alice_fonster_power:
icon: mdi:flash-circle
custom_ui_state_card: state-card-custom-ui
templates:
hs_color: "if (state >3) return [55, 90];
else if (state >1) return [55, 90];
else if (state >0) return [30, 70];
else return [0, 0];"
brightness: "if (state >3) return 250;
else if (state >1) return 150;
else if (state >0) return 200;
else return 50;"
sensor.badrum_temp:
friendly_name: Badrum Temp
custom_ui_state_card: state-card-custom-ui
templates:
hs_color: "if (state >=25) return [0, 70];
else if (state >22) return [30, 70];
else if (state <18) return [240, 100];
else return [55, 90];"
brightness: "if (state >=25) return 150;
else if (state >22) return 250;
else if (state <18) return 150;
else return 250;"

From log:

Log Details (ERROR)
Logger: frontend.js.latest.202004071
Source: components/system_log/init.py:209
First occurred: 12:13:29 PM (2 occurrences)
Last logged: 12:19:27 PM

https://ha.sweden.se:8123/local/custom_ui/state-card-custom-ui-es5.html.js:2:24017 Uncaught ReferenceError: regeneratorRuntime is not defined

Clicking that error shows MANY lines within that error message.

[bitdevil007]

😩 I have the same problem

[Mariusthvdb]

Still working nicely here, Ha 108.1
Custom_ui: local set in customizer

You are using the deprecated install method
custom_ui_state_card: state-card-custom-ui

[bitdevil007]

Only the Color change does not work

[Mariusthvdb]

Color changes works fine. Check your install method

The templates need some improving too..

[nolenjohan]

How shall it be installed instead?

[nolenjohan]

I have tested both the below activating options, no difference:

customizer:
custom_ui: local

frontend:
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html

[bitdevil007]

I use the hosted version

[Mariusthvdb]

As said: use customizer and set custom_ui: local. Simply read the instructions on how to do so, it is all automatic using the update.sh script. Activating is described here https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/activating.md

The extra html url setup is deprecated long ago..

[nolenjohan]

Are you adding "custom_ui: local" as a resource in "Configuration" -> "Loelace Dashboards"?

[nolenjohan]

Got this error message now:

Log Details (ERROR)
Logger: frontend.js.latest.202004071
Source: components/system_log/init.py:209
First occurred: 11:24:25 AM (16 occurrences)
Last logged: 11:38:38 AM

http://192.168.5.210:18124/local/custom_ui/state-card-custom-ui.html.js:27:8908 Uncaught TypeError: e.push is not a function

[Mariusthvdb]

No. You really should read the instructions and follow them.

Custom_ui is from before Lovelace, and was designed to customize States .

Every once in a while one can spot an error like that yes, just ignore these, they are of no consequence.

[nolenjohan]

I have read several times...

So add this to configuration.yaml:

customizer:
custom_ui: local

Having the files in "custom_components/customizer".

That's it?

[Mariusthvdb]

no that is no it, you have to activate custom_ui. see 4 posts up

in reading, you must have missed this: https://github.com/andrey-git/home-assistant-custom-ui#activating
or didn't follow this: https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/installing.md#local-install

customizer is in custom_components/customizer, custom_ui is in /config/www/custom_ui

after which of course a restart is needed

[nolenjohan]

I used this to activate (added to configuration.yaml):

I have th files in place:

I have the customizer files in place:

[bitdevil007]

NOW i use the local version.
But now i have an error 😓

Protokolldetails ( ERROR )
Logger: frontend.js.latest.202004072
Source: components/system_log/init.py:209
First occurred: 13:13:39 (2 occurrences)
Last logged: 13:13:39

:0:0 Script error.

[bitdevil007]

I use in my configuration.yaml
customizer:
custom_ui: local

and in my customize_glob.yaml
“.“:
custom_ui_state_card: state-card-custom-ui

This works:
templates:
state:
if .....

But this don‘t work 😓
templates:
hs_color:
if ( state > ‘0‘ ) return [0,100,50];
return [120,100,19];

[bitdevil007]

It shows the template code but the color is not change

[Mariusthvdb]

and in my customize_glob.yaml
“.“:
custom_ui_state_card: state-card-custom-ui

this shouldn't be used anymore.

templates:
state:
if .....

not sure what you are doing here, but customizing the state is not advisable... it can cause very unexpected results. you should really post the full template if you want assistance, and please add it in code blocks, because it is unreadable right now.

about your other template, you might be wring quoting the number, I use this:

    sensor.grid_power_production:
      icon: mdi:export
      templates:
       icon_color: >
         if (state > 0) return 'green';
         return 'grey';
    sensor.grid_power_consumption:
      icon: mdi:import
      templates:
       icon_color: >
         if (state <= 0) return 'green';
         return 'red';

of course this all depends on you states, but please give it a try. It always boils down to evaluating either strings or numbers. If you sensor is outputting a number, then dont quote, if it is a string you should quote, or make it a number using float or int

@nolenjohan did you also restart?

[bitdevil007]

What is with the rgb color code?
Can i use this?

[Mariusthvdb]

Which rgb code?

You can use any valid css color code as stipulated

Btw you need to use icon_color: as template, that’s what causing the issue with your hs_color template
see: https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/features.md#icon-color

[bitdevil007]

Ok thank you 👍🏻

[peterhoe]

@bitdevil007

All my configuration was using hs_color as well, which stopped working in HaasV108.x (and i seem to remember me changing all my customisations to hs_color back in the Haas V80.x days as the icon_color stopped working back then)

Here are some tips i found which could help others now i've got it working in V108.x if they happen to use hs_color, and its stopped working for you in V108.x

Firstly, i use

http://colorizer.org/

I use this site to get the rgb values of your hs_color values. Just bear in mind, for the lightness / brightness value on the colorizer convertor, set it (lightness or brightness that is on colorizer.org) to be 50, as this value wasn't considered in Haas anyway, only the first H & S values

I found also, for some reason, my statements mostly had 'else if' or 'elif' as part of my entity templates in customize.yaml, once I removed those and made them simply "if" for each line of the tempate, it got it going

here is one entity entry from my customize.yaml file thats working in V108.x which is looking at a numeric value for icon color change

sensor.iotawatt_channel_2_acdaikin:
  icon: mdi:air-filter
  templates:
    icon_color: >
      if (state > 1200) return 'rgb(255,85,0)';
      if (state > 900) return 'rgb(255,170,0)';
      if (state > 600) return 'rgb(255,255,0)';
      if (state > 300) return 'rgb(0,255,255)';
      if (state > 14) return 'rgb(0,0,255)';
      if (state <= 14) return 'rgb(128,128,128)';
      if (state === 'unavailable') return 'rgb(128,128,128)';
      else return 'rgb(128,128,128)';

The other little gotcha i found was in some of my entity customization templates, i was using both icon & hs_color, and my hs_color entry was first item in my templates, which stumped me for a while. I found after a bit of mucking around, that if i put in my templates entry the icon entry first, and icon_color second, that it started to work (all my templates are originally ordered as hs_color, then icon)

example as follows where i'm updating the icon itself as well as its color, and in this case notice the single quotes, as the value of the status is text only, not numeric

sensor.modbus_sb_operating_status_description:
  friendly_name: SB Status
  templates:
    icon: >
      if (state === 'NoPvVoltage') return 'mdi:weather-night';
      if (state === 'Fault') return 'mdi:alert-circle';
      if (state === 'Start') return 'mdi:reload';
      if (state === 'Stop') return 'mdi:stop';
      if (state === 'Shutdown') return 'mdi:power-settings';
      if (state === 'StandaloneOp') return 'mdi:electric-switch';
      if (state === 'Waitforgrid') return 'mdi:power-plug-off';
      if (state === 'unknown') return 'mdi:help-circle';
      else return 'mdi:solar-power'
    icon_color: >
      if (state === 'MaxPwrPnt') return 'rgb(0,255,0)';
      if (state === 'StandaloneOp') return 'rgb(255,170,0)';
      if (state === 'NoPvVoltage') return 'rgb(0,0,255)';
      else return 'rgb(125,125,125)';

I had to roll back to 107 regardless as modbus broke in my setup, but on my dev instance, i was able to get the icon color portion of this to work with a bit of tinkering in V108.x

now i've just got to sit down and change all my customize.yaml entries to rgb from hs_color.

[nolenjohan]

@peterhoe

Code:

Error log:

Error loading /config/configuration.yaml: while scanning a simple key in "/config/configuration.yaml", line 8, column 9 could not find expected ':' in "/config/configuration.yaml", line 9, column 9

while scanning a simple key in "/config/configuration.yaml", line 8, column 9 could not find expected ':' in "/config/configuration.yaml", line 9, column 9

[peterhoe]

@nolenjohan

be careful with formatting

notice in my example above that there are 2 additional spaces, from line 8 onwards under your line 7 "icon_color: >" entry

I'd suggest also to not do this in your configuration.yaml file, cause you could break things easily

take a read through the following link

https://www.home-assistant.io/docs/configuration/customizing-devices/

and do your customizing in a file called "customize.yaml"

make a mistake in your customize.yaml file, and it wont break your setup, if you get it wrong in there, worst case the customzing wont work, but your system will still load and function

[nolenjohan]

@peterhoe

Thanks! Missed those extra spaces! :-)

Would I replace both "customize:" and "customize_glob:" with the "customize.yaml" file?
I assume no need for "customize:" entry in that file?
How about "customize_glob:", how will the distinction between those be in that file?

[Mariusthvdb]

you should take out the line with custom_ui_state_card, this is no longer use, and was for States.

[peterhoe]

@nolenjohan
this particular place, eg: github is for the report of issues, it isnt meant for these types of questions of configuration

there is complete documentation on all of this.

customize_glob is a seperate file for global customisations (think of glob as being global), where you can use wildcards

eg

  customize_glob:
    "light.kitchen_*":
      icon: mdi:description

to customise all entities with "light.kitchen_*" at the beginning of each name

there is a reference to customize_glob found here

https://www.home-assistant.io/docs/configuration/basic/

point is, if you already had this working using hs_color values, change to rgb or any valid css color code, as mentioned by marius previously

[kebel87]

Sorry I’m late to the party, but I got the same error.

What ended up being the solution to get rid of this error? I read the whole thread but couldn’t really find it. I re-read the activation instructions and everything is in order for local install.