Compact Custom Header

greengolfer · August 26, 2019, 10:15am

Hello!
Thanks for this great tool!
I have a configuration issue with the default_tab, redirect and hide tab setup.
Here is an extract of my ui-lovelace.yaml:

cch:
    disable_sidebar: true
    compact_header: true
    clock_format: 24
    menu: hide
    notifications: hide
    voice: hide
    header: true
    chevrons: true
    notify_indicator_color: "#e80000"
    swipe: true
    swipe_wrap: false
    background: 'rgba(0,0,0,0.3)'
    default_tab: 'home'
    redirect: true
    kiosk_mode: false
    conditional_styles:
       template:
          - tab:
             'home':
               display: >
                   if (states["sensor.alarm"].state == "armed_away") "hide";
                   else "show";

HA: 0.97.2 on hassos 2.12
Same behaviour with firefox, safari and chrome on Mac and fully on Android.

On fully kiosk I use http://hassio:8123/lovelace and when my alarm if not in armed_away mode, the ‘move’ view is available in the header and is displayed.

In ‘armed_away’ mode, the tab is hidden (all good!) but if I try to access http://hassio:8123/lovelace I still end up on http://hassio:8123/lovelace/home

From the documentation I understand that I should be redirected on the next visible tab. However, it is not the case.
‘move’ tab is not in the header but still accessed as the default…

Am I doing something wrong?

Ideally, the default_tab should be templatable

The idea behind this setup is to hide all views except the one where the alarm can be disabled when the alarm is on.

Thanks,

GV

mayker · August 26, 2019, 1:12pm

To keep config a bit more manageable/clean and avoid a breaking change. The screenshot example in my post above is 11 lines, but if CSS config was an object it would be over twice as large at 27 lines.

It would probably make my life easier if it was an object, but I feel it’s a better user experience as is. If I had to do the whole thing over and not worry about breaking changes, I may have done it differently.

mayker · August 26, 2019, 1:16pm

Nope, I am .

Default tab is currently ignoring redirects and I’ll change that soon, but I also like the idea of a template option.

greengolfer · August 26, 2019, 1:22pm

Nobody’s perfect!
I’ll wait for the fix.
GV

iamhueman · August 26, 2019, 4:26pm

Upgraded to the latest version of CCH last night using HACS.
The CCH settings work on my Admin user, disabled tabs to test and it works.

But when I add an exception for a user, nothing happens. User case-sensitive or not, still not working. Cleared Safari and Chrome browser caches, still not working. Browsers are on the most recent versions.
I tried it on four computers (3 Windows 10 and a Mac) still not working.

I deleted and re-created exception still not working for this user. Not sure what I’m doing wrong.

mayker · August 26, 2019, 4:48pm

I need to start insisting that issues be posted to the GitHub page. Issues posted in a forum thread are difficult to track/follow and by filling out the issue template I will get all the info I need.

Please, post the issue there and fill out as much of the template as you can:

https://github.com/maykar/compact-custom-header/issues/new/choose

This will be the post that I link to for issues posted in this thread moving forward. I have updated the first post to reflect this as well. This will make it much easier for me to track and fix issues. Thanks!

raul · August 26, 2019, 5:23pm

Is there a simple way to link a custom panel_iframe to a header button instead of the sidebar?

mayker · August 26, 2019, 7:20pm

Not with CCH, but there are multiple ways to make buttons in Lovelace that navigate to URLs (entity-button-card, the custom button-card, picture elements, etc).

Here’s a couple of posts about it. I imagine you could just replace the “view” urls with panel url

ludeeus · August 26, 2019, 7:25pm

Off-topic… sorry…

How about a view (in panel mode) with a single iframe card?

mayker · August 26, 2019, 7:45pm

After your suggestion I wanted to play around a bit and was searching around as I couldn’t get it to fill to the full view height. Then I came across this post (looks like they’ve been down this road).

If I figure something out I’ll let you know @raul

raul · August 27, 2019, 12:53am

@mayker thank you. That post is actually me as well. I’m going to continue playing with it myself, but I think it’s a limitation of the iframe card itself and how it sets the top padding.

gabe565 · August 27, 2019, 5:50pm

Ah that makes sense. Didn’t realize there was currently a CSS config option you had to keep support for.

I’ve been using the beta and it’s been working great for me! Can’t wait for the release.

raul · August 27, 2019, 8:39pm

That is what I tried already:post.

I cannot get the card to span the full height of the window reliably when it is resized. Looking at the card I do not think it will be possible without using card-mod or rewriting the card itself. iframe-card

Before I got too deep I checked here, since it doesn’t seem all that crazy for someone to want to link a sidebar item in the header and thought it might have been attempted already…

mayker · August 27, 2019, 9:01pm

Install lovelace-card-mod and give this a try:

    cards:
      - type: iframe
        style: |
          #root {
            height: calc(100vh - 48.5px);
            padding-top: 0 !important;
          }
        url: https://REDACTED/

48.5px is the height of the header after being compacted by CCH. You might need to play with padding.

raul · August 27, 2019, 9:05pm

@mayker That appears to work! Thank you.

tom_l · August 31, 2019, 10:56am

I’m hiding all but one view (irrigation, view #6) for my gardener’s log in.

When I log in with that account I see view #0 in the main panel even though only one view icon (irrigation, #6) is available on the header.

I’ve tried setting view #6 as the default for this account but there was no change to this behaviour.

mayker · August 31, 2019, 2:27pm

Have you tried the latest beta? It includes a fix for default tab, full release coming this/next week with a few new features added. One of those new features will enhance default tab as well.

jimz011 · August 31, 2019, 2:51pm

Ooh I am going to try this very soon. It will make me very happy I am sure.

A big as this will make my setup a lot more stable/usable.

Thank you

daphatty · September 4, 2019, 12:23am

I really thought I was keeping up with all of the recent changes but alas, my header no longer shrinks down to a single row of icons. I’ve stared at this config for a while now and I just can’t seem to figure out what I’m missing. Could someone take a peek at my config and let me know what, if anything, in my configuration would cause the full header to appear? I’m running HA 0.98.2 with CCH 1.3.1 (because Custom Updater wont grab CCH 1.3.6?).

cch:
  #main_config: true
  header: false
  compact_header: true
  options: show
  chevrons: true
  menu: show
  active_tab_color: rgb(181, 142, 49)
  tab_indicator_color: rgb(181, 142, 49)
  exceptions:
    - conditions:
        user_agent: Macintosh
      config:
        #hide_tabs: 9 to 17
        voice: false
    - conditions:
        user: kiosk
      config:
        show_tabs: 24
        notifications: hide
        voice: false
        menu: show
        options: show
        swipe: true
        swipe_wrap: true
        swipe_animate: swipe
        swipe_prevent_default: true
        swipe_amount: 20
        default_tab: 24
        kiosk_mode: true
    - conditions:
        user_agent: iPad
      config:
        show_tabs: 0 to 7, 21 to 26
        notifications: hide
        voice: false
        menu: show
        options: show
        swipe: true
        swipe_wrap: true
        swipe_animate: swipe
        swipe_prevent_default: true
        swipe_amount: 20
    - conditions:
        user_agent: iPhone
      config:
        show_tabs: 8 to 17, 21, 22, 23
        notifications: hide
        voice: false
        menu: hide
        options: hide
        swipe: true
        swipe_wrap: true
        swipe_animate: swipe
        swipe_prevent_default: true
        swipe_amount: 20

mayker · September 4, 2019, 2:12am

Few things:

Custom updater is essentially depreciated. It seems to have issues with anything past CCH 1.3.1. I believe this is because the editor file was removed. This is not something I will fix and you should either install manually or with HACS for the latest versions (and you should as some of the features you use in your config were fixed since then).
voice: false is not a valid config option, should be voice: hide
All items pertaining to the notifications button should be removed as it no longer exists in the latest HA.

I’ve modified your config below to fix issues mentioned above, remove options that were the default settings, and I moved the swipe options to the main config so that you don’t need to repeat the same options for every exception. When something isn’t set in an exception then the main config option is used.

Install the latest version of CCH and if you’re still having issues please fill out an issue template on github.

cch:
  chevrons: true
  active_tab_color: rgb(181, 142, 49)
  tab_indicator_color: rgb(181, 142, 49)
  voice: hide
  swipe: true
  swipe_animate: swipe
  swipe_prevent_default: true
  swipe_amount: 20
  exceptions:
    - conditions:
        user_agent: Macintosh
      config:
        #hide_tabs: 9 to 17
    - conditions:
        user: kiosk
      config:
        show_tabs: 24
        default_tab: 24
        kiosk_mode: true
    - conditions:
        user_agent: iPad
      config:
        show_tabs: 0 to 7, 21 to 26
    - conditions:
        user_agent: iPhone
      config:
        show_tabs: 8 to 17, 21, 22, 23
        menu: hide
        options: hide