For my first project, I’ve created a reasonably simple card that counts down the days to a given date. You can use it for birthdays, anniversaries, upcoming vacations, holidays - any date you wish. It has an optional icon with three possible sizes. You can add a link to the icon to take you to some relevant page.
As an example, here’s the card with the icon set to the “medium” size.
It’s no masterpiece and was more of a self-teaching opportunity than a truly useful and significant creation. But I’m pretty happy with it and plan to use it, to count down to an upcoming vacation.
Comments are welcome, as are bug reports, feature requests, etc. It’s a beta at best, so I’m not responsible if it blows up your Lovelace layout, formats your hard drive, or puts you on the NSA watchlist. It shouldn’t do any of those things, but it didn’t for me, so it shouldn’t for you.
Why not use a template sensor in home-assistant instead? That way the number of remaining days can be used in automations, scripts, other sensors… you know… be useful besides pretty (which it certainly is!)
What you have is a really nice display card, but you’re severely limiting it with the countdown function. Make it display an arbitrary entity state instead, but with the icon options and stuff.
Because I don’t know how to use template sensors effectively yet?
I can code Javascript, so I wanted to dig around and see how HA custom entities use it.
Plus I have to keep at least some Javascript, so I can continue to use the BASE64 encoding for the icon, a technique I dragged out of my memory simply so I didn’t have to distribute two files.
I like your ideas and appreciate the interest and compliments. I’ll see what I can come up with for Version 2.
Oh, I definitely think you should keep the javascript. It’s just that this could be so much more.
Though I see now I misunderstood what icon_url does. I thought it replaced the icon with a user choice…
If you want inspiration, try digging around in the hass object that’s passed to your card regularly. It’s full of all kinds of interesting and useful stuff to play around with.
Also, there’s a lot going on in your hass setter. Much of it could probably be moved into setConfig which is run only once, rather than once every two seconds or so…
I’ll try explaining it better. I intended it to link to someone’s page for a birthday, or to an itinerary for a vacation. Something like that.
Time to dust off the web-developer skills & tools, it seems. I put them aside to write Python, C++, and Qt. (Which I really should get back to, after my extended detour into HA)
Ah, I see. I confess I didn’t quite understand how the underlying engine works. This was loosely based on the basic custom component tutorial from the HA docs. I just modified it and hacked at it until it did what I wanted (my favorite way to learn).
I’ve got so many things on my HA to-do list, one of which is rewriting and submitting the main module for the ‘Glances’ system monitor component. I have many ideas.
But my own configuration isn’t even done. Find and check out my attempt to build a remote control. It’s been unfinished for at least two weeks.
I have been running my own custom birthday component for a while now, which is basically a countdown. I don’t mean to hijack your post, but if you want inspiration you look at it here. (I was going to post the component as a thread but then I found yours, so it felt like a duplicate)
You didn’t hijack anything. I’m always interested to see how other people approach the same problem. Plus, I’ve been planning on learning how to integrate Python with HA lately, so this is a good example. Thanks!
Your configuration looks right. I’m not sure why you’re not seeing the icon. You don’t have to download it - it’s actually embedded in the Javascript code. (Have a look; you’ll see one enormously huge line of what looks like nonsense - it’s actually the icon image data.)
It’s kind of a trick. I used it so you guys only had to download one file. Your browser simply might not be able to deal with it. I’m sorry. I built it using Chrome (on Linux) to test. Try refreshing the page a whole bunch of times, or using Shift + F5 to force it to reload.
Also, go into ui-lovelace.yaml and add ?v=1 to the line with the URL to the custom card. This will trick your browser into thinking it’s new code.
And, I’m sorry, this only handles one event at a time. Once you get it working, you should be able to have multiple cards with different dates.
Sorry, i tried all your tips but still no icon in the card. I am using chrome on my Mac OS X and i get no problems at all with the other cards…
Hoping you find a solution…
Edit: I tried changing the configuration:
- type: custom:day-countdown
date: 11 july 2019
title: Compleanno Fha
icon_size: large
From a design perspective, might be cool if the remaining days were shown inside the calendar graphics, and then when the date has passed, you show the checkmark.
And possibly displaying relative time?
Example: 2 days remaining / tomorrow / today / yesterday / 2 days ago
That “slice” error definitely comes from the URL. Ir’s making sure it starts with “http://” or “https://”.
I tried it with the URL in your error message and it works fine (except that I don’t have DuckDNS set up, so I can’t get past that). Make sure you’ve got just one space between the colon and the URL. Quotes are not required around the URL.
I hate bug reports that come back with errors of “it works for me”, but in this case, it does…
Thanks, everyone, for all the awesome suggestions for additions and improvements. The truth is that I cranked this out in about three hours in a single evening. I just wanted to learn how the custom Javascript components worked. I didn’t plan for it to be anything complicated or sophisticated. And I certainly didn’t expect it to be so popular. I’m grateful for all the feedback. I’ll work on V2.0 soon, maybe over the weekend.
This I might be able to manage, but only if you’re running Hassbian and can install a particular Javascript library. It does date math spectacularly, including phrases like you’re asking for.
Can you take a moment and spell this part out for me? I don’t understand the “two halves” of the component (with the HTML block dividing them). Using the “hass” half is the only way I seem to be able to access the this.config.blahblah items.
If that hass block runs on a regular basis, I could think up some uses for it. But if the majority of my code is static, I’ll put it somewhere else.
