[Workshop] Orbital Clock

5 min read

Deviation Actions

Rainmeter's avatar
By
Published:
21.7K Views





The Orbital Clock displays the time in the circles as well as moves the circles around an orbit like the hands of a clock.  

One of the awesome things about Rainmeter is the Calc measure.  It allows you to do some really cool things.  In this case, move meter around the skin based off of time.  The skin is a little heavy on algebra and trigonometry.

This isn't a math lesson, so I'm not going to go too terribly in depth on the equations used.

[Rainmeter]
Author=Varelse
Update=1000

[Variables]


BGColor is the background color of the 'hands'.

BGColor=255,255,255,100

RH is the orbit radius of the Hours.  RM is the orbit radius of the Minutes, and RS is the Orbit radius of Seconds.

RH=170
RM=110
RS=60


These are text variables.  The Fontsizes determine the sizes of the string in the 'hands'.

FontSize1=22
FontSize2=17
FontSize3=12
FONT=Trebuchet MS
TEXTColor=15,15,15


Defines the dimensions of the skin.  It has to be large enough so none of the meters move in to negative X or Y positions.

Box=400


Roundline Meters require a measure.  [MeasureAlways1] is a dummy calc.  It always returns a 1.

[MeasureAlways1]
Measure=Calc
Formula=1


;----------------------------------
; Time Measures
;----------------------------------

The next three measures return the Seconds, Minutes, and Hours.  The # in the Format section removes the leading zero.

[Seconds]
Measure=Time
Format=%#S


[Minutes]
Measure=Time
Format=%#M


[Hours]
Measure=Time
Format=%#H


;----------------------------------
; Time to Radian Conversion
;----------------------------------
These calcs determine the radians of each moving circle or 'hand'.
For Example: [ThetaS] determines the angle in radians based off of Seconds. Since 0 on a clock starts at -1.57 radians on the circle, -1.57 corrects the angle returned to give the 'hands' the correct position.

[ThetaS]
Measure=Calc
Formula=-1.57+[Seconds]*6.28318/60
DynamicVariables=1


[ThetaM]
Measure=Calc
Formula=-1.57+[Minutes]*6.28318/60
DynamicVariables=1


[ThetaH]
Measure=Calc
Formula=-1.57+[Hours]*6.28318/24
DynamicVariables=1


;------------------------------
; Meters
;------------------------------

[Orbit] is the styles section for the 1 pixel wide circle that the 'hands' orbit.

[Orbit]
MeasureName=MeasureAlways1
AntiAlias=1
LineColor=255,255,255,50
Solid=1
W=#Box#
H=#Box#
RotationAngle=6.28
DynamicVariables=1


Since I wanted the orbits to be able to be adjusted by the user, a calc is used since LineLength doesn't work with inline equations.  The calcs take their respective radius and add 1 to the value.

[OS]
Measure=Calc
Formula=#RS#+1


[OM]
Measure=Calc
Formula=#RM#+1


[OH]
Measure=Calc
Formula=#RH#+1


;-------------------------------------

The next three meters use the [Orbit] meterstyle, and the previous calcs to definethe 1 pixel wide circles that define the 'hands' path.

[OrbitSeconds]
Meter=ROUNDLINE
MeterStyle=Orbit
LineLength=[OS]
LineStart=#RS#


[OrbitMinutes]
Meter=ROUNDLINE
MeterStyle=Orbit
LineLength=[OM]
LineStart=#RM#


[OrbitHours]
Meter=ROUNDLINE
MeterStyle=Orbit
LineLength=[OH]
LineStart=#RH#


;-------------------------------------

[Dot] is the meterstyle used for the 'hands'.

[Dot]
MeasureName=MeasureAlways1
StartAngle=-1.57
RotationAngle=6.28
LineStart=0
AntiAlias=1
LineColor=#BGCOLOR#
Solid=1
DynamicVariables=1


This is where the math gets a little tricky.

The positions of the 'hands' are based off of the the equations:

X= (r*COS(t)+#Box#/2)
Y= (r*SIN(t)+#Box#/2)
Where b>r</b> is the radius of the circle and t is a unit of time.
These equations find the X and Y position based off of the their respective radius's and the angle given in the previous section.   They are paramaterized circle equations.  You need one for both the X and Y directions.

RH is the radius of the Hours orbit and #Box#/2 is the center of the skin.

I used inline equations instead of calcs to demonstrate how to use them.  Plus I prefer using inline calcs because I would need a different calc for each X and Y position.

[HDot]
Meter=ROUNDLINE
MeterStyle= Dot
X= (#RH#*COS([ThetaH])+#Box#/2)
Y= (#RH#*SIN([ThetaH])+#Box#/2)
LineLength=28


[MDot]
Meter=ROUNDLINE
X= (#RM#*COS([ThetaM])+#Box#/2)
Y= (#RM#*SIN([ThetaM])+#Box#/2)
LineLength=20
MeterStyle= Dot


[SDot]
Meter=ROUNDLINE
X= (#RS#*COS([ThetaS])+#Box#/2)
Y= (#RS#*SIN([ThetaS])+#Box#/2)
LineLength=18
MeterStyle= Dot


;------------------------------
; Meters
;------------------------------

MeterStyle section for the the string meters.

[Text]
StringStyle=Bold
StringAlign=Center
FontColor=#TEXTColor#
FontSize=#FontSize3#
FontFace=#FONT#
AntiAlias=1
DynamicVariables=1


Displays the strings.  Since the string is centered, the same X equation used for the 'hands' can be used for the X position of the String.  The Y direction has to be corrected.  It uses the same correction equation (with slight modification) that were discussed in the previous Workshop.

Of course each meter uses the time measures at the beginning of the skin to displays the time.

[SecondString]
Meter=String
MeasureName=Seconds
MeterStyle=Text
X= (#RS#*COS([ThetaS])+#Box#/2)
Y= (#RS#*SIN([ThetaS])+#Box#/2-#FontSize3#*0.7)


[MinutesString]
Meter=String
MeasureName=Minutes
FontSize=#FontSize2#
MeterStyle=Text
X= (#RM#*COS([ThetaM])+#Box#/2)
Y= (#RM#*SIN([ThetaM])+#Box#/2-#FontSize2#*0.7)


[HoursString]
Meter=String
MeasureName=Hours
FontSize=#FontSize1#
MeterStyle=Text
X= (#RH#*COS([ThetaH])+#Box#/2)
Y= (#RH#*SIN([ThetaH])+#Box#/2-#FontSize1#*0.75)


Small disclaimer:  The numbers don't line up perfectly.  This may be an error in my math.

Previous Workshops:

Note Skin
include
Simple Weather Skin
Autoscaling Taskbar

As always, If you have any ideas for future workshops, just let me know in the comments.

© 2011 - 2024 Rainmeter
Comments15
Join the community to add your comment. Already a deviant? Log In
BoggyX's avatar

Is this still updated? I would like to have the text centered in those circles.