Custom Header

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

1 Like

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!

1 Like

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.

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

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

11 Likes

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.

1 Like

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ā€¦

1 Like

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 :slight_smile: )

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.

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
2 Likes

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.

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 :man_shrugging:)

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ā€¦ :wink:

@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?

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ā€¦

1 Like

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ā€¦ :grinning:

@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 :frowning:
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 :frowning:)

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

Dog device tracker?

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.

2 Likes

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?

quick reply to the template question:

we canā€™t use multiline notation (yet), this works:

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')}}"

@mayker, do you need a feature request for the multiline notation jinja, or is this in the works?

Sure you can: Custom Header - #51 by iantrich