Compact Custom Header

thmry · September 29, 2019, 7:39pm

I’m trying to hide all tabs and make the alarm tab the only allowed tab when my alarm is in a certain state e.g. armed_away, but I only want to do this for a specific user (e.g. UserX, this is the name, not the username).

I can’t get it to work. I’ve gone through the documentation, but I’m probably not interpreting it correctly. This is what I have right now:

...
exceptions:
  - conditions:
      user_agent: Mobile
    config:
      menu: show
      options: show

  # user specific configuration.

  - conditions:
      user: UserX
    config:
      default_tab: lights
      hide_tabs: tab_x,tab_y
      hide_unused: true
      disable_sidebar: true
    conditional_styles:
      - entity: alarm_control_panel.alarm
        condition:
          state: armed_away
        tab:
          lights:
            hide: true
          tab_x:
            hide: true
          tab_y:
            hide: true
          tab_z:
            hide: true

What am I doing wrong? Also… is there maybe a better way to accomplish this?

mayker · September 30, 2019, 6:03pm

The exception’s conditional_styles should be indented to be part of UserX’s config:

  - conditions:
      user: UserX
    config:
      default_tab: lights
      hide_tabs: tab_x,tab_y
      hide_unused: true
      disable_sidebar: true
      conditional_styles:
        - entity: alarm_control_panel.alarm
          condition:
            state: armed_away
          - tab:
              lights:
                hide: true
          - tab:
              tab_x:
                hide: true
          - tab:
              tab_y:
                hide: true
          - tab:
              tab_z:
                hide: true

Not yet.

thmry · September 30, 2019, 10:50pm

Thanks for putting me into the right direction. I indeed had to place conditional_styles under config, but it didn’t work with all of the tabs under tab like that.

I actually had to define it like this:

  ...
  - conditions:
      user: UserX
    config:
      default_tab: lights
      hide_tabs: tab_x,tab_y
      hide_unused: true
      disable_sidebar: true
      conditional_styles:
        template:
          - tab:
              lights:
                display: >
                  if (states['alarm_control_panel.alarm'].state == 'armed_home') 'hide';
                  else if (states['alarm_control_panel.alarm'].state == 'armed_away') 'hide';
                  else if (states['alarm_control_panel.alarm'].state == 'armed_night') 'hide';
                  else 'show';
          - tab:
              tab_x:
                display: >
                  if (states['alarm_control_panel.alarm'].state == 'armed_home') 'hide';
                  else if (states['alarm_control_panel.alarm'].state == 'armed_away') 'hide';
                  else if (states['alarm_control_panel.alarm'].state == 'armed_night') 'hide';
                  else 'show';
          - tab:
              ...

Which is a lot of code when you basically want to hide all of the tabs except for the e.g. alarm tab (in this case).

Is there maybe a way to use hide_tabs in combination with conditions?

My goal is basically to only show the alarm tab when the alarm is armed in any way.

mayker · September 30, 2019, 11:15pm

That was my bad, missed that on the copy paste. Editing post to fix.

Though, if you want to use javascript templates here’s a different way to go about that:

    template:
      - tab:
          lights:
            display: "return states['alarm_control_panel.alarm'].state.includes('armed') ? 'hide' : 'show' "
      - tab:
          tab_x:
            display: "return states['alarm_control_panel.alarm'].state.includes('armed') ? 'hide' : 'show' "

Conditionals can for sure use some improvements, but they currently fit under the “working” category so aren’t high on the priority list. They will get some love when I get the time.

thmry · September 30, 2019, 11:27pm

Thanks! That works perfectly with a lot less code. Didn’t think of using it like that at all.

I can totally understand that. At least it is working now with the least amount of code.

I might even try to put the repeating code into a separate template file, so I can reuse it. Not sure whether it will work, but I’ll try in a bit and if it doesn’t I’ll just use this.

mayker · September 30, 2019, 11:29pm

In it’s current form it won’t work like that, but that is one of the first thing’s I’ll be adding to conditional templates: a way to create variables that can be accessed by all templates. A close second on the list would be allowing tab lists or groups in conditionals/templates.

You could cheat it a bit now by using global variables, but it would be much better to add something like that to config.

thmry · September 30, 2019, 11:30pm

Awesome, sounds like a great improvement!

Edit:

For anyone wanting to do the same I’m doing, I changed the armed in the following:

states['alarm_control_panel.alarm'].state.includes('armed')

to armed_ to not include the disarmed state.

