Custom Header

[Mariusthvdb (Marius)]

so happens I was just editing my sensor:

      weather_icon:
        entity_id: sensor.dark_sky_icon, weather.home_darksky, weather.woensdrecht
        friendly_name_template: >
          {{states('sensor.weather_icon').split('weather-')[1]|title}}
        value_template: >
          {% set mapper_icon =
            {'partly-cloudy-night':'night-partly-cloudy'} %}
          {% set mapper_br =
            {'pouring':'pouring',
             'lightning-rainy':'lightning-rainy',
             'snowy-rainy':'snowy-rainy'} %}
          {% set mapper_ds =
            {'clear-night':'night',
             'partlycloudy':'partly-cloudy'} %}
          {% set icon = states('sensor.dark_sky_icon') %}
          {% set woensdrecht = states('weather.woensdrecht') %}
          {% set dark = states('weather.home_darksky') %}

          {% set weather = mapper_icon[icon] if icon in mapper_icon else
                           mapper_br[woensdrecht] if woensdrecht in mapper_br else
                           mapper_ds[dark] if dark in mapper_ds else
                           dark if dark in
                             ['sunny','rainy','snowy','snowy-rainy','windy','fog','cloudy','hail','lightning']
                           else 'sunny-alert' %}
            mdi:weather-{{weather}}

and you can use

tab_icons:
  weer_klimaat: >-
    {{states('sensor.weather_icon')}}

in the CH config

[paddy0174 (Patrick)]

@Pirol62

Hi, these Errors came from time to time definately caused by the mobile app:

https://xxxc.ui.nabu.casa/hacsfiles/custom-header/custom-header.js:603:15224 Uncaught TypeError: Cannot read property 'setAttribute' of null

shall I open an issue on github or can I do something by myself?
I cleared the chrome cache yesterday on every device.

Sounds like an issue report at Github would be a good idea. As Mayker stated a few days back

@mayker

Wanted to start this one off with a disclaimer: I’m very short on time ATM. I’m an essential worker at both of my jobs during this pandemic (work at multiple hospitals in IT), the wife is essential as well (yet another hospital), trying to finish up my coding bootcamp, and my kid’s school is closed (makes any uninterrupted free time a rarity and I still need leisure time myself ). I appreciate any patience you can give as I realize that many of you have much more free time than usual to work on your setups and it can be frustrating when something isn’t working like you want. Thank you for the detailed bug reports and your support during these strange and difficult times.

it might make sense to put it on Github and give it a little time to get resolved.

[maurizio53 (Maurizio Fabiani)]

Thanks, but why what i posted is not working?
I checked it into test_template and i got the right icon… so why it works in test_template and not in tab_icons?

[Mariusthvdb (Marius)]

not sure, Im not certain about the ‘else’ output. what does
{{ states('weather.meteo_darksky')}} result in?

[maurizio53 (Maurizio Fabiani)]

@Mariusthvdb

{{ states('weather.meteo_darksky')}}

[Mariusthvdb (Marius)]

and what does the full sensor in CH have for output? it should only be in the form of

mdi:weather-sunny

while it now has

<ha-icon icon='mdi:weather-sunny'></ha-icon>

try:

mdi:weather-{{'night-partly-cloudy' if is_state('weather.meteo_darksky', 'partlycloudy') else
      states('weather.meteo_darksky') }}

you are mixing template styles, either use the %if%, %else%, %endif% or the shorthand style with ‘if’ ‘else’ in the 1 line, like I posted now above

the long version would be:

{% if is_state('weather.meteo_darksky', 'partlycloudy') %}mdi:weather-night-partly-cloudy
{% else %}  states('weather.meteo_darksky')
{% endif %}

[maurizio53 (Maurizio Fabiani)]

Hmmm… you’re right…in test_template i get only sunny as you see in the screenshot.
What to do?

[maurizio53 (Maurizio Fabiani)]

What is the meaning of this error i get?

2020-04-24 16:59:55 ERROR (MainThread) [frontend.js.latest.202004072] https://192.168.1.24:8123/hacsfiles/custom-header/custom-header.js:603:21718 Uncaught TypeError: Cannot read property 'querySelector' of undefined
2020-04-24 16:59:56 ERROR (MainThread) [frontend.js.latest.202004072] https://192.168.1.24:8123/hacsfiles/custom-header/custom-header.js:603:21718 Uncaught TypeError: Cannot read property 'querySelector' of undefined

[Mariusthvdb (Marius)]

not sure but it would indicate a template error I fear. What do you see in the inspector? CH shows errors there on incorrect templates

[maurizio53 (Maurizio Fabiani)]

