Compact Custom Header

Share your Projects! Dashboards & Frontend
389

I’ve been struggling for the last few days to get this card to work and keep being met with the red box that says “Custom element doesn’t exist: compact-custom-header”. Here’s my resources configuration:

resources: 
  - url: /local/mini-graph-card-bundle.js?v=0.2.1
    type: module
  - url: /local/custom-lovelace/weather-card/weather-card.js
    type: module
  - url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js
    type: module
  - url: /local/mini-media-player-bundle.js?v=1.0.1
    type: module

And the location of the files:

user@host:/home/homeassistant/.homeassistant/www/custom-lovelace/compact-custom-header$ ls -lah
total 500K
drwxr-xr-x 2 homeassistant homeassistant 4.0K Feb 17 22:26 .
drwxr-xr-x 4 homeassistant homeassistant 4.0K Feb 14 20:03 ..
-rw-r--r-- 1 homeassistant homeassistant 280K Feb 17 22:26 compact-custom-header-editor.js
-rw-r--r-- 1 homeassistant homeassistant 203K Feb 17 21:43 compact-custom-header.js
user@host:/home/homeassistant/.homeassistant/www/custom-lovelace/compact-custom-header$

I’ve noticed that I’m getting some errors in the js console when trying to load the page:

compact-custom-header.js:7 Uncaught SyntaxError: Unexpected token < compact-custom-header-editor.js:7 Uncaught SyntaxError: Unexpected token <

I also have javascript set to “latest” in the HA configuration. I’m using HA 0.87.1 and from the timestamps above, should be using the absolute latest compact-custom-header scripts. I’ve never been able to get them to work, and am using a variety of browsers from an older webview on Amazon Fire HD 8, to the latest Chrome on Win 10 and macOS. Any guidance is greatly appreciated!

edit: Just for completion I thought it would be good to show my UI config. I’ve tried this both within and outside the first vertical-stack there:

views:
  - title: Main
    icon: mdi:home-outline
    cards:
      - type: custom:compact-custom-header
        main_config: true
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
390

You need to copy from the “raw” file on the github page or “clone or download”.

391

I downloaded the files using wget, but I’ll try copy\pasting.

392

This indicates that the file is most likely an HTML document, not a js file. So it looks like even if you used wget, you downloaded a webpage instead of the raw file.

1 Like
393

After being sure you’re grabbing the raw file, I would add a version number to your resources entry to ensure your browser loads the new version instead of using the cached copy. For example:

  - url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1
    type: module
2 Likes
394

Yeah apparently because copy/pasting worked fine. Thanks! The good news: it works. The bad news: it doesn’t seem to be working on Opera mobile (probably due to Amazon Fire HD 8’s crappy Webview). Thanks for your guidance!

395

@pjv Has been kind enough to provide this for legacy browsers.

2 Likes
396

Actually after this recommendation it even works properly on Opera mobile. I cleared the browsing data on the tablet, but obviously missed something. Thanks for your tip!

2 Likes
397

Pretty sure it will work using Chrome on the Amazon Fire HD 8 as long as you use the most recent version. However it will not work if you use Fully Kiosk. Have you tried to update Opera to the latest version?

398

Thanks. Chrome does behave as expected but I don’t have any options for viewing Chrome fullscreen, hence Opera which does support fullscreen. This is going to work well though, I think. :slight_smile:

1 Like
399

Updates

I’ve been doing a poor job posting updates here, so to catch up here’s whats happened in the last few updates.

1.0.0b4

  • Redirect after clearing cache with URL param.
  • Don’t attempt to redirect to visible tab if all tabs are hidden.

1.0.0b5

  • Fix for “disable” option when used in an exception.

1.0.0b6

  • Add show_tabs option as an alternative to hide_tabs.
  • Fix for single tab layouts.

It can take up to 60 mins for custom-updater to show the latest update.

2 Likes
400

did you mean b6? I got b5 hours ago

1 Like
401

Thank you, fixed the post

1 Like
402

Running this config with the new “show_tabs”. But i see all tabs when logged in as remote.
Have cleared all cache.

  - type: custom:compact-custom-header
    main_config: true
    disable: true
    exceptions:
      - conditions:
          user: remote
        config:
          disable: false
          options: clock
          clock_format: 24
          menu: hide
          notification: hide
          show_tabs: 8,10
403

Confirm a couple of things for me:

  1. Other options for the exception are functional.
  2. If replaced with hide_tabs it works as expected.
  3. Be sure to clear CCH cache on every device.
404
  1. Yes
  2. If i change it works.
  3. After moving around a lot in diffrent browsers it seems to be working again :slight_smile:
1 Like
405

FYI,
The issue I was having with exceptions has started happening again and CCH is no longer disabled on Chrome for Android. Config is below, my next step will be to try applying the config on every view instead of using main_config.

user agent:

Mozilla/5.0 (Linux; Android 8.0.0; SM-G950U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.105 Mobile Safari/537.36

config:

---
type: 'custom:compact-custom-header'
main_config: true
options: clock
voice: hide
clock_format: 12
clock_am_pm: true
exceptions:
  - conditions:
      user_agent: Android
    config:
      disable: true
406

Just released an update (1.0.0b9) that tweaks config caching a bit, give it a shot and and be sure to clear CCH cache after doing so.

1 Like
407

So, just noticed I cant reach the editor anymore. the dots are gone. If I reload I can see it flash by. What to do?

EDIT: Adding ?disable_cch worked after some tries!

408

Depends on your config, I click the clock