0.115.1: custom_ui not working anymore

poudenes · September 19, 2020, 8:04am

Hi All,

Since upgrade to 0.115.1 the custom_ui component is not working anymore:

2020-09-19 10:01:30 ERROR (MainThread) [homeassistant.setup] Error during setup of component customizer
Traceback (most recent call last):
  File "/usr/src/homeassistant/homeassistant/setup.py", line 213, in _async_setup_component
    result = await task
  File "/config/custom_components/customizer/__init__.py", line 71, in async_setup
    add_extra_html_url('/local/custom_ui/state-card-custom-ui')
  File "/config/custom_components/customizer/__init__.py", line 63, in add_extra_html_url
    frontend.add_extra_html_url(
AttributeError: module 'homeassistant.components.frontend' has no attribute 'add_extra_html_url'

Also post it on the GitHub:

aidbish · September 19, 2020, 8:23am

Pretty sure custom UI has been broken for a while as the dev is awol. i think @Mariusthvdb maintains a working fork

Mariusthvdb · September 19, 2020, 8:26am

well, trying to.

can confirm though it is working quite nicely on 115.1

please be sure you update to the latest version, and do so correctly. I see an error about ‘add_extra_html_url’ which shouldn’t be used as the setup method for some time now.

customizer is no longer part of the correct procedure
(see your error

custom_components/customizer

)

you should be seeing this:

on the info page or this:

in inspector

poudenes · September 19, 2020, 8:41am

Great,

i was still on a other GitHub all the time.

Add your https://github.com/Mariusthvdb/custom-ui as custom repositories and add the add-on.
Worked again!!!

Also less things to config… removed all the old parts from the configuration file etc…

SylvainGa · September 19, 2020, 7:09pm

Hi, what’s this directory that’s mention in the github page? It’s nowhere to be found in my installation. I have a supervised installation on Raspbian.

/local/lovelace/resources/

In hassio ssh, my custom_ui used to be in /config/www/custom_ui.

Is that /local at the same level as /config or is it within /config such as /config/local?

Thanks

Mariusthvdb · September 19, 2020, 8:42pm

/local/ == /config/www/

SylvainGa · September 19, 2020, 9:00pm

Thanks, that’s what I was missing to fix my problem. Now my colored icons are back

SylvainGa · September 20, 2020, 1:04am

So, my logs at startup shows this now:

2020-09-19 20:46:06 ERROR (MainThread) [frontend.js.latest.202009171] https://192.168.2.84:8123/local/custom_ui/custom-ui.js line 1533 > Function:3:65 TypeError: entities['sensor.foyer_powermonitor_energy_apparentpower'] is undefined
2020-09-19 20:46:06 ERROR (MainThread) [frontend.js.latest.202009171] https://192.168.2.84:8123/local/custom_ui/custom-ui.js line 1533 > Function:3:5 TypeError: entities['sensor.tvcavepower_energy_apparentpower'] is undefined

Those two entities do exist has is seen here for foyer_powermonitor. They are from MQTT discovered devices.

Mariusthvdb · September 23, 2020, 7:23pm

judging from the error, you might have an incorrect customization. please post it here in correct code block.

you probably need

entities['sensor.foyer_powermonitor_energy_apparentpower'].state

Banditen01 · September 23, 2020, 9:46pm

Tx @Mariusthvdb , keep up the good work, can confirm it also works with HACS as Custom repositories, also have made myself addicted to @andrey solution. Thumbs up to both of You.

SylvainGa · September 24, 2020, 1:03am

Thanks for the reply, here’s the complete code from customized.yaml:

switch.foyer_powermonitor:
  templates:
    icon: "return 'mdi:fire';"
    icon_color: "if (state == 'unavailable') return 'rgb(193,193,193)'; else if (entities['sensor.foyer_powermonitor_energy_apparentpower'].state < 30) return 'rgb(54, 95, 140)'; else if (entities['sensor.foyer_powermonitor_energy_apparentpower'].state < 100) return 'rgb(251,210,41)'; else return 'rgb(217,20,20)';"

Mariusthvdb · September 24, 2020, 7:18am

this would work

homeasistant:
  customize:

    switch.foyer_powermonitor:
      icon: mdi:fire
      templates:
        icon_color: >
          if (state == 'unavailable') return 'rgb(193,193,193)'; 
          if (entities['sensor.foyer_powermonitor_energy_apparentpower'].state < 30) return 'rgb(54,95,140)';
          if (entities['sensor.foyer_powermonitor_energy_apparentpower'].state < 100) return 'rgb(251,210,41)';
          return 'rgb(217,20,20)';

SylvainGa · September 24, 2020, 8:44pm

So replacing the else if buy just if since they are all returning a value therefore the else if aren’t necessary. I’ll give it try.

Mariusthvdb · September 24, 2020, 8:49pm

Not really sure what you’re saying here, but the icon wasn’t a template, and the other stuff is just regular js, where the ‘else’ is never needed in this form of template.

SylvainGa · September 25, 2020, 12:03am

LOL, yeah, I’ll rephrase. Reading it again gave me a seizure, lol

So you’re replacing the else if statements by simply if statements since they are all returning a value, hence ending the if code. The else statement isn’t necessary for the same reason. I’ll give it try.

That’s what I thought you meant. Now I understand you meant something completely different lol. So, you’re saying that in the code I posted earlier, the templates: statement above icon: doesn’t apply to the icon_color statement below it?

Mariusthvdb · September 25, 2020, 7:51am

well, no, I dont think that’s what I tried to say.
You’re customizing the sensor with a fixed icon, so it shouldn’t be under the 'templates:' key
of course, if you do want a state dependent icon, you’d have to put in under the templates: key . But that’s not what your first post suggested…

but, why don’t you try it, hit reload customizations and see if this is what you need.

SylvainGa · September 25, 2020, 8:53pm

To keep the email short, I only posted one sensor. Probably chose a bad one. I have another one with a template in the icon itself, like this:

switch.catherine_tv_power:
  templates:
    icon: "if (state == 'on') return 'mdi:television'; else return 'mdi:television-off';"
    icon_color: "if (state == 'unavailable') return 'rgb(193,193,193)'; else if (state == 'on') return 'rgb(251,210,41)'; else return 'rgb(54, 95, 140)';"

Mariusthvdb · September 25, 2020, 8:58pm

And what’s your point with it? I showed you how to properly write it.

SylvainGa · September 26, 2020, 1:52am

There was no point to make. Just to answer why I had templates: before the icon: line.

I did write the code like you mentioned but all the ...energy_apparentpower are still behaving the same way as before. Just to be sure, I rewrote all the lines in customized.yaml like you showed. All other entities within that file aren’t producing any errors.

Those devices are Tasmota devices with power reading learned through MQTT autodiscovery if it matters.

2020-09-25 21:45:10 ERROR (MainThread) [frontend.js.latest.202009180] http://192.168.2.84:8123/local/custom_ui/custom-ui.js line 1533 > Function:3:61 TypeError: entities['sensor.foyer_powermonitor_energy_apparentpower'] is undefined
2020-09-25 21:45:10 ERROR (MainThread) [frontend.js.latest.202009180] http://192.168.2.84:8123/local/custom_ui/custom-ui.js line 1533 > Function:3:61 TypeError: entities['sensor.foyer_powermonitor_energy_apparentpower'] is undefined
2020-09-25 21:45:10 ERROR (MainThread) [frontend.js.latest.202009180] http://192.168.2.84:8123/local/custom_ui/custom-ui.js line 1533 > Function:3:61 TypeError: entities['sensor.foyer_powermonitor_energy_apparentpower'] is undefined
2020-09-25 21:45:10 ERROR (MainThread) [frontend.js.latest.202009180] http://192.168.2.84:8123/local/custom_ui/custom-ui.js line 1533 > Function:3:61 TypeError: entities['sensor.foyer_powermonitor_energy_apparentpower'] is undefined
2020-09-25 21:45:10 ERROR (MainThread) [frontend.js.latest.202009180] http://192.168.2.84:8123/local/custom_ui/custom-ui.js line 1533 > Function:3:61 TypeError: entities['sensor.foyer_powermonitor_energy_apparentpower'] is undefined
2020-09-25 21:45:10 ERROR (MainThread) [frontend.js.latest.202009180] http://192.168.2.84:8123/local/custom_ui/custom-ui.js line 1533 > Function:3:61 TypeError: entities['sensor.foyer_powermonitor_energy_apparentpower'] is undefined
2020-09-25 21:45:10 ERROR (MainThread) [frontend.js.latest.202009180] http://192.168.2.84:8123/local/custom_ui/custom-ui.js line 1533 > Function:3:61 TypeError: entities['sensor.foyer_powermonitor_energy_apparentpower'] is undefined
2020-09-25 21:45:10 ERROR (MainThread) [frontend.js.latest.202009180] http://192.168.2.84:8123/local/custom_ui/custom-ui.js line 1533 > Function:3:5 TypeError: entities['sensor.tvcavepower_energy_apparentpower'] is undefined
2020-09-25 21:45:10 ERROR (MainThread) [frontend.js.latest.202009180] http://192.168.2.84:8123/local/custom_ui/custom-ui.js line 1533 > Function:3:5 TypeError: entities['sensor.tvcavepower_energy_apparentpower'] is undefined
2020-09-25 21:45:10 ERROR (MainThread) [frontend.js.latest.202009180] http://192.168.2.84:8123/local/custom_ui/custom-ui.js line 1533 > Function:3:5 TypeError: entities['sensor.tvcavepower_energy_apparentpower'] is undefined
2020-09-25 21:45:10 ERROR (MainThread) [frontend.js.latest.202009180] http://192.168.2.84:8123/local/custom_ui/custom-ui.js line 1533 > Function:3:5 TypeError: entities['sensor.tvcavepower_energy_apparentpower'] is undefined
2020-09-25 21:45:10 ERROR (MainThread) [frontend.js.latest.202009180] http://192.168.2.84:8123/local/custom_ui/custom-ui.js line 1533 > Function:3:5 TypeError: entities['sensor.tvcavepower_energy_apparentpower'] is undefined
2020-09-25 21:45:12 ERROR (MainThread) [frontend.js.latest.202009180] http://192.168.2.84:8123/local/custom_ui/custom-ui.js line 1533 > Function:3:5 TypeError: entities['sensor.tvcavepower_energy_apparentpower'] is undefined
2020-09-25 21:45:12 ERROR (MainThread) [frontend.js.latest.202009180] http://192.168.2.84:8123/local/custom_ui/custom-ui.js line 1533 > Function:3:5 TypeError: entities['sensor.tvcavepower_energy_apparentpower'] is undefined

Mariusthvdb · September 26, 2020, 9:40am

not sure, but without your actual templates, we can t do much. The error still seems to indicate you have an undefined entity (which is a correct error message, and mostly user error in the template guard). Meaning if it is at all possible the entities you try to customize are not yet available at startup, you need to add a ‘guard’ for that.

Of course it could also be a user error, which most like is the omission of the .state

You could also have a look in the Chrome inspector, which most of the time reveals what’s wrong with the entity you are trying to use.

You say, a startup. Does this mean after that the error goes away, and the customizations works as expected?