I know what you’re thinking: "Um, sViz, there’s actually a plug in for this."

That's what I thought too, but it only works for my system time. The point of this tutorial is to make an analog clock that you can set ahead or behind of your system time. This tutorial is based on my ATW! Global Clock widget. It’s been streamlined.


Let’s get started. For this you’ll need 4 objects.

1. hour_hand object
2. minute_hand object
3. second_hand object
4. clock_face object (This is where I put the script)

I’m making 2 clocks to demonstrate the time difference. Once we’ve put the first clock together we will be cloning the group to make the 2nd clock which we want to set ahead or behind.



It all starts in your art program. I use Photoshop7. The key is to make all of your clock images the same image size, e.g. 78 x 78 or whatever size you’re using.
Next, make your clock hands centered in the image.
When the image begins to rotate the axis will be in the middle of the image; you don’t want your clock hands to spin like a baton with both ends moving. To create the proper illusion of only one end of the clock hand moving, make the clock hand only half of the height of the image size.



I used a solid background for this demo but you’ll obviously make the background transparent. Make sure the hands are facing 12 o’clock.

Here’s everything and the clock face I used for my Global Clock widget.



Now that we’ve made all our artwork we can put them together in DX. Position the hands over the clock one on top of the other, like so:



The best way is to go to your object list and make the x y coordinates the same.



Select all the hands and make their parent the clock_face.

Now, select all, group as "clock1", and clone.

Guess what time it is? ……..since you’re clock isn’t working yet I’ll just tell you… IT’S SCRIPTING TIME!!

Put this script into clock_face object and apply.


Sub Object_onscriptenter
object.SetTimer 1, 1000
End Sub

Sub object_ontimer1
t = FormatDateTime(time(),3)'---Get your system time

h= hour(t)'---Get current hour
desktopx.object("hour_hand").Rotation= h * 30 '---Multiply current hour to get correct rotation
m= minute(t)'---Get current minute
desktopx.object("minute_hand").Rotation= m * 6 '---Multiply current minute to get correct rotation
s= second(t)'---Get current second
desktopx.object("second_hand").Rotation= s * 6 '---Multiply current second to get correct rotation

End Sub



Put this script into clock_face2:


Sub Object_onscriptenter
object.SetTimer 1, 1000
End Sub

Sub object_ontimer1
t = FormatDateTime(time(),3)'---Get your system time
setclock2= FormatDateTime(Dateadd("h",6,(t)),3)'---Add 6 hours to your system time

h= hour(setclock2)'---Get new hour
desktopx.object("hour_hand2").Rotation= h * 30 '---Multiply new hour to get correct rotation
m= minute(setclock2) '---Get new minute
desktopx.object("minute_hand2").Rotation= m * 6'---Multiply new minute to get correct rotation
s= second(setclock2) '---Get new second
desktopx.object("second_hand2").Rotation= s * 6'---Multiply new second to get correct rotation

End Sub



Ta da!

How does it work?

360 degrees / 60 minutes (or seconds) = 6 degrees per minute
So 6 degrees times 30 minutes past the hour = 180 degrees rotation

360 degrees / 12 hours = 30 degrees per hour
So 30 degrees times 9 AM = 270 degrees rotation

Even though the conversion is in 24 time format the math works for PM also

30 degrees times 21 (9 PM) = 630 degrees rotation (or 270 degrees plus another 360)

For more info on the FormatDateTime or Dateadd function go to: W3Schools Vbscript Reference


That’s it! Thanks for reading. I’m always looking for an easier way so if you have one please, share your thoughts.