Simple Clock Card

Hi

Cant get clock-card to work,
I added the file clock-card.js to my www folder and added these lines to my Lovelace RAW editor
image

Nothing appears on my frontend desktop!? should I do something else to?
Do i forget a step?

Please help

hello, i get the following error, i want to use it as a time remaining/elapsed counter for my 3d printer.

can anyone help me fixxing it?

image

I ended up downloading the moment.js file and storing it locally. When you do this, you must also change the url-line to /local/moment.js

For anyone interested, I managed to make the clock-card localized.

What I did:

Modify ui-lovelace.yaml to show this:

  - url: /local/moment.js
    type: js
  - url: /local/locale/nl.js
    type: js

Next, add one line to clock-card.js:

    _updateTime(force = true) {
      this.locale = moment().locale('nl'); <<< add this line
      this.time.innerHTML = moment().format('LTS');
      this.date.innerHTML = moment().format('dddd DD/MM/YYYY');
    }

Finally, open HA on the page where the clock-card is shown, then clean the cache and hard-reload 2 times. After that the localized time and date are shown.

1 Like

Update 3: today I see two errors: this is the new one: Uncaught TypeError: Cannot read property 'defineLocale' of undefined.
I’ve changed the code a bit, hopefully this change fully fixes the `moment is not defined’ error.
Please see my github below for the updated code.

Looks like this all is timing-related: the .js-file is not yet loaded while the function is already being executed. Anyone know any other way to fix this?

Another update: I think I fixed the Uncaught ReferenceError: moment is not defined error.
Also the localisation is now automatic.

Please test my code from here: https://github.com/bouwew/clock-card/tree/patch-1

See also my post above for where to put the localisation-file.

When we find that this works I will issue a pull-request to 1v4r’s github.

1 Like

same here

Cant get clock-card to work,
I added the file clock-card.js to my www folder and added these lines to my Lovelace RAW editor
image

Nothing appears on my frontend desktop!? should I do something else to?
Do i forget a step?

Did you add a manual card with the type and an entity with the sensor that you want to use such as the following?

type: ‘custom:clock-card’
entity: sensor.date_time_iso

If so, have you done a hard refresh of the browser you are using?

Thank you, that worked

1 Like

Hi,

Recently installed this, and it works sometimes, but sometimes it doesn’t show up, and any time it doesn’t and I look at the logs, I see:
ERROR (MainThread) [frontend.js.latest.202002205] /local/clock-card.js:83:10 Uncaught ReferenceError: moment is not defined

what might I be able to do to fix this / prevent it from happening?

Hi.
When adding manual card I get the following error:
Error: Unknown type: ‘custom:clock-card’
What am I doing wrong?

Please download the latest version on my github: https://github.com/bouwew/clock-card/tree/patch-1
I added some code but found out later that it didn’t work.

Please note, when you update the clock-card.js file, you must clear your browser-cache, otherwise it is still using the old version that is in the cache.

Hi.

Cleared cached web content from Firefox (on Linux Mint), kept the cookies and site data.
I did not close the Firefox.
Same problem.

Show us more of your ui-lovelace.yaml, what did you put under resources:, what is written before type: custom:clock-card?
And there should not be an entity, you only need to write something like:

  - title: Home
    icon: mdi:home-assistant
    cards:
    - type: custom:clock-card

I have added the following to the lovelace under resources (I have few other resources set):

  • type: js
    url: /local/clock-card.js
    • type: js
      url: /local/moment.js
    • type: js
      url: /local/locale/is.js

I did not see any definition of the locale (in my case is.js) in the new clock-card.js

The files are in place and I have updated the clock-card.js as you have instructed.

I have also added a manual card as above which is different from the one in the beginning of the post. Now there is an error: no type card configured

Please put code between 2x 3 carets = `, 3 carets above and 3 carets below the text you want to show, like this:

test:
  - test
    name

Otherwise we cannot see any mistakes in idents.
On my keyboard the ` is below the ~ sign.

Hi.

This is what is in the lovelace:

resources:
  - type: module
    url: /community_plugin/custom-header/custom-header.js
  - type: module
    url: /local/mini-media-player-bundle.js?v=1.5.1
  - type: module
    url: >
      https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/weather-card.min.js
  - type: js
    url: /local/clock-card.js
  - type: js
    url: /local/moment.js
  - type: js
    url: /local/locale/is.js

I have placed all resources. Only the clock card has an issue.

Ok, thanks. That looks good.
Can you also show the part of de code where the card is used?

It is exactly as your example above. The HA arranges the lines differently from some reason. I will post it later on.

Ok, in that case, I’m suspicious of the “>” in your code.

Can you try and change to:

resources:
...
  - type: module
    url: https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/weather-card.min.js
  - type: js
    url: /local/clock-card.js
...

And, clear the browser-cache and refresh the page?

The > is there for a long time for the weather card. It works OK but I will try.
I have cleared the cache and re-loaded. I will try again.

Thanks.