HA 0.110.2: Extra badge does not show up

[drew1kun]

Checklist

• I'm running the latest version of CustomUI (Update guide) or using a specific release that is not marked as "Broken".
• I tried to force-refresh (Ctrl+Shift+R / Ctrl+F5) the browser
• (Optional, but recommended) I'm using Chrome or tried to reproduce the feature on Chrome.

Browser + Version:
Chrome 81.0.4044.138 (Official Build) (64-bit)

CustomUI version:
20190518
Home Assistant release (hass --version):
0.110.2
Problem-relevant configuration.yaml entries:

customizer:
  custom_ui: local

frontend:
  themes: !include_dir_merge_named themes/
  extra_html_url:
  - https://raw.githubusercontent.com/andrey-git/home-assistant-custom-ui/master/state-card-custom-ui-dbg.html
  extra_html_url_es5:
  - https://raw.githubusercontent.com/andrey-git/home-assistant-custom-ui/master/state-card-custom-ui-dbg-es5.html

homeassistant:
  customize:
    light.gateway:
      custom_ui_state_card: state-card-custom-ui
      extra_badge:
        entity_id: sensor.gateway_illumination

ui-lovelace.yaml

cards:
- type: vertical-stack
  title: Living Room Controls
  show_header_toggle: false
  cards:
  - type: entities
    title: Lights and Switches
    entities:
    - light.gateway

Expecting extra badge here:

Problem-relevant Home Assistant log entries:

no any related entires noticed

Any errors from browser Javascript console:

no any related entires noticed... But here is a screenshot just in case..

[Mariusthvdb]

extra_badge is long gone, and was designed for HA States, not for Lovelace.
btw If you want to keep coloring your icons, you need the state-card-custom-ui.html I changed, which is available in the Pull requests section of this repo. All other files can be taken out.

for your extra badge, you can have a look at https://github.com/benct/lovelace-multiple-entity-row
which allows you to do this:

as for your setup, you should only use this:

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

or:

customizer:
  custom_ui: local

and take out all other mentions of state-card in the bits you posted above.

I suggest not using customizer though, because it does nothing more than the frontend option now that the other functionality is no longer use, and it causes a warning in the log you are using an unsupported custom integration...

[drew1kun]

Oh, I see... Gotcha.. You are using the multiple-entity-row here.. I am aware of that, just wanted something new, like badge, lol. So the documentation for custom-ui is not clear about the badge.

Thank you very much for clarifying this.

So you mean the only feature of the custom-ui left is colorizing the icons and probably text?
And therefore I can remove everything from my /config/www/custom_ui/ except state-card-custom-ui.html from the following pull request. Is that right?
And so can I remove the /config/custom_components/customizer completely then?

Btw, which brand switches are you using here on your screenshot above?

[Mariusthvdb]

no, many other things can still be customized using the template functionality custom-ui offers.
Only specific states ui options are no longer available, simply because homeassisant doesnt use them any longer, or has another way of doing things. Like with the icon_color recently after HA 110.
Eg you can still see a theme via custom-ui on an entity, and the more info window on that entity will show the correct template. Its just that Lovelace doesnt support entity theming... so its useless. for now.

and yes, if you use the frontend method, you can completely remove customizer.

the pull request isn't merged, and probably never will, because the complete repo isn't maintained any longer.

Im am hoping we can have a modern custom-ui.js version anytime in the future, since both Bram and Thomas have been helping me using the legacy custom-ui work with ha 110, and I am sure they see the power ;-)

My switches are Z-wave switches that are connected to HA via Mqtt.

[drew1kun]

