Custom Header

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

I’m not sure I would add a “not” case as things that that should be the default config while everything else is an exception, but adding multiple user agents is something I would add.

[Mariusthvdb (Marius)]

@mayker

that that should be the default config while everything else is an exception

Hi,

you’re probably right, but I am a bit stuck in mind-circles here…

suppose Chrome would be the exception for showing a tab (30 in my case), how would that be added up with the main config setting of:

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

I would love to be able to set that to main/default:

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

and add ! Chrome to the exception for hiding tab 30.

The other way around is what it is now, and it forces me to do this:

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

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

unless of course I am missing something very obvious …

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

You have to keep in mind that this is an edge case, most user’s aren’t doing something so complex and I can’t add support for everything that is so specialized. I don’t see anything wrong with your last example there, but exposing user_agent as a template variable would be helpful in your case and would be something I would consider. Then you can just use jinja to check if the user agent contains “chrome”.

[Mariusthvdb (Marius)]

yes! that would be awesome! I already had a go at that, didn’t exactly know how tbh, but if failed obviously. What would that template be? Since user-agent isn’t an attributes available in the states?

Also, if you’d add that template capability there, checking it for not Chrome would be possible too

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

Once it’s added as a template variable (will try to get it in next release) you’d start with something like:

{% if 'chrome' in userAgent %}

[Mariusthvdb (Marius)]

yes, very very nice. So short and simple. beautiful. Hope you can make it, to would really step up CH even further!

thank you so very much.

that would solve all, because:

{{ 'Chrome' and 'Mac' in useragent }}

would then be possible also, as would

{{ 'Chrome' not in useragent }}

just tested it locally with the full useragent in the {% set useragent =  'copieduseragent' %} and that works perfectly.

[atebeta (Christopher Stokkmo)]

@Mariusthvdb

anyone else having trouble like I do with the header icons in footer mode being in the way of the iOS handle for swiping the screen?

Yeah I have the same issue, makes the footer mode unusable on iOS unless it it possible to add some padding to the bottom.

[Mariusthvdb (Marius)]

OTOH, the footer is the perfect place for my Marquee

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

tab_container_css: 'padding-bottom: 10px;'

increase as needed

[Langh_Tamas (bocsitomcsi)]

Hi,

Is there anyway to specify a different customer header behavior for one specific tab, i.e on one of the tab I would like to enable footer mode but on the others header should stay at top? I thought previously that query_string can help about that but after several try I believe I am on wrong track.

By the way I really like this custom components great functionalities.

[slipx06]

Is it possible to change the button text based on the user_agent?

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

@Langh_Tamas Not yet, but it is currently being worked on.

@slipx06 Yes, read through the exception & button config portions of the docs. Example:

custom_header:
  exceptions:
    - conditions:
        user_agent: Mobile
      config:
        button_text:
          menu: 'text'

[atebeta (Christopher Stokkmo)]

@mayker

tab_container_css: 'padding-bottom: 10px;'

increase as needed

Thanks, that worked perfectly. Any idea how I can change the color on the very top of the header in the iOS app from the default blue?

[Crimby (Maarten de Bruin)]

Trying to get the custom header to work, but i put my lovelace to kiosk mode and can’t deactivate it anymore. How to get that?

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

2nd important note

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

I believe the iOS app uses the primary color from your theme as the status bar color, not sure if it can be changed any other way.

[VDRainer]

@atebeta

Any idea how I can change the color on the very top of the header in the iOS app

Not sure, but i think this only works if the theme is set to ‘Backend-selected’ and then set via service call.

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

Release 1.2.2

This one adds a bunch of new features for templates and exceptions, including the much requested per tab condition for exceptions.

New Exception Conditions:

• is_admin : Set to true or false to match admin or not
• is_owner : Set to true or false to match owner or not
• tab : Can be a single tab or comma separated list of tabs. Accepts ranges, paths, and titles.
• template: Accepts a Jinja template that returns true or false.

Also added the ability to use a user’s ID number in the user: condition.

New Template Variables:

• deviceID : This uses card-tools device ID implementation, but doesn’t require card-tools.
• isAdmin : Returns true or false if user is an admin
• isOwner : Returns true or false if user is the owner
• userID : User’s unique ID number
• userAgent : Full user agent string
• viewTitle : Title of the current view
• viewPath : Path of the current view
• viewIndex : Index number of the current view
• url : Full current URL

Fixes:

• Tabs not hiding while in kiosk mode (fixes swipe-navigation swiping to hidden tabs as well).
• Respects new app-header theme variables for header text and background.
• Extra space on bottom of view in kiosk mode causing scrollbar to always be visible.

[Mariusthvdb (Marius)]

must be getting daft here, but clicking https://github.com/maykar/custom-header/releases/tag/1.2.2 and the sourcecode zip file button gives me the source in all its glory, but no custom-header.js …

am I missing the obvious here?

manual install.

[theCheek]

Hi All, stumbled across this beauty of an addon whilst trying to figure how to use a POS Chinese Tablet as a locked down interface for HA for my Airbnb guests. Kudos to all involved!

I have however noticed a very obvious work around. Despite making the exception run kiosk mode for a specific user/device, and also only allowing access to one specific tab, if the user swipes down and refreshes the page, then the sidebar appears for about 2 or 3 seconds before Custom Header kicks in with its magic. In this time the User is able to tap items in the sidebar such as Map or Logbook. Once he does that, those sections will load and the Airbnb guest can see way more information that I am comfortable with.

Now I know I can just disable Map and Logbook by disabling default_config from my configuration.yaml but I actually like those sections being in the sidebar for me and my partner. Was wondering if there is any other workaround?