Compact Custom Header

mayker · September 23, 2019, 9:08pm

You can do it that way as well. CCH is just evaluating the string as javascript. So all of the following examples would work the same:

if (entity['input_boolean.home'].state == "on") "mdi:home";
else if (entity['input_boolean.home'].state == "off") "mdi:away";
else "mdi:emoticon";

if (entity['input_boolean.home'].state == "on") return "mdi:home";
if (entity['input_boolean.home'].state == "off") return "mdi:away";
return "mdi:emoticon";

let icon = entity['sensor.weather_icon'].state == "on" ?  "mdi:home" :  "mdi:away";
return icon || "mdi:emoticon";

Mariusthvdb · September 23, 2019, 9:10pm

magic, thanks, you’re the best!

just to be 100% sure: I do need the ; after each line in the template do I?

mayker · September 23, 2019, 9:11pm

Sorry, yes you do (for multi line statements). I’ll update my examples. Since the config renders it as one long string the semi-colon let’s it know when each statement ends.

( I’m sure there may be better ways to do it and will update you if things change. )

tom_l · September 23, 2019, 11:22pm

I have an issue with the header bar background colour in Firefox always appearing as white (Chrome appears to be ok):

In v1.3.6 it looks like this when editing in firefox:

However in v1.3.7 and v1.3.8 it looks like this:

This is particularly bad if my night theme is active:

TryingHA · September 24, 2019, 3:33pm

I have this issue as well and was about to post about it in github but was checking here first. I can confirm it works in chrome but not firefox and I have tested this on multiple machines (home/work/laptop).

pjv · September 25, 2019, 2:06pm

Just an FYI / PSA for people using the babelized “legacy” version of CCH that I was maintaining for a while and then @mayker took over.

I just did a system update on my Fire 7 tablet and FireOS updated to verison 5.6.4.0 and wonder of wonders, they updated the system webview to v. 70+ and for me at least, Fully Kiosk now works perfectly with stock CCH (and any other .js that is included in Lovelace as type: module).

Halleluja!

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