Compact Custom Header

Another quick update to give it one more shot today. In some cases while in edit mode you’ll just see the edit bar, but nothing else. Happens if for some reason the card couldn’t be found or if it’s contained in another card like vertical-stack. It’s a workaround for now. Also fixed “header: false” not working properly.

also fixed the typo on the version number. new version is 0.1.1

Thanks for mentioning it @DavidFW1960

I wondered if that was a typo…

I’m seeing the same issue and getting this error (cleaned cache):

Uncaught TypeError: Cannot read property ‘shadowRoot’ of null
at compact-custom-header.lib.js?v0.1.1:31

hui_view = div_view.querySelector(‘hui-view’).shadowRoot;

Help me: ERROR (MainThread) Uncaught TypeError: Cannot read property ‘shadowRoot’ of null

I’m working on it, bear with me, free time is limited at the moment

@NeoID @PM-Smart

Update:

Apologize for the delay, updated to address the 0.84 issues. Please, let me know how it works out for you. No notes for the update really, just had to tweak a good bit to try and cover all bases: card in panel view, in container card like vertical-stack, yaml mode, normally placed, and edit view.

Well this is a new one:

https://my-domain.duckdns.org/local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.1.2:44:28 Uncaught ReferenceError: yaml_mode is not defined

Yup, that’s my bad. Updated

OK that seems to be working now. Thanks.

1 Like

Thanks for the update!
On pages with panels I get this error now:

compact-custom-header.lib.js?v0.1.3:94 Uncaught TypeError: Cannot read property ‘0’ of undefined at VM45 compact-custom-header.lib.js:94

container_edit = (column[0].querySelector(‘hui-card-options’) != null);

1 Like

Just made another quick update to address that error. Thanks!

Hi David
How are you using Lovelace? i am using the raw config editor in lovelace and its a bit tricky.
i have lovelace: in my configuration.yaml file but i still get the same as you

This is my raw LL

resources:
  - type: js
    url: >-
      /local/lovelace/custom_cards/compact-custom-header/compact-custom-header.js?v=0.0.1
title: Home
views:
  - badges: []
    cards:
      - entities:
          - input_boolean.door_alarm_mode
          - light.dining_rm
          - switch.fox_lamp
          - light.dining_lamp
          - light.reading_lamp
          - light.side_lamp
          - light.corner_lamp
          - light.sitting_rm
        show_header_toggle: false
        title: Sitting Room
        type: entities
      - entity: camera.sitting_camera
        show_state: false
        title: null
        type: picture-entity
      - cards:
          - entity: light.side_lamp
            type: light
          - type: 'custom:compact-custom-header'
            notification: true
            menu: true
            options: false
            voice: false
            clock: notification
            clock_format: 12
            clock_am_pm: true
            header: true
        type: vertical-stack
      - entities:
          - switch.hall_light
          - switch.landing_light
          - light.hall_lamp
          - sensor.sitting_temperature
          - sensor.sitting_humidity
        show_header_toggle: false
        title: ' '
        type: entities
      - entity: light.side_lamp
        type: light
    icon: 'mdi:sofa'
    path: default_view
    theme: default
    title: Sitting Room

Any help please. and i did do a cache refresh.

Make sure you’re using the latest version and incrementing the version number in resources. Does any error display?

Also try taking it out of that vertical stack

Ok so i changed the version number to 0.1.4 and done a cache refresh and still the same.

  - type: js
    url: >-
      /local/lovelace/custom_cards/compact-custom-header/compact-custom-header.js?v=0.1.4

.

Taken out vertical stack as well but gives errors.

What errors?

OK i have tried this.

  - cards: null
    clock: notification
    clock_am_pm: true
    clock_format: 12
    header: true
    menu: true
    notification: true
    options: false
    type: 'custom:compact-custom-header'
    voice: false

Got this
43%20pm

What is “cards: null” doing there? What errors are displaying?

This is what your code should probably look like:


resources:
  - type: js
    url: >-
      /local/lovelace/custom_cards/compact-custom-header/compact-custom-header.js?v=0.1.4
title: Home
views:
  - badges: []
    cards:
      - entities:
          - input_boolean.door_alarm_mode
          - light.dining_rm
          - switch.fox_lamp
          - light.dining_lamp
          - light.reading_lamp
          - light.side_lamp
          - light.corner_lamp
          - light.sitting_rm
        show_header_toggle: false
        title: Sitting Room
        type: entities
      - entity: camera.sitting_camera
        show_state: false
        title: null
        type: picture-entity
      - entity: light.side_lamp
        type: light
      - type: 'custom:compact-custom-header'
        notification: true
        menu: true
        options: false
        voice: false
        clock: notification
        clock_format: 12
        clock_am_pm: true
      - entities:
          - switch.hall_light
          - switch.landing_light
          - light.hall_lamp
          - sensor.sitting_temperature
          - sensor.sitting_humidity
        show_header_toggle: false
        title: ' '
        type: entities
      - entity: light.side_lamp
        type: light
    icon: 'mdi:sofa'
    path: default_view
    theme: default
    title: Sitting Room