Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HA 0.110.2: Extra badge does not show up #187

Closed
3 tasks done
drew1kun opened this issue May 26, 2020 · 16 comments
Closed
3 tasks done

HA 0.110.2: Extra badge does not show up #187

drew1kun opened this issue May 26, 2020 · 16 comments

Comments

@drew1kun
Copy link

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:
Screen Shot 2020-05-26 at 10 30 37 AM

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..

Screen Shot 2020-05-26 at 11 58 49 AM

@Mariusthvdb
Copy link

Mariusthvdb commented May 26, 2020

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:

Schermafbeelding 2020-05-26 om 12 41 27

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
Copy link
Author

drew1kun commented May 26, 2020

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
Copy link

Mariusthvdb commented May 26, 2020

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
Copy link
Author

drew1kun commented May 26, 2020

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?):
Screen Shot 2020-05-26 at 2 57 18 PM

But when I click on the sensor icon (it's colorized, so the theme seems to be applied, or am I wrong?):
Screen Shot 2020-05-26 at 2 57 36 PM

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
Copy link

Mariusthvdb commented May 26, 2020

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
Copy link

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:

image

Code:
image

@Mariusthvdb
Copy link

Mariusthvdb commented May 26, 2020

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
Copy link
Author

drew1kun commented May 26, 2020

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:
Screen Shot 2020-05-26 at 3 35 57 PM
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
Copy link

@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
Copy link

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

@Mariusthvdb
Copy link

Mariusthvdb commented May 26, 2020

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+

Schermafbeelding 2020-05-26 om 15 06 39

inspector:

Schermafbeelding 2020-05-26 om 15 07 24

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
Copy link
Author

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
Copy link

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
Copy link

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

Do you have a link to that?

@Mariusthvdb
Copy link

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants