Advanced Digital Clock

Share your Projects! Dashboards & Frontend
,
1

Hi everyone,

I liked the original “Digital Clock” made by wassy92x, but it lacked customization options. I know I could use card-mod to achieve similar effect, but I found more convenient to have options directly in the card.

So I decided to start the learning curve of developping custom cards tutorials by Elmar to setup the dev environment, then fork @wassy92x 's Digital Clock to extend it.

So did I, added new options on card level:

  • padding: any valid CSS value, eg. 8px 0
  • background: any valid CSS value, eg. red, transparent, url('http://path.to/image.jpg')
  • additionalCSS: add any custom CSS style string

And added new options on line level (specific to each line):

  • textAlign: left, center, right
  • lineHeight: any valid CSS value, eg. 1em
  • color: any valid CSS value, eg. red, #FF0000
  • fontSize: any valid CSS value, eg. 2.8em
  • fontFamily: any valid CSS font family name
  • fontWeight: any valid CSS value, eg. 100, 200, 300, …, bold, lighter, …
  • additionalCSS: add any custom CSS style string

Some render samples:

advanced-digital-clock

advanced-digital-clock-sample2
advanced-digital-clock-sample2498×136 5.56 KB

advanced-digital-clock-sample3
advanced-digital-clock-sample3486×142 2.51 KB

(yaml source for these samples are on the readme page on the repository)

You can add the repository as a custom repository in HACS, or wait a few hours as I added it to the official HACS store and it should be available soon.

Hope this helps all people who were asking for such customizations that were never implemented by original developer.

5 Likes
2

Edit: the card is available in the HACS store as “Advanced Digital Clock”, feel free to discuss it here!

1 Like
3

Very nice, and works on phone. Unfortunately not on fully kiosk tablet.

1000058441
10000584411920×887 196 KB

1000058442
10000584421080×2133 249 KB

4

Hello,

I can reproduce this issue in Fully Kiosk with a fresh install of this card.
You have to close the Fully Kiosk app on the tablet and open it again, or restart your tablet.

My test card:

type: custom:digital-clock
dateFormat:
  weekday: long
  day: 2-digit
  month: short
timeFormat:
  hour: 2-digit
  minute: 2-digit
1 Like
5

Ty, that simple and I couldn’t figure out myself :disappointed:

6

Use it for the next troubleshoot :wink:
I did learn a lot on this forum.

7

Sorry, did cross post because I was in the wrong topic I thought. This topic was from the creator so therefore posted it here after the first post.