Compact Custom Header

Share your Projects! Dashboards & Frontend
85

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.

86

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

Thanks for mentioning it @DavidFW1960

87

I wondered if that was a typo…

88

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;

89

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

90

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

@NeoID @PM-Smart

91

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.

92

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
93

Yup, that’s my bad. Updated

94

OK that seems to be working now. Thanks.

1 Like
95

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
96

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

97

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

07%20pm
07%20pm1198×822 57.6 KB

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.

98

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

99

Also try taking it out of that vertical stack

100

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

.

101

Taken out vertical stack as well but gives errors.

102

What errors?

103

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

104

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