Gotcha! Thank you for elaborating this... I actually noticed that my battery level icons are not being colorized any longer (((.

I have tried what you suggested, completely removed the customizer and downloaded the state-card-custom-ui.html from your repo patch-1 branch but they are still not colorized (((

Here is what I have:

configuration.yaml

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

homeassistant:
  customize:
    sensor.bedroom_t_h_p_battery:
      custom_ui_state_card: state-card-custom-ui
      templates:
        # Following changes the text color in details window,
        # when clicking on sensor in UI, according to custom themes/alert.yaml:
        theme: if (state <= 10) return 'alert_red'; else if (state <= 30) return 'alert_yellow';
        # Following changes the sensor's lovelace icon color:
        icon_color: >
          if (state <= 10) return 'rgb(220, 76, 64)'; else if (state <= 30) return 'rgb(248, 192, 30)';

themes/alert.yaml

alert_yellow:
  primary-text-color: '#FFC100'     # Solarized Yellow
  paper-item-icon-color: '#FFC100'  # Solarized Yellow
alert_red:
  primary-text-color: '#DC312E'     # Solarized Red
  paper-item-icon-color: '#DC312E'  # Solarized Red

Result (still no color - why is that?):

But when I click on the sensor icon (it's colorized, so the theme seems to be applied, or am I wrong?):

Any ideas what may be wrong then?

And yes, I know you said that lovelace does not use themes, but why then I see the colorized yellow icon when clicking on sensor?

[Mariusthvdb]

which version HA are you using?

change some of the syntax below, you had some dangerous 'else' clauses, creating diffuculties when the state would be above 30. Ive added the new 'else' line as 3d line: return 'grey': No need for the word 'else' there.

homeassistant:
  customize:
    sensor.bedroom_t_h_p_battery:
      # custom_ui_state_card: state-card-custom-ui  <-- take out this
      templates:
        # Following changes the text color in details window,
        # when clicking on sensor in UI, according to custom themes/alert.yaml:
        theme: >
          if (state <= 10) return 'alert_red'; 
          if (state <= 30) return 'alert_yellow';
          return 'grey';
        # Following changes the sensor's lovelace icon color:
        icon_color: >
          if (state <= 10) return 'rgb(220, 76, 64)';
          if (state <= 30) return 'rgb(248, 192, 30)';
          return 'grey';

not sure tbh, maybe the theme takes precedence over icon_color, you can check that in line 27 (which is enormously long....)

fyi, I had just finished this question to the main frontend dev Bram: home-assistant/frontend#6035 (comment)

[nolenjohan]

I changed the "state-card-custom-ui.html" as per instructions elsewhere on Github after release of 0.110.0 , works fine now with colors, using 0.110.2 as of now:

Code:

[Mariusthvdb]

great, as we made it work!
glad its working out for you.

note you can replace all triple ='s for doubles. == works in all templates.
and, as mentioned in the post above yours, you can take out the 'else' on the last line of your template.

makes it a bit snappier, and, if you have many, like I do, you customizations that much shorter ;-)

[drew1kun]

I use HA 0.110.1, sorry, for some reason I thought it's 0.110.2, but I guess your version of state-card-custom-ui.html should work with this version too..

I tried the code you proposed and now it even stopped colorizin the details window:

See, it's not yellow anymore so I guess there is some missing part of the configuration, or
custom_ui_state_card: state-card-custom-ui is still kinda needed in my case for some reason?

And I thought, if I do not use something like return 'grey'; at the end of templating, it should automatically pick the main theme color (which changes when the theme changes)... At least it worked this way long ago... before 0.106 I guess (I may be wrong though)...

[nolenjohan]

@drew-kun

Have you tried another browser? In case of severe caching issue?
Your "state-card-custom-ui.html" is correctly updated within the code?

[nolenjohan]

and yes, you still need this in "configuration.yaml":

[Mariusthvdb]

in anyway, dont use both theme, and icon_color.

Ive updated the Pull request file, so it reflects the correct version:
200225-adapted-for-HA110+

inspector:

so you know its loaded alright ;-)

And I thought, if I do not use something like return 'grey'; at the end of templating, it should automatically pick the main theme color (which changes when the theme changes)

you should always and everywhere take care for errors or unexpected outcomes. That's what the else is for. A guard.

[drew1kun]

Yeah, testing it on Chrome and Android app, which updates pretty good... Also, just updated to 0.110.2 but still the same issue.

[Mariusthvdb]

you should post this in the other thread really, as this is about the extra badge, and your question is on activating custom-ui.
Just because this repo is no longer maintained, we shouldn't abuse the threads .....

[nolenjohan]

Ive updated the Pull request file, so it reflects the correct version:
200225-adapted-for-HA110+

Do you have a link to that?

[Mariusthvdb]

Ive updated the Pull request file, so it reflects the correct version:
200225-adapted-for-HA110+

Do you have a link to that?

https://github.com/andrey-git/home-assistant-custom-ui/blob/3bef7470dadea6fb93d37ced0ed521e0b34db02d/state-card-custom-ui.html

[drew1kun]

you should post this in the other thread really, as this is about the extra badge, and your question is on activating custom-ui.
Just because this repo is no longer maintained, we shouldn't abuse the threads .....

Ok, guys, sorry. Closing this. Will open the new issue soon. Thank you.