Custom Header template showcase and discussion

thatdonfc · January 14, 2020, 9:56pm

Understood. I initially asked here because I thought I would be dealing with a jinja template to determine which theme was currently being used. But the solution you gave me is much easier! Thanks again!

Mariusthvdb · January 15, 2020, 1:30pm

not really sure what you mean, but you can set the direction of the horizontal marquee (which btw is obsolete) like this:

      header_text: >-
        {% set inside=states('sensor.temperatuur_living')%}
        {% set outside=states('sensor.temp_current')%}
        {% set temp_color='var(--primary-text-color)'%}
        {% set symbol='°C' %}
        <div style='display: flex;display: -webkit-flex;'>
        <div>Ha&nbspRpi4:&nbsp;</div>
        <marquee direction='right'>
        <span style='color: {{ temp_color }}'>
        Inside temperature: {{ inside }}{{ symbol }},
        Outside temperature: {{ outside }}{{ symbol }},
        </span>
        <span style='color: orange;'>
        System alerts: {{states('sensor.marquee_alerts')}}
        </span>
        <span style='color: {{ temp_color }}'>
        Summary - {{states('sensor.dark_sky_summary')}},
        Daily -  {{states('sensor.dark_sky_daily_summary').split('.')[0]}},
        Hourly - {{states('sensor.dark_sky_hourly_summary').split('.')[0]}}.
        </span>
        </marquee>

see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

using an input_boolean from the frontend:

      header_text: >-
        {% set inside=states('sensor.temperatuur_living')%}
        {% set outside=states('sensor.temp_current')%}
        {% set temp_color='var(--primary-text-color)'%}
        {% set symbol='°C' %}
        <div style='display: flex;display: -webkit-flex;'>
        <div>Ha&nbspRpi4:&nbsp;</div>
        <marquee direction={% if is_state('input_boolean.ch_horizontal_marquee_right','on') %} 'right' {% else %}'left' {% endif %} >
        <span style='color: {{ temp_color }}'>
        Inside temperature: {{ inside }}{{ symbol }},
        Outside temperature: {{ outside }}{{ symbol }},
        </span>
        <span style='color: orange;'>
        System alerts: {{states('sensor.marquee_alerts')}}
        </span>
        <span style='color: {{ temp_color }}'>
        Summary - {{states('sensor.dark_sky_summary')}},
        Daily -  {{states('sensor.dark_sky_daily_summary').split('.')[0]}},
        Hourly - {{states('sensor.dark_sky_hourly_summary').split('.')[0]}}.
        </span>
        </marquee>

fn87 · February 11, 2020, 8:23pm

I have some statues and entities that I want to keep track of in multiple views and I have not found any good solution to this problem. Regular cards takes up to much space and feels bulky in general and I want the solution to work on both mobile and bigger screens.

I managed to do this with split view, footer and the template for the header:
statusbar

Does any one know if I can get the icons to act like they where a part of a Lovelace instead of just “stupid” CSS/Template? I am currently using a hack with browser-mod but that isn’t really a good long term solution.

mayker · February 11, 2020, 9:51pm

Depends on what exactly you want those icons to do. If you just want to change icon/color based on state, that’s totally doable in a template. If you want it to be an actual entity button, trigger entity changes on click, or something similar then I would keep doing what you’re doing. That’s not something I’ll be adding to Custom Header.

If the former is what you are looking for than you can do something like this:

Header will show a green icon of a house when input_boolean.test is on, otherwise it will be a red icon of a bell.

    header_text: >-
      <ha-icon icon='{% if is_state("input_boolean.test", "on") %}mdi:home{% else %}mdi:bell{% endif %}'
      style='color:{% if is_state("input_boolean.test", "on") %}green{% else %}red{% endif %}'</ha-icon>

If this is already what you’re doing, then sorry for telling you something you already know, but you did not show what you have tried or explained what you’re doing with browser-mod.

mayker · February 11, 2020, 10:28pm

And just to fit your situation more, here’s an example to support multiple icons (again, sorry if I’m telling you something you have already figured out):

  header_text: >-
    <div>
    <div style='display:inline-block'>
    <ha-icon icon='{% if is_state("input_boolean.sleeping", "on") %}mdi:home{% else %}mdi:bell{% endif %}'
    style='color:{% if is_state("input_boolean.sleeping", "on") %}green{% else %}red{% endif %}'</ha-icon>
    </div>
    <div style='display:inline-block'>
    <ha-icon icon='{% if is_state("input_boolean.sleeping", "on") %}mdi:home{% else %}mdi:bell{% endif %}'
    style='color:{% if is_state("input_boolean.sleeping", "on") %}green{% else %}red{% endif %}'</ha-icon>
    </div>
    <div style='display:inline-block'>
    <ha-icon icon='{% if is_state("input_boolean.sleeping", "on") %}mdi:home{% else %}mdi:bell{% endif %}'
    style='color:{% if is_state("input_boolean.sleeping", "on") %}green{% else %}red{% endif %}'</ha-icon>
    </div>
    <div style='display:inline-block'>
    <ha-icon icon='{% if is_state("input_boolean.sleeping", "on") %}mdi:home{% else %}mdi:bell{% endif %}'
    style='color:{% if is_state("input_boolean.sleeping", "on") %}green{% else %}red{% endif %}'</ha-icon>
    </div>
    <div style='display:inline-block'>
    <ha-icon icon='{% if is_state("input_boolean.sleeping", "on") %}mdi:home{% else %}mdi:bell{% endif %}'
    style='color:{% if is_state("input_boolean.sleeping", "on") %}green{% else %}red{% endif %}'</ha-icon>
    </div>
    <div style='display:inline-block'>
    <ha-icon icon='{% if is_state("input_boolean.sleeping", "on") %}mdi:home{% else %}mdi:bell{% endif %}'
    style='color:{% if is_state("input_boolean.sleeping", "on") %}green{% else %}red{% endif %}'</ha-icon>
    </div>
    </div>

