Compact Custom Header

cameron · March 5, 2019, 10:16pm

This is my config.

- type: custom:compact-custom-header
  main_config: true
 # header: false
  menu: clock
  notifications: overflow
  options: show
  clock_am_pm: false
  clock_date: true
  voice: hide
  clock_format: 12
  exceptions:
    - conditions:
        user: cameron
      config:
        user_agent: mobile
        media_query: '(max-width: 600px)'
        options: show
        header: true

mayker · March 5, 2019, 10:19pm

Nothing in there is hiding the header or menu. Caching issue maybe? Is there no way to refresh or clear cache?

cameron · March 5, 2019, 10:21pm

Only by the refresh in the header menu.
Which is not there any more.

So I am stumped.

mayker · March 5, 2019, 10:24pm

Does iOS have a method to clear app cache?

cameron · March 5, 2019, 10:24pm

Done a Hass reboot and all back to normal.

Thank you.

Dino-Tech · March 8, 2019, 8:40am

For what it’s worth… @mayker I’ve been running my Lovelace with no header for all views including my mobile. I created button in one of the views that triggers a simple script that has been working flawless for me. Basically I use it as an escape key. Maybe it can be useful to someone. (using browser-commander)

`#script`
browser_navigate:
  sequence:
    - event: browser_command
      event_data:
        command: navigate
        navigation_path: /lovelace/0?disable_cch
    - delay: '00:00:01'
    - event: browser_command
      event_data:
        command: lovelace-reload

`#button code:`
type: picture-entity
entity: script.browser_navigate
show_state: false
show_name: false
tap_action:
   action: toggle
state_image:
   "off": /local/icons/Blue/bluEsc.png

escape

mayker · March 8, 2019, 5:29pm

I plan to add a tab that you can toggle on/off that will accomplish something similar, but this is a very cool and customizable option.

PM-Smart · March 10, 2019, 4:36am

Thank @mayker .My lovelace.

mayker · March 12, 2019, 6:30pm

Updates:

1.0.1b4

Fixes background image issues, removed background_image option as it’s no longer needed.
Fixes unresponsive menu button when inside overflow menu.
Adjusted styling for notification indicator when inside overflow menu.

1.0.1b5

Adjust clock styling
Fix menu button as clock

mayker · March 12, 2019, 9:02pm

Sorry, one more quick update. Forgot to add it in the previous two.

1.0.1b6

Adds override to HA locale for date formatting/language. Must be set manually, see readme. Example: date_locale: en-gb . Helpful if you want date format to be day/month as HA’s locales don’t seem to seperate en-us and en-gb

Drew.B · March 14, 2019, 11:52am

Sweet UI man!

lubbertkramer · March 15, 2019, 2:50pm

Will it be possible to also determine the theme per view/user by this card?

marc.wi · March 15, 2019, 3:15pm

Thanks a lot for that one @pjv! Works perfectly!!

mayker · March 15, 2019, 9:00pm

Not sure I understand, are you talking about the dev branch’s theme features? If so, yes, you will be able to have separate themes per exception. I’ll be releasing later today.

DavidFW1960 · March 16, 2019, 12:39am

0.90.0b2 has broken CCH Card

CARD-TOOLS IS INSTALLEDDeviceID: 624e9611-1586b55e
compact-custom-header.js?track=true:262 Can't find 'hui-root', going to walk the DOM to find it.
compact-custom-header.js?track=true:195 Uncaught (in promise) TypeError: Cannot read property 'querySelector' of undefined
    at HTMLElement.run (compact-custom-header.js?track=true:195)
    at HTMLElement.buildConfig (compact-custom-header.js?track=true:166)
    at HTMLElement.updated (compact-custom-header.js?track=true:69)
    at HTMLElement.performUpdate (app-fa09e639.js:2)
    at HTMLElement._enqueueUpdate (app-fa09e639.js:2)
