Custom Header

[Mariusthvdb (Marius)]

thanks!

this seems to work also:

active_tab_color: black
tab_indicator_color: black
tabs_color:
  phones_tablets: >-
    {{state_attr('sensor.family_home','icon_color')}}

both active tab icon and indicator are black, except for the tabs color phones_tablets, which follows the template.
FR: allow the indicator to be set as the tabs_color, so it would follow suit:

the naming of the options is a bit unsystematic as it is, might need some careful re-wording

[tom_l]

Is it possible to show both the view icon and view name with CH?

[Mariusthvdb (Marius)]

@mayker

triggering on every refresh of the page, but this seemed to have caused issues on some browsers. In the next release I will be making that fix configurable and off by default.

could this be the cause of the frequent and spontaneous refocussing of the header? As of late, my header keeps refocussing, seemingly without any obvious reason.

as a consequence, the browser (safari) started to warn again for high power usage. Only thing I can think of is the change in the CH in its iteration 1.1.5

[mayker (maykar (pronounced "maker" with a southern accent))]

Not yet:

Icons and text on tabs

[mayker (maykar (pronounced "maker" with a southern accent))]

Default tab triggers once so I do not believe this would cause any issues with memory. Even when using templates Custom Header only runs code when an entity in that template has changed or, if using a clock, once every minute. Aside from that it will run some styling when switching tabs or going into and out of configure ui mode. From my tests Custom Header takes very little resources to run.

[Mariusthvdb (Marius)]

Ok thanks for explaining. Ive updated to the 1.1.7 version now, and it seems to be much more stable. The constant moving about of the icons in the header is gone completely so it seems! which feels really very nice indeed.

Only thing I still see, and it was that way in CCH too, is when navigating from a badge or other card/entity to a tab that is out of view, it scrolls there alright, and then move the focus tab 1 out go view…

[mayker (maykar (pronounced "maker" with a southern accent))]

Does this happen when chevrons are turned off?

[Mariusthvdb (Marius)]

No I have chevrons on. Its a bit difficult to make a gif, because I use split mode…

which reminds me:

2019-12-30 16:19:42 ERROR (MainThread) [frontend.js.latest.201912041] https://redacted/local/lovelace/resources/custom-header.js?v=1.1.7:576:38185 TypeError: undefined is not an object (evaluating 'e.split_mode')

keeps showing in the log

[sbmlat (shreram)]

For some reason, following exception snippet not showing one tab (6) on my phone. Other tabs (0,1,4) show up fine. When I add additional tab (7th) then 6th tab shows up.

          {% else %} 0,1,4,6,7

What am I missing here?

There are no errors in the dev console.

  exceptions:
    - conditions:
        query_string: kiosk
      config:
        kiosk_mode: true
    - conditions:
        user_agent: Android
      config:
        disable_sidebar: false
        compact_mode: true
        reverse_tab_direction: true
        indicator_top: true
        hide_tabs: >
          {% if is_state('sensor.house_mode','Night') %}4
          {% endif %}
        show_tabs: >
          {% if is_state('sensor.house_mode','Darkhouse') %}0,1,2,4,6
          {% else %} 0,1,4,6
          {% endif %}
        footer_mode: true
        chevrons: false
        menu_dropdown: true
        button_text:
            options: >-
              <ha-icon icon='mdi:weather-{{
              states.weather.dark_sky.state }}'></ha-icon> {{
              states.weather.dark_sky.attributes.temperature }}°

[Mariusthvdb (Marius)]

Hi,

I may have been pushing the CH config somewhat, but ever since using the templates in the CH for the header text (marquee) and options button text with the weather icon and time, I notice worse system responsiveness, and see the Hue lights go unavailable again (which has become a warning signal for system timing issues …)

I’ve reverted to a rather basic setup again, with a few templated button icons and colors, and taken out split mode too, since that gives many errors (reported above)

I also noticed that because of the templates changing states (which is what they are supposed to do of course) the frontend needs to reload and the CH changes focus/position on these changes. It is rather difficult to describe scientifically, but easy to see, when one simply stays put on the page and have time do its thing.

Must experiment more to be able to up the ante here in precision feedback, but maybe you could have a look?

Another question: using default_tab_on_refresh: false the browser still navigates to the homepage on a refresh, while I hoped this would make it stay on the tab on which the refresh is pulled down (iPhone)? Isn’t that what this setting is for?

Hope you can have a look.

thanks!

[mayker (maykar (pronounced "maker" with a southern accent))]

@Mariusthvdb

I notice worse system responsiveness, and see the Hue lights go unavailable again (which has become a warning signal for system timing issues …)

Custom Header only operates on the front end and while adding more custom elements to the front end can slow the interface, Custom Header only updates on entity changes (ones used in CH templates) and/or every minute if you’re using a clock. These updates generally take milliseconds and would never have any effect on your Hue Lights.

@Mariusthvdb

the frontend needs to reload and the CH changes focus/position on these changes

When these changes happen while using the entirely unsupported feature of adding HTML to Custom Header text, you will notice that those animations restart/refresh (every minute if using a clock and on every entity change for entities used in CH templates). Otherwise the template info would never update.

@Mariusthvdb

while I hoped this would make it stay on the tab on which the refresh is pulled down (iPhone)

Disable Custom Header and I think you’ll find that the same thing happens when using the iOS app. I cannot override this.

@Mariusthvdb

No I have chevrons on. Its a bit difficult to make a gif, because I use split mode…

