Can I make the clock bigger, and reposition in in a page?

Forums CoolClock Pro Can I make the clock bigger, and reposition in in a page?

Viewing 3 reply threads
  • Author
    Posts
    • #40473
      Steve Bannister
      Participant

      I would like to make the clock bigger, or the clock hands longer, than I am allowed by the maximum 100% to the size of the container. I need the minute and second hands to be the same length as the radius of my clock face and the hour hand to be just short of the markers. From a rough calculation, this would be 2.5 x their current length.

      Also, I need to align to the exact centre of my clockface, which is a background image. I have it as close as I can get, but it doesn’t allow me any more changes.

      Is this possible?

      You can see my clock here http://clock.retrotelevision.co.uk/

      Thank you.

    • #40945
      RavanH
      Keymaster

      Hi Steve, first: My appologies for this late reply. Somehow the messaging system seems to have failed and you did not get the help you needed at that moment.

      Looking at your sample page, I see you have tried another clock solution in the meantime.

      To answer your questions as much as possible:

      The clock hands cannot be larger than 100% of the clock radius. To make the minute and second hands go past the minute/hour markers, you will need to move the hour markers inward instead.

      Take a look at the clock named “Mister” at the end of https://premium.status301.com/knowledge-base/coolclock/skins/ for example. There, the second hand is further out than the hour markers. Or the clock “Machine”, fifth from the top, where the minute hand is further outside.

      A custom skin with these parameters might be close to what you are looking for:

    • #40946
      RavanH
      Keymaster
      {
      	"largeIndicator": {
      		"lineWidth": 10,
      		"startAt": 80,
      		"endAt": 100,
      		"color": "white"
      	},
      	"hourHand": {
      		"lineWidth": 10,
      		"startAt": 0,
      		"endAt": 75,
      		"color": "white"
      	},
      	"minuteHand": {
      		"lineWidth": 5,
      		"startAt": 0,
      		"endAt": 85,
      		"color": "white"
      	},
      	"secondHand":{
      		"lineWidth": 2,
      		"startAt": 0,
      		"endAt": 90,
      		"color": "white"
      	},
      	"secondDecoration": {
      		"lineWidth": 0,
      		"startAt":  0,
      		"radius": 10,
      		"color": "white",
      		"fillColor": "white"
      	}
      }
    • #40992
      RavanH
      Keymaster

      Or with black background added to cover the red brown orange bands:

      [coolclock skin="retro" radius="200"]
      {
      	"outerBorder": {
      		"lineWidth": 100,
      		"radius": 50,
      		"color": "black",
      		"alpha": 1
      	},
      	"largeIndicator": {
      		"lineWidth": 10,
      		"startAt": 75,
      		"endAt": 95,
      		"color": "white"
      	},
      	"hourHand": {
      		"lineWidth": 10,
      		"startAt": 0,
      		"endAt": 70,
      		"color": "white"
      	},
      	"minuteHand": {
      		"lineWidth": 5,
      		"startAt": 0,
      		"endAt": 80,
      		"color": "white"
      	},
      	"secondHand": {
      		"lineWidth": 2,
      		"startAt": 0,
      		"endAt": 85,
      		"color": "white"
      	},
      	"secondDecoration": {
      		"lineWidth": 4,
      		"startAt":  0,
      		"radius": 8,
      		"color": "white",
      		"fillColor": "white"
      	}
      }
      [/coolclock]
Viewing 3 reply threads
  • You must be logged in to reply to this topic.