run @ compact-custom-header.js?track=true:195
buildConfig @ compact-custom-header.js?track=true:166
updated @ compact-custom-header.js?track=true:69
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
CompactCustomHeader @ compact-custom-header.js?track=true:52
di @ 1036b31d59d6316c06b9.chunk.js:4543
ui @ 1036b31d59d6316c06b9.chunk.js:4543
createCardElement @ 1036b31d59d6316c06b9.chunk.js:5344
_rebuildCard @ 1036b31d59d6316c06b9.chunk.js:5423
t.addEventListener.r @ 1036b31d59d6316c06b9.chunk.js:5344
i @ app-fa09e639.js:650
customElements.whenDefined.then @ 1036b31d59d6316c06b9.chunk.js:4543
Promise.then (async)
ui @ 1036b31d59d6316c06b9.chunk.js:4543
createCardElement @ 1036b31d59d6316c06b9.chunk.js:5344
e.cards.forEach @ 1036b31d59d6316c06b9.chunk.js:5423
_createCards @ 1036b31d59d6316c06b9.chunk.js:5423
updated @ 1036b31d59d6316c06b9.chunk.js:5423
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
(anonymous) @ 1036b31d59d6316c06b9.chunk.js:5344
value @ 1036b31d59d6316c06b9.chunk.js:5640
async function (async)
value @ 1036b31d59d6316c06b9.chunk.js:5640
value @ 1036b31d59d6316c06b9.chunk.js:5640
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
initializer @ app-fa09e639.js:2
defineClassElement @ 1036b31d59d6316c06b9.chunk.js:5423
(anonymous) @ 1036b31d59d6316c06b9.chunk.js:5423
(anonymous) @ 1036b31d59d6316c06b9.chunk.js:5423
initializeInstanceElements @ 1036b31d59d6316c06b9.chunk.js:5423
(anonymous) @ 1036b31d59d6316c06b9.chunk.js:5423
i @ 1036b31d59d6316c06b9.chunk.js:5423
_clone @ app-fa09e639.js:2
_commitTemplateResult @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
a @ app-fa09e639.js:2
q.render @ app-fa09e639.js:2
update @ app-fa09e639.js:2
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
_fetchConfig @ 1036b31d59d6316c06b9.chunk.js:5660
async function (async)
_fetchConfig @ 1036b31d59d6316c06b9.chunk.js:5660
firstUpdated @ 1036b31d59d6316c06b9.chunk.js:5660
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
(anonymous) @ 1036b31d59d6316c06b9.chunk.js:5640
value @ app-fa09e639.js:874
c.then @ app-fa09e639.js:874
Promise.then (async)
value @ app-fa09e639.js:874
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
update @ app-fa09e639.js:2
_commitTemplateResult @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
a @ app-fa09e639.js:2
q.render @ app-fa09e639.js:2
update @ app-fa09e639.js:2
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
update @ app-fa09e639.js:2
_commitTemplateResult @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
update @ app-fa09e639.js:2
_commitTemplateResult @ app-fa09e639.js:2
commit @ app-fa09e639.js:2
a @ app-fa09e639.js:2
q.render @ app-fa09e639.js:2
update @ app-fa09e639.js:2
performUpdate @ app-fa09e639.js:2
_enqueueUpdate @ app-fa09e639.js:2
async function (async)
_enqueueUpdate @ app-fa09e639.js:2
requestUpdate @ app-fa09e639.js:2
set @ app-fa09e639.js:2
value @ app-fa09e639.js:1360
e @ app-fa09e639.js:1360
n @ core-c8c933d4.js:1
(anonymous) @ core-c8c933d4.js:1
Promise.then (async)
c @ core-c8c933d4.js:1
subscribe @ core-c8c933d4.js:1
S @ core-c8c933d4.js:1
window.hassConnection.then @ core-c8c933d4.js:1
Promise.then (async)
153 @ core-c8c933d4.js:1
s @ core-c8c933d4.js:1
(anonymous) @ core-c8c933d4.js:1
(anonymous) @ core-c8c933d4.js:1

And not showing?

mayker · March 16, 2019, 2:05am

Will check it out when I can get on 0.90.0b2. I’m on 0.90.0b1 now and all is well. Looks like something was moved or renamed.

DavidFW1960 · March 16, 2019, 2:09am

Yes it worked fine with 0.90.0b1… just b2

DavidFW1960 · March 16, 2019, 2:37am

Balloob has opened a PR to fix this… FWIW.

mayker · March 16, 2019, 2:39am

Just saw that, adjusting it to make it backwards compatible.

mayker · March 16, 2019, 3:21am

Update!

1.0.1b7

Toggle hidden tab redirect
Toggle chevrons (tab scroll arrows)
Customize header background with color or image
Customize the color of every header item. Every tab and button can be a different color.
Few misc. fixes and style changes.

I apologize for the multiple releases in one day. Will keep them to a minimum from now on.

This one is for the heavy themers out there. You can now customize the color of everything in the header, including its background color, background image, or both. Styling config at the end of the github readme. Works with exceptions as well, everyone can have a different theme!

Check out this super ugly example with a transparent png for a background: