Compact Custom Header

Share your Projects! Dashboards & Frontend
792

Did you download raw file(s)? Or is the first line in it starting with <?

1 Like
793

i am using PI with hassio

794

I was asking what device (ipad, android, computer, etc) and what browser (safari, chrome, firefox, etc) as some older browsers are unsupported. If that is the case I would suggest using the legacy version of CCH by @pjv found here. @ludeeus also brings up a good point, if you didn’t download or copy from the raw github files it could also cause issues.

Edit: Removed bit about dynamic importing as I realized I haven’t pushed that into the master branch yet.

1 Like
795

I did refresh and cleared cache on my phone (Android - Chrome) but didn’t work.

Yes, I commented out swipe-nav under resources.

But it worked on Amazon Fire tablet using Silk browser.

796

Does compact-custom-header expose what tab it is displaying?
By which I mean, can I have a conditional style based on the current tab rather than on another entity?

Sorry if it is in the docs but I didn’t see it…

The reason I ask is; I am not sure if this is a good idea as I can’t test it, but I wondered if having text labels instead of icons, but which change to an icon when the tab is selected would work? Would it look ‘right’ and / or help with page identification?

Actually even as I write this I can see that on mobile it might be a bad idea due to space, but I’m still interested in the answer…

797

This might be your issue as CCH doesn’t play nice with Fire tablets, have you given this method a try? That being said, there should be no issue using both swipe-navigation and CCH together.

@klogg No, unfortunately there is no condition for current tab. I’ve attempted it a few times, but it leads to a very buggy/laggy experience. It’s something that I play with from time to time and if I find a solid way to implement it I’ll let you know.

798

I didn’t see that. Looks like it will solve my problem. Thank you

799

I just updated the gist for legacy devices to CCH v 1.0.4b8.

1 Like
800

It works fine on Fire tablet but not on Android phone using Chrome.

801

How did you install CCH: manually, with HACS, with custom_updater?

What does the resources portion of your config look like?

If you installed manually, have you increased the version number in resources when updating?

If CCH is functional and swipe works from CCH on the tablet, this really seems like a caching issue. Chrome on android is the ideal setup for swipe navigation.

Please explain what is functional on each device. I am unsure from what you’ve said: if CCH is working on all devices and broken on some, if just the swipe navigation portion of CCH is not working on certain devices, but the rest of CCH is, etc.

For example:

I’m not sure if you’re saying that CCH was previously working on the tablet or if you’re saying swipe-nav was functional, but CCH isn’t…

Feel free to contact me on discord @ maykar#7021 , might be easier to work through this there

802

Having some issues using a custom header with an iframe card.

Having “panel: true” and a single iframe card seems to stop the custom-header from loading.

This makes the regular header show:

This works, but the iframe card is too small to be usable:

803

Instructions and an example on how to use this with panel: true can be found in the important notes sections here or here and installation instructions here.

1 Like
804

Thank you. Got it working with the vertical-stack. I missed that. Sorry.

1 Like
805

Is there any way to identify individual devices if I’m using the same type everywhere (Nexus 7)? I’d rather not create separate users for each tablet, but might end up going that way as they all have the same user_agent.

Even if I can identify a tablet by adding a tag to the URL, that would work well.

806

Unfortunately, I believe the best solution is going to be separate users. A URL tag would clear itself when you visit another view.

807

@mayker Just a heads up, Apple announced at a WWDC session today that ipadOS will identify itself as a Mac via the userAgent attribute going forward. I’m sure I’m not the only one leveraging an iPad with HASS and CCH.

Here’s a screenshot of the user agent as detected by google on the current ipadOS beta.

image
image2048×1536 245 KB

808

Won’t affect how CCH operates, but iPad users will have to update their user_agent exceptions after upgrading. Thanks for the heads up!

809

Agreed. Hopefully posting this information will avert the impending questions regarding ipads and their user agents. :smiley:

1 Like
810

Hi i have got an issue which think might be related to the use of custom header.
I am using a card that shows a certain picture according to which harmony activity is started and i guess since i am using CCH is does not change automatically anymore after the activity changed as before. Might be related to caching?! After pressing F5 and/or restarting homeassistant the correct picture is shown again. Is this an expected behavior or is there some kind of fix for this behavior?
If this should not be related to CCH does anyone have an idea what the issue could be ?

Card used:

      type: picture-glance
      title: Harmony Activity Display
      entities: []
      entity: sensor.harmony_current_activity
      state_image:
        "PowerOff": /local/lovelace/card_backgrounds/power_off_2.jpg
        "Fernsehen": /local/lovelace/card_backgrounds/watch_tv1.jpg

Custom Header:

type: "custom:compact-custom-header"
background: 'rgba(150, 150, 150, 0.2)'
main_config: true
menu: show
options: clock
voice: hide
notifications: overflow
active_tab_color: orange
clock_format: 24
clock_date: true
clock_am_pm: false
exceptions:
  - conditions:
      user_agent: Mobile
    config:
      menu: overflow
      notifications: overflow
811

Always disable the thing you think is at fault first and check if the behavior changes (comment out CCH’s resource and see if this is still an issue).

This issue may be of interest:

https://github.com/home-assistant/home-assistant-polymer/issues/3060

1 Like