Height for digital clock

brpeterso commented 2 years ago

Any way to add a height attribute? This would be great for users who use HA as a night stand clock.... like me. Currently this is the best digital clock option in HA, and a height option would make this absolutely great. Any chance of adding this in?

danielbierstedt commented 2 years ago

Same here :-)

behold81 commented 2 years ago

I was about to add this as a requirement. I'm not great at coding. I tried to update the js to try and do this but failed to make it change size. Making the font sizes for both lines configurable would be awesome. I use it on a tablet and often use the time across the room

IanEatsBabies commented 2 years ago

I had this problem as well, got a universal fix: download card-mod from HACS. After this you can add your own CSS to cards. For this card it's:

type: custom:digital-clock
style: |
  span.first-line 
  {
    font-size: 6em;
    margin-bottom:25px;
  }
  span.second-line 
  {
    font-size: 2.5em;
    margin-bottom:15px;
  }
locale: nl
dateFormat:
  weekday: long
  day: 2-digit
  month: long
timeFormat:
  hour: 2-digit
  minute: 2-digit

Where "span.first-line" is the time and "span.second-line" the date. Font-size (obviously) does the font size, margin-bottom puts a bit of a blank space below the line so you can separate the lines a bit more cleanly.

JesperDonnis commented 1 year ago

Would be super useful to set per card. I have a dashboard that I cast to a small nest hub as a nighttime clock, and it would be very useful to set height per line instead of having to hack the css (card-mod does not always work when casting)

plasterer41 commented 11 months ago

I had this problem as well, got a universal fix: download card-mod from HACS. After this you can add your own CSS to cards. For this card it's:
type: custom:digital-clock
style: |
  span.first-line 
  {
    font-size: 6em;
    margin-bottom:25px;
  }
  span.second-line 
  {
    font-size: 2.5em;
    margin-bottom:15px;
  }
locale: nl
dateFormat:
  weekday: long
  day: 2-digit
  month: long
timeFormat:
  hour: 2-digit
  minute: 2-digit
Where "span.first-line" is the time and "span.second-line" the date. Font-size (obviously) does the font size, margin-bottom puts a bit of a blank space below the line so you can separate the lines a bit more cleanly.

I can't get this to work to adjust font size - does this still work currently? Thanks.

IanEatsBabies commented 11 months ago

Just tested it for you, works like a charm still.

Few things to check / try:

Are you sure cardmod is installed / working correctly? I'm running cardmod 3.2.3 and digital clock 1.2.4
Are you using it for the same pupose as we, or on another card (in that case the css variable may be different)
Do your logs say anythiong related to this card or cardmod?
When you inspect (F12) the page in Firefox (or whatever browser) does the clock's CSS rule say span.first-line?
When all else fails, post the complete yaml (or as complete as you can be) here and I'll check to see if I can find anything

plasterer41 commented 11 months ago

Hi, thanks for the quick reply. I installed cardmod and just copied your code into the dashboard....

plasterer41 commented 11 months ago

-->Reply to your bullet points.... 1 same versions as you 2 i believe so 3 don’t know where to check logs for dashboards 4 no 5 exactly same as your code – copied and pasted into a card

Cheers

IanEatsBabies commented 11 months ago

Sorry it took a while, had things to check out ;)

3: Seems like it's in the Home Assistant Core logs. Settings > System > Logs, scroll down and click the load full logs button.

Before you try 4:

