Compact Custom Header

[pjv]

LOL - discourse getting closer and closer to IRC.

[gerard33 (Gerard 🇳🇱)]

Thanks for the update with per device views! Now using this to directly show the correct tab on my Nexus7 tablet and hiding all other tabs and menu

[gerard33 (Gerard 🇳🇱)]

Would it be possible to combine the per device views with per user views?

The use case is as follows: I have 2 iPads and I can’t distinguish them by user agent as they both show iPad and don’t have a unique ID are something like that.
If the logged in user can also be used, than I can make separate views for these iPads.

[mcfrojd]

Have cleared cache on desktop, laptop and phone. Not working for me.
Im running lovelace in yaml mode.

lovelace:
  mode: yaml

Maybe some of my other custom lovelace resources dont play along?

My lovelace
https://hastebin.com/vogubusuqi.coffeescript

title: Home Control Panel
resources:
  - url: /local/lovelace/mini-media-player-bundle.js?v=0.9.8
    type: module
  - url: /local/lovelace/tracker-card.js?v=0.1.5
    type: js
  - url: /local/lovelace/layout-card.js?v=bd7e5a
    type: js
  - url: /local/lovelace/button-card.js?v=0.0.3
    type: module
  - url: /local/lovelace/card-tools.js?v=0a97d3
    type: js
  - url: /local/lovelace/card-modder.js?v=35eb37
    type: js
  - url: /local/lovelace/vertical-stack-in-card.js?v=0.0.9
    type: js
  - url: /local/lovelace/fold-entity-row.js?v=f28e6e
    type: js
  - url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.2.3
    type: js

[mayker (maykar (pronounced "maker" with a southern accent))]

What’s all working and not working in your config? Is it just the header setting that’s getting flipped or is it all the options?

It also looks like you only have the card in one view, but limit android to views 9 & 11. That means this card wouldn’t get fully loaded on android. You should at least have this card on each starting view, in this case 1 & 9. In the readme I suggest adding it to all views when using user_agent_views, but you might be able to get away with just 1 & 9. Make sure both have the same config options as well.

[mayker (maykar (pronounced "maker" with a southern accent))]

I don’t believe there is a way to detect the logged in user (someone correct me if I’m wrong here, please). When there is a way to do so I will add it, but I also imagine at that point you would be able to set user views in HA.

[mayker (maykar (pronounced "maker" with a southern accent))]

You could also use a browser that allows you to change the user agent on the ipad.

Is there a web browser for iOS that will allow me to change the user agent?

[gerard33 (Gerard 🇳🇱)]

There is a way to do that. There was a post a while ago where it was explained (maybe on Github). Will try to find that and let you know.
Would be great if this can be added

Edit
@mayker will this work?

New User system, use username for conditions

You can use auth/current_user websocket command to get current login user. Or $('home-assistant').hass.user if you are in the front end

Edit 2
Here it is already used in a custom card.

My Lovelace Plugins

state-switch I like the conditional card and its ability to dynamically change the interface a bit, but if you want to switch between two different cards, you need to add two conditional cards… And if you want even more it quickly grows. So I made state-switch which allows you to switch in a card based on a dictionary of entity states. - type: custom:state-switch entity: device_tracker.my_phone states: home: [definition of one card] work: [definition of another card] …

[mayker (maykar (pronounced "maker" with a southern accent))]

Awesome, looking into it now!

[mayker (maykar (pronounced "maker" with a southern accent))]

Update:

You can now use usernames in user_agent config, big thanks to @gerard33 for this one.
Example:

user_agent: mayker, Android

[DavidFW1960 (David)]

So I am using an uncomplicated setup - just loading the card in resources and then one line to load the card on one view. Whenever you update the card I do a hard refresh/clear cache on that card. Should I load the card on every view and then do a hard refresh on every view?

After the update I see errors in the console and a logfile write in HA until I do the hard refresh.

It seems to be happy just hardrefreshing/cache clear on only one tab - but maybe if I don’t include it on every view and refresh every tab it does not load the new card?? I’m confused by some of the above comments…

[mayker (maykar (pronounced "maker" with a southern accent))]

The refresh only needs to be done on one tab/view after update to use the updated code, just like any other card. So, essentially, the way you’re currently doing it.

One of the reasons for having the card on every view is to help with issues that can happen on mobile devices. When using mobile and navigating away from the browser and back the browser will often refresh and if the card isn’t included in the view that gets refreshed then the custom header will fail to load.

Also, if using user_agent_views and hiding the first tab for an agent, the card will redirect to the first visible tab/view for the agent and if that tab/view doesn’t include the card then these issues can happen as well.

I recently changed the wording of the readme to say that if you’re able to put it in the first view only and it works, awesome! Otherwise if this causes issues, put it in every view or at least the first visible tab/view for each agent.

[DavidFW1960 (David)]

Thanks for the clarification on that in the readme but that was what originally caused some confusion lol.
Seems like a boots and braces approach is to include it on every view. I do get weird font stuff happening on mobile because it refreshes as you say but that’s not the fault of your card - it’s always done that and it’s bloody annoying but that’s iOS I think.

Thanks!

[mcfrojd]

First of all, made some changes to the new “username” option.

  - type: custom:compact-custom-header
    user_agent: remote
    header: true, false
    tabs: true, true
    menu: true, false
    notification: true, false
    clock: disable, options
    clock_format: 24, 24
    clock_am_pm: true, true
    user_agent_views:
      - 0,1,2,3,4,5,6,7,8,9,10,11,12  
      - 9,11

Still same problem while running 0.2.4
I am having my lovelace split up the “Frenck” way https://github.com/frenck/home-assistant-config/tree/master/config
Maybe this could be the problem?

With the above setup (Now included on all my lovelace views) i still get (when logged in as any other user than “remote” i get no header, but tabs, when logged in as the user “remote” i get the tab “9” witch is in fact xxxx.duckdns.org/lovelace/8
With no header, no tabs (and therefore i cant se if the clock is there!)

When i look in the chrome console on my computer logged in as NON "remote i have this error:

workbox-core.prod.js:1 Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode
    at Object.<anonymous> (workbox-core.prod.js:1)
    at Generator.next (<anonymous>)
    at n (workbox-core.prod.js:1)
    at workbox-core.prod.js:1

And as logged in as “remote” i get the same

[pjv]

better and better.

[mcfrojd]

Im going nuts…

With a new hass.io install on a new VM, on your v0.2.4 and with only this as a lovelace config:
(Running on a fully cleared cache chrome browser in incognitomode)

title: Home
resources:
  - url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.2.4
    type: js

views:
  - title: Home
    cards:
      - type: custom:compact-custom-header
        header: true
      - type: entities
        title: Test
        show_header_toggle: false
        entities:
          - sun.sun
  - title: 1
    cards:
      - type: custom:compact-custom-header
        header: true
      - type: entities
        title: Test
        show_header_toggle: false
        entities:
          - sun.sun

Am i not suppose to have a header then?
I get this:

No errors in chrome console…

[mcfrojd]

With this lovelace:

title: Home
resources:
  - url: /local/lovelace/tracker-card.js?v=0.1.5
    type: js
  - url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.2.4
    type: js

views:
  - title: Home
    cards:
      - type: custom:compact-custom-header
        header: true
        tabs: true
#        disable: true
        clock: notification
        clock_format: 24
      - type: entities
        title: Test
        entities:
          - sun.sun
  - title: 1
    cards:
      - type: custom:compact-custom-header
        header: true
        tabs: true
#        disable: true
        clock: notification
        clock_format: 24
      - type: entities
        title: Test
        entities:
          - sun.sun
  - title: Settings
    icon: mdi:settings-outline
    cards:
      - type: custom:compact-custom-header
        header: true
        tabs: true
#        disable: true
        clock: notification
        clock_format: 24
      - type: custom:tracker-card
        title: Tracker Card
        trackers:
          - sensor.custom_card_tracker
          - sensor.custom_component_tracker

I have this:

If i enable “disable: true” i get the header, but then i have no clock.
My goal is to have the header (original layout) when im on my computer, tablet or phone and logged in as anything else then my “remote” user.
The “remote” user will only show 2 tabs (views) and have no header and a clock at “options”

[mayker (maykar (pronounced "maker" with a southern accent))]

@mcfrojd

If i enable “disable: true” i get the header, but then i have no clock.

This option disables compact custom header completely and restores the original default header, but requires a refresh after setting.

header: false will remove the header all together leaving you with no buttons, clock, or anything.

If I understand correctly, you would like the remote user to only have 2 tabs shown, compact header active, and a clock at options. Everything else should be the default HA header.

views:
  - title: Home
    cards:
      - type: custom:compact-custom-header
        user_agent: remoteusername
        user_agent_views:
          - 1, 2, 3, 4, 5    # Since this agent uses disable: true below, it doesn't really matter what we put here.
          - 2, 4             # Tabs for remoteusername
        disable: true, false # Disables Compact Header completely for anything other than remoteusername
        clock: false, options
        clock_format: 24

[mcfrojd]

@mayker

• type: custom:compact-custom-header user_agent: remoteusername user_agent_views: - 1, 2, 3, 4, 5 # Since this agent uses disable: true below, it doesn’t really matter what we put here. - 2, 4 # Tabs for remoteusername disable: true, false # Disables Compact Header completely for anything other than remoteusername clock: false, options clock_format: 24

@mayker Thank you for beeing patient and got me to finally figure out how to make your fine custom card work in my setup.

[mayker (maykar (pronounced "maker" with a southern accent))]

No worries at all, glad we got there in the end!