It is currently March 28th, 2024, 6:35 pm

Perimeter Clock

Clocks and timer skins
Post Reply
gone369
Posts: 6
Joined: August 18th, 2010, 8:02 am

Perimeter Clock

Post by gone369 »

I've recently gotten bored of making analog clocks so I thought I'd challenge myself by making a rectangular clock that bordered the screen.



http://gone369.deviantart.com/art/Perimeter-Clock-276846329?q=in%3Acustomization%2Fskins%2Fsysmonitor%2Frainmeter%20sort%3Atime&qo=14

I've came across many challenges while making this clock so I thought I'd like to share some of my experiences and the solutions I've came up with.

The first question that popped up was how was I to make a String move itself in a rectangular path.

I thought of splitting it up into 4 segments: when the text is traveling horizontally across the top, vertically down the right, horizontally across the bottom, and vertically up the left side.

So I did something similar to a huge long nested if statement:

Code: Select all

[TopHrs11to12X]
Measure=Calc
Formula=MeasureHours12>10?#Framesize#+((#ScreenWidth#-2*#Framesize#)/38)+(MeasureHours12-10)*5*((#ScreenWidth#-2*#Framesize#)/19)-((#ScreenWidth#-2#Framesize#)/19)-(8.94737)*#ScreenWidth#/1920:-9999

[LeftHrs8to10X]
Measure=Calc
Formula=MeasureHours12<11?(#FrameSize#/2):TopHrs11to12

[BottomHrs5to7X]
Measure=Calc
Formula=MeasureHours12<8?#ScreenWidth#/2+5*(#ScreenWidth#-2*#Framesize#)/19-5*(MeasureHours12-5)*(#ScreenWidth#-2*#Framesize#)/19:LeftHrs8to10


[RightHrs2to4X]
Measure=Calc
Formula=MeasureHours12<5?(#ScreenWidth#-#Framesize#/2):BottomHrs5to7

[TopHrs1X]
Measure=Calc
Formula=MeasureHours12=1?(#ScreenWidth#/2)+5*MeasureHours12*((#ScreenWidth#-2*#Framesize#)/19):RightHrs2to4
#FrameSize# is the px width and length of the frame

It had to be split in 5 measures because MeasureHours12>10 cannot cover for when the Hour is at 1, so a separate measure had to be created for MeasureHours12=1

When the 5 measures are combined into 1 measure, you get this huge long Formula

Code: Select all

[MeasureHourNumber1X]
Measure=Calc
Formula=MeasureHours12=1?(#ScreenWidth#/2)+5*MeasureHours12*((#ScreenWidth#-2*#Framesize#)/19):(MeasureHours12<5?(#ScreenWidth#-#Framesize#/2):(MeasureHours12<8?#ScreenWidth#/2+5*(#ScreenWidth#-2*#Framesize#)/19-5*(MeasureHours12-5)*(#ScreenWidth#-2*#Framesize#)/19:(MeasureHours12<11?(#FrameSize#/2):(MeasureHours12>10?#Framesize#+((#ScreenWidth#-2*#Framesize#)/38)+(MeasureHours12-10)*5*((#ScreenWidth#-2*#Framesize#)/19)-((#ScreenWidth#-2#Framesize#)/19)-(8.94737)*#ScreenWidth#/1920:-9999))))
Note that the code I've shown was only for the X variable of the Hour Number String. I had to apply the same concept to the Y Variables of the Hour Numbers and both X and Y variables of the minute numbers. Then I used a similar concept for the gradient bars at the edge of the frames.




Another cool thing I've found was that you could put a dynamic variable to the last variable of FontColor= in String Meters to make either text fade and brighten with time.

Code: Select all

[Variables]
;-------DO NOT ADD ALPHA VARIABLE TO BELOW COLORS---------
MinuteFontColor=255,255,255

[MeasureMinuteNumber1Alpha]
Measure=Calc
Formula=(60-MeasureSeconds)*(255/60)

[MinuteNumber1]
Meter=String
MeasureName=MeasureMinutes
X=[MeasureMinuteNumber1x]
Y=[MeasureMinuteNumber1y]
FontColor=#MinuteFontColor#,[MeasureMinuteNumber1Alpha]
FontFace=#Font#
FontSize=[MeasureFontSize]
StringAlign=CENTER
StringStyle=BOLD
Text=%1
DynamicVariables=1
AntiAlias=1
Just some experience I liked to share. Enjoy~ =]
User avatar
santa_ryan
Posts: 397
Joined: June 22nd, 2010, 4:11 am

Re: Perimeter Clock

Post by santa_ryan »

Wow... This is pretty...(:

Time to strip code and incorporate it into my design. Thank you for this gone.(:
gone369
Posts: 6
Joined: August 18th, 2010, 8:02 am

Re: Perimeter Clock

Post by gone369 »

Sharing is caring =] yw
Post Reply