Zenoxio · October 1, 2019, 2:56am

Tried out this on my Kindle, found I needed CCH for older devices & unsupported browsers. · Issue #185 · maykar/compact-custom-header · GitHub

It doesn’t appear to hide the header, and the config bar seems to be missing. I made sure type: js, what else am I missing? I see that on my browser debug has the warning:

compact-custom-header.js?v=0.0.3:1 Uncaught SyntaxError: Identifier ‘LitElement’ has already been declared
at compact-custom-header.js?v=0.0.3:1

mayker · October 1, 2019, 3:17am

~~What does your resources section look like?~~

Edit: Updated the legacy version. Give it a shot. Also, make sure you don’t have CCH twice in your resources.

yoni3210 · October 1, 2019, 11:29am

Hi,

is there a way to configure background to a specific tab only? let say for tab 2 and not for all tabs.

    - conditions:
        user: test
        # user_agent: Mobile
        # media_query: "(max-width: 600px)"
      config:
        default_tab: 2      
        # options: clock
        # clock_format: 24
        # hide_tabs: 0,1,2,3,4,5,6,7,8,9
        background: center / cover no-repeat url("/local/back2header.png") fixed

Thank you!

mayker · October 1, 2019, 5:46pm

No, there are no per view/tab exceptions.

mayker · October 7, 2019, 8:12pm

Pre-Release 1.4.3

Update editor to fix toggles for HA 0.100 +
Sync clock to system clock.

Steven_Rollason · October 7, 2019, 9:34pm

After updating to 1.4.3, the sidebar and menu don’t show on mobile unless I remove the exception I have for mobile. Here is the config of the mobile exception:

- conditions:
        user_agent: Mobile
      config:
        default_tab: []
        hide_tabs: 'Kiosk,Calendar,media-players,Github,Test'
        menu: show
        notifications: show
        options: show
        show_tabs: []
        voice: overflow
        compact_header: true

It also shows all tabs and doesn’t hide the tabs listed in hide_tabs.
Is there something wrong with my config? This was working previously.

Edit: My Home Assistant version is 0.99.3

mayker · October 8, 2019, 12:01pm

Should be fixed in the latest pre-release. I had changed the structure of CCH a bit which is why this round of updates are still in pre-release. I have a fair few different configs that I cycle through for testing, but they don’t always catch some issues. Thanks!

Steven_Rollason · October 8, 2019, 3:25pm

Just updated to 1.4.5 and it’s working on mobile now, thanks.

Mathias_Heller · October 8, 2019, 8:55pm

Hi!

Thanks for an awsome component.

however, i have found an issue. the hide tab / show tab feature dosent work on my rpi running chromium web browser. is this known? is there a way around it?

BR Mathias

mayker · October 8, 2019, 11:38pm

What does your config look like? Any errors in HA or in your browser’s dev tools?

Mathias_Heller · October 9, 2019, 8:15am

Hi!

in HA log i found this:

https://XXXX.XXX/community_plugin/compact-custom-header/compact-custom-header.js:1302:17 Uncaught TypeError: ranges.flat is not a function
Anslutning tappad. Ansluter igen...

and my config looks like this:

cch:
  options: clock
  voice: hide
  clock_format: 24
  clock_date: true
  exceptions:
    - conditions:
        user: XXX
      config:
        swipe: true
        swipe_animate: swipe
        default_tab: '0'
        sidebar_closed: true
        hide_help: true
        hide_config: true
        hide_unused: true
        hide_tabs: '9,10,13'
    - conditions:
        user: XXX
      config:
        swipe: true
        swipe_animate: swipe
        default_tab: '13'
        sidebar_closed: true
        hide_help: true
        hide_config: true
        kiosk_mode: true
    - conditions:
        user: XXX
      config:
        default_tab: '0'
        sidebar_closed: true
        hide_help: true
        hide_config: true
        hide_unused: true
        redirect: true
        options: hide
        disable_sidebar: true
        hide_tabs: '8,9,10,11,12,13'

it works perfectly on Chrome ( MAC) Android phone, and IOS APP.

also noticed that the clock dosent work on the Chromium either.

BR Mathias

mayker · October 9, 2019, 11:25am

You must be using an older version of Chromium. Either update to the latest or, if that’s not possible, use the legacy version of CCH found here: CCH for older devices & unsupported browsers

Mathias_Heller · October 9, 2019, 2:20pm

Thank you! Updated chromium and now it works.

I see that the clock is still missing, also an compability issue I assume.

Br Mathias