Custom Header

[raul]

Thank you for your consistent development. While migrating I had a small issue (human error) since they hide_* options are not consistent for button configs. You have the button configs as: menu_hide, voice_hide, options_hide… I read it and type hide_voice (maybe I’m dyslexic).

Every other option for main, and tab configs to hide items start as hide_help, hide_tabs, hide_config, etc.

I figure maybe you have a reason for flipping them. Maybe templating or something, but just thought I would point out my observation.

Thank you again @mayker

[Anwen]

I have uninstalled CCH and installed the new CH using HACS, fixed my ui-lovelace.yaml config, and it’s mostly working, except for two things. I’ve read all the docs and this thread, but I don’t know I’m missing.

First, the time is not following my template - I don’t know why the AM is before the time.

Second, on my Windows desktop in Chrome it looks fine, but in Chrome on my iPad and in the iOS app on my iPhone, the header lays on top of my cards instead of above it.

Here’s what I have:

resources:
  - url: /community_plugin/button-card/button-card.js
    type: module
  - url: /community_plugin/custom-header/custom-header.js
    type: module
  - url: /community_plugin/simple-thermostat/simple-thermostat.js
    type: module
  - url: /community_plugin/lovelace-slider-entity-row/slider-entity-row.js
    type: js
  - url: /community_plugin/mini-graph-card/mini-graph-card-bundle.js
    type: module
  - url: /community_plugin/lovelace-card-tools/card-tools.js
    type: js
  - url: /community_plugin/lovelace-theme-maker/theme-maker.js
    type: js
  - url: /community_plugin/mini-media-player/mini-media-player.js
    type: module
  - url: /community_plugin/lovelace-card-mod/card-mod.js
    type: module
    
  - url: /local/lovelace/dark-sky-weather-card.js
    type: module
  - url: /local/lovelace/toggle-lock-entity-row.js
    type: js

custom_header:
#  header_text: 'Home'
  compact_mode: true
  background: 'rgba(21,56,66, 0.2)'
  button_text:
    voice: '{{ date }} <br> {{ hours12 }}:{{ minutesLZ }} {{ AMPM }}'

button_card_templates:
  smaller_text:
    styles:
      name:
        - font-size: 14px
      state:
        - font-size: 14px

views:
  - !include lovelace_views/00_home_view.yaml
  - !include lovelace_views/10_lights_view.yaml
  - !include lovelace_views/20_sensor_graphs_view.yaml

(…etc…didn’t include all my !includes for views). I’ve cleared cache, with both Ctrl-F5 and using Chrome dev console to empty cache and hard reload. I’ve restarted HA. Doesn’t make any difference. Thanks for any help!

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

Have a fix incoming for the reversed text and looking into iOS device issues now.

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

Ah, yes. That is very inconsistent and not something I had noticed. I may just change those options to match, but allow them as is as well to keep it from being a breaking change. Thanks!

[Anwen]

Thanks for the reversed template fix - working correctly now!

I will be interested to see what you find with iOS. I’m currently using iOS 12.4.1 on both devices (iPhone 7 and iPad 6th generation) if that matters.

[iantrich (Ian)]

Quick little template I came up with to show time and weather conditions

custom_header:
  button_text:
    options: >-
      {{ hours12 }}:{{ minutesLZ }} {{ ampm }} - <ha-icon icon='mdi:weather-{{
      states.weather.dark_sky.state }}'></ha-icon> {{
      states.weather.dark_sky.attributes.temperature }}°
  compact_mode: true

Note: The icon will not render when partlycloudy as that icon is weather-partly-cloudy. You could create a template sensor to overcome that

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

I need to add something in the docs about the fact that the text options are rendered as HTML and you can hack together some really cool stuff like ian did.

[Mariusthvdb (Marius)]

@iantrich

You could create a template sensor to overcome that

just to be of service, this is how I do that currently on the CCH tab for my weather page:

      - tab:
          'weer_klimaat':
            icon: >
              var weer = entity['sensor.weather_icon'].state;
              return weer;

and the sensor is:

      weather_icon:
        entity_id: sensor.dark_sky_icon, weather.home_darksky, weather.woensdrecht
        friendly_name_template: >
          {{states('sensor.weather_icon').split('weather')[1]|replace('-',' ')|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 =
            {'sunny': 'sunny',
             'clear-night': 'night',
             'rainy': 'rainy',
             'snowy': 'snowy',
             'snowy-rainy': 'snowy-rainy',
             'windy': 'windy',
             'fog': 'fog',
             'cloudy': 'cloudy',
             'partlycloudy': 'partly-cloudy',
             'hail': 'hail',
             'lightning':'lightning'} %}
          {% 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 'sunny-alert' %}
            mdi:weather-{{weather}}

        icon_template: >
          {{states('sensor.weather_icon')}}

uses a few weather integrations to be as precise as possible in my region…

[Mariusthvdb (Marius)]

guess I was holding my breath for this release, and wow, it is something special indeed! thanks, huge thanks!

playing with the options as I write this, we now can have all options Jinja templated. yes! a huge swing to move from JS templating to Jinja.

had this in CCH:

            - color: >
                return entity['sensor.family_home'].attributes.icon_color;

makes things so much easier (hope below works )

custom_header:
  tabs_color:
    phones_tablets: {{state_attr('sensor.family_home','icon_color')}}
  tab_icons:
    phones_tablets: {{states('sensor.presence_icon')}}

please let me ask if the home (<<) and end (>>) chevrons are still on your mind? Couldn’t find any hint to those in the docs.?

btw the site wont work in a Safari browser on a Mac…Seems not an optimal situation.

[iantrich (Ian)]

Fixed for partlycloudy

custom_header:
  button_text:
    options: >-
      {{ hours12 }}:{{ minutesLZ }} {{ AMPM }} -  <ha-icon icon='mdi:weather-{%
      if is_state("weather.dark_sky", "partlycloudy") -%}partly-cloudy{%- else
      -%}{{ states('weather.dark_sky')}}{%- endif %}'></ha-icon>
      {{states.weather.dark_sky.attributes.temperature }}°
  compact_mode: true

