Compact Custom Header

I haven’t had a need to configure anything in CCH for months but I have tried to keep up with the changes. I am sure I remember seeing that tabs could be shown or hidden based on pattern matching but I can’t find it anywhere. Am I mistaken?

For example I am setting up an Android Tablet to use as a panel. I was planning on only letting it use views whose name is prefixed with “hall_panel”.

Hi Mayker, my cch is:

cch:
  exceptions:
    - conditions:
        user_agent: Android
      config:
        chevrons: false
        clock_format: '12'
        date_locale: en
        default_tab: []
        disable_sidebar: true
        header: false
        hide_tabs: []
        menu: show
        notifications: show
        options: clock
        show_tabs: []
        voice: show
    - conditions:
        user_agent: Safari/602.1
      config:
        clock_format: '12'
        date_locale: en
        default_tab: []
        hide_tabs: '0,1,2,3,4,5'
        menu: hide
        notifications: show
        options: hide
        show_tabs: []
        voice: hide
  options: clock
resources:

The android tablet works well with the above config.

The user agent reported by google on the iPhone is:

Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_3 like Mac OS X) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.0 Mobile/14G60 Safari/602.1

As I said the newer version of cch wouldn’t work with the app or safari direct on the iPhone, but the old version you recommended earlier works with safari direct but not the app.

I don’t think the iOS app’s user agent contains safari. Maybe try just user_agent: iPhone

No pattern matching exists. You would just need to hide/show each tab by using it’s number, range (5 to 15), title, or path.

1 Like

Your right, change from

user_agent: Safari/602.1

to

user_agent: iPhone

and all works. Thank you.

1 Like

not sure if this has been touched before, but please allow this question:

I use a navigational button on my frontend (mini-weather-card) see Lovelace: Simple Weather Card with an action:

    tap_action:
      action: navigate
      navigation_path: weer_klimaat

The navigation works fine, and takes me to that tab/page.

issue is that no matter which device (mobile or desktop) the tab of the navigation path is never in focus, or even on the view. It always lands 1 left of that view/tab, on the far right of the menu bar:

wide view desktop:

narrow:

09

while the desired menu tab is next to that:

22

Could this have to to with the inner workings of the CCH? Or is this really a core HA thing.

Preferably, Id have the goal tab be in center view, but would already be happy to have it in sight at all…

thanks for having a look.

Hi @mayker I finally got round updating and I noticed something. Either I just didn’t understood what you exactly meant or it just doesn’t work with iPhone X(s/r). You have put in the statusbar_color option. Which make me think it is about this bar:

In my settings I set a color but it remains black (like the primary-color is). Is your documentation talking about this bar?

Thanks for the great update, going to test the swipe functionality now.

Edit: I also added a swipe_group but it doesn’t seem to work. It will act as if it has no swipe setup at all.

This is something that also happens sometimes when using default_tab or hide/show tabs so look for a fix soon.

Sorry, unfortunately statusbar_color won’t work on iOS as it doesn’t really have the option to change the status bar color other than black, white, or transparent. I’ll think on the best way to add support for at least those 3 options on iOS.

Please submit an issue on github for the swipe_group problem.

Ok, so transparant should work? Because that is exactly what I was looking for.

I will open the issue on github, Thank you.

Not with the current config options, right now statusbar_color is not compatible with iOS. I’ll look into making it compatible, but transparent may create issues depending on how iOS handles it.

Ah that is too bad, shame on you Apple! Great work. I filled out the issue.

thanks, glad you recognize it, and are willing to have a look to solve. appreciated!

My ideal view on my tablet that I use as dashboard would be to have the clock in the center and the date to the right. I don’t have that many icons so it would not cause any issues on my tablet. I would’t display the time on my phone view so that would not be an issue. Anyways, I look forward to being able to turn one button to the date and another button the clock.

1 Like

since I have a rather large menu with many icons, I find myself frequently sliding left to right to home or last page (my test page)…

Think Ive read all of the thread, and couldn’t find it, nor in the docs, so would like to ask if you’d consider adding double chevrons for first and last? When chevrons are enabled, there seems to be enough space available for adding these.
This would prevent having to make a few shortcuts and display these on each view in first navigate button/card

this is what I would like to ask:
<< < tab tab tab > >>

maybe add a config option double-chevrons: true to enable it, to cater for those that don’t need it and would use the default double-chevrons: false ?

thanks for considering

update

hi @mayker can I please ask what you think? Probably missed my post :wink:

I lost transparent header with beta 0.99, Anyone else?

Using background: transparent or background: 'rgba(0,0,0,0)' are both still working for me in 0.99.0b0. Mind sharing your config info and possibly a screenshot on github?

Made a PR on github :+1:

1 Like

Would it be possible to hide this left sidebar in the new version ???

You can do this in your HA user settings:

Click the user icon on the bottom of the sidebar and turn on Always hide the sidebar.

image

1 Like