Simple Clock Card

Share your Projects! Dashboards & Frontend
1

Hi. I have the HA frontend displayed on a screen in my hall and I’m trying to figure out how I can get a clock with HH:MM:SS ticking away in center of the top bar. If possible make it responsive so that it dissapears when the bar gets too narrow as I don’t need it on my phone :grinning:. I’m using Lovelace. Can anyone point me in the right direction?

Clock
Clock961×145 17.7 KB

Ilustration proudly provided by mspaint :smile:

4 Likes
2

I’ve started to work on just getting a custom card showing a clock. getting it to update every second seems to be a bit of a bother. Any ideas?

3

I just got a card working quite well. Still a work in progress of course, but it currently suites my needs.

:thinking:

4

I tried this out and it had trouble finding the moment library. Is this something you included locally?

1 Like
5

Thanks. It needs to be referenced in your ui-Lovelace.yaml file

resources:
  - url: /local/clock-card.js
    type: js
  - url: https://unpkg.com/[email protected]/min/moment.min.js
    type: js

I’ve also experienced that ha throws an error even when the library is referred to correctly. Simply hard refreshing the browser window solves this but this needs more looking into.

6

Maybe not what you want, but I did it with the big number card custom component:

          - type: custom:bignumber-card
            entity: sensor.time
7

Hi,
I was using your clock card for a while and it was working fine.
Today I updated HA to 0.86 and ever since the update I keep getting the following error:

http://X.X.X.X:8123/local/clock-card.js:83:10 Uncaught ReferenceError: moment is not defined

If I play with the screen a bit, the clock will finally appear, seems like initially it is trying to load itself before the resources being completely loaded.

BTW. I do have resources defined in ui-lovelace.yaml as you mentioned in instructions.

8

Yes. I have this problem too. Not quite sure why it’s not willing to load this resource before. I’ve also had problems with the clock running out of sync on my display in the hallway so having it check the time with the server/browser every so often might be a good idea. Right now I guess it’s just pulling the initial time off the client and incrementing the seconds every seconds.

9

Look at this page, I think you should import the external sourses in js and not in yaml.

https://developers.home-assistant.io/docs/en/lovelace_custom_card.html

10

Might want to checkout how @thomasloven solved this problem for custom elements https://github.com/thomasloven/lovelace-card-loader

11

Maybe you should look at this Compact Custom Header for some ideas on how to implement.

12

Hi I made a small text clock card if anybody is interested. It’s just a card for in a view that people can use who use homeassistant in a control panel like setup. It’s just a basic text clock with a few options.

Although reading through the posts, using the sensor.time also seams like the better option. Although, This one shows seconds.

2 Likes
13

I thought it would be easy to edit the clock-card.js file to fit my needs but in the code I am missing something.

I want to change the time and date formats. It seems somewhat obvious to me what needs to be changed. The following two lines

    this.time.innerHTML = moment().format('HH:mm:ss');

    this.date.innerHTML = moment().format('ddd DD/MM/YYYY');

I thought all I would need t o do is change the format of ‘HH:mm:ss’ to what ever I wanted.
I changed it but it did not do anything. Am I missing another line in the file.

Thanks

14

You’re right. Only those two lines define the format. But I find that the way HA caches the js files in your browser makes it a bit of a bother to see changes. Try loading only the js file going to
http(s)://yourhainstance:8123/local/clock-card.js and hard refresh (ctrl+f5 in most browsers I think) and verify that you see the changes that you made to the file. Then go back to HA and do another hard refresh.

That worked for me during development without putting my HA instance into dev-mode where local cache is turned off. Please let me know how that works out for you :slight_smile:

15

I understand what you are telling me to do and it makes perfect sense.

But when I try https://xxx.duckdns.org:8123/local/clock-card.js the page does not load.
Tried with out the 8123, tried by adding /config/ tried www instead of local. No go.

I am on hassio in docker and using lovelace.
Is there another are where this file might be cached that I can delete it?

BTW Thank you for the quick response. Have a great morning/afternoon.

carlton

16

Very Cool.
Thanks for sharing.
Any suggestions for changing it to a 12 hr format? Is it possible?

EDIT:

The answer is changing the time format in the JS file from HH:mm to hh:mm.
Cheers.

17

Figured it out last night. Using chrome browser, did F12 to bring up page elements.
Then went to the page reload icon (top left) did a right click and chose empty cache and hard reload.
Reloaded page and the changes were there. I know have it as shown.

Screenshot%20from%202019-03-19%2015-58-40

Thanks for the ideas.

Now if I can change the times in other areas I would be a happier person.
carltonb

18

is it possible to make this card “language” sensitive?
I like to have the clock/date and it’s great but the name of the week day is in English only despite my Home Assistant is setup in Italian :frowning:

19

I will look into making it easy to change the date format. Untill then you can have a look here in the /local/clock-card.js file.

  _updateTime(force = false) {
    this.time.innerHTML = moment().format('HH:mm:ss');
    this.date.innerHTML = moment().format('ddd DD/MM/YYYY');
  }

You can find the supported formats here: https://momentjs.com/

20

Hi, I don’t want to change the date format but the language; I think you should use the moment-with-locales.js which is doing the job for you in a huge number of different languages…