Rounded Hour Hand

Home Forums CoolClock Pro Rounded Hour Hand

This topic contains 9 replies, has 2 voices, and was last updated by  Pharéo 1 month, 1 week ago.

  • Author
    Posts
  • #8090

    Wojciech
    Participant

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

  • #8091

    Pharéo
    Participant

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

  • #8092

    Wojciech
    Participant

    Thanks!

  • #8093

    Pharéo
    Participant

    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 }
    
  • #8094

    Pharéo
    Participant

    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.

  • #8095

    Wojciech
    Participant

    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 !

  • #8096

    Pharéo
    Participant

    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 }
    
  • #8097

    Pharéo
    Participant

    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.

  • #8098

    Wojciech
    Participant

    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 }
  • #8099

    Pharéo
    Participant

    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.

You must be logged in to reply to this topic.