Custom Header wasn’t made with these things in mind, it’s just a happy accident that it works.

fn87 · February 12, 2020, 7:10am

Thanks, yeah have most of that figured out but you did it a lot better than I did. Didn’t know that the worked this way. The code will suddenly be a lot cleaner!

I am trying to accomplish the button part without the amount of “hacks” I am doing but that looks to be out of reach as of now, as I suspected.

Thanks for this great feature!

myle · February 12, 2020, 8:27am

That showing your age bro

Mariusthvdb · February 12, 2020, 2:33pm

haha, yep, old guy here…

using a modern vertical css marquee, but struggling to get this horizontal HTML Marquee to use the CSS method.

Could you help me out?

      header_text: >-
        {% if is_state('input_boolean.ch_use_header_text_template','on') %}
        {% if is_state('input_select.mode','Developer') %}
        <marquee direction={% if is_state('input_boolean.ch_horizontal_marquee_right','on')%} 'right' {% else%}'left' {% endif %} >
        <span>
        User: {{ user }}, User_id: {{ userID }}, Admin: {{ isAdmin }},
        Owner: {{ isOwner }}, Device_id: {{ deviceID }}, View: {{ viewTitle }},
        Path: {{ viewPath }}, Index: {{ viewIndex }}, Url: {{ url }},
        User agent: {{ userAgent }}
        </span>
        </marquee>
        {% else %}
        {% set inside=states('sensor.temperatuur_living')%}
        {% set outside=states('sensor.temp_current')%}
        {% set temp_color='var(--primary-text-color)'%}
        {% set symbol='°C' %}
        <div style='display: flex;display: -webkit-flex;'>
        <div>Ha&nbspRpi4:&nbsp;</div>
        <marquee direction={% if is_state('input_boolean.ch_horizontal_marquee_right','on')%} 'right' {% else%}'left' {% endif%} >
        <span style='color: {{temp_color}}'>
        Inside temperature: {{inside}}{{symbol}},
        Outside temperature: {{outside}}{{symbol}},
        </span>
        <span style='color: orange;'>
        System alerts: {{states('sensor.marquee_alerts')}}
        </span>
        <span style='color: {{ temp_color }}'>
        Summary - {{states('sensor.dark_sky_summary')}},
        Daily -  {{states('sensor.dark_sky_daily_summary').split('.')[0]}},
        Hourly - {{states('sensor.dark_sky_hourly_summary').split('.')[0]}}.
        </span>
        </marquee>
        {% endif %}
        {% else %}Ha Rpi4
        {% endif %}

Ive started to read on this, but it is a bit basic…https://www.w3docs.com/snippets/css/how-to-have-the-marquee-effect-without-using-the-marquee-tag-with-css-javascript-and-jquery.html#make-the-marquee-effect-with-css-animations-horizontally-and-vertically

myle · February 12, 2020, 3:34pm

Lol that s thinking out side the box nice job

mayker · February 18, 2020, 3:28pm

@kr_noob Continuing conversation from your comment here, this is the thread for such things.

If you can do it with a jinja template then you can add it to Custom Header, I am no Jinja expert and I just don’t have the time to write Jinja for anyone that requests it. This is why I often mention that this feature (complex html, css, and other fancy templates) is unsupported and isn’t really a feature at all. It’s more of a side effect of how things are rendered in CH.

All that being said, you would need to parse the JSON from the sensor you are using and the template section of the developer tools in HA is a great place to start. It even has an example of JSON parsing in the default template it shows. I can give you a bit of a head start, but making this work in the template that you are using would be up to you.

Go to developer tools >> templates and paste in the following example to see how to pull just the titles from the JSON in your feedparser sensor.

This will show the first 3 titles pulled from the sensor:

{{ state_attr('sensor.npr', 'entries')[0].title }}
{{ state_attr('sensor.npr', 'entries')[1].title }}
{{ state_attr('sensor.npr', 'entries')[2].title }}

kr_noob · February 19, 2020, 2:22am

