Compact Custom Header

dratcliffe17 · April 4, 2019, 6:33pm

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

pmcenaney · April 4, 2019, 7:23pm

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…

VDRainer · April 4, 2019, 7:48pm

You’re missing options in your view configuration and maybe main_config for the CCH?

Also i would write the url not with:

    url: >-
      /local/cu

    url: /local/cu...

should do it.
Don’t know if the multiline > works here.

JTPublic · April 6, 2019, 5:47pm

I have been using the CCH for a while now, works great and love it.

There is one annoyance for me, I have CCH in every view (latest version, inside the first ‘container’ card), when I refresh any HA page, sometimes it takes 2-3 refresh to get CCH to show, (i.e. shows the default full header instead of CCH), not sure why.

Anyone has this happen too?

Here’s my config:

- type: custom:compact-custom-header
  main_config: true
  background_image: true
  background_color: transparent
  menu: show
  options: show
  voice: show
  notifications: clock
  clock_format: 12
  clock_date: true
  active_tab_color: var(--primary-color)
  notify_indicator_color: black
  notify_text_color: black
  exceptions:
    - conditions:
        user_agent: x64
      config:
        hide_tabs: 1,3,7 
    - conditions:
        user_agent: Pixel
      config:
        hide_tabs: 2,1,3,6

mayker · April 6, 2019, 6:31pm

Try the latest release that I’m going to post directly after this one. Report back if you’re still having issues, let me know if there are any errors in your HA log or in your browser’s Dev-Tools console (F12).

mayker · April 6, 2019, 6:32pm

Update 1.0.2b9

Breaking Change:

The config options “background _image” and “background_color” have been replaced with just “background”, you can use the same options as before like background: "#000" or background: url('/local/image.jpg') , but can now do things like background: "#000 url('/local/image.jpg') right. More info on the background property here.

Replaced “background _image” and “background_color” with “background”
Fixed tab container margins when using conditionals to hide buttons
Modified notification monitor

JTPublic · April 6, 2019, 8:58pm

Hi mayker,

Thanks for the followup. I think it is working now, get CCH every time it refreshes.

No error in HA log related to CCH, got this in F12 (not sure it’s related):
Uncaught (in promise) DOMException

Also, the tracker card still list CCH as 1.0.2b8 after the update and after check.
I have in resources:

  - url: /customcards/github/maykar/compact-custom-header.js?track=true
    type: module

Do I still need this?

custom_updater:
  track:
    - cards
  card_urls:
    - https://raw.githubusercontent.com/maykar/custom-lovelace/master/tracker.json

_BaQs · April 7, 2019, 10:27am

+1 please share your theme ! <3

mayker · April 8, 2019, 2:34pm

You shouldn’t need the card URL in custom_updater config as it should tracked by default, but it wouldn’t hurt anything having it. It can take custom_updater a bit to reflect a recent update.

Steven_Rollason · April 8, 2019, 4:32pm

This seems to have an issue in the Beta version of version 2.0 of the iOS app. The app now hides the buttons at the bottom (Settings, Refresh, etc.) and they appear when you swipe down on the screen. This doesn’t seem to work with Compact Custom Header enabled (I’m on 1.0.2b9), or at least I can’t get it to work on my iPad.

mayker · April 8, 2019, 4:40pm

I do not own any iOS devices, so it’s going to be a bit difficult to track this one down. If you can provide some screenshots or even a gif showing the issue (and normal behavior) it might give me an idea of what’s going on.

Steven_Rollason · April 8, 2019, 5:06pm

I’ve actually got it working correctly now. It seems you just need to swipe down slightly higher up the screen when Compact Custom Header is enabled than if it isn’t. Without it enabled, you swipe down from just under the header bar. With it enabled, you swipe down from the header bar.

mayker · April 8, 2019, 5:07pm

Does CCH impact the look or functionality negatively aside from that?

Steven_Rollason · April 8, 2019, 5:48pm

Not that I’ve noticed so far. Everything else seems to function the same.

capstan1 · April 9, 2019, 10:54am

Hi!
I’m in the middle of the preparations for my final exam (wish me luck!) so I don’t want to have another thing helping me procrastinate.

I’ll share the theme when it’s ready but I won’t have time until mid-may. Sorry!

Steven_Rollason · April 10, 2019, 8:17pm

I’ve had this issue happen again but only on some views. After some experimenting, I think I know what the problem is. The app appears to display the toolbar at the bottom on the screen when it detects a scroll event. Since the Compact Custom Header reduces the overall height of the page, swiping down will only bring up the toolbar if the height of the page is still enough for this to trigger a scroll. I added an extra card to a view it wasn’t working on and this increased the height enough for it to work.

mayker · April 12, 2019, 1:40am

In case anyone else runs into this, it seems this is an issue with the iOS app beta.

yeahh · April 14, 2019, 4:16am

how to define user_agent? Is it the user authentication that differentiate Users, Admins and custom groups?
My main concern is to control what to show different view for each username under HA

mayker · April 14, 2019, 2:54pm

“user_agent:” uses a matching word or phrase from the devices user agent. You can find this at the bottom of this cards editor or by googling “what’s my user agent” on the device in question. This option is case sensitive.

“user:” uses a Home Assistant user’s name, not username (if they’re different). You can look to the bottom of the editor to see which to use. This option is case sensitive.

All the options are explained in the wiki, exception config options here:

Mariusthvdb · April 15, 2019, 9:33am

not sure if I am in the correct place in your thread, but since I can’t find a more related spot, hope you don’t mind me asking if we can also make state-dependent view icons with your card?

please have a look here Lovelace: View icon template not possible? to see what I am trying to achieve.

simply put: have the view icon reflect the state of a template.

hope you can have a look, thanks!