Compact Custom Header

mayker · December 30, 2018, 4:18pm

Happy Holidays Update:

Now with per device views!

You can now choose to hide/show lovelace tabs per device! Perfect for creating specific lovelace configs for tablets, phones, and more. See github for usage. Big thanks to @pjv for the original idea.
The card now has features to help with configuration, see below:

Card:

The card will automatically display when “configuring ui” in lovelace and has a few features to help with config.

Show your current device’s user agent information for easy copy and paste to config.
Show all tabs so that when using a device where tabs are hidden, you can temporarily show all tabs to allow for easy configuration.
The refresh button will do a hard refresh, refreshing the page ignoring cache.

pjv · December 30, 2018, 4:51pm

so cool.

thanks @mayker, this card is getting better and better.

the only thing i wish at this point is that there was a way to make it some kind of meta-entity that you didn’t have to put into a view like a normal card so the lovelace config could be more DRY.

mayker · December 30, 2018, 6:31pm

@pjv I’d prefer that as well, but this is mostly a hack and my options are pretty limited. Any option that isn’t a “card” wouldn’t be easily configurable by the user and having it as a card solves a good bit of issues that would exist otherwise.

pjv · December 30, 2018, 6:49pm

I figured as much. This is my favorite lovelace hack by far so far. Great work.

DavidFW1960 · December 30, 2018, 10:48pm

So this update has now killed the tab I had the card added to. (and it’s not working on other tabs)

Console shows this error:

compact-custom-header.js?v=0.2.1:36 Uncaught TypeError: Cannot read property '0' of undefined
    at HTMLElement.set hass [as hass] (compact-custom-header.js?v=0.2.1:36)
    at HTMLElement.set hass [as hass] (2af5b1c2d5fbf8c18791.chunk.js:3467)
    at config.cards.forEach (2af5b1c2d5fbf8c18791.chunk.js:5616)
    at Array.forEach (<anonymous>)
    at HTMLElement._createCards (2af5b1c2d5fbf8c18791.chunk.js:5616)
    at Object.runMethodEffect [as fn] (app-6a2aa396.js:248)
    at runEffectsForProperty (app-6a2aa396.js:248)
    at runEffects (app-6a2aa396.js:248)
    at HTMLElement._propertiesChanged (app-6a2aa396.js:248)
    at HTMLElement._flushProperties (app-6a2aa396.js:895)

I don’t have any options set at all - just loading the card

resources:
  - type: js
    url: >-
      /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.2.1
title: Home
views:
  - cards:
      - cards:
          - type: 'custom:compact-custom-header'

mcfrojd · December 31, 2018, 12:38am

Im trying this out for the first time and i get the same error i my console.

compact-custom-header.js?v=0.2.1:36 Uncaught TypeError: Cannot read property '0' of undefined
    at HTMLElement.set hass [as hass] (compact-custom-header.js?v=0.2.1:36)
    at config.cards.forEach (2af5b1c2d5fbf8c18791.chunk.js:5616)
    at Array.forEach (<anonymous>)
    at HTMLElement._createCards (2af5b1c2d5fbf8c18791.chunk.js:5616)
    at Object.runMethodEffect [as fn] (app-6a2aa396.js:248)
    at runEffectsForProperty (app-6a2aa396.js:248)
    at runEffects (app-6a2aa396.js:248)
    at HTMLElement._propertiesChanged (app-6a2aa396.js:248)
    at HTMLElement._flushProperties (app-6a2aa396.js:895)
    at HTMLElement._flushProperties (app-6a2aa396.js:248)

mayker · December 31, 2018, 1:30am

@DavidFW1960 @mcfrojd

Sorry about that guys, looks like one of my last minute changes to the main js didn’t make it in for some reason. It’s there now.

DavidFW1960 · December 31, 2018, 1:36am

Well that was a nasty little bug! All good now. Thanks again.

mcfrojd · December 31, 2018, 2:40am

When i use this

user_agent: Android
header: true, false

I was thinking that i would have the header when on any non Android device
And no header when on Android.
But im getting:
On non android = No header, but tabs
On Android = No header and no tabs
Is that a bug, or how do i keep the header visible when on non Android devices

mayker · December 31, 2018, 3:00am

It was a case sensitivity issue and has been fixed in the latest version. Thanks for finding it!

mcfrojd · December 31, 2018, 11:02am

I still get the same with 0.2.3

mayker · December 31, 2018, 12:21pm

Odd, I’m using the exact config you posted earlier and it’s working as expected between my pc and android:

    user_agent: Android
    header: true, false

Are you sure it’s not a cache issue? Hit the refresh button on card, cleared cache, version number added to resources, etc.?

sjorsjes · December 31, 2018, 12:35pm

It can be more dry with the use of YAML variables
Checkout my config: https://github.com/sjorsjes/home-assistant/blob/master/ui-lovelace.yaml

mayker · December 31, 2018, 12:41pm

That’s dope. Learn something new every day, thanks! ~~Will add that to the readme at some point.~~

mayker · December 31, 2018, 12:52pm

Unfortunately, it doesn’t play nice using edit in “configure ui”. After editing they just go back to full code instead of just variables. Still great option for yaml mode and as a space saver otherwise.

pjv · December 31, 2018, 12:52pm

bitchen!

thanks for the pointer @sjorsjes

klogg · December 31, 2018, 1:14pm

I don’t understand this. I only have it once in my Lovelace file and it works on every view.

And this is very cool:

I can see what it is doing but can you tell me somewhere that I can read up on exactly how it is doing it i.e a generalised syntax?

Thanks.

pjv · December 31, 2018, 1:16pm

i think your browser is caching the js and it won’t be there in a reliable way if you happen to do a hard refresh on a tab / view that doesn’t include the card.

mayker · December 31, 2018, 1:17pm

What he said. If your config doesn’t run into issues with only having it included once, awesome. There are some situations where it would be problematic, though.

klogg · December 31, 2018, 1:18pm

Ha! You’re absolutely right! I just tried it.
All these weeks and I must have only ever done a hard refresh on one view!!