Compact Custom Header

Sounds awesome. Yeah I use views now to show things like a popup card would do. And I navigate to those views via buttons. Because those views are hidden they won’t swipe. I want to be able to swipe on hidden views but only certain ones. In my example it would look something like this:

views 1 to 5 are visible and swipable
views 6 to 30 are hidden, but when I land on view 10 (via a navigate action) I’d like to be able to swipe on pages 10-11-12 but those tabs must remain hidden so it cannot be swiped to from the first 5 tabs.
Sorry for the explanation again, I just find it hard to understand myself if I read it back :stuck_out_tongue: Anyways thanks again for your hard work and thanks for fixing the default tab 2 issue.

I translate that to: tabs to be grouped together in different groups where swipable is only valid for the current group being viewed.

(Hope it helps to get the message across)

Yes exactly thanks!

I like the name View Groups. The config could be something like:

view_groups:
  group_1:
    name: Group 1
    views: 1-5
  group_2:
    name: Group 2
    views: 8-20

And it could even go a step further by defining view groups to a user agent.

  exceptions:
    - conditions:
        user_agent: Macintosh
      config:
        view_groups: group_1

Since this would really only apply to swiping, I think making it something like swipe_groups: true and it would just operate by not skipping over tabs. So if you had show_tabs: 5 to 7, 9 to 12 it would only swipe between the tabs in each range, but not from 7 to 9.

but then if I use the header it would show me those tabs as well. Am I correct? I would love to have only 5 tabs visible in the header but being able to swipe on other views like suggested.

Well for me it would not be a problem to remove the header all together though. So this change would already be very nice XD

Ah, okay. I was misunderstanding a bit. This is a bit more involved, but still doable. It would be more flexible this way as well.

hi everyone. i stumbled across this and looking to see where exactly i am supposed to be configuring the CCH… ive done a few searches of this topic and looked through the docs on github but it doesn’t really say. am I adding this as a card in lovelace yaml? or am i doing this in the configuration.yaml?

i did add the module to lovelace and it auto removes the header text, but not quite sure where i need to add configs to customize the views based on user

You do it in the configuration for Lovelace (as described in the documentation) https://maykar.github.io/compact-custom-header/Main-Config-Options/

1 Like

thanks @ludeeus! I clearly wasn’t awake while searching and typing. i have no idea how i missed that main section.

Hello!
I have problem when installing this. It started when updating from 0.95.3 to 0.97.2.

I get this message:

#> # Log Details (ERROR)

Wed Aug 14 2019 17:11:32 GMT+0200 (centraleuropeisk sommartid)

https://my domain:port/local/community/compact-custom-header/compact-custom-header.js:211:5 Uncaught TypeError: Cannot read property ‘shadowRoot’ of null

I installed it using HACS, but it doesn’t save the files in /config/custom_components it installs it in /config/local/community/compact-custom-header, that’s why I have that folder adress. It worked before the update. I tried to uninstall and reinstall it with no luck. What can be the problem?

This is the correct folder for it to be installed. The custom_components folder is for components, this is not a component. There hasn’t been a anything related to shadowRoot on that line of code (211) since version 1.2.2 from july 11th. Current version is 1.3.5. This is most likely a caching issue, either you need to clear your cache or there is something off in your resources section.

okay.

I installed it through HACS and in the install instructions it states that I chould add this:

resources:

  • url: /community_plugin/compact-custom-header/compact-custom-header.js
    type: module

to my lovlace-ui file. but that is wrong then since it should be installed in /config/local/community/compact-custom-header?

I try to clear my cache to see if that helps.

Hi @epeome5

I’m the creator of HACS, can you please elaborate what is wrong with that?

Could it be that you are simply mixing two different things?
One being the local folder, and the other being an endpoint (that you access in the browser)

Because with that logic you should actually use https://mydomain:port/config/www/community/..../.../...js which you probably know will not work :slight_smile:

And if you don’t use the endpoint (yes, all lovelace resources are enpoints and not folder locations) that HACS suggest you should use, you will not get the benefits that HACS gives you:

  • Cache free hosting (would explain your issue)
  • Compressed file serving (Faster transfers with less data between the server and the client)

Hello @ludeeus!
First of all, thank you for the great component!

Regarding my second message.
I followed the instructions for how to install cch via hacs. And as per the instructions i should add

resources:

  • url: /community_plugin/compact-custom-header/compact-custom-header.js
    type: module

to the lovelace-ui file. But then it gives me an error that states it can’t find the file.

But if I shange it to:

resources:

  • url: /local/community/compact-custom-header/compact-custom-header.js
    type: module

it does.

Regarding my first message about this error message

Log Details (ERROR)

Wed Aug 14 2019 17:11:32 GMT+0200 (centraleuropeisk sommartid)

https://mydomain:port/local/community/compact-custom-header/compact-custom-header.js:211:5 Uncaught TypeError: Cannot read property ‘shadowRoot’ of null

It was solved by clearing the cach as per @mayker suggestion.

The reason you got the file not found error is most likely due to cache and the move of the editor of this card.

When you used the endpoint pointed out to your by HACS, your old file was still cached and it was searching for the editor file.

@ludeeus

Hmm… Mabye, but it was the same problem the first time i installed it as well. I can try to change it back and clear the cach.

But i thought the url that you add in the lovelace-ui.yaml file is the path to the correct map where the .js file were saved. It’s not?

I have had the same thing for other installations, monster-card for example, it also didn’t work until I changed the url in the lovlace-ui.yaml file.


don’t know if somenone can solve this here? i’m stuck at this error for a while now and can’t get to find a solution

none of those errors are from cch. try the bar-card thread

1 Like

There were a few updates of CCH these last two weeks but the “hide” bug is still present. Do you have other ideas ? Any troubleshooting step to help you identify the problem ?
Thanks,