mayker
(maykar (pronounced "maker" with a southern accent))
72
@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:
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!
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?
mayker
(maykar (pronounced "maker" with a southern accent))
75
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.
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?
mayker
(maykar (pronounced "maker" with a southern accent))
80
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
(maykar (pronounced "maker" with a southern accent))
81
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.
Cool works thx
It even shows the °C after the state
Cool!
Thx mate
Any idea when the title problem will be fixed?
mayker
(maykar (pronounced "maker" with a southern accent))
87
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
Can somebody help me with my custom header? I want my text to be aligned to the left (as opposed to the icons to the right). And at the same time change the style options (font-family and font-weight).
This is what I have now:
I use the following code (that I have copied and mixed from this thread )
Ok, sorry for this, it was indeed both an obvious AND newb issue.
Should have removed compact mode: true.
A possibly total newb or obvious question: I 'm getting a Your configuration contains comment(s), these will not be saved. Do you want to continue? message when trying to use the vertical scroller in the raw configuration editor. Do I have to be using yaml mode for lovelace, or is there something else that I’m missing?
custom_header:
compact_mode: true
default_tab: >-
{% if is_state("media_player.playerkatana", "playing") %}1{% else %}0{%
endif %}
button_text:
options: >-
{{ hours24 }}:{{ minutesLZ }} <br><div style='display:inline-block;
height:22px; width:22px; vertical-align:bottom;'><ha-icon
icon='mdi:weather-{% if is_state("weather.home", "partlycloudy")
-%}partly-cloudy{%- else -%}{{ states('weather.home')}}{%- endif
%}'></ha-icon></div> {{ states('sensor.temperature_38') }}°
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('counter.count_espresso')}} coffees today</div></div><div><div>
{{states('sensor.total_48h_precipitation')}}mm precipitation during the last 48 hours</div></div><div><div>
Sonoff 2 was on for {{states('sensor.sonoff_2_on')}} minutes today</div></div><div><div>
{{states('counter.count_espresso')}} coffees today</div></div><div><div>
swipe_nav:
animate: swipe
prevent_default: true
skip_tabs: 5
swipe_amount: 10
wrap: true
title: ''
views:
mayker
(maykar (pronounced "maker" with a southern accent))
92
Sorry, late reply. You had a couple of unclosed divs, didn’t break anything, but you want to make sure that each div has and opening and closing tag. Also, it looks like you’re using reverse_button_direction: true so that’s what I based the changes below on.
Essentially all I did was remove the unneeded first <div> tag, made sure the text element’s div had a closing tag </div>, and gave it a style to push it to the right float:right; and a font font-family: Comic Sans MS, cursive, sans-serif; (fogot to add a font-weight, but just add that to the same style in the first div)
)