Shop More Submit  Join Login
×

More from deviantART



Details

Submitted on
June 9, 2011
Link
Thumb

Stats

Views
5,012 (1 today)
Favourites
3 (who?)
Comments
14
×





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.

Add a Comment:
 
:iconpk1st:
pk1st Featured By Owner Jun 14, 2011  Hobbyist Interface Designer
Hi, I'm sorry because I don't ask question relative to this thread but I think this is the only place I could ask.
I've seen many "rain bar" in DA but they are unusable :( my question is :
Does Rainmeter support us to link to the running task of windows, I means I want to make a "real-taskbar" in Rainmeter.
Thanks for reading !

sorry for my bad-english
Reply
:iconvarelse42:
Varelse42 Featured By Owner Jun 14, 2011
Unfortunately, Rainmeter is not a taskbar replacement. So you can't make a 'real' taskbar. There have been some attempts, such as [link] but it doesn't work very well. Some other skins, like [link] use Tasklist.exe to show the open.

So, you can kind of try to mimic the function of the taskbar, but it won't work as well.
Reply
:iconpk1st:
pk1st Featured By Owner Jun 15, 2011  Hobbyist Interface Designer
Oh, thank you a lot !
Reply
:iconbrignell:
brignell Featured By Owner Jun 12, 2011
can i switch it to a 12 hour clock?

otherwise awesome.
Reply
:iconvarelse42:
Varelse42 Featured By Owner Jun 12, 2011
Yeah, just change these lines

[Hours]
Measure=Time
Format=%#H

Change #H to #I

and

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

Change the 24 to 12.

Though, it was meant to be more of a demonstration instead of an actual skin.
Reply
:iconizzuthug:
IzzuThug Featured By Owner Jun 10, 2011
wow this is awesome! great tutorial!
Reply
:iconbartvyvey:
BartVyvey Featured By Owner Jun 10, 2011
I love the skin but there's one thing I personally think is not good.
If I click the "show desktop" on the bottom right of my windows 7 taskbar then this skin also dissapears. :-(
Reply
:iconizzuthug:
IzzuThug Featured By Owner Jun 10, 2011
set the skin position to on desktop
Reply
:iconanonymiza:
Anonymiza Featured By Owner Jun 10, 2011
Good tutorial, and the skin is absolutely fantastic!
Reply
:iconpoiru:
poiru Featured By Owner Jun 10, 2011
Nice work, Varelse :thumbsup:
Reply
Add a Comment: