Compact Custom Header

[skynet01 (Alex)]

Looks like my version got updated to the none legacy one, thanks for the confirmation and maintaining it @pjv really appreciate it! All working now

[Dino-Tech (Darren Wilson)]

Total awesomeness Congrats!!!

[cameron]

Wow well done on the latest update.
Can’t wait to try it.

[DavidFW1960 (David)]

Nice work!

[klogg]

First off, I’ve done a hard reload. (F12, Empty cache and hard reload)

I’m not getting any styling applied to my notifications indicator and also this error…

My config is:

  - type: custom:compact-custom-header
    main_config: true
    background_color: var(--primary-background-color)
    active_tab_color: yellow
    tab_indicator_color: yellow
    notify_indicator_color: yellow
    notify_text_color: black
    menu: show
    notifications: show
    voice: clock
    options: show
    clock_format: 24
    clock_date: true
    date_locale: en-gb
    exceptions:
      - conditions:
          user_agent: Mobile
        config:
          notifications: show
          voice: hide
    conditional_styles:
      - entity: notifications
        condition:
          state: false
        button:
          notifications:
            hide: true

Any ideas?
Thanks.

[mayker (maykar (pronounced "maker" with a southern accent))]

Thanks for finding that one. Just released a fix.

[akkaria (Adam)]

Is there any reason why this has broken on my Amazon Fire tablet?

It was previously working fine until i updated to the last HA and the latest update for this card.

I know the android webview doesnt support some custom cards but as i mentioned, it was previously working but now with the latest updates it is not.

Edit: It works fine on my iOS and Windows devices.

[mayker (maykar (pronounced "maker" with a southern accent))]

@akkaria These two posts from earlier in this thread should help/explain.

@PlayedIn

I can tell you from experience, you will be unable to run any lovelace custom card that uses type: module on a Fire Tablet using Fully Kiosk. Amazon’s version of Webview, which Fully Kiosk uses, will not render those lovelace custom cards of type: module.

I ended up having to dump my wall mounted Fire tablets for this very reason, and replaced those with Lenovo Tab4 tablets because I wanted to use Fully Kiosk with custom Lovelace cards (type: module)

More information here on github

@pjv

So in case anyone else out there is having similar issues with old devices, I successfully transpiled v. 1.0.0b1 to stone age javascript that you can use with older devices. In order to get working code, I had to comment out everything to do with the editor, so this is only for yaml mode.

I created a gist with the working code and some documentation . As long as I keep using CCH, I’ll keep the gist revised with new versions as @mayker releases them. If I can work out how to transpile with the editor functionality intact, I’ll revise it for that too.

The code in that gist is working right now on my Fire 7 tablet using the Fully Kiosk browser.

[akkaria (Adam)]

Ahhhh this makes sense. The first sentence says it all… changing from type: js to module.

Might have to look into @pjv of compiling an older version until Amazon pull their finger out.

Thanks

[klogg]

@mayker

Thanks for finding that one. Just released a fix

Thanks. Notifications are now being hidden but the notify_indicator_color styling isn’t being applied when they do appear (it used to work, one or two versions ago). I can get notify_text_color to change.
.

  - type: custom:compact-custom-header
    main_config: true
    background_color: var(--primary-background-color)
    active_tab_color: yellow
    tab_indicator_color: yellow
    notify_indicator_color: yellow  # <---- 
    notify_text_color: black
    menu: show
    notifications: show
    voice: clock
    options: show
    clock_format: 24
    clock_date: true
    date_locale: en-gb
    exceptions:
      - conditions:
          user_agent: Mobile
        config:
          notifications: show
          voice: hide
    conditional_styles:
      - entity: notifications
        condition:
          state: false
        button:
          notifications:
            hide: true

[mayker (maykar (pronounced "maker" with a southern accent))]

Thanks again, fixed in latest.

[pmcenaney (Patrick McEnaney)]

Since updating to 0.91, CCH doesn’t seem to be working properly for me anymore.

I’ve got icons without text for my tabs, like I should, but the hamburger menu, notification icons, and title, etc. are showing up now.

[mayker (maykar (pronounced "maker" with a southern accent))]

Any errors in the HA logs or in your browser’s Dev-Tools (F12) pertaining to CCH? What does your config for CCH look like? What does your resources section for CCH look like?

[dratcliffe17 (Darren Ratcliffe)]

Does anyone know how to set the background_image to the right? I have tried adding right before the url and also tried background-location but neither seem to work?

[Dino-Tech (Darren Wilson)]

The only way I know is to create an image(.png works for me) around 50px in height by your screen resolution you are viewing on, ex. 1920px, and then add the image where you want it displayed in the header. Save that image and then use that for CCH background image.

[dratcliffe17 (Darren Ratcliffe)]

@Dino-Tech thanks, it is a shame we can use standard CSS types in the same way the Themes function uses them for a background image. The only issue with what you propose is that there would need to be a different image for each form factor you wanted to present on and also within that form factor the image will move based on if the side menu is open or not

[Dino-Tech (Darren Wilson)]

Yeah, Iknow. Probably a better way, but since I don’t use tabs in my headers it works fine for my set up.

[mayker (maykar (pronounced "maker" with a southern accent))]

Please, don’t hesitate to add feature requests on the github.

[Feature Request] Add "background-position:" to main & conditional config

[dratcliffe17 (Darren Ratcliffe)]

Thank you for adding the feature request for me, in future I will be sure to do so

[pmcenaney (Patrick McEnaney)]

Here is my Lovelace config:

resources:
  - type: module
    url: >-
      /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1
title: Dashboard
views:
  - badges: []
    cards:
      - cards:
          - clock_format: '12'
            menu: overflow
            notifications: hide
            options: clock
            type: 'custom:compact-custom-header'
            voice: overflow

And I found this error in Chrome’s dev tools:

Can’t find ‘hui-root’, going to walk the DOM to find it.
compact-custom-header.js?v=0.0.1:195 Uncaught (in promise) TypeError: Cannot read property ‘querySelector’ of undefined
at HTMLElement.run (compact-custom-header.js?v=0.0.1:195)
at HTMLElement.buildConfig (compact-custom-header.js?v=0.0.1:166)
at HTMLElement.updated (compact-custom-header.js?v=0.0.1:69)
at HTMLElement.performUpdate (app-0a9a98f1.js:2)
at HTMLElement._enqueueUpdate (app-0a9a98f1.js:2)

This is all after rolling back to 0.90.2; it didn’t make a difference compared to 0.91, but was working fine when I took the snapshot I just loaded, so I’m not sure what could be causing the issue all of a sudden… There’s nothing in my HA logs, but I’m not sure what you mean by my resources section for CCH, sorry I’m still somewhat new to HA.

This is the exact config I loaded from my snapshot that I purposely titled “Everything working” when I took it, lol. It’s not a hassio snapshot; it’s a VirtualBox snapshot, so I know it’s exactly the same config I had when it was working properly, which makes this even more strange…