Mariusthvdb / custom-ui

Add templates and icon_color to Home Assistant UI
161 stars 30 forks source link

Struggling to get custom-ui to work #108

Closed nickdos closed 10 months ago

nickdos commented 10 months ago

I've installed via HACS and can see it is loaded via /info page:

image

I've got a customise.yaml file configured from configuration.yaml as

homeassistant:
  customize: !include customize.yaml

In customize.yaml I've got:

sensor.easyweather_uv_index:
  templates:
    icon_color: >
      if this.state|int(default=0) > 0 return 'red';
      if this.state == '5' return 'green';
      if this.state == '6' return 'orange';
      if this.state == '7' return 'red';
      return blue;

I've done a full restart of HA after changes.

In developer tools I can see the entity as:

image

In my Lovelace UI the entity does not show any colour in either a entities list or glances card:

image image

Am I missing some last step?

Mariusthvdb commented 10 months ago

dont use this.state but state in the templates and surround the statements with ( ) parentheses. Please check the examples how to write the correct format

also dont mix other jinja specific things like the |int(default=0). If you have a string and need to evaluate it as a number, just use parseFloat() on it

        icon_color: >
          var vol = parseFloat(state);
          if (vol === 0.0) return 'gray';
          if (vol <= 0.3) return 'dodgerblue';
          if (vol <= 0.6) return 'green';
          if (vol <= 0.8) return 'orange';
          return 'firebrick';

my uv color template ( I dont need the parseFloat):

      uv_color: &uv_color
        hide_attributes: templates
        templates:
          icon_color: >
            if (state < 3) return 'green';
            if (state < 4) return 'gold';
            if (state < 5) return 'orange';
            if (state < 6) return 'darkorange';
            if (state <= 7) return 'orangered';
            if (state > 7) return 'red';
            return 'grey';

and set it on any other _uv_index entity with:

  customize_glob:
    sensor.*_uv_index: *uv_color
nickdos commented 10 months ago

Thanks for clarifying. Ah yes, a newbie mistake.

I did take all the code from the examples page but failed to appreciate there were differences between the way it is called depending on the context. I now see I went straight for the first example code I found in the examples page and failed to recognise the syntax was different to the bits further down.

I'm now not able to get the resources to reload. I can't find a "Reload resources" option in the Lovelace 3 dots menu (only has "edit dashboard" and if in edit mode only shows 4 options, none of what are "reload resources"). When I try to call the service: "lovelace.reload_resources" it does nothing and I see JS errors in the console counting up with every click of the button (Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'this.hass.services[a][s]')). It also does not autocomplete the Lovelace service name, as it does for other services. When I try the YAML mode in Services I see a different JS error: Failed to load resource: the server responded with a status of 404(). Has this changed in a recent HA update?

The only way I was eventually able to reload it was going into the "Manage Resources" section of the UI and clicking on the custom-ui entry and then selecting the "update" button. EDIT: this only seems to work occasionally - full restart seems to be only way to get changes to YAML file to be reflected. That applies to reloading all YAML configuration and doing the "update" in manage resources, as well.

Mariusthvdb commented 10 months ago

not seeing the 3-dots menu items is no custom-ui interference, they are not touched.

Scherm­afbeelding 2023-10-03 om 23 11 54 Scherm­afbeelding 2023-10-03 om 23 13 16

probably card_mod, or maybe kiosk-mode?

you seem to have more generic resource trouble, maybe take that to the community or create an issue tracker in the core / frontend repo if you can provide more useful loggings.

fwiw, reload resources is available with custom-ui in all the places it should be, and I believe we can close this here?

nickdos commented 10 months ago

I believe that lovelace.reload_resources is only active when using YAML mode for Lovelace configuration. If using the UI configuration, then it is not available. Similarly the "reload resources" option in the UI is NOT PROVIDED when using UI mode.

I think you should update your documentation to reflect the differences in using YAML vs UI mode for Lovelace settings. Most newer users will be using UI mode as that is the default setting.