Home Assistant Community

Compact Custom Header

#105

Thanks! Seems to works perfectly for me now. :slight_smile:

1 Like

#106

Well there must be something else with my system that is stopping this.
The null was added in when i saved in raw config editor. (not me) so i just have this in the editor and still the same. with no errors

resources:
  - type: js
    url: >-
      /local/lovelace/custom_cards/compact-custom-header/compact-custom-header.js?v=0.1.4
title: Home
views:
  - badges: []
    cards:
      - type: 'custom:compact-custom-header'
        clock: notification
        clock_am_pm: true
        clock_format: 12
        header: true
        menu: true
        notification: true
        options: false
0 Likes

#107

The header hasn’t changed and the card displays outside edit mode as well?

0 Likes

#108

Can you try this and a full refresh of the page?


resources:
  - type: js
    url: >-
      /local/lovelace/custom_cards/compact-custom-header/compact-custom-header.js?v=0.1.401
title: Home
views:
  - badges: []
    cards:
      - type: 'custom:compact-custom-header'
        clock: notification
        clock_am_pm: true
        clock_format: 12
        header: true
        menu: true
        notification: true
        options: false

Thinking it might have cached an old version somehow so this just forces an update by making the version number something that hasn’t been used yet (and won’t be in the future).

0 Likes

#109

No Sorry done a full close down and cache cleanout the page came up and the card with the Compact Custom Header went red with errors and then display the card.

0 Likes

#110

Odd, I’ll look into it more when I get off work this afternoon and will see if I can reproduce it on my system.

1 Like

#111

It’s my very first ‘card’

title: Home
views:
  - cards:
      - cards:
          - type: 'custom:compact-custom-header'
          - entities:

The new version is still working for me…

0 Likes

#112

Why do you declare cards twice?

0 Likes

#113

I don’t. That’s just the f’cked up way the new editor shows a stack… the definition of the stack is at the bottom and I didn’t show that. Here is that full stack here:

title: Home
views:
  - cards:
      - cards:
          - type: 'custom:compact-custom-header'
          - entities:
              - sensor.last_successful_authentication
              - sensor.ssl_certificate_expiry
              - sensor.coffee_maker_firmware
              - sensor.toothbrush_firmware
              - sensor.garage_door_firmware
              - sensor.sonoff_firmware_version_available
              - binary_sensor.sonoff_update_available
              - sensor.artisan_software_version
              - sensor.memory_mean
              - sensor.processor_mean
            show_header_toggle: false
            title: System Information
            type: entities
          - cards:
              - entity: sensor.cpu_temperature
                name: CPU Temperature
                severity:
                  green: 0
                  red: 60
                  yellow: 50
                type: gauge
                unit: °C
              - entity: sensor.disk_use_percent_
                name: Disk Usage
                type: gauge
                unit: '%'
            type: horizontal-stack
          - cards:
              - entity: sensor.processor_use
                name: CPU Usage
                severity:
                  green: 0
                  red: 50
                  yellow: 25
                type: gauge
                unit: '%'
              - entity: sensor.memory_use_percent
                name: Memory Usage
                severity:
                  green: 0
                  red: 50
                  yellow: 35
                type: gauge
                unit: '%'
            type: horizontal-stack
          - entities:
              - sensor.nuc_memory_used_filtered
              - sensor.nuc_processor_used_filtered
              - sensor.cpu_temperature
              - sensor.disk_use_
              - sensor.disk_free_
              - sensor.disk_use_percent_
              - sensor.memory_use_percent
              - sensor.memory_use
              - sensor.memory_free
              - sensor.swap_use_percent
              - sensor.load
              - sensor.processor_use
              - sensor.ipv4_address_eno1
              - sensor.wan_ip_address
              - sensor.network_in_eno1
              - sensor.network_out_eno1
              - entity: sensor.last_boot
                format: datetime
              - sensor.systemuptime
            show_header_toggle: false
            title: NUC Resources
            type: entities
        id: 570b1ee338e0434882b8a637db093ef4
        type: vertical-stack

Actually means the header card is in the stack so I could move that up I suppose…

0 Likes

#114

Yeah, I’m not a huge fan of the reordering either. It’s early yet though, fingers crossed the editor gets improved as well. Good to know the card’s still found in that stack to be hidden.

1 Like

#115

Because of some hard coding in compact-custom-header.js (e.g. script.src = '/local/custom-lovelace/compact-custom-header/') this must be put in the location you specified. i.e. /local/custom-lovelace/compact-custom-header/

Is there any way for you to change this internally as I keep my custom cards in a different folder?

I did try changing that one line but it threw errors in Lovelace so I obviously would need to change more (js isn’t my forte!) and in any case that would entail a manual change after every update even if using the custom updater.

Don’t worry if this isn’t possible.
FWIW I agree with @petro, this should be builtin to HA / Lovelace.

2 Likes

#116

Totally doable, will be added soon

1 Like

#117

Updates:

  • Improved hiding/displaying of card with edit mode (previously would see a quick “ghost” of the card when switching tabs)
  • Can now configure the cards directory. See github for usage and default.
  • Fix for view’s background images not filling page.
  • Hide/show card when “disabled” is set in an user agent’s settings.
  • Improved card’s styling.
  • Removed yaml_mode from config options, no longer needed


Notifications for user’s requesting one or more of these features:
@klogg

1 Like

#118

Quick hot fix for a TypeError. Version 0.1.6

0 Likes

#119

Brilliant, thank you!

0 Likes

#120

Great component !

I made customization to add a new functionality i need.

I use multiple touchscreen in my house and i want to display a custom view for each but also sharing common views. So the first Tab to display is the “home” view , and the following the shared views.

Example :
Bedroom Home screen
view0

Bedroom shared view :
view1

Entrance screen
view2

To do this i add some script in JS file cch_v001.js
( after : hui_root = love_lace.querySelector('hui-root').shadowRoot; )

// Dynamic Tab list

if (window.cch_home != -1) {
alltabs = hui_root.querySelectorAll(‘paper-tab’);

for (idxtab = 0; idxtab < window.cch_common; idxtab++) {
if (window.cch_home != idxtab)
	alltabs[idxtab].style.cssText = 'display: none;';
}	

}

and Add two paremeters in compact-custom-header.js :

window.cch_home = this.config.home == undefined ? 0 : this.config.home;
window.cch_common = this.config.common == undefined ? 0 : this.config.common;

To setup theses custom “home” views you must set parameters in you ui-lovelace.yaml configuration.

in each views , in the card - type: custom:compact-custom-header add :
home: the id of the view if this view is not shared. -1 if shared
common: the id of the first shared view.

Example

views:
  - title: Bedroom
    path: bedroom
    cards:    
    - type: custom:compact-custom-header
      home: 0
      common: 2
	  
  - title: Entrance
    path: entrance
    cards:    
    - type: custom:compact-custom-header
      home: 1
      common: 2

  - title: Lights
    path: lights
    cards:    
    - type: custom:compact-custom-header
      home: -1

On the bedroom screen , browse to …/lovelace/bedroom display Menu : BEDROOM LIGHTS …
On the entrance screen , browse to …/lovelace/entrance display Menu : ENTRANCE LIGHTS …

0 Likes

#121

This is a feature I’m currently working on, but functionality and 0.84 changes delayed it. It was discussed earlier in this thread with the thought of making the config a bit like this:

Why not add this as a PR on the github? Make sure that you’re using the latest as “cch_v001.js” is from the very first version of this card and is no longer referenced in the main card.

See the github issue for the feature here.

0 Likes

#122

In the new version this is grabbed as well as tab_count, can probably be renamed as it will be used for more than just iterating over the tabs in the future.

0 Likes

#123

Just made a small update to make the fix for background images configurable and off by default.
Set background_image: true if you use one.

0 Likes

#124

Update

Made a few updates to help with the displaying of card when in edit mode. This is in preparation of coming features that will use the card to help with configuration, but also solves some display quirks in some situations.

0 Likes