Rounded Hour Hand

Forums CoolClock Pro Rounded Hour Hand

Viewing 9 reply threads
  • Author
    Posts
    • #8090
      Wojciech
      Participant

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

    • #8091
      Rolf
      Keymaster

      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
      Rolf
      Keymaster

      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
      Rolf
      Keymaster

      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
      Rolf
      Keymaster

      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
      Rolf
      Keymaster

      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
      Rolf
      Keymaster

      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.

Viewing 9 reply threads
  • You must be logged in to reply to this topic.