have you rebooted your HA to be sure, and refreshed the webpage with CTRL+F5 afterwards? (CTRL+F5 makes sure nothing is cached for the reload, so you're SURE the new code is being executed)
have you added the card mod entry in configuration.yaml (a hail mary this one, but if nothing else seem to work...)
```
frontend:
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
```
From the Card Mod readme: You'll need to adjust that path according to where you have installed card-mod.js. If you installed through HACS, this is probably /hacsfiles/lovelace-card-mod/card-mod.js.

Alrite, then that might be your problem. Refering to this image I just made: Load Firefox (or Edge, or Chrome, pretty sure they all have a developer mode) and navigate to the HA page containing your clock card. Push F12 on your keyboard, click the button marked with the red arrow on the image (the one the arrow POINTS at, not the one it overlaps), click anywhere in the area I roughly outlined in purple to select the element. Now the string of text pointed to by the green arrow on the top of the image is the variable you want. As you see on the image for me it's called span.first-line, corresponding to the 3rd line in the code I provided as a solution in this thread. If for you it says something else then change the 3rd line to match yours.

EDIT: God damn I'm an asshole... Forgot to link the image. It's there now EDIT2: Jesus wept... The area I outlined is purple, not green... Sorry lad

IanEatsBabies commented 11 months ago

I've also made a short screen recording of me adding a card and changing the size (~45 seconds so not a feature film;) ), maybe you can see something you're doing differently: https://youtu.be/5DZ18V11cxo

(Sorry bout the background noise, didn't realise it'd record audio as well)

IanEatsBabies commented 11 months ago

So I got a little carried away and decided to just fork the project and add the actual options to the card.

While I'm a pretty decent coder I've never used TypeScript before and just did the edits here on GitHub instead of an IDE so no guarantees but it seemed pretty straightforward and I'm pretty sure it'll work. I'm also pretty baked by now, so I'm not going through the hassle of testing it, probably in a few days when I'm off work if I don't forget (If I did and you're waiting for it feel free to send me a reminder).

Anyways if anyone wants to try before I'm able to get back to it: https://github.com/IanEatsBabies/lovelace-digital-clock

EditEdit: Exposed line height to config, no need for margins...

plasterer41 commented 11 months ago

Thank you so much for taking all this time to help me 🤩 I’m in work but will try everything this evening and feedback.

plasterer41 commented 10 months ago

Sorry it took a while, had things to check out ;)

3: Seems like it's in the Home Assistant Core logs. Settings > System > Logs, scroll down and click the load full logs button.

Before you try 4:

have you rebooted your HA to be sure, and refreshed the webpage with CTRL+F5 afterwards? (CTRL+F5 makes sure nothing is cached for the reload, so you're SURE the new code is being executed)

have you added the card mod entry in configuration.yaml (a hail mary this one, but if nothing else seem to work...)
frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js
From the Card Mod readme: You'll need to adjust that path according to where you have installed card-mod.js. If you installed through HACS, this is probably /hacsfiles/lovelace-card-mod/card-mod.js.

Alrite, then that might be your problem. Refering to this image I just made: Load Firefox (or Edge, or Chrome, pretty sure they all have a developer mode) and navigate to the HA page containing your clock card. Push F12 on your keyboard, click the button marked with the red arrow on the image (the one the arrow POINTS at, not the one it overlaps), click anywhere in the area I roughly outlined in purple to select the element. Now the string of text pointed to by the green arrow on the top of the image is the variable you want. As you see on the image for me it's called span.first-line, corresponding to the 3rd line in the code I provided as a solution in this thread. If for you it says something else then change the 3rd line to match yours.

EDIT: God damn I'm an asshole... Forgot to link the image. It's there now EDIT2: Jesus wept... The area I outlined is purple, not green... Sorry lad

I eventually got it with your help.

I needed to change the path to /config/www/lovelace-card-mod/card-mod.js

Works a charm now 💯

dolezeldavid commented 9 months ago

#

I had this problem as well, got a universal fix: download card-mod from HACS. After this you can add your own CSS to cards. For this card it's:
type: custom:digital-clock
style: |
  span.first-line 
  {
    font-size: 6em;
    margin-bottom:25px;
  }
  span.second-line 
  {
    font-size: 2.5em;
    margin-bottom:15px;
  }
locale: nl
dateFormat:
  weekday: long
  day: 2-digit
  month: long
timeFormat:
  hour: 2-digit
  minute: 2-digit
Where "span.first-line" is the time and "span.second-line" the date. Font-size (obviously) does the font size, margin-bottom puts a bit of a blank space below the line so you can separate the lines a bit more cleanly.
I can't get this to work to adjust font size - does this still work currently? Thanks.

Mine both clock & date formatting (i.e. font height & color) were working, but are not anymore - is there any change?

I also tried to use the #36, but HA says "Repository structure for master is not compliant" (trying to add via HACS repository)

eggmich commented 8 months ago

...same here.

IanEatsBabies commented 8 months ago

I'm looking into it, the author of this mod seems to have abandoned his work. So far it seems some breaking changes in HACS have been introduced.

As for my version of this card, I've just modified the code, I don't think it's usable in HACS in this state, I'll have a look what I need to change for HACS to accept it.

plasterer41 commented 8 months ago

I'm looking into it, the author of this mod seems to have abandoned his work. So far it seems some breaking changes in HACS have been introduced.

As for my version of this card, I've just modified the code, I don't think it's usable in HACS in this state, I'll have a look what I need to change for HACS to accept it.

Your version is still working for me. Thanks so much for all your help last year 👍🏼

amjidkhan commented 8 months ago

This solution works well thanks so much don't forget adding 'card_mod:' before the style, that was why mine wasn't working.

type: custom:digital-clock card_mod:

PrestonMcAfee commented 8 months ago

This solution works well thanks so much don't forget adding 'card_mod:' before the style, that was why mine wasn't working.

type: custom:digital-clock card_mod:

Correction, didn't have card_mod installed

plasterer41 commented 8 months ago

Did you get it working or do you need a copy of yaml ?? Cheers

eggmich commented 8 months ago

I got it working with this:

type: custom:digital-clock card_mod: style: ...

wassy92x / lovelace-digital-clock

Height for digital clock #23