This works perfectly - I was able to put this into the header and flip the headlines vertically.

I had seen the JSON example (I know zilch about JSON) but overlooked it bc I thought the example was all about assigning variable vice extracting - but I see what you’re talking about. Thanks again!

Makis · February 19, 2020, 11:42am

Hi everyone. I am completely noob on this so my appologies if my question is stupid.
I have the following code in the raw editor. However it only display the time in compact mode.
What I should do in order to have the rest info in the header?

custom_header:
  button_text:
    options: '{{ hours12 }}:{{ minutesLZ }}'
  header_text: >-
    <style> #flipper {color:#999;} #flip {height:24px;overflow:hidden;} #flip >
    div > div {color:#fff;height:24px;margin-bottom:24px;display:inline-block;}
    #flip div:first-child {animation: show 10s linear infinite;} @keyframes show
    { 0% {margin-top:-144px;} 5% {margin-top:-96px;} 33% {margin-top:-96px;} 38%
    {margin-top:-48px;} 66% {margin-top:-48px;} 76% {margin-top:0px;} 100%
    {margin-top:0px;}} #flipper p {position:fixed;color:#999; } </style> <div
    id=flipper><div id=flip><div><div>
    {{states('sensor.outdoor_temperature')}}</div></div><div><div>
    {{states('switch.sonoff_100082f95b')}}</div></div><div><div>
    {{states('sensor.dark_sky_precip_probability')}}</div></div><div><div>
    {{states('sensor.outdoor_temperature')}}</div></div><div><div>  
  compact_mode: true
panel: false

mayker · February 19, 2020, 11:58am

Header text is removed in compact mode, it’s what makes it compact. You might want to try split mode. You can also flip split mode by setting footer mode to true.

Makis · February 19, 2020, 12:41pm

It worked! thanks.
may I ask how (if) I could add a stable text for example in the below template

{{states('sensor.outdoor_temperature')}

in order to get Outdoor Temperature: 18 and not only 18 as it now.?

mayker · February 19, 2020, 12:45pm

  header_text: >-
    <style> #flipper {color:#999;} #flip {height:24px;overflow:hidden;} #flip >
    div > div {color:#fff;height:24px;margin-bottom:24px;display:inline-block;}
    #flip div:first-child {animation: show 10s linear infinite;} @keyframes show
    { 0% {margin-top:-144px;} 5% {margin-top:-96px;} 33% {margin-top:-96px;} 38%
    {margin-top:-48px;} 66% {margin-top:-48px;} 76% {margin-top:0px;} 100%
    {margin-top:0px;}} #flipper p {position:fixed;color:#999; } </style> <div
    id=flipper><div id=flip><div><div>
    Outdoor Temperature: {{states('sensor.outdoor_temperature')}}</div></div><div><div>
    {{states('switch.sonoff_100082f95b')}}</div></div><div><div>
    {{states('sensor.dark_sky_precip_probability')}}</div></div><div><div>
    {{states('sensor.outdoor_temperature')}}</div></div><div><div>

texanbull14 · February 20, 2020, 3:34am

Works amazing. So pumped as this delivers everything I need. One question though - using sensor data in the header / footer causes the marquee to restart every time the data updates, so it rarely makes it all the way through given that I have motion sensors and temp data from several rooms here. Any way to disable updating until it’s all the way through all the frames?

texanbull14 · February 20, 2020, 3:45am

Put Outdoor Temperature or any static text in brackets and quotes, like:

{{"Outdoor Temperature: "}}{{states('sensor.outdoor_temperature')}}

mayker · February 20, 2020, 12:13pm

The brackets aren’t nessisary for static text as it’s just rendering as HTML.

No. CH needs to update on any change to templates.

mayker · February 20, 2020, 3:14pm

You could get creative by making a time/date sensor and then a template sensor that will only update its value based on that sensor. So, for example, the template sensor’s value_template would be the state of the sensor you’re interested in and the entity would be sensor.date.

This would make it so that the sensor would only update once a day. You would then make an automation that used the homeassistant.update_entity service to update the template sensor with whatever interval you’d like.

Haven’t tried any of this myself, but it should do what you want.

skank · February 29, 2020, 1:07pm

This is so cool…
I can just copy that and adjust?

Instead of the sensors for weather i would love to have a greeting depending on time

notifications for ex when machine is on.

Can someone point me how to do this?
I have this already but not sure how to integrate this into this header text

EDIT: ok meanwhile i found it, it rocks ! thx guys

sensor:
  - platform: time_date
    display_options:
      - time
      - date
      - date_time
  - platform: template
    sensors:
      greeting:
        value_template: >
          {% set state = states('sensor.time') %}
          {% if '00:00' <= state  < '06:00' %}
            Goeienacht !
          {% elif '06:00' <= state  < '12:00' %}
            Goeiemorgen !
          {% elif '12:00' <= state  < '18:00' %}
            Goeiemiddag !
          {% else %}
            Goeieavond !
          {% endif %}