I was asking if this is still an issue if you turn chevrons off to help me track down the issue.

@Mariusthvdb

taken out split mode too, since that gives many errors (reported above)

I’m aware of the error, but just don’t have the time to work on Custom Header at the moment. Will be back at it soon.

[mayker (maykar (pronounced "maker" with a southern accent))]

Can you try:

        show_tabs: >-
          {% if is_state('sensor.house_mode','Darkhouse') %}0,1,2,4,6
          {% else %}0,1,4,6
          {% endif %}

[Sebastian_R]

How do I enable time and date in header??

[mayker (maykar (pronounced "maker" with a southern accent))]

I would suggest reading through the docs.

Adding header text is explained here and provides an example for a clock in header text, adding text to buttons is explained here and includes an example of a clock/date in button’s text, the templates section explains how to customize these things and also includes an example for a clock, found here.

[sbmlat (shreram)]

Ah, darn that white space character. From yesterday, first tab (0) is not showing up when I browse on mobile.

I am not sure if CCH is causing this or button card.

I have this entry in my config.

  split_mode: false

From Dev Console:

[sbmlat (shreram)]

Start from this solution and play around the variables.

Custom Header

Fixed for partlycloudy custom_header: button_text: options: >- {{ hours12 }}:{{ minutesLZ }} {{ AMPM }} - <ha-icon icon='mdi:weather-{% if is_state("weather.dark_sky", "partlycloudy") -%}partly-cloudy{%- else -%}{{ states('weather.dark_sky')}}{%- endif %}'></ha-icon> {{states.weather.dark_sky.attributes.temperature }}° compact_mode: true

[Mariusthvdb (Marius)]

@mayker

I was asking if this is still an issue if you turn chevrons off to help me track down the issue.

O sorry, I totally missed that… really embassed here now. Will disable them and see what happens.

@mayker

Disable Custom Header and I think you’ll find that the same thing happens when using the iOS app. I cannot override this.

Ok, thanks. But what then does the setting do, if not override the default behavior?

@mayker

These updates generally take milliseconds and would never have any effect on your Hue Lights.

Well, that might be true in theory, but practice has learned differently before. When I still was on a rpi3, refreshing Lovelace systematically caused Hue to loose the connection and have all Lights reconnect, rendering logic based on their state useless. Reported that in several threads in the community and Github, and was well discussed. Has everything to do with the implementation of the Hue integration and the Api that requires HA to poll the Hue hub, instead of the Hue hub pushing state to HA.

In the current case though, I might have jumped to conclusions… As it stands, in the same edit of the config where I added the templates and marquees to the CH config, I added a package for discovering and reporting unknown entities. The automations that are triggered in that scenario (keep checking every few minutes when still sensing unknown entities) apparently causes issues in the timing of HA instance, making Hue signal that with the lost connection. I’ve turned off those automations now, and the system seems to have stabilized.

All in all I owe you an apology for that quick jump…

@mayker

I’m aware of the error, but just don’t have the time to work on Custom Header at the moment. Will be back at it soon.

cool, take all the time you need, just glad you recognize it and have it on the radar.
cheers!

[mayker (maykar (pronounced "maker" with a southern accent))]

@Mariusthvdb

what then does the setting do, if not override the default behavior?

default_tab_on_refresh: false will prevent lovelace from returning to the tab set with default_tab: when the page is refreshed. This will work in most browsers, but the iOS app behaves differently and will always return to the first tab on refresh. Outside of the iOS app lovelace will return to the tab you were viewing when refreshed, this is the default behavior of lovelace without Custom Header.

@Mariusthvdb

When I still was on a rpi3, refreshing Lovelace systematically caused Hue to loose the connection and have all Lights reconnect, rendering logic based on their state useless.

It’s important to note here that Custom Header is not “refreshing” lovelace. If a template in Custom Header is causing issues with your backend then it’s likely you would also have issues with displaying any template sensor, or any entity really, in a default entities card.

[Mariusthvdb (Marius)]

@mayker

This will work in most browsers, but the iOS app behaves differently and will always return to the first tab on refresh.

I see, thanks for clarifying. Will cease any further efforts than…

@mayker

If a template in Custom Header is causing issues with your backend then it’s likely you would also have issues with displaying any template sensor, or any entity really, in a default entities card.

I understand that, but the issue is more fundamental than that, and never was resolved properly. My templates are fine, and never cause issues themselves.

I’ve just refreshed automations because of a small edit, and the system chokes on that, causing the Hue hub to error with ‘Unable to reach bridge’ and the lights to become unavailable. It settles down after a short while, but it is one of the more serious issues in our Ha setups with Hue integration. Plenty of issues raised on the subject.

granted my setup is quite extensive, this remains a major pain…

[sbmlat (shreram)]

Could you check this disabled_mode setting? This snippet is disabling Custom Header all the time for all devices even when ha_ui value is off.

  test_template: "{{states('input_boolean.ha_ui')}}"
  disabled_mode: >
    {%- if states.input_boolean.ha_ui.state == 'on' -%}
      true
    {%- else -%}
      false
    {%- endif -%}

I want to control UI behavior via input_boolean (Show UI). If that value is on then show full UI and do the reverse (custom header) when that is turned off.

Also, this error message is consistent in the logs.

2020-01-04 13:09:03 ERROR (MainThread) [frontend.js.latest.201911196] http://192.168.86.226:8123/community_plugin/custom-header/custom-header.js:576:26048 Uncaught TypeError: Cannot read property 'split_mode' of undefined