Compact Custom Header

ebnerjoh · September 25, 2019, 6:00pm

Hi,

I am fighting to get this App working.

I am using HA Version 0.99.1

I create the subdirs like in the Docu on Github and created a file with the content of the RAW js file.

Then I went in the Editor on the HA Frontend and added:

cch:
  clock_date: true
  clock_format: '24'
  options: clock
  show_tabs: '1,2,3,4,5,6,7'
  swipe: true
  swipe_animate: fade
  voice: hide
resources:
  - type: js
    url: /local/lovelace-toggle-lock-entity-row/toggle-lock-entity-row.js?v=1
  - type: module
    url: >-
      /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=1.3.8
title: Home
views:

Althogh reloading Chrome and also deleting Cache I do not see any changes nor error messages.

Br,
Johannes

mayker · September 25, 2019, 8:36pm

Do you get any errors in your browser’s dev-tools console (F12)?

mayker · September 25, 2019, 8:46pm

Release 1.3.9

This one is mainly to address issues with Firefox and iOS/Safari.

Fixes:

Edit mode styles in Firefox
Scrolling of current tab icon into view if hidden
Panel view styling
Tweaked default_tab
Added thermostat card and light slider to ignored cards when swiping
Added version number to CCH Settings window to help diagnose caching issues on mobile devices.
Tweaks to swipe navigation’s animations

VDRainer · September 25, 2019, 9:26pm

I’m getting this error with 1.3.9 after reload (F5) browser.

2019-09-25 23:23:50 ERROR (MainThread) [frontend.js.latest.201909191] http://192.168.77.67:8123/community_plugin/compact-custom-header/compact-custom-header.js:779:36 ReferenceError: defaultTabRedirect is not defined

EDIT: And a big gap between the header and the badges.
Auswahl_203

EDIT 2: This gap is in every view until i open a panel view, then it’s gone until the next refresh .

mayker · September 25, 2019, 9:34pm

What does your config look like?

VDRainer · September 25, 2019, 9:37pm

cch:
  menu: overflow
  #background: rgba(38, 49, 55, 0.8)
  exceptions:
    - conditions:
        user_agent: Mobile
      config:
        menu: show
        options: hide
        swipe: true
        swipe_animate: fade
        background: var(--ha-card-background)
        #background: rgba(38, 49, 55, 0.8)
        active_tab_color: "var(--primary-color)"
#        hide_tabs: 13,14,15,16,17
    - conditions:
        user: Rainer
      config:
        default_tab: tpad_home 
        background: var(--ha-card-background)
        #background: rgba(38, 49, 55, 0.8)
        active_tab_color: "var(--primary-color)"
        #notify_indicator_color: yellow
        #notify_indicator_color: "var(--primary-color)"
        #notify_text_color: rgba(38, 49, 55, 0.8)
    - conditions:
        user: TPad
      config:
        disable_sidebar: true
        menu: overflow
        options: clock
        background: rgba(38, 49, 55, 0.8)
        active_tab_color: "var(--primary-color)"
        #notify_indicator_color: "var(--primary-color)"
        #notify_text_color: rgba(38, 49, 55, 0.8)
        clock_format: 24
        clock_date: false
        #date_locale: de-de
        hide_tabs: 0,1,2,3,4,5,6,7,8,9,10

VDRainer · September 25, 2019, 9:50pm

Fixed in 1.4.0

tom_l · September 25, 2019, 11:21pm

1.4.0 fixes my issues when using Firefox. Thank you.

mayker · September 26, 2019, 2:22am

I think this was due to a bug in CCH & panel mode. Which explains why it was only on views with layout-card. Should be fixed in the latest release (1.4.0)

ebnerjoh · September 26, 2019, 6:45am

Hi, although I was not able to find a typo in the URL there was something wrong. I navigated manually to the js file, copy/pasted it to the config and now it is working.

krovachek · September 26, 2019, 9:12pm

The problem is eliminated. Thanks again!

Mariusthvdb · September 27, 2019, 11:57am

suddenly noticed that I might experiment a more structural issue of CCH not auto updating the screen/display.
While I have reported my custom icons not the be updating with the state of the sensors they are using (while these same templates/sensors do change in the regular windows) (and which could have been caused by not having ‘return’ in the templates) I now notice that changing a theme, doesn’t automatically change the CCH color either. I need to manually refresh the window to get the icons, and the theme colored menus bar to adapt accordingly.

after theme change:

and a refresh:

this is on both Safari and Chrome Mac, Ha 99.2 CCH 1.4

tom_l · September 27, 2019, 12:05pm

I noticed this since updating to home assistant 0.99 too. The header colour does not update when the theme is changed. It takes a page refresh. I assumed it was a home assistant problem but it could be CCH. No idea how to tell which is responsible.

mayker · September 27, 2019, 6:24pm

@tom_l @Mariusthvdb

From what I’ve noticed, if you change the theme in the user options it will update correctly, but using any other method to change the theme won’t update the header color (keeps it the color it would be for the back-end selected theme. Using frontend.set_theme will only effect the view below the header).

~~This behavior is the same with or without CCH. You can always check by temporarily removing CCH from your resources to see if the behavior has changed.~~

~~How are you changing the theme? Is this what you’re seeing as well?~~

Edit: This is not the case, more info below

Mariusthvdb · September 27, 2019, 9:12pm

strangest thing: I’ve commented out the ccc: config in the ui-lovelace.yaml and no matter what I try, it keeps loading the ccc menu bar… no matter how many refreshes, either the 3 dots or the browser hard refresh, cache clear … Safari and Chrome. Do I need a restart for that??

forget about the above, I missed seeing the chevrons, and now check alright. But you’re right, no difference, doesn’t work in either case, for the theme to stick, we need a refresh.

Im using a small package which has an input_select in the frontend. Not using the selector in the menu for the user profile, (I’ve had issues before getting it to set the backend selection after having selected another theme there).

What I could test was the effect in states (regular HA). Change is immediate, and faultless. So would you suggest here this is a HA bug rather than a CCH issue?

Will raise an issue if so

mayker · September 27, 2019, 11:01pm

Upon further inspection, this looks to be a CCH issue. Not sure if it was the browser I was using at work or a caching issue, but this now appears to work as expected in HA and in CCH the header color does not change. Just added a fix for the next release.

Mariusthvdb · September 28, 2019, 6:51am

Great! If you need a tester let me know

tom_l · September 28, 2019, 4:23pm

Confirmed 1.4.1 fixes the issue. Thanks for the rapid support!

Mariusthvdb · September 29, 2019, 11:50am

+1, thanks @mayker , does the job perfectly now.

N-l1 · September 29, 2019, 6:30pm

Awesome! Fixed the issue for me too! It was seriously bothering me

Thanks @mayker