Compact Custom Header & Custom User/Device Views

#125

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.

yjKLd9l.jpg1440x393

  • 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.
#126

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.

#127

@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.

#128

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

#129

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'
#130

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)
#131

@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.

#132

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

#133

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

#136

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

#137

I still get the same with 0.2.3 :frowning:

#138

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.?

#139

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

#140

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

#141

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.

#142

bitchen!

thanks for the pointer @sjorsjes

#143

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.

#144

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.

#145

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.

#146

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!!