Custom Header

aidbish · May 22, 2020, 2:08pm

That could be a separate issue. i think some things have changed with icons, your not running custom-iu by any chance?

Steven_Rollason · May 22, 2020, 2:53pm

I don’t think it is theme related, the theme I use (Google Dark Theme) doesn’t contain anything relating to icon size and I get the same issue with the default theme (with the only difference being that the icon is almost indistinguishable from the background due to the icon colour).

mayker · May 22, 2020, 4:13pm

With the change in the icon elements adding icons into button text has become problematic as you have seen. This will require a bit of work and since this isn’t really a supported feature it’s low on my list at the moment. Once everything else is stable I will be on it.

mayker · May 22, 2020, 4:36pm

With the next few updates of Custom Header I will be removing backwards compatibility. Meaning that moving forward all new versions will require 0.110 or above (anything past CH version ~1.4.5). This will likely speed things up and help immensely with development. If you choose to remain below HA 0.110 then you will need to use earlier versions of CH.

Duke_box · May 22, 2020, 4:57pm

Hi,

Thank you for your clarification and all your hard work - very much appreciated.

Steven_Rollason · May 22, 2020, 6:36pm

Thanks. I’ve actually found something which seems to work. You need to wrap the ha-icon with a div like this:

<div style='display:inline-block; height:32px; width:32px; vertical-align:middle;'><ha-icon icon='...'></ha-icon></div>

Using this in my config like this:

button_text:
  options: >-
    {{ hours12 }}:{{ minutesLZ }} {{ AMPM }} - <div style='display:
    inline-block; height:32px; width:32px; vertical-align:middle;'><ha-icon icon='mdi:weather-{%-
    if is_state('weather.dark_sky', 'partlycloudy') -%}partly-cloudy {%- elif
    is_state('weather.dark_sky', 'clear-night') -%}night {%- else
    -%}{{states('weather.dark_sky')}}{%- endif -%}'></ha-icon></div>
      {{states.weather.dark_sky.attributes.temperature }}°

Gives me this in my header:

mayker · May 22, 2020, 6:37pm

Excellent, thanks for that. I’ll be sure to share this with folks asking about it on github and other places as well.

Mariusthvdb · May 22, 2020, 6:48pm

is this because of CH updates, or because of HA 110.+ ?
I ask because I use this:

button_text:
  options: >-
    {% if is_state('input_boolean.ch_use_options_text_template','on')%}{{ time }} - <ha-icon icon='{{states('sensor.weather_icon')}}' style='vertical-align: middle';></ha-icon> - {{states('sensor.temp_current') }}°
    {% endif %}

and the options section is displayed as expected?

Steven_Rollason · May 22, 2020, 7:01pm

I believe it’s related to the changes in how HA 110 handles icons, as other cards and integrations have also had issues with large icons.

Mariusthvdb · May 22, 2020, 7:04pm

ok, sorry, had just clicked Reply…

will note your suggestion thanks.
And Ryan, my question on 145 compatibility with 109.6 is answered… (mentioned it on the Repo, so never mind( Will keep my eyes on the error and report back. https://github.com/maykar/custom-header/issues/159

Duke_box · May 22, 2020, 9:51pm

Hi,

Thanks - works a treat.

custom_header:
  button_text:
    options: >-
      {{ hours12 }}:{{ minutesLZ }} {{ ampm }}<br><div
      style='display:inline-block; height:22px; width:22px;
      vertical-align:bottom;'><ha-icon icon='mdi:weather-{% if
      is_state("weather.barfield", "partlycloudy") -%}partly-cloudy{%- else
      -%}{{ states('weather.barfield')}}{%- endif %}'></ha-icon></div>
      {{states.weather.barfield.attributes.temperature }}°
  compact_mode: true
  default_tab: '0' `

I agree it is HA 0.110.x change in how it handles icons.

many thanks for your solution.

Mariusthvdb · May 23, 2020, 7:32am

Sorry to have to get back on this: though no formal issues in logger are displayed using 1.4.5 on Ha 109.6 causes issues in a terribly slow and sometimes unresponsive interface. Even my Hue light go back to unavailable, indicating timing issues of sorts.
Went back to 1.3.8 and all things well

celeritas0725 · May 23, 2020, 11:22am

You’re correct. Something’s wrong when I access the console even after reinstalling custom-header and restarting HA. Refresh tab and it’s working. My problem is that my previous configurations were not working

sbmlat · May 23, 2020, 2:01pm

Recently I noticed bunch of following errors in Chrome console. Any tips to resolve these errors?

CUSTOM-HEADER Version 1.4.5
Home Assistant 0.109.6

Uncaught TypeError: Cannot read property 'querySelector' of undefined
    at styleHeader (custom-header.js:596)
    at Function.processAndContinue (custom-header.js:596)
    at unsub.subscribeRenderTemplate.template (custom-header.js:596)
    at Object.r.subscribeMessage.type [as callback] (custom-header.js:1)
    at l._handleMessage (connection.js:150)
    at WebSocket.<anonymous> (connection.js:30)

mayker · May 23, 2020, 2:04pm

Upgrade HA to 0.110 or downgrade CH to 1.3.8 (or another version earlier than 1.4.5)

sbmlat · May 23, 2020, 2:13pm

Sure. I will upgrade to 0.110. I usually wait for a few more releases before I upgrade. (ex: 0.110.3 or 0.110.4)

Btw, do you have an answer to this question?

mayker · May 23, 2020, 2:30pm

I’m not quite sure what you’re asking. User2 has disabled_mode: true so the default UI is what they should be seeing. Is this changing for User 2 when the input_boolean.ha_ui.state is switched?

sbmlat · May 23, 2020, 3:33pm

Duah. My bad. I didn’t realize that I set disabled_mode to true for the second user. Thank you for pointing this out.

Btw, I upgraded to the latest HA version. Now I see a big icon (button_text) as others mentioned in this thread. I cleared the cache.

Yoinkz · May 23, 2020, 5:15pm

Nice! Thanks for sharing!

mayker · May 23, 2020, 5:38pm

The fix for this is mentioned above in Steven_Rollason’s post. This is due to the icon changes in 0.110 and requires the icon to be wrapped in a div.