Compact Custom Header

Have a look at:

@Vasco @jerrychong25

Didn’t realize someone else had already had something to this effect. Looks like his option refreshes the page on each swipe.

I’ve actually been working on implementing this into CCH for a while now so expect it in a future update.

3 Likes

Also looks like his option uses the same code from stackoverflow I’m using heh. Not sure if I should still implement what I have into CCH or give him a hand with his project.

Actually, if anyone wants to check it out I added swipe navigation to the dev branch. Currently it has a few known bugs and I could use some testers to find others:

  • After interacting with a view swipe navigation stops working for a few seconds.
  • If using chevrons on the header the tabs don’t scroll correctly to show current tab
  • Currently no way to override browsers default swipe actions
  • Feature doesn’t have a toggle yet, so it’s always on

Edit:

I’ve since removed this branch and I just submit a PR to @themoffatt 's project listed above, will post an update if they pull it. Until then you can find my fork of the project here:

https://github.com/maykar/lovelace-swiper

4 Likes

Thanks for sharing on this.

Since the previously mentioned pull request I’ve done a rewrite and with themoffatt’s permission have created a new project for the rewrite. For now it is separate from compact-custom-header, but may be added as a feature to CCH in the future. Fixed the delay issue in the new version as well.

I have made a new thread for this project as to keep this one on topic.
https://community.home-assistant.io/t/lovelace-swipe-navigation/

3 Likes

Would there be a way to redirect the first page to the second (as I want the second to be the default page) without needing to hide the tab (thus making that page unusable)?

It would be awesome if there was a way for us to make a specific tab the default tab. (I have heard of home-setter, though it is only temporary as it resets after relogging).

Yeah, that’ll be an easy one to add. I just made a feature request on the github to remind me.

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

Awesome! This card should be the HA default :stuck_out_tongue:

3 Likes

I see that we can set the active tab color and also colors for each of the tabs, but would it be possible to also add an option to set the active tab color and tab indicator color on a per-tab basis?

You already can! Looks like there was just a typo in the wiki, I listed button_color twice when one should have been tab_color. Fixed now.

I just completely misunderstood your question, but there was a typo that needed fixed so thanks for that. Will look into adding active tab/tab indicator color per tab as you originally were asking for.

1 Like

No worries, awesome on both counts!

Before I go submitting a feature request, does CCH support the use of a numerical range when specifying hide_tabs:? For example:

  exceptions:
    - conditions:
        user: maykar
        hide_tabs: 0-9,20,30-39

I’ve tested this for myself and it “seems” to be working but I don’t have much confidence in the results as I do not trust that my iPhone is adequately purging the browser cache.

My intention/use case is to assign large ranges of views for specific user agents. Doing so should mostly eliminate the need to edit the assigned views for a given user agent.

Working on adding it now. Will be a bit before the next release though, time is on short supply and I’m working on a handful of new features.

1 Like

Is there any way to style the location of a tab on header bar?

My Settings icon is actually the 5th tab. Is there a way to place it on the far right hand side?

No, unfortunately.

You might be able to engineer a bit of a hack/workaround by hiding the header completely and using a picture-elements card in its place.

That was my plan b :grinning:

1 Like

Just came here to give a big THANK YOU to @mayker for his hard work on this awesome community card. I hadn’t tweaked my Home Assistant interface since 0.88 and have been thrilled with the improvements made to CCH since that time! Thank you for all of your hard work!

2 Likes