Compact Custom Header

boneheadfraggle · July 19, 2019, 10:18pm

Hi,

I’d like to start with a big thanks for this project. The customization possibilities and swipe navigation are really just amazing.

Question in short:
I’d really like the same navigation on other browsers as on a mobile - Menu option in the three dot-button and when I click it it would show the sidebar.

Longer description:
As a default, I have this config:

It works great for my kids and the dashboards.

But for myself I’d like to be able to access the Sidebar without seeing it all the time.
Ideally It would be accessible from the overflow menu. The menu item is there, but since I have “Hide & Disable Sidebar” active, nothing happens when I click it.
And If I disable “Hide & Disable Sidebar”, the sidebar is shown - which I don’t want.

Basically, what I want is the same behavior on a PC browser as on the mobile. There it works perfectly. The Menu option is in the three dots-button and when I click it it shows the sidebar.

Is that possible?

mayker · July 19, 2019, 10:26pm

I’ve commented on this a few times, please see:

here and here

tldr : This is something that should either be a dedicated addon for the sidebar or added to core. I’ve added the ability to disable the sidebar only to keep the exceptions and kiosk_mode features of CCH useful.

Edit: I realize now that you were asking if it is currently possible, but I kind of jumped ahead to explaining why it’s not.

mayker · July 19, 2019, 10:43pm

Also, keep in mind that this is the first iteration of the new sidebar. There’s a fair bit of comments and criticism coming in now and I’m sure it’s all being heard. Solving current issues/feature requests with a custom project is counterproductive for both the custom project and HA.

klogg · July 19, 2019, 10:44pm

Wait… I’ve been using CCH since the beginning and as such have had it set up how I like it for so long now that I don’t even always keep up with changes as well as I should. Maybe I missed it or maybe it has been possible for along time and I never took any notice, but are you saying you can configure CCH dynamically using automations (based on input_booleans as triggers)?

mayker · July 19, 2019, 10:46pm

Not just input_booleans, any entity:

https://maykar.github.io/compact-custom-header/Conditional-Styling-Config/

You can do so with javascript templates as well:

https://maykar.github.io/compact-custom-header/Conditional-Styling-Config/#conditional-styling-templates

boneheadfraggle · July 21, 2019, 10:00am

I didn’t realize that was the reason, so thanks!

Anyway, I just tried an old school way to do it which solves (or rather a work around to) my issue:
Hide Sidebar for everyone and just put a weblink to “https://xyz.duckdns.org/hassio/dashboard” on a tab that’s only shown to myself. Then a new page is shown - with sidebar - but hidden on all other tabs.

That works fine for me - that’s basically the functionality I wanted, but with a link instead of a menu item in the 3-dot menu.

Again - thank you very much for this. CCH is just amazing.

mattvolp · July 21, 2019, 6:45pm

Hi pjv. Can you please explain how I use this modified version for legacy devices?

pjv · July 22, 2019, 10:28am

I’m sorry but I don’t know what to explain. You just substitute the “legacy” code for the normal CCH code and reference it in resources as js instead of as module and then use it the same way you would use the normal CCH.

You can’t use both - it’s one or the other. And the legacy version is currently far behind due to some issues with importing the editor component that I couldn’t work out. I think @mayker is working on a new structure for the code that would make it possible for me to catch the legacy version back up.

mattvolp · July 22, 2019, 11:22am

Yeah, I thought I might not have explained it properly. I understand you are not supporting this at all, but I just need some pointers of how to use it. I am doing the below and it doesn’t seem to be working on my Fire HD 8 on FKB (Fire OS version).

I have put the legacy version in /local/custom-lovelace/compact-custom-header/ and entered

- url: /local/custom-lovelace/compact-custom-header/compact-custom-header-legacy.js?v=1.0.4
  type: js

in the resources section in my Lovelace config and removed the normal CCH version.

Do I need the:

?v=1.0.4

at the end?

Does it still use the old method of using it as a custom card in each view, like this?

views:
  - icon: mdi:home
    name: Home
    cards:
      sun.sun
      - type: custom:compact-custom-header

I never set up the CCH card like that before, only using the new cch: method, so I wonder if there is any documentation somewhere that can tell me how?

I am on 0.96.3 - does it work on this version of HA or should I downgrade?

I really appreciate your time on this, I’ve been pulling my hair out for days trying to make it work - you are my last hope! I’m more than happy to shoot you a decent donation if you can help me get this to work.

Thanks so much.

Mariusthvdb · July 22, 2019, 11:40am

after some hesitation (side bar) thought Id update HA to 96.3, which seems to have gone effortless. Kudos to the team once again.

I now have 2 anomalies, 1 pertaining to the CCH.

log:

2019-07-22 13:30:39 ERROR (MainThread) [frontend.js.latest.201907210] :0:0 Script error.
2019-07-22 13:30:39 ERROR (MainThread) [frontend.js.latest.201907210] :0:0 Script error.
2019-07-22 13:30:51 ERROR (MainThread) [frontend.js.latest.201907210] https://redacted:8123/local/lovelace/resources/compact-custom-header/compact-custom-header.js?v=1.2.0:210:46 TypeError: null is not an object (evaluating 'root
    .querySelector("hui-notification-drawer")
    .shadowRoot')
2019-07-22 13:31:46 ERROR (MainThread) [frontend.js.latest.201907210] https://redacted:8123/local/lovelace/resources/compact-custom-header/compact-custom-header.js?v=1.2.0:210:46 TypeError: null is not an object (evaluating 'root
    .querySelector("hui-notification-drawer")
    .shadowRoot')

As you might remember discussing this ealier on, I have 1 of my tabs displayed with a custom icon:

# https://maykar.github.io/compact-custom-header/Main-Config-Options/
#type: custom:compact-custom-header
#main_config: true
header: true
menu: show
options: show
swipe: true
swipe_animate: none
chevrons: true
#background: transparent
exceptions:
  - conditions:
      user_agent: iPhone
    config:
      menu: hide
      notifications: hide
      header: true
      options: hide
conditional_styles:
  - template:
      tab:
        12:
          - icon: >
              if (entity['sensor.family_home'].state == '0') 'mdi:account-off';
              else if (entity['sensor.family_home'].state == '1') 'mdi:account';
              else if (entity['sensor.family_home'].state == '2') 'mdi:account-multiple';
              else if (entity['sensor.family_home'].state == '3') 'mdi:account-multiple-check';
              else 'mdi:account-group';
  - entity: notifications
    condition:
      state: false      # When there are no notifications...
    button:             # hide notifications button.
      notifications:
        hide: true

I load this ccs.yaml by means of an include in ui-lovelace, also shared in this group:

title: Mqtt Hub Lovelace
resources: !include lovelace/resources/resources.yaml
button_card_templates: !include lovelace/includes/button_card_templates.yaml
cch: !include lovelace/includes/compact_custom_header.yaml
decluttering_templates: !include lovelace/includes/decluttering_templates.yaml
etc 
etc

and this worked just fine before.

after the update I see this as the tab icon:

what could be wrong? thanks for having a look.

update

just for completeness sake: the above is in Lovelace (obviously) and in States, the tab icon is displayed correctly:

at least as proof the base sensor is correctly initialized.
Hope @mayker knows what I could do to test and fix. Please let me know how to help debug this.

pjv · July 22, 2019, 2:04pm

I don’t.

mattvolp:

Does it still use the old method of using it as a custom card in each view, like this?

Copy to clipboard
views:
  - icon: mdi:home
    name: Home
    cards:
      sun.sun
      - type: custom:compact-custom-header
I never set up the CCH card like that before, only using the new cch: method, so I wonder if there is any documentation somewhere that can tell me how?

Yes, the version that is currently still in my gist is prior to the “new” method where CCH is not a card and has a global config. I guess you might be able to clone @mayker’s repo and check out the tag for v. 1.0.4b8 to see the documentation that is consistent with that version.

I’m sorry but I won’t be much help with troubleshooting because I am actually currently running a newer test version based on a gist that @mayker sent me and I’m also still on HA 0.95.4.

I think that if @mayker goes ahead with the new code structure that he is using in the test he sent me, then I’ll be able to release new versions of the legacy code in the future. And I’ll get it tested and working with 0.96+ as I upgrade myself which shouldn’t be too far down the road, but I can’t give you an ETA on any of that stuff.

mattvolp · July 22, 2019, 3:05pm

Amazing. That should all help a lot.

I might downgrade to HA 0.95.4 so my entire environment is the same as yours.

I really appreciate the help - I know it must be a pain to explain yourself over and over.

Where can I donate; do you have a BuyMeACoffee?

pjv · July 22, 2019, 3:24pm

Help someone else when you can. Pay it forward.

mayker · July 22, 2019, 8:13pm

Sorry folks, I’m on vacation for a couple of weeks and internet access is sparse. I’ll be back on the case soon. Thanks for your patience.

VDRainer · July 22, 2019, 8:28pm

Wish you a nice vacation!

mattvolp · July 23, 2019, 1:39am

YES! It works!

I did a clean install of 0.95.4 and after a few browser cache cleans we were up and running.

Brilliant work, @pjv.

cotwild · July 23, 2019, 8:30am

I got the same problem, after upgrade to 0.96.3 the fullscreen mode (hiding bar completely) isn’t working anymore… will the compact custom header be updated to be working with 0.96 and later?

Best regards
Dave

ludeeus · July 23, 2019, 9:08am

“isn’t working anymore” is not that much to go on, if you have an issue you should open an issue here https://github.com/maykar/compact-custom-header/issues

cotwild · July 23, 2019, 10:13am

You’re absolutely right. I’m sorry… I wasn’t on the latest cch-version, trying to update anything and give it a try again.

EchoWisky · July 23, 2019, 10:23am

Hi,

I updated HA from 0.95.x to 0.96.3.
I also upated Compact Custom Header to 1.1.0.

Now all users can see all tabs. I have set this in my config and it worked before:

  exceptions:
    - conditions:
        user: Erik
      config:
        menu: show
        default_tab: 0
        show_tabs: 0,1,2,3,4,5,6,7
    - conditions:
        user: Lara
      config:
        menu: hide
        default_tab: 8
        notifications: hide
        show_tabs: 8,2,5

I don’t know if it is related but this is in my log:

2019-07-23 12:15:43 ERROR (MainThread) [frontend.js.latest.201907210] http://192.168.1.211:9050/local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1:211:5 Uncaught TypeError: Cannot read property 'shadowRoot' of null

Thanks,

E.