Ha 110 no longer supports custom-ui?

Depending on your devices, you can probably also take out the es5 file. It isn’t used any longer by modern devices. And, it isn’t changed so would not work if used without the same hack;-)

EDIT: Removed everything from /config/www/custom_ui/and only left state-card-custom-ui.html. It’s working again :slight_smile:

EDIT2: Went back to my original configuration.yaml file where I only have

homeassistant:
  customize: !include customize.yaml

where the file customize.yaml was NOT modified (doesn’t even have that customize_glob or custom_ui_state_card: state-card-custom-ui in it) and it still works so I’m a happy camper.

You can ignore what’s below this line :slight_smile:


I can’t get it to work :frowning:

I’ve changed the original /config/www/custom_ui/state-card-custom-ui.html file to the file Mariusthvdb has in his github (had to copy the whole file and paste it in the supervisor file editor because I couldn’t find a way to grab the file directly)

Here’s the relevant lines in my /config/configuration.yaml:

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

homeassistant:
#  customize: !include customize.yaml   <- My old method of customization
  customize_glob:
    switch.ventilateursalonalimentation:
      custom_ui_state_card: state-card-custom-ui
      templates:
        icon: "return 'mdi:fan';"
        icon_color: "if (state == 'unavailable') return 'rgb(193,193,193)'; else if (entities['input_number.ventilateur_salon_speed'].state < 1.0) return 'rgb(54, 95, 140)'; else if

custom_ui_state_card: state-card-custom-ui makes no difference wether it’s their or not.

When I click the fan icon, its color changes from its off color to yellow, then back to its off color. Before, the fan color would change to the color defined for that speed. It’s not just that one item that it doesn’t work, all my customized icons are no longer changing their color correctly.

Here’s a simpler one that also doesn’t work:

    remote.harmony_hub:
      custom_ui_state_card: state-card-custom-ui
      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)';"

This used to work perfectly before this dreaded 0.110 update :rage:

Thanks for your help

Trying to understand your post… I take it it’s working now? Glad if you did!

Do note that below the line your config was all sorts of wrong, so it shouldn’t have worked :wink:

Eg, the glob customize isn’t a glob at all but an entity, and you don’t need to set the state-card-custom-ui at all and the final else is unfinished

Anyways , hope you understand what it takes now , if not, let us know

Yeah, it’s working now, except from the app connected to Nabu Casa. That one still not showing the icon color. Trying to figure that one out right now.

What should have had in my config for it to work?

Edit: I had to forcibly close the App (Android) and relaunch it for it to have the icon colors again. Simply clearing the app cache didn’t work.

Mariusthvdb, out of topic question: Which card did you use to get the printer to display its status and ink level?

check here: Lovelace: Bar Card - #518 by Mariusthvdb

New dark shadows: https://github.com/home-assistant/frontend/issues/6028#issuecomment-633425615

we already new that extra_html_url were no longer advised, hence my remark in this thread and elsewhere to load custom_ui via the customizer option:

customizer:
  custom_ui: local

I fear though, and hence my contribution to the discussion started by Balloob in the link, that the customizer route will be frustrated too…

and those shadows have been resolved too!

as explained here https://github.com/home-assistant/frontend/issues/6028#issuecomment-633531546
we can use

frontend:
  extra_module_url:
    - /local/custom_ui/state-card-custom-ui.js

to be able to do so, edit the state-card-custom-ui.html as Ive explained earlier, to have it use the new icon handling in HA110.

added to that, delete the opening on the last line (delete the last line is what I did…)

of course, rename to state-card-custom-ui.js and restart.

since this is no longer a real PR on the original file I havent yet issued it on the custom-ui repo.
You can manually add a small edit in the line 27 (search for the date) so it reflects the new Custom-ui JS in the developer-tools/info and inspector like:


and

light_level sensors from the example a top of this thread:

as a followup, and better way of installing, see my dedicated repo
Now load custom_ui as resource, and no longer need frontend:

1 Like

Hero! Thank you and everyone involved!

That did the trick for me.
Just moddifying the html file was not enough.

I think I may have figured out the more-info attributes hiding using Customizer for Lovelace. It isn’t pretty right now, but it works for me. If anyone wants to try it out you can find it on my github: CustomUI Fork

To install:

  • Overwrite your custom-ui.js with the one in my repo.

  • Increment the version number on the Lovelace resource and/or clear your cache.

  • Set up Customizer and add the hide_attributes to the configuration file. I added in all as a valid option in the config file to remove all attributes from the more-info popups.

Example configuration.yaml entry:

customizer:
  hide_attributes:
    - all
    - node_id
    - value_index
    - value_instance
    - value_id

Let me know if it works on your end.

exactly where did you change what? cant seem to find the diff…

The mini-fied JS makes it tough. I put it in an easily readable form in the PR for you on GitHub.

For this we have to use customizer?
The can‘t use it with the resources method?

yes, use customizer, which is a custom component. regular CC install method.

thanks, but it still is not very easy to see what you added?

Check out this commit. I un-minified and then made the changes to make it easier to read.

I updated my repo and removed Customizer as a requirement.

Attributes to be hidden are now set in customize.yaml and customize_glob.yaml. If hide_attributes is set in YAML, the hide attributes node will automatically be hidden, does not need to be explicitly defined. all is a valid option to hide all attributes.

Example (customize.yaml):

input_boolean.development:
  hide_attributes:
    - editable

Example (customize_glob.yaml):

"*.*":
  hide_attributes:
    - all

Change Log:

  • I removed the useCustomizer() function.
  • I removed the useCustomizer() call on init() , replaced that with the listener for my new function: window.addEventListener("hass-more-info", window.customUI.updateMoreInfo)
  • I added my new function: updateMoreInfo which is what handles the hiding of attributes. I changed this from removing the div to changing the display style to none.
1 Like

I tried this. But now I have the following: