Compact Custom Header

@mayker Just wanted to say thank you for CCH as it has made my system so much more user friendly.

@ptdalen I use a similar method of redirects to make my Lovelace more usable. My interface is a work in progress as until CCH and Lovelace came along it was too difficult to make a friendly and easy to navigate interface for my large system.

2 Likes

Hi, would it be possible to see your Lovelace yaml’s as I’m working to do the same?

I will at some point when I get a chance.

But basically I hid most of the tabs for areas I don’t need immediate access too. Kept a few important ones un hidden that I want to get to with one tap/click. The main summary page has the most frequently used items.

To make redirect buttons I used entity buttons with a dummy Mqtt switch for the entity and then used navigation paths. There may be a better way if doing that now but that still works for me so I haven’t changed it.
You can do similar with picture element cards I think.

1 Like

Hi @mayker here’s a suggestion can you make the tab colour change if a entity changes. Eg: my doors/windows have opened change tab colour to red and when closed change it back to white.

Great work by the way .

2 Likes

I like that a lot, configurable tab notifications. Will work on it, no promises though. :slight_smile:

1 Like

I was looking for an icon change for the same idea.
My Garage Door is closed, so it shows the closed icon, door is open show the open icon.

Hello good afternoon!
That could be a silly question.

But I would like to know which current version of the project.

I am putting the following code:

  url: /local/compact-custom-header/compact-custom-header.js?v=0.1.4
   - type: module

However, I get error. I also tried without version.

url: /local/compact-custom-header/compact-custom-header.js
       - type: module

Custom element doesn’t exist: compact-custom-header.
{
“type”: “custom:compact-custom-header”
}

Would be ? 1.0.2b1

@cameron @sleeepy2 great idea! I just did something similar with borders for active alerts/notifications/etc. you might find useful here and live demo @01:20:47 on @DrZzs show interview . Any questions you can catch me in Discord DinoTech#4236 as not intending to hijack @mayker 's thread :sunglasses:

1 Like

This is just a test…

CCH_input_boolean_alert

This one’s going to be some work, but it’s too cool. Thanks @cameron!

3 Likes

In the chrome developer panel I get the following error:

Uncaught (in promise) /local/compact-custom-header/compact-custom-header.js?v=1.0.2b8

Does compact-custom-header.js exist in this folder: /www/compact-custom-header/?

The indenting looks off in both of the resource samples you posted as well, try this:

resources:
  - url: /local/compact-custom-header/compact-custom-header.js?v=0.1.4
    type: module

Thanks for answering me.
Excuse. There is no retreat.

using New lovelace editing mode
I’m in the version
0.88.2

resources:
  - type: module
    url: /local/compact-custom-header/compact-custom-header.js?v=0.1.4
  - type: module
    url: /local/mini-media-player-bundle.js?v=1.0.2
  - url: /local/my-custom-card.js
  - type: js
    url: /local/custom_ui/weather-card.js
  - type: css
    url: /local/my-webfont.css
  - resources: null
    type: module
    url: /local/button-card.js
  - type: js
    url: /local/card-tools.js?track=true
  - type: module
    url: /local/fold-entity-row.js
  - type: module
    url: /local/atomic-calendar.js
  - type: js
    url: /local/plugins/card-modder.js
  - type: js
    url: /local/upcoming-media-card.js
  - type: module
title: Home Assistant
views:
  - badges: []
    cards:
      - cards:
          - entity: device_tracker.juliana_iphone
            state_image:
              home: /local/juliana.jpg
              not_home: /local/julianaoff.jpg
            type: picture-entity
          - entity: device_tracker.renato_iphone
            state_image:
              home: /local/renato.jpeg
              not_home: /local/renatooff.jpeg
            type: picture-entity
        type: horizontal-stack
      - entity: weather.dark_sky
        type: weather-forecast

I have resolved. Spacing error. :frowning: embarrassed.

1 Like

Yes I like that. But I was talking about individual tabs icon.

Oh I know, that was a proof of concept. Ideally anything that can change color would have the same behavior.

I could see this being used as an alert indicator, perhaps when there is a hidden notification in the options menu? Or any custom condition triggered by an automation.

1 Like

So this is the current idea for the config of this feature. This should show how this will loosely work.

conditional_styles:
  entity: input_boolean.testing # Any entity
    condition:
      equals: off # string to compare entity's state to
      # If the state is a number you could also use one or both of the following
      greater_than: 20 # not to be used with "equals:"
      less_than: 50 # not to be used with "equals:"
    # what elements to change
    button:
      menu: red
    background:
      color: blue
      image: url(/local/background.jpg)

I’m thinking about icon changes as well, but this all is really just a thought right now and is subject to change. Will most likely extend entity to also include entity attributes, not just state.

2 Likes

I like the idea of this tapping into notifications like you suggested. Probably with just “notification: true” as a condition.

Edit: That doesn’t really make sense. The notification might make more sense as an entity. So something more like:

conditional_styles:
  entity: notification
    background:
      color: red
1 Like