Compact Custom Header & Custom User/Device Views


#228

Updates

Updated earlier today, but didn’t get around to posting here till now.

  • Slight adjustments to styling, tabs were getting cut off too soon before.
  • Fixed the redirect when a user agent hides first tab
  • Fix for am/pm config

#229

Has anyone managed to find a way that works to use an !include to have this in every view without repeating it?

I used to use that clever x-compact-header: &compact-header and - <<: *compact-header syntax but that really seems to break things!


#230

thats the way how I use it:

##### Compact header ##### 
x-compact-header: &compact-header
- type: custom:compact-custom-header
  user_agent: iPhone
  options: true, false

and then at the end of each view

- <<: *compact-header


#231

Yes, thanks that is how I used to do it but I have now split my lovelace config into separate files using !include and would like to !include the code for custom-compact-header so that I only have to maintain it in one place.


#232

So you are locking yourself into yaml mode using include…


#233

I think ‘locking myself in’ is putting it a bit strongly!

But yes I can’t quite bring myself to make the jump. I am not convinced the other mode (what is it called? :roll_eyes:) is really flexible enough. I have had a play with it on the new demo and it doesn’t seem to handle custom cards very elegantly. Also the actual area of screen real estate you get to edit the sections of config looks a bit small to me. I like to be able to see a lot more in one go for example with cards having a long list of entities.

Finally, I like to have comments, especially when trying out different things e.g. including and excluding entities.

Don’t get me wrong I think it is very impressive and I am sure if I was starting now I’d love it.


#234

Well… to be honest for any serious editing, I’m using the ui-lovelace.yaml file and I cut/paste that in whole to raw editor… but if I just update a custom card, the custom-updater edits the yaml file and I just use raw editor to update the /.storage…

If you continue with includes as I understand it you are locking yourself into yaml mode and that will be going away from what I see so it’s madness (IMO) going that way now. The RAW editor handles custom cards perfectly and it’s only going to improve IMO.

If you use comments (as I do) they are deleted in the .storage version but as I’m maintaining the YAML and cutting/pasting I have the best of both possibilities.


#235

@DavidFW1960

Ok, so I’m thinking this through again. Clearly the built-in editor is going to be ‘The Future’ (although I suspect it will be a long time before it takes over entirely) but I am not following some of what you are describing.

What is the custom-updater, and what do you mean by the RAW editor?
How are you keeping your (unused) lovelace-ui in synch? Is that entirely a manual process that you must remember to follow at every change?

Finally, don’t you miss the tracker-card? It must be a pain keeping up with all the new versions of custom cards and having to copy them manually from GitHub every time they change.


#236

Custom-Updater and the Tracker Card work together. I use that to update custom cards and components.
This only updates the yaml mode lovelace though so I then use the Lovelace UI Raw Editor to update the version in the .storage file.
I maintain the old lovelace yaml file and I do any major edits and changes there as the GUI editor sucks for things like stacks. I then copy and paste the contents of the yaml file into the raw editor.


#237

So, I am on 0.2.9 and 0.86.3 but the custom header doesnt work anymore. Any pointers to what might be at fault?


#238

Any errors in home assistant or in chrome dev tools pertaining to card (F12)? What does your config look like?


#239

Well, I used to use yaml mode. Switched to ui editor. When looking at tracking card everything was updated. But I now realized that although it seems js files are downloaded one has to manually update version in raw config. Works like a charm again!

Atleast above is how I understodd it. Custom components seems to work as it should though. Updating doesnt require one to update version somewhere.


#240

Yeah, when switching from yaml mode to storage mode you have to manually update resources in the UI’s raw editor as ui-lovelace.yaml is no longer used and custom updater no longer updates the resources.


#241

Hi all,

since 0.85 I cannot see anymore my custom header neither in my frontend or in my custom component list (I’m using tracker).

Here’s my config:

title: Casa
views:
  - title: At a glance
    id: home
    panel: true
    icon: mdi:home
    cards:
      - type: custom:layout-card
        cards:
          - type: custom:compact-custom-header
          - type: horizontal-stack
            cards:
              - type: picture-entity
                title: Irene
                entity: sensor.irene_status
                image: /local/irene.jpg
              - type: picture-entity
                title: Marco
                entity: sensor.marco_status
                image: /local/marco.jpg

#242

Put the card inside the horizontal stack, in a vertical stack with the horizontal stack, or in any container card with the panel modes card when using panel mode.

Example of the card inside the horizontal-stack (might look strange, blank space, etc):

  - type: horizontal-stack
    cards:
      - type: custom:compact-custom-header
      - type: picture-entity
        title: Irene
        entity: sensor.irene_status
        image: /local/irene.jpg
      - type: picture-entity
        title: Marco
        entity: sensor.marco_status
        image: /local/marco.jpg

Example in vertical stack with horizontal stack:

  - type: vertical-stack
    cards:
    - type: custom:compact-custom-header
    - type: horizontal-stack
      cards:
        - type: picture-entity
          title: Irene
          entity: sensor.irene_status
          image: /local/irene.jpg
        - type: picture-entity
          title: Marco
          entity: sensor.marco_status
          image: /local/marco.jpg

#243

I’ve done as you suggested (and tried again pasting your code directly).

Now I have a blank box in my horizontal stack and no compact header:thinking:


#244

Use the second method shown above to fix the blank box issue. Any errors in home assistant or in chrome dev tools pertaining to card (F12)?


#245

Oh this is the new code

  - title: At a glance
    id: home
    panel: true
    icon: mdi:home
    cards:
      - type: custom:layout-card
        cards:
          - type: vertical-stack
            cards:
            - type: custom:compact-custom-header
            - type: horizontal-stack
              cards:
                - type: picture-entity
                  title: Irene
                  entity: sensor.irene_status
                  image: /local/irene.jpg
                - type: picture-entity
                  title: Marco
                  entity: sensor.marco_status
                  image: /local/marco.jpg

But then again I can’t see che custom header. Looking with F12 there is an error:

image

Here’s line 18 of code:

love_lace = panel.querySelector(‘ha-panel-lovelace’).shadowRoot;


#246

You’re using an old version of the card, please update.


#247

I would love to. In the wiki is declared that it will be automatically visible with tracker. But I can’t see it.