Compact Custom Header & Custom User/Device Views


#489

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

#490

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


#491

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

So I am stumped.


#492

Does iOS have a method to clear app cache?


#493

Done a Hass reboot and all back to normal.

Thank you.


#494

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


#495

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.


#496

Thank @mayker .My lovelace.


#497

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

#498

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

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

#499

Sweet UI man!


#500

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


#501

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


#502

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.


#503

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?


#504

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.


#505

Yes it worked fine with 0.90.0b1… just b2


#506

Balloob has opened a PR to fix this… FWIW.


#507

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


#508

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:


Change the color off the icon in the header
Question about theme color options