There are two main functions of any lovelace card, setConfig and the hass setter (set hass(hass)).
The setConfig function is called rarely, in most cases only once in the entire lifetime of the card.
The hass setter is called every time anything changes in your home-assistant system.
Every time any sensor changes it’s value (even the time sensor), every time a service is called, etc… In short, it happens a lot.
Some cards I’ve seen (and some of mine before I learned this) tore down everything and rebuilt the card from scratch in the hass setter. Needless to say, that puts a lot of unnecessary strain on the browser, and may even make the card flicker.
It’s better to put as much of the work as possible in the setConfig function, and only make minor changes in the hass setter.
For example, this block. Instead of jumping through hoops to make sure it runs only once, you should put it in the setConfig function. The same goes for calculating the icon size and most of the contents of this.contents. If you move this to setConfig you can use this.contents.querySelector("div p strong").innerHTML in the hass setter to change only the day count.
If you can’t access this.config.blahblahin the setConfig function, it may be because you set the value of this.config at the very end of the function. Before that line you can use config.blahblah instead - or move the definition to the start of the function…
Personally, I’d move this function definition out of the hass setter too and make it a standalone function of the class, but that’s really just personal preference.
Thank you my friend. I’m going to back it up, tear it down, and rebuild it… now that I have a better understanding of how it works.
I presume that setConfig will get called again if, y’know, the config changes.
I’m quickly learning that it’s one thing to know the Javascript syntax and another thing entirely to understand how such a complex system operates. I’ll take all the bits and pieces I can get, and I thank you for sharing this.
More customization, including:
– five icons to choose from, in three different sizes
– customizable card title (“Vacation”, “Anniversary”, etc.)
– custom phrase (“Days remaining: X”)
I don’t have the fancy auto-updater thing hooked up yet, so for now just grab a fresh copy from my repo (https://github.com/bundito/day-countdown). Drop it into your <config>/www folder and set a few parameters as explained in the README.
Note and apology: The changes I made probably broke some of your existing setups. I apologize for that. Any changes should be simple and self-explanatory. Post a reply if you need help.
Oh, forgot to add that in the README.
I use a simple entity-card together with Thomas Lovéns fold-entity-row (to divide different parts of my family into sections). Using the example birthdays on github the lovelace-ui-config looks like this:
# Example use in lovelace
- type: entities
title: Birthdays
show_header_toggle: false
entities:
- birthday.Frodo_Baggins
- birthday.Bilbo_Baggins
- birthday.Elvis
The entity-card will have a name and value for each item; the name will be the name given in the config, and the value is the number of days until birthday.
Thank you! Works like a charm.
Is there an easy way to send a notification when a birthday is today/tomorrow? I can setup an automation for each birthday, but if I have round about 20 birthdays…its a lot of code.
I think so, but I haven’t tried it myself I assume that include_dir_merge_list is a hass-function that is used when they parse the configuration, and that the component will get the evaluated expression.
Nice work! Using it for my wedding aniversary. A count-up would be nice too to help me remember how long I’ve been married
Small update:
Was able to update the file to do both
It checks if the date is before or after today and changes the title and calculation based on that.
The only issue I have is I don’t get the date in the correct textformat, it shows 4/1/2017 while the inserted date was 23 Feb 2017. The year is always correct though so it’s a stupid detail I’m missing.
This is really nice! Have you pushed the count-up to your github yet? I just pulled it down but when I set the date to yesterday, it still reads “Days remaining:-2”.
Edit: Please push, I just noticed the last commit was Nov 25, 2018! I would greatly appreciate it.
I’m not the original developer I’ll post my code changes later today to get it working, the original developer can probably implement it in his code (and better, as I’m not a javascript guy , like said, I still have a bug with the date being shown wrong as seen in the last screenshot. Maybe someone can see what is wrong then ).
When you edit the javascript file, the following changes do the count-up:
At the top, after the “now”, “then” variables you place the code between an if statement:
if (now < then){
var timeDiff = Math.abs(then.getTime() - now.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
if (then.getTime() < now.getTime()) {
diffDays = diffDays * -1;
}
return diffDays;
}else if (then < now){
var timeDiff = Math.abs(now.getTime() - then.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24) - 1);
if (now.getTime() < then.getTime()) {
diffDays = 5;
}
return diffDays;
}
a bit further there is a block for the phrase:
if (!this.config.phrase) {
var now = new Date();
var then = new Date(this.config.date);
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
if (now < then){
this.config.phrase = "Days Remaining";
}else if (then < now){
this.config.phrase = "Days since " + then.getDay() + '/' + then.getMonth() + '/' + then.getFullYear();
}
}
Now, in that last block there is a bug that it shows another date in text than it shows a different day and month than what is in the code. Haven’t been able to fix that yet. If it should’t work, let me know, I’ll upload the complete file then :).
Since javascript can’t be uploaded here, change the .yaml to .js to use the file .
I’ll eventually figure out how to use Github to make a branche and will upload it there want to find a date fix first.
Uploaded it as a branche, won’t be merging as I haven’t fixed the date yet, but it can be downloaded from there normally (if I did it correctly).
Hi there, i feel like im from the future. since the last message was posted in feb 19.
But i really want to have this card working. But i just keep getting all these errors while adding the card to my lovelace.
can’t define property “px”: Object is not extensible
type: ‘custom:day-countdown’
date: 11 july 2019
title: Compleanno Fha
icon_size: large
In short, I added a line and commented out another line in the day-countdown.js file
setConfig(config) {
this.config = JSON.parse(JSON.stringify(config)); //added this line
if (!config.date) {
throw new Error('You need to provide a date or all of this is pointless!');
}
//this.config = config; //commented out this line
I made these changes in the terminal using vi editor. Then I removed and re-added the resource in the lovelace UI editor, cleared browser cache, and restarted HA. Hope this helps!
to help me remember how long I’ve been married 
I’ll post my code changes later today to get it working, the original developer can probably implement it in his code (and better, as I’m not a javascript guy 
, like said, I still have a bug with the date being shown wrong as seen in the last screenshot. Maybe someone can see what is wrong then 
. I was able to get this card working again by following the directions at