In the inspector i don’t see entries related to CH. Only if i use test_template i get that…

[stban1983]

You can use
all_tabs_css: 'zoom:1.50;'

[Fabrizio_Martini]

Good evening everyone,
really well done for everything! I use custom header especially for kiosk_mode and compact_mode .
I have 3 dashboards (2 for the tablet and one for the smartphone using the home assistant application).
I wanted to know if it was possible to customize the text in a state-label in the picture elements according to the user.
As you can see in the photo, I have a personalized message:

Goodnight, Fabrizio

is it possible to customize it per user?
example:

Goodnight Mayra

Thanks so much

[ASNNetworks]

Change the name to {{user}} and you’re set. This works for header_text in Custom Header as well as all markdown-cards within HA.

[Fabrizio_Martini]

Thanks a lot for the quick reply!
But I didn’t understand what {{user}} can do.
The Name is a sensor template obtained from person.fabrizio.
This is the sensor:

person_fabrizio_name:
  friendly_name: Nome Fabrizio
  entity_id: person.fabrizio
  value_template: "{{ state_attr('person.fabrizio', 'friendly_name') }}"

And this is the sensor for the message:

sidebar_greeting:
  entity_id: sensor.time
  value_template: >-
    {% set t = now().hour %}
    {% if t <= 1 %} Buonanotte, {{states("sensor.person_fabrizio_name")}}{{'\U0001F611'}}
    {% elif t <= 3 %} Buonanotte, {{states("sensor.person_fabrizio_name")}}{{'\U0001F62A'}}
    {% elif t <= 5 %} Buonanotte, {{states("sensor.person_fabrizio_name")}}{{'\U0001F634'}}
    {% elif t <= 7 %} Buongiorno, {{states("sensor.person_fabrizio_name")}}{{'\U0001F4A9'}}
    {% elif t <= 9 %} Buongiorno, {{states("sensor.person_fabrizio_name")}}{{'\u2615\uFE0F'}}
    {% elif t <= 10.5 %} Buongiorno, {{states("sensor.person_fabrizio_name")}}{{'\U0001F642'}}
    {% elif t <= 13 %} Ciao, {{states("sensor.person_fabrizio_name")}}{{'\U0001F60A'}}
    {% elif t <= 15 %} Ciao, {{states("sensor.person_fabrizio_name")}}{{'\U0001F60E'}}
    {% elif t <= 17 %} Ciao, {{states("sensor.person_fabrizio_name")}}{{'\U0001F44B'}}
    {% elif t <= 19 %} Buonasera, {{states("sensor.person_fabrizio_name")}}{{'\U0001F44B'}}
    {% elif t <= 22 %} Buonasera, {{states("sensor.person_fabrizio_name")}}{{'\U0001F60C'}}
    {% elif t <= 23 %} Buonasera, {{states("sensor.person_fabrizio_name")}}{{'\U0001F974'}}
    {% else %} Buonasera, {{states("sensor.person_fabrizio_name")}}{{'\U0001F974'}}
    {% endif %}

Can you explain better how you would use {{user}} ?

Thanks so much

[Fabrizio_Martini]

Sorry now I understand! The problem is that I was wrong! It is not a markdown but a state-label in the picture-elemenst.
Can you do the same?

[ASNNetworks]

I only use the markdown card for stuff like this. So I have no idea how you would do this using the state-label (I don’t use that card myself in my syetup). Most likely this involves even more sensors and templates.

[Fabrizio_Martini]

Thanks I used with markdown

[Mattias_Persson]

Maybe I missed something but does anyone else have to reload twice after editing ui-lovelace.yaml? First refresh doesn’t activate kiosk mode but second refresh does. Been happening since 0.107 I believe.

custom_header:
  kiosk_mode: true
  exceptions:
    - conditions:
        user_agent: Mobile
      config:
        kiosk_mode: false

[ASNNetworks]

Yes, I have this issue since 107, on both my smartphone UI (footer mode) and tablet UI (kiosk mode). Custom Header doesn’t seem to properly load after reloading resources. Unfortunately I also have cases where I have to reload it 7-8 times for it finally to work.

[paddy0174 (Patrick)]

If you edit your yaml files for lovelace (doesn’t matter which file), you have to reload the sources in lovelace. I would suspect you both do it the “wrong way”.

F5 or “reload” in your browser only refreshes the page data. If you want to refresh the config, you need to reload lovelace (three dots in the right corner -> refresh).

Btw that’s not only valid for Custom Header, it works with all changes regarding lovelace files like ui-lovelace.yaml.

EDIT: in my case I mostly have to refresh the page (lovelace refresh) and afterwards one reload via Browser.