CustomUI in Home Assistant 0.53

Configuration
1

As you might have seen in the release notes, Home Assistant 0.53 brings a breaking change with regard to using custom UI

  1. Upto version 0.52 custom state-card elements had to start with “state-card” and you used to put the suffix into custom_ui_state_card. For example: custom_ui_state_card: custom-ui
    Starting from version 0.53 the state-card elements can have any name, so you should put the full element name into custom_ui_state_card attribute. For example: custom_ui_state_card: state-card-custom-ui

  2. Upto version 0.52 custom_ui_state_card attribute also loaded the relevant HTML file from /local/custom_ui/<element_name>.html
    Starting from version 0.53 you need to load the HTML separately:

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

If you are using my custom ui - Please upgrade to the latest version (20170909) in order to work with Home Assistant 0.53

1 Like
2

Hi @andrey,

In my case i’m using a customize folder, and inside i have differents customize files for each group (device_tracker, sensors, etc)

In that case how i need to do it that all works in HA 0.53?

This is my configuration.yaml file:

#  customize: !include customize.yaml
  customize: !include_dir_merge_named customized

# Show links to resources in log and frontend
#introduction:

thanks

3

This is not directly supported, as the backend-edited customization.yaml must reside in the root of the config dir.
What you can do is something like:

homeassistant:
  customize_glob: !include_dir_merge_named customized
  customize: !include customize.yaml

#introduction:

This way your manual yaml files will be treated as globs (extra easy writing!)
And Home Assistant can edit customize.yaml

4

@andrey

I’m not sure what I’m doing wrong (there’s a surprize! :wink: )

I updated to 0.53.1 in hassbian.

I then followed the directions at your github for updating CustomUI using the automatic local method.

The files are all up to date (re-ran the update.sh file once more to verify). I even opened the state-card-custom-ui.html and the version there says “20170910”

I updated my configuration.yaml file following the activation instructions at your github using the manual local method:.

    customize: !include customizations.yaml    
    customize_glob:
       "*.*":
        custom_ui_state_card: state-card-custom-ui
    ....
    frontend:
      extra_html_url:
        - /local/custom_ui/state-card-custom-ui.html

Now none of my entities show up in my created groups. They worked before.

If I comment out the above lines (except for ‘frontend:’) it all shows back up but without the CustomUI customizations.

No errors show up in the home assistant log.

5

Any errors in browser dev tools? (Ctrl+shift+I)

6

only 1 warning:

paper-drawer-panel is deprecated. Please use app-layout instead! ready @ frontend-6b0a95408d9ee869d0fe20c374077ed4.html:57

7

I think I’m going to say that it is (tentatively) solved.

I saw in the comments section of the release announcement that someone recommended to clear the browser cache to fix a (possibly?) similar problem using ctrl-F5.

I did that and reloaded HA and everything came back including the CustomUI stuff.

But then I reloaded again and it all went away again.

Then I went to the ‘settings’ page and cleared all browsing data (including cookies) and now I’ve reloaded HA several times and it is all working again…for now.

I did it on a second PC that was also not displaying correctly and I initially cleared all browsing data EXCEPT cookies but when I reloaded again the CustomUI stuff disappeared again. I cleared everything again this time including cookies and it now seems to be working on that PC, as well.

8

And one more question…

in the CustomUI Panel it is asking you to set a ‘device name’.

What device is that referring to?

9

Thanks for letting us know :+1:t3:

BTW, any change of looking at my question on Custom UI here?

I’m not even sure if what I’m wanting to do is possible :slight_smile:

10

Am I right in assuming that we don’t need to load the extra_html_url if we are using the hosted version? I have the following in my config and don’t have the extra_html_url part and everything is still working.

customizer:
  custom_ui: hosted
  hide_attributes:
    - node_id
    - value_index
11

Yes, customizer loads the URL for you.

12

Hi, thanks for all your work on this! I do seem to have a few issues. I don’t think they’re related, but maybe I’m missing something.

When using this, two (hue) lamps get “linked”, so when I turn one on/off/change color etc., the other copies it. I use a customize_glob:

light.*:
 custom_ui_state_card: state-card-custom-ui
 state_card_mode: single-line
 stretch_slider: true
 slider_theme:
   min: 10
   max: 255
   pin: true
   off_when_min: false
   report_when_not_changed: false

And as soon as I commment out the !include customize_glob in the config, they work fine (independently) again.

The other issue is that I don’t get a customizer panel shown. I’ve included the following to the config:

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

I’ve only used it for lights, but everything else I’ve tried works just fine. I have installed the files locally with your script, and I’m on version 20170927 (on HASS v0.54.0 on a RPi3 in virtualenv). Any ideas?

Cheers

13

You don’t need both

frontend:
  extra_html_url:

and

customizer:
  custom_ui: local

The panel is now a sub-page of the config panel which you must enable in configuration.yaml as:

config:

I should update the screenshot…

As to linked lights - I have no idea - try to make the minimal config that still causes the problem:
Could slider_theme be removed?
What if you apply state-card-custom-ui to just those two light? What if you apply it to just 1 light?

14

Sure enough, removing the slider_theme “unlinks” the lights. More specifically, when it is applied to one of the lights (bedroom light), it acts up.

But I think it was actually an error in one of the hue apps. Here the bedroom light was set to the living room group, and the other “linked” light was set to bedroom. So not an issue with your custom ui, that works perfectly. The issue with the discrepancies between two hue apps just, weirdly, only manifested when using the slider_theme on the bedroom light.

Thanks for the troubleshooting suggestions!