Lovelace: Clock Card

@robha2019, Man I like this card on the desktop but there are big scaling issues on my phone.

@cdrom1028 upload a screenshot lets take a look. What phone you using?

on my iphone 11 pro it looks OK and really thats all i have to test it on. but i will see what i can do.

Mobile (Android 10, chrome on Pixel 3XL)

Desktop (Win 10, Chrome)

Notice the Time Zone text is not scaling correctly on the Mobile version. This makes for a wonky UI…

Ouch yeah no worries. I will take a look mate. Will let you know when i push a new build.

1 Like

Cool, I am glad to test…

Heads up. Found an issue with Time Zones.

New release out. 0.1.1

Did some work on layout. It looks to be working, but need some testing.

Also identified issue with timezone on Safari browsers (i.e. iPad and iPhones etc.). Temporary fix is to remove the entity config. This will give you the local time of your device (i.e. your phone or what have you) and not the time from your home assistant instance.

Let us know how you go.

Testing now, the scaling is still off on Mobile. The fonts are its really big in comparison to other cards…

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

@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.

@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.

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.

I seem to recall a “known” problem with iOS app and Clocks, but I can’t find it right now. A quick summary:

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).

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!!

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?

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.

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?

Are you using lovelace in yaml mode or UI mode?

in UI mode. I go to configuration -> Lovelace Dashboards -> Resources -> “+” button

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.