Thanks! Seems to works perfectly for me now. 
1 Like
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: falseThe header hasn’t changed and the card displays outside edit mode as well?
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).
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.
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
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…
Why do you declare cards twice?
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…
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
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
Totally doable, will be added soon
1 Like
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
Quick hot fix for a TypeError. Version 0.1.6
Brilliant, thank you!
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
Bedroom shared view :
Entrance screen
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 …
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.
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.
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.
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.