Rounded Hour Hand

[Wojciech]

Hi,
I was wondering, is there any possibility to make both ends of hour hand rounded?

[Rolf]

Hi Wojclech, an interesting case. With some restrictions it might be possible. Let me try something out and I’ll report back to you 🙂

[Wojciech]

Thanks!

[Rolf]

OK, if the following restrictions are not a problem for you, then it can be done.

1. All hands originate in the center;
2. All hands have the same color;
3. There is no border for the outer clock edge needed.

Let’s do an all black clock with fat short hour hand, thinner but longer minute hand and longest and thinnest second hand.

We use the “outerBorder” element as center disc, which will look like the hour hand inner rounded end. Then we use hand decoration elements to form circles, placed at the tip of each hand to make those look rounded too.

Add a Ananlog Clock widget, choose “Skin: Custom” and paste the following code in the custom field:

outerBorder: { lineWidth: 2, radius: 5, fillColor: "black", color: "black", alpha: 1 },
hourHand: { lineWidth: 12, startAt: 0, endAt: 60, color: "black", alpha: 1 },
hourDecoration: { lineWidth: 2, startAt: 60, radius: 5, fillColor: "black", color: "black", alpha: 1 },
minuteHand: { lineWidth: 8, startAt: 0, endAt: 80, color: "black", alpha: 1 },
minDecoration: { lineWidth: 2, startAt: 80, radius: 3, fillColor: "black", color: "black", alpha: 1 },
secondHand: { lineWidth: 4, startAt: 0, endAt: 96, color: "black", alpha: 1 },
secondDecoration: { lineWidth: 2, startAt: 96, radius: 1, fillColor: "black", color: "black", alpha: 1 }

[Rolf]

Oh hang on, I did not read your question properly! I thought you where looking to have ALL hands with rounded ends but it’s only the hour hand you wish to have rounded tips?

That might give less restrictions but I guess you’d always be restricted to making the hour hand start in the center…

I’ll try something else for you.

[Wojciech]

Actually I need Minutes Hand and Hour Hand. I just gave Hour hand as a example. I’ll try what you posted in the moment. Thank you !

[Rolf]

OK, assuming you do not need an outer border, and the hands may still start in the center, and you do not need a seconds hand, we can now use the secondhand decoration for the minute hand inner rounded tip.

This makes room to use different colors for the hour and minute hands.

Here is an example (add a second clock widget to compare the two) with colors orange and green:

outerBorder: { lineWidth: 2, radius: 5, fillColor: "orange", color: "orange", alpha: 1 },
hourHand: { lineWidth: 12, startAt: 0, endAt: 60, color: "orange", alpha: 1 },
hourDecoration: { lineWidth: 2, startAt: 60, radius: 5, fillColor: "orange", color: "orange", alpha: 1 },
minuteHand: { lineWidth: 8, startAt: 0, endAt: 80, color: "green", alpha: 1 },
minDecoration: { lineWidth: 2, startAt: 80, radius: 3, fillColor: "green", color: "green", alpha: 1 },
secondDecoration: { lineWidth: 2, startAt: 0, radius: 3, fillColor: "green", color: "green", alpha: 1 }

[Rolf]

Hmmm, I notice there is a stacking order issue. The hour hand decoration is drawn on top of the minute hand when the two hands overlap (once each hour)… This will have to be fixed on script level I’m afraid.

[Wojciech]

Thanks for your help, based on it I found a almost perfect solution:

outerBorder: { lineWidth: 4, radius: 95, color: "grey", alpha: 1 },
largeIndicator: { lineWidth: 3, startAt: 79, endAt: 94, color: "grey", alpha: 1 },
hourHand: { lineWidth: 6, startAt: 0, endAt: 60, color: "white", alpha: 1 },
hourDecoration: { lineWidth: 1, startAt: 60, radius: 2, fillColor: "white", color: "white", alpha: 1 },
minuteHand: { lineWidth: 4, startAt: 0, endAt: 80, color: "grey", alpha: 1 },
minDecoration: { lineWidth: 1, startAt: 80, radius: 1, fillColor: "grey", color: "grey", alpha: 1 },
secondHand: { lineWidth: 0, startAt: 0, endAt: 0, color: "grey", alpha: 1 },
secondDecoration: { lineWidth: 2, startAt: 0, radius: 1, fillColor: "grey", color: "grey", alpha: 1 }

[Rolf]

For dark background? Nice one 🙂

Tip: you can give the largeIndicator element a paramater “radius” too. It will create circles instead of hour bars… Use a large lineWidth or add fillColor to create dots.

[Author]

Posts