[Mariusthvdb (Marius)]

might need some extra mapping, not all states can be mapped to the mdi_icons…
from the source:

    "clear-day": "sunny",
    "clear-night": "clear-night",
    "rain": "rainy",
    "snow": "snowy",
    "sleet": "snowy-rainy",
    "wind": "windy",
    "fog": "fog",
    "cloudy": "cloudy",
    "partly-cloudy-day": "partlycloudy",
    "partly-cloudy-night": "partlycloudy",
    "hail": "hail",
    "thunderstorm": "lightning",
    "tornado": None,

still, there;s also the choice for creating a sensor in the backend, and not impose all this on the frontend. Ymmv or course, good to have choices.

[iantrich (Ian)]

Looking on the wrong side of things: https://github.com/home-assistant/home-assistant-polymer/blob/c2d551bb7c7bfad682ee1e55fdd8f57eec766e61/src/panels/lovelace/cards/hui-weather-forecast-card.ts#L47

That being said, looks like clear-night would need to be handled and exception (not sure what that would be )

[Mariusthvdb (Marius)]

exactly, that’s what I meant to point at. right side (of my link) are the states the integration can take, so need to be mapped into an icon.

thats why I did:

          {% set mapper_ds =
            {'sunny': 'sunny',
             'clear-night': 'night',
             'rainy': 'rainy',
             'snowy': 'snowy',
             'snowy-rainy': 'snowy-rainy',
             'windy': 'windy',
             'fog': 'fog',
             'cloudy': 'cloudy',
             'partlycloudy': 'partly-cloudy',
             'hail': 'hail',
             'lightning':'lightning'} %}

could have shortened that, but it would have made the template even more complex…

[Anwen]

@mayker So here’s another weird thing on my iPhone and iPad. The Custom Header documentation site does not render correctly. Here’s a screenshot from Chrome on my phone. (I edited off the very top for privacy). The upper left corner is missing - I can see what’s under the white rectangle if I slide the screen up with my finger, but it just slides back down again and is unusable. Further, none of the navigation works. The sidebar icon blinks quickly when I tap on an item but nothing else happens. The tabs become underlined when I tap them, but nothing else changes. The same is true if I use Safari. And it’s the same on my iPad. I’m on the newest version of Chrome on all my devices.

Perhaps this is related to why CH doesn’t render correctly on my iDevices?

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

The reason behind the website not working in Safari and Custom Header having iOS issues are not linked. I will say that it doesn’t matter if you’re using chrome or safari on an iDevice, they’re both using iOS’s webview. In either case iOS devices are a pain to support.

Still won’t stop me from trying though…

[Anwen]

Thanks for the info. You, sir, are totally awesome. Many, many thanks for all your hard work and for the awesome things you have created. I will live in hope for iOS issue resolution…

[jimz011 (Jim)]

@mayker It seems this custom_header performs a lot better than your old one. However I have one big question.

The view_css: doesn’t seem to work when the header is hidden
Whatever I try, nothing seems to be happening when I have the header hidden. The reason I ask this is because this was working fine in CCH and my current setup relies on it XD (I would have to find something else if it is no longer possible )

What is going on is that the margins on the view_css do nothing when the header is hidden (whereas in CCH the entire view would just move up or down depending on the settings)

  hide_header: true
  view_css: 'margin-top: -5px;'
  default_tab: 1

This used to work perfectly fine with CCH, but with CH it doesn’t move the viewport up.

Screenshot 1: How it looked like with CCH (note that the ‘header’ is actually an entities card with margins so that it looks like it is a single header)

Screenshot 2: How it looks with Custom Header, there is always a gap between the header and the first card. I have tried numerous entries with padding, margins and even tried changing the margins on the actual card, but the card would just be cut off.

As you can see, there is a gap between the header and the first card. Which previously could be alleviated by using my above code.

When I set header to true, it works but only the other way around, I can only move the first card down instead of up, when setting a minus margin it will do a plus margin instead).

For now I will have to do with it, but I hope you can (and ofc if you will and if it is even possible with the new component) address this.

Thanks

[iantrich (Ian)]

Dog device tracker?

[jimz011 (Jim)]

Yes it is a Tile. Nothing fancy but does the job for knowing if the dog is home or not. I use it to automate the alarm so it decides which sensors will trigger the alarm depending on if the dog is home or not.

[Mariusthvdb (Marius)]

first impression: stable. very stable! not that I had complaints before, but it ‘feels’ very native…

3 ‘small’ questions:

are there no more options to hide/show notification? can’t find those in the config options? https://maykar.github.io/custom-header/#configuration/main and I used that in the exceptions conditions.

I’d like to keep the main header text, as set in my configuration. It seems there is no option to disable the header_text setting in custom header? only this, which by default replaces the main header:

header_text	string	'Home Assistant'	Replace the main header text, more info below

Secondly, I must be doing something wrong because my tab templates don’t show, this is my config (and all template are fine perse)

tab_icons:
  alarm: >
    {{states('sensor.alarm_panel_icon')}}
  phones_tablets: >
    {{states('sensor.presence_icon')}}
  weer_klimaat: >
    {{states('sensor.weather_icon')}}
  alarmclock: >
    {{'mdi:alarm-off' if is_state('sensor.next_alarm','Not set') else 'mdi:alarm'}}


tabs_color:
  phones_tablets: >
    {{state_attr('sensor.family_home','icon_color')}}

please have a look what I should do?