Lovelace: Clock Card

Share your Projects! Dashboards & Frontend
21

Thanks. Removing the entity config works on the Safari browser. On the Chromium browser it throws an error missing an entity.

22

@cdrom1028

I just released v0.1.2 please check it out. I messed with the font css.

If its not that the only other thing it might be is the css variables used messing up because of a theme.

23

@ykz
Hmm it should work on both. Works on chrome on my end.
Have you refreshed your cache? might still have the old script loading.

Please update to 0.1.2 and refresh the cache.

24

Iā€™m totally +1ā€™ing myself on this. This is EXACTLY what Iā€™ve been looking for for ā€¦ quite some time. I cannot believe thereā€™s isnā€™t such a card by default in HA.

THANK YOU!

PS: And I love you include additional timezones. We like to see a few ourselves.

25

I seem to recall a ā€œknownā€ problem with iOS app and Clocks, but I canā€™t find it right now. A quick summary:

IMG_0362
IMG_03621114Ɨ618 64.2 KB

Anybody know the bug off hand? Itā€™s shown a -7 time, which is interesting and Iā€™m in Mountain, thatā€™s -7 UTC. But the clock is showing -7 Mountain (which doesnā€™t really exist).

26

Got this installed and itā€™s working great but I would like to change the Date format under the main clock to: Day, Month, Date instead of the default Day, Date, Month. Iā€™ve seen several examples in the thread and figured it would be an easy javascript change but Iā€™ve had no luck getting it accomplished? Any help?? Thanks!!

27

Hi I am having trouble getting lovelace to recognize this card.

This is what I have in ui-lovelace

resources:
  - url: /local/custom-lovelace/clockwork-card.js
    type: js
title: Home
views:

I have saved clockworkd-card.js to the folder /home-assistant/www/custom-lovelace. and I can confirm that if I browse to myIP:8123/local/custom-lovelace/clockwork-card.js I can see the actual code of the clockwork-card.

But when I am adding the card in lovelace, it says the custom component does not exist.

I believed I have done all that is required for the code to work but it is not. Very puzzled here.

Any help please?

28

Did you do a restart of HA and clear your browser cache?

Oh, and I just noticedā€¦

What version of HA are you on?

if it is the latest version you donā€™t have the ā€œresources:ā€ section in the right spot.

It has been moved to the ā€œlovelace:ā€ section of configuration.yaml since the last version.

29

Hi, thanks for helping!

I am using Home Assistant 0.108.3

Ok. I have physically removed the resources section from ui-lovelace.yaml and added this via the lovelace dashboards. I went to Resources tab, click the ā€œ+ā€ button and add
/local/custom-lovelace/clockwork-card.js.

The strange thing is that once I do that, the entire home screen on home assistant just disappear. and the only way I can get all the entities and cards back is to remove the clockcard from the lovelace resource gui.

What am I missing?

30

Are you using lovelace in yaml mode or UI mode?

31

in UI mode. I go to configuration -> Lovelace Dashboards -> Resources -> ā€œ+ā€ button

32

Then I guess Iā€™m not sure why you are discussing using the ui-lovelace.yaml file since that is only used in yaml mode.

33

sorry my bad. I am just following the instructions as per the plugins.

Any idea what I could do to get this plugin working?

34

how did you download the .js file from github? did you use the download zip or copy it manually using the ā€œraw fileā€ link? Or some other way?

35

I downloaded the zip, extracted it and copy it to the www folder of home assistant.

36

Iā€™m not really sure what the problem might be then.

I just created a test version of HA and installed the card via the method you used (using the UI method, I normally use yaml mode in my regular HA) and it doesnā€™t work for me either. Maybe the card has a problem on V108.

It works fine on my v107 production HA running in yaml mode and I used the same config as I have there in the test version.

37

You sir are a legend. I am really grateful for you testing this out and confirming that this doesnā€™t work for you on 0.108 as well so I know this is not just me having the problem.

Hopefully the code will get updated soon. It is a nice clock card that I would like for my home assistant.

I thank you once again.

1 Like
38

A few requests because iā€™m a greedy jerk and donā€™t know how to code lol In order of importanceā€¦

  1. Way to have extra timezones removed optionally by not listing any locales
  2. Have time/date centered optionally
  3. Get this into hacs for installation
39

Wanting to do the same, Iā€™ve achieved it with card-mod and the following card YAML:

entity: sensor.date_time_iso
locale: pl-PL
other_time:
  - America/New_York
  - Australia/Sydney
  - America/Los_Angeles
style: |
  .other_clocks { display: none; }
  .time { text-align: center; }
type: 'custom:clockwork-card'

The zones are still there, just hidden by CSS.

40

Youā€™re godly!