[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]

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.

[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]

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

[Rolf]

Hi Norman, thanks for sharing your custom skin! 🙂

[Author]

Posts