Compact Custom Header

[cameron]

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 .

[mayker (maykar (pronounced "maker" with a southern accent))]

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

[sleeepy2]

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.

[iorifly (Renato Barbosa)]

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”
}

[iorifly (Renato Barbosa)]

Would be ? 1.0.2b1

[Dino-Tech (Darren Wilson)]

@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

[mayker (maykar (pronounced "maker" with a southern accent))]

This is just a test…

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

[iorifly (Renato Barbosa)]

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

[mayker (maykar (pronounced "maker" with a southern accent))]

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

[iorifly (Renato Barbosa)]

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

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

[iorifly (Renato Barbosa)]

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

[iorifly (Renato Barbosa)]

I have resolved. Spacing error. embarrassed.

[cameron]

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

[mayker (maykar (pronounced "maker" with a southern accent))]

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

[BrianHanifin (Brian)]

@mayker

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.

[mayker (maykar (pronounced "maker" with a southern accent))]

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.

[mayker (maykar (pronounced "maker" with a southern accent))]

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

[Dino-Tech (Darren Wilson)]

Kinda stuck on the no tabs look for now and about done with the theme adds…

Thanks for the hard work!

[roflcoopter]

Can we have an option to hide the notification bell when there are no notifications, and show it if there are active notifications?

On mobile right now, its not ideal to keep it as overflow, because then you might miss the notifications, and when there are no notifications its just a waste of space

[ranunculales]

I may have missed it, or someone may have asked already; but if not, I’d like to request a feature to display the current user in the upper right. Or a custom text per user?