Custom Header template showcase and discussion

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

skank · March 4, 2020, 1:10pm

I’ve created another sensor which gives me the temperature outside from weather.hom

- platform: template
    sensors: 
      temperature: 
        unit_of_measurement: °C
        value_template: "{{ state_attr('weather.thuis', 'temperature') }}"

I want this to show in the vertical scroller. But i want it to say:

Temperature outside is … (then the state)

How do i do this?

mayker · March 4, 2020, 1:25pm

A few posts up I explained how to add the text "Outdoor Temperature: " to it.

skank · March 4, 2020, 3:09pm

Cool works thx
It even shows the °C after the state
Cool!

Thx mate

Any idea when the title problem will be fixed?

mayker · March 4, 2020, 4:50pm

I don’t really give estimated times for anything like this anymore. Currently working 2 jobs, trying to finish up a large project due for my coding bootcamp, and, most importantly, keep the family happy.

When I give time frames for fixes or feature implementations it just adds to the pile of stress I’m trying to manage, so I need to stop doing it. Explaining it here so that I can just link to this post when someone else asks a similar question