Custom Header

Mariusthvdb · February 3, 2020, 4:26pm

fwiw, I have the exact same behavior of the popup message.
that started before the time template in the option button-text field though.

otoh, disabling CH does prevent this from happening…

using this button, instead of the CH option menu does the same, and cause the popup t appear also:

      - type: custom:button-card
        template: button_picture_script
        tap_action:
          service: browser_mod.lovelace_reload
        entity_picture: /local/homeassistant/refresh.png
        color: 'var(--paper-card-background-color)'

mayker · February 3, 2020, 4:32pm

Yup, this has to do with how CH handles config. Not sure I can prevent it without losing functionality, but as I’ve said above I’ll look into it.

Myztillx · February 3, 2020, 4:39pm

Recently updated to the newest version of CH and am experiencing a problem I had not seen before. I have CH disabled for my user (Samuel) so that I can still access the side panel. The config is shown below. CH seems disabled as I can see all the Tabs, but when I try and select a tab that is not 0,1,2 I am thrown back to tab 0. Any thoughts? In the past the disabled_mode allowed me to select any of the other tabs.

mayker · February 3, 2020, 4:43pm

Yeah, redirects shouldn’t be active in disabled mode, will get that fixed. For now you could just add hidden_tab_redirect: false to Samuel’s config as a work around.

haaeff · February 3, 2020, 7:27pm

Hi all. My first post, but have read 1000+ to learn…

I try to make the simplest thing to work, hide tabs for all users, but not the HA owner.

I start with idea from post #72, and use Build-in variable isOwner in my Raw config editor:

 custom_header: 
  show_tabs: >
   {% if {{ isOwner }} %}0 to 21, 26 to 28
   {% else %} 1 to 28
   {% endif %}

Saves wo error, but when i enter Raw config editor again, it has changed to this:

custom_header: null
show_tabs: |
  {% if {{ isOwner }} %}0 to 21, 26 to 28 {% else %} 1 to 28 {% endif %}

This works well, but for all users:

custom_header:
  hide_tabs: 1 to 9

mayker · February 3, 2020, 7:37pm

Indentation is very important. In your first example you are indenting with one space instead of two and you have indented custom-header: with one space as well, I believe this is why the editor is changing it to what you see there.

That example should look more like this (using >- will strip the code of new line characters):

custom_header: 
  show_tabs: >-
    {% if isOwner %}0 to 21, 26 to 28
    {% else %}1 to 28
    {% endif %}

This would also work:

custom_header:
  show_tabs: '{% if isOwner %}0 to 21, 26 to 28{% else %}1 to 28{% endif %}'

The raw config editor might change it, but if your formatting is correct to begin with then it won’t be a problem.

Edit: Also when using the variables inside of another bracket statement, don’t use brackets:

Like this:

show_tabs: '{% if isOwner %}0 to 21, 26 to 28{% else %}1 to 28{% endif %}'

Not like this:

show_tabs: '{% if {{ isOwner }} %}0 to 21, 26 to 28{% else %}1 to 28{% endif %}'

haaeff · February 3, 2020, 7:46pm

OK, i will use two spaces

Used this in raw editor:

custom_header:
  show_tabs: '{% if isOwner %}0 to 10{% else %}1 to 10{% endif %}'

Works well now!

guice · February 4, 2020, 1:10am

How do I retain the theme header bar color? I’m not seeing any options for that.

Mariusthvdb · February 4, 2020, 9:57am

HI Ryan,

since you offer us the built-in vars, my desire to use these outside of CH has grown in each development cycle I take in my dev page…

Would it somehow be possible to use these vars outside CH? I’d love a card with the system vars
{{ user }}{{ userID }}{{ isAdmin }}{{ isOwner }}{{ deviceID }}{{ viewTitle }}{{ viewPath }}{{ viewIndex }}
{{ url }}{{ userAgent }}…

Using this cool marquee for now, but obviously some of these vars would be of more value when used outside of the owners mobile device Custom Header (though cool it is ! )

  - conditions:
      user_agent: iPhone
    config:
      footer_mode: true
      indicator_top: false
      header_text: >-
        {% if is_state('input_boolean.ch_use_header_text_template','on') %}
        {% if is_state('input_select.mode','Developer') %}
        <marquee direction={% if is_state('input_boolean.ch_horizontal_marquee_right','on')%} 'right' {% else%}'left' {% endif %} >
        <span>
        User: {{ user }}, User_id: {{ userID }}, Admin: {{ isAdmin }},
        Owner: {{ isOwner }}, Device_id: {{ deviceID }}, View: {{ viewTitle }},
        Path: {{ viewPath }}, Index: {{ viewIndex }}, Url: {{ url }},
        User agent: {{ userAgent }}
        </span>
        </marquee>
        {% else %}
        {% set inside=states('sensor.temperatuur_living')%}
        {% set outside=states('sensor.temp_current')%}
        {% set temp_color='var(--primary-text-color)'%}
        {% set symbol='°C' %}
        <div style='display: flex;display: -webkit-flex;'>
        <div>Ha&nbspRpi4:&nbsp;</div>
        <marquee direction={% if is_state('input_boolean.ch_horizontal_marquee_right','on')%} 'right' {% else%}'left' {% endif%} >
        <span style='color: {{temp_color}}'>
        Inside temperature: {{inside}}{{symbol}},
        Outside temperature: {{outside}}{{symbol}},
        </span>
        <span style='color: orange;'>
        System alerts: {{states('sensor.marquee_alerts')}}
        </span>
        <span style='color: {{ temp_color }}'>
        Summary - {{states('sensor.dark_sky_summary')}},
        Daily -  {{states('sensor.dark_sky_daily_summary').split('.')[0]}},
        Hourly - {{states('sensor.dark_sky_hourly_summary').split('.')[0]}}.
        </span>
        </marquee>
        {% endif %}
        {% else %}Ha Rpi4
        {% endif %}

klogg · February 4, 2020, 11:46am

Yes that is pretty cool and ~~as there is no point in re-inventing the wheel~~ out of sheer laziness do you have a convenient list of all the input_boolean you have created to turn on and off all the features of CH?

I think it is time I tarted mine up. There is so much it can do now and I’m barely scratching the surface.

mayker · February 4, 2020, 1:36pm

@guice

Custom header uses theme vars in this order: If background is set in CH’s config it is used first, then CH’s own theme var --ch-background, then header background theme var --app-header-background-color, and finally primary color theme var --primary-color if nothing else is set.

So, if it’s not behaving as expected make sure that you’re not using another one of these options that is overriding the expected color.

@Mariusthvdb

Unfortunately, no. The Jinja variable scope is limited to the template it is used in (CH’s templates act as one large template). Also, I’m saving the results of Javascript into those variables so there is no way to replicate those in Jinja, as far as I know.

Mariusthvdb · February 4, 2020, 2:35pm

wouldn’t mind javascript variables either…

couldn’t we use the variables globally using maybe browser-mod, or the new q-card? Or some Lovelace_gen variables. Just wildly stating a few cards that developed into newer versions using powerful (global) possibilities.

Mariusthvdb · February 4, 2020, 2:37pm

did you have a look here? and the post below it?

guice · February 4, 2020, 3:10pm

Oh, I see. The theme I’m using added a custom ch background that only appeared on the main panel. Thanks,

klogg · February 4, 2020, 4:34pm

Obviously I missed that!
Well i did say ‘sheer laziness’.
Still no excuse, sorry. And thanks.

Mariusthvdb · February 4, 2020, 4:46pm

haha, no worries, just didn’t want to spam this thread with the full config again…

ons significant change I made in the templates, other than the above mentioned marquee, is this:

show_tabs: >-
  {% if is_state('input_select.mode','Developer') %}
  {%- if 'Chrome' in userAgent -%}0 to 30
  {%- else -%}0 to 29
  {%- endif -%}
  {%- else -%}0 to 3,5 to 22,27,29
  {%- endif -%}

using the useragent variable

mayker · February 4, 2020, 5:15pm

You would need to convince each of those card makers to implement something similar. Even if I were to expose the variables for use in other projects you’d still need to convince them to implement it into their code.

The file that handles the template variables can be found here and changes with almost every release.

Good luck!

Steven_Rollason · February 4, 2020, 8:52pm

I’ve encountered on odd issue with Custom Header when using browser_mod.
I have an exception which enables kiosk mode when the word embed is in the query string. This works fine when I navigate normally to a page with that in the url (e.g. /lovelace/home?embed) and kiosk mode is enabled as expected but, when I use the browser_mod.navigate service to make the browser navigate to that same url, kiosk mode is not enabled.

The URL appears to be correct in the address bar, with the query string, but Custom Header appears to be ignoring it.

grzeg8102 · February 5, 2020, 9:06am

Hello @mayker
Great job with this component. I’ve got a question regarding the width of the tabs. I’ve never used Compact Custom Header component. I installed Custom Header today and it makes my tabs shorter as in maykars’ case.

I love the ability to make the header transparent. That’s what I use it for, but I don’t like the fact that the tabs visibility is lower than without CH. I really need as much space as possible. I’d even like the default HA layout to be a bit wider.
I can disable shevrons and this adds indeed some space, but actually chevrons are sometimes handy.
Is this a bug that the space is shrunk or is intended? Can this be changed somehow?

Thank you!

mayker · February 5, 2020, 12:32pm

@Steven_Rollason You found a bug! Should be fixed in the next release.

@grzeg8102 The space on the sides is added for another feature of CH. When you scroll down the page the buttons slide down so that you always have access to them as the header collapses. This has been mentioned quite a bit, so I should probably start thinking of a new mode that doesn’t collapse the header and expands the width of the tabs to the full width of the header.