It is currently April 19th, 2024, 10:09 am

Animated Touch to Pull-Out Clock (Proof of Concept)

Clocks and timer skins
User avatar
DeimosPhoenix
Posts: 3
Joined: December 3rd, 2011, 2:54 am

Animated Touch to Pull-Out Clock (Proof of Concept)

Post by DeimosPhoenix »

I started modifying rainmeter the other day. After a few hours of work on this design, I successfully made an animated "Touch to pull out" clock.
I have no idea if this has been done before.
It also MIGHT slow rainmeter down as I believe the counter constantly runs. (I'm not sure though, as I don't notice any lag whatsoever.)

Feel free to use my code, but if you do I ask that you show me your creations! (And credit :) ) As I would love to see animated things such as this in the future of rainmeter.

Code: Select all

[Rainmeter]
Update=10

;Animation design and compilation by DeimosPhoenix
;Rainmeter counter idea thanks to smurfier on the forums
;Example clock from g3xter 

[Variables]
MaxNumber=150
HEIGHT=100
THICK=10
speed=10

;MaxNumber dictates how far the bars extend, where 150 fits the example clock
;HEIGHT changes the display vertically, where 100 fits the example clock
;	NOTE: Height looks good between aprox 50 and 250
;
;THICK is the thickness of the lines
;Higher Speed is faster movement

DOWORK=1
HIDDER=0

;Use hidden=#HIDDER# for stuff in the display

Font=imagine font
White=255,255,255,180
Black=0,0,0,255

;=========================================
;===========THE DISPLAY CODE==============


[cCounter]
Measure=Calc
Formula= (#DOWORK# ? (cCounter+(cCounter<#MaxNumber#)*#speed#) : (cCounter-(cCounter>0)*#speed#))
IfEqualValue=0
IfEqualAction=!SetVariable HIDDER (#HIDDER#=0)
DynamicVariables=4

;If true, increment the counter until it reaches the max number.
;If false, decrement the counter until it reaches zero.
;Speed multiplies the one, to count faster.

[Nothing]
Measure=Calc
Formula=1

[Angle]
Measure=Calc
Formula=3*PI/2


;This is the circle on the left that spins. (Just for show, no real use.)

[Circle]
Meter=ROUNDLINE
MeasureName=Nothing
X=0
Y=0
W=100
H=100
LineLength=40
LineStart=10
StartAngle=[cCounter]
RotationAngle=[Angle]
AntiAlias=1
LineColor=173,173,173
Solid=1
DynamicVariables=3
LeftMousedownAction=!Execute [!SetVariable DOWORK (#DOWORK#=0)][!SetVariable HIDDER (1)]


[DEC]
Measure=Calc
Formula = (#maxnumber# - cCounter)

[BARtop]
Meter=BAR
MeasureName=Nothing
X=100
Y=0
W=[DEC]
H=#THICK#
AntiAlias=1
BarColor=173,173,173
Solid=1
BarOrientation=HORIZONTAL
DynamicVariables=1
LeftMousedownAction=!Execute [!SetVariable DOWORK (#DOWORK#=0)][!SetVariable HIDDER (1)]

[HEIGHT_MT]
measure=Calc
Formula=(#HEIGHT# - #THICK#)

[BARbottom]
Meter=BAR
MeasureName=Nothing
X=100
Y=[HEIGHT_MT]
W=[DEC]
H=#THICK#
AntiAlias=1
BarColor=173,173,173
Solid=1
BarOrientation=HORIZONTAL
DynamicVariables=1
LeftMousedownAction=!Execute [!SetVariable DOWORK (#DOWORK#=0)][!SetVariable HIDDER (1)]


[POSI]
Measure=Calc
Formula = (#maxnumber# - (95*(#HEIGHT# - 50))/50 + 10 - cCounter)

;That silly thing is trying to predict where the semicircle line on the right 

should go.

[DUBHEIGHT]
Measure=Calc
Formula = (#HEIGHT#)*2

[RIGHT_SEMI_CIRCLE]
Meter=ROUNDLINE
MeasureName=Nothing
X=[POSI]
Y=0
W=[DUBHEIGHT]
H=#HEIGHT#
LineLength=#HEIGHT#
LineStart=[HEIGHT_MT]
StartAngle=5.75
RotationAngle=1.07
AntiAlias=1
LineColor=173,173,173
Solid=1
DynamicVariables=1
LeftMousedownAction=!Execute [!SetVariable DOWORK (#DOWORK#=0)][!SetVariable HIDDER (1)]

;============END CODE=====================
;=========================================

;###############################################################################

######
;###############################################################################

######
;###############################################################################

######

;////////////////////////////////////////
;   BACKGROUND
;////////////////////////////////////////

;////////////////////////////////////////
;   Measure Time
;////////////////////////////////////////


[MeasureAMPM]
Measure=Time
Format=%p

[MeasureTime]
Measure=Time

[MeasureTimeH]
Measure=Time
Format="%I"

[MeasureTimeM]
Measure=Time
Format="%M"

[MeasureDate]
Measure=Time
Format="%a, %b %#d %Y"

[MeasureTimeS]
Measure=Time
Format="%S"

[MeasureASec]
Measure=Calc
Formula=MeasureTime % 2
MaxValue=1
MinValue=0
Substitute="0":"","1":":"


[TimeZone]
Measure=Time
Format="%Z"
Substitute="Mitteleuropäische Zeit":"Central European Time"

;////////////////////////////////////////
;   Meter Time
;////////////////////////////////////////


[MeterTimeH2]
Meter=STRING
Prefix="88:"
X=100
Y=20
FontColor=255,255,255,40
StringStyle=NORMAL
FontSize=30
StringAlign=LEFT
FontFace=Digital
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

[MeterTimeH]
Meter=STRING
MeasureName=MeasureTimeH
X=0r
Y=0r
FontColor=255,255,255,255
StringStyle=NORMAL
FontSize=30
StringAlign=LEFT
FontFace=Digital
StringEffect=Border
FontEffectColor=0, 148, 255, 128
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1


[MeterColonBlink1]
Meter=String
MeasureName=MeasureASec
X=42r
Y=0r
FontColor=255,255,255,255
FontSize=30
StringAlign=Left
FontFace=Digital
StringEffect=Border
FontEffectColor=0, 148, 255, 128
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

[MeterTimeM2]
Meter=STRING
Prefix="88:"
X=10r
Y=0r
FontColor=255,255,255,40
StringStyle=NORMAL
FontSize=30
StringAlign=LEFT
FontFace=Digital
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1


[MeterTimeM]
Meter=STRING
MeasureName=MeasureTimeM
X=0r
Y=0r
FontColor=255,255,255,255
StringStyle=NORMAL
FontSize=30
StringAlign=LEFT
FontFace=Digital
StringEffect=Border
FontEffectColor=0, 148, 255, 128
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

[MeterColonBlink2]
Meter=String
MeasureName=MeasureASec
X=42r
Y=0r
FontColor=255,255,255,255
FontSize=30
StringAlign=Left
FontFace=Digital
StringEffect=Border
FontEffectColor=0, 148, 255, 128
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

[MeterTimeS]
Meter=STRING
MeasureName=MeasureTimeS
x=14r
y=1r
FontColor=255,255,255,255
FontSize=18
StringAlign=Left
FontFace=Digital
StringEffect=Border
FontEffectColor=0, 148, 255, 128
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

[MeterTimeS2]
Meter=STRING
Prefix="88"
x=0r
y=0r
FontColor=255,255,255,40
FontSize=18
StringAlign=Left
FontFace=Digital
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

[MeterAMPM]
Meter=STRING
MeasureName=MeasureAMPM
X=5r
Y=20r
FontColor=255,255,255,255
FontSize=9
StringAlign=Left
FontFace=hooge 05_53
StringEffect=Border
FontEffectColor=0, 148, 255, 128
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

[MeterTimeZone]
Meter=String
MeasureName=TimeZone
x=-100r
y=20r
FontColor=255, 255, 255
FontSize=6
StringAlign=Left
FontFace=hooge 05_53
StringEffect=Border
FontEffectColor=0, 148, 255, 128
AntiAlias=1
Text="%1"
hidden=#HIDDER#
DynamicVariables=1




;###############################################################################

######
;###############################################################################

######
;###############################################################################

######
Tell me what you think!
Last edited by DeimosPhoenix on December 3rd, 2011, 10:29 am, edited 5 times in total.
Top
User avatar
Mordasius
Posts: 1171
Joined: January 22nd, 2011, 4:23 pm
Location: GMT +8

Re: Animated Touch to Pull-Out Clock (Proof of Concept)

Post by Mordasius »

DeimosPhoenix wrote:Tell me what you think!
I think you need to tidy up the long LeftMousedownAction= lines in [cCounter], [Circle], [BARtop] and [BARbottom] where extra linebreaks have been added and stop the posted code from running. The join between the horizontal and half-circle lines can be improved by not using transparency on Linecolor and BarColor (e.g. replace LineColor=255, 255,255, 110 with LineColor=173,173,173). With those sorted it's a neat bit of animation that looks fine to me with Update=10.
Top
User avatar
DeimosPhoenix
Posts: 3
Joined: December 3rd, 2011, 2:54 am

Re: Animated Touch to Pull-Out Clock (Proof of Concept)

Post by DeimosPhoenix »

The extra spaces weren't supposed to be there, haha, so I fixed that. And took your advice and removed the transparency. Thanks :D
Top
User avatar
smurfier
Moderator
Posts: 1931
Joined: January 29th, 2010, 1:43 am
Location: Willmar, MN

Re: Animated Touch to Pull-Out Clock (Proof of Concept)

Post by smurfier »

Just a bit of nitpicking to make sure you understand:
  1. On cCounter you have DynamicVariables=4 when it should either be 0 for off or 1 for on.
  2. You don't need Text="%1" as it's assumed unless you have other text in there. Same with StringAlign=Left and StringStyle=NORMAL.
  3. You dont need a zero before r in x=0r, same with y=0r.
  4. You don't need MinValue and Max value on MeasureASec. The formula can also be simplified to Formula=1-MeasureASec.
  5. You don't need parenthesis on !SetVariable HIDDER (1).
  6. X=0 and Y=0 is always assumed if X and Y are omitted.
  7. You do not seem to actually use MeasureTime.
Simplified code:

Code: Select all

[Rainmeter]
Update=10

;Animation design and compilation by DeimosPhoenix
;Rainmeter counter idea thanks to smurfier on the forums
;Example clock from g3xter

[Variables]
MaxNumber=150
HEIGHT=100
THICK=10
speed=10

;MaxNumber dictates how far the bars extend, where 150 fits the example clock
;HEIGHT changes the display vertically, where 100 fits the example clock
;   NOTE: Height looks good between aprox 50 and 250
;
;THICK is the thickness of the lines
;Higher Speed is faster movement

DOWORK=1
HIDDER=0

;Use hidden=#HIDDER# for stuff in the display

Font=imagine font
White=255,255,255,180
Black=0,0,0,255

;=========================================
;===========THE DISPLAY CODE==============

[cCounter]
Measure=Calc
Formula=#DOWORK# ? (cCounter+(cCounter<#MaxNumber#)*#speed#) : (cCounter-(cCounter>0)*#speed#)
IfEqualValue=0
IfEqualAction=!SetVariable HIDDER (#HIDDER#=0)
DynamicVariables=1

;If true, increment the counter until it reaches the max number.
;If false, decrement the counter until it reaches zero.
;Speed multiplies the one, to count faster.

[Nothing]
Measure=Calc
Formula=1

[Angle]
Measure=Calc
Formula=3*PI/2

;This is the circle on the left that spins. (Just for show, no real use.)

[Circle]
Meter=ROUNDLINE
MeasureName=Nothing
W=100
H=100
LineLength=40
LineStart=10
StartAngle=[cCounter]
RotationAngle=[Angle]
AntiAlias=1
LineColor=173,173,173
Solid=1
DynamicVariables=1
LeftMousedownAction=!Execute [!SetVariable DOWORK (#DOWORK#=0)][!SetVariable HIDDER 1]

[DEC]
Measure=Calc
Formula=#maxnumber#-cCounter

[BARtop]
Meter=BAR
MeasureName=Nothing
X=100
W=[DEC]
H=#THICK#
AntiAlias=1
BarColor=173,173,173
Solid=1
BarOrientation=HORIZONTAL
DynamicVariables=1
LeftMousedownAction=!Execute [!SetVariable DOWORK (#DOWORK#=0)][!SetVariable HIDDER 1]

[HEIGHT_MT]
measure=Calc
Formula=#HEIGHT#-#THICK#

[BARbottom]
Meter=BAR
MeasureName=Nothing
X=100
Y=[HEIGHT_MT]
W=[DEC]
H=#THICK#
AntiAlias=1
BarColor=173,173,173
Solid=1
BarOrientation=HORIZONTAL
DynamicVariables=1
LeftMousedownAction=!Execute [!SetVariable DOWORK (#DOWORK#=0)][!SetVariable HIDDER 1]

[POSI]
Measure=Calc
Formula=#maxnumber#-(95*(#HEIGHT#-50))/50+10-cCounter

;That silly thing is trying to predict where the semicircle line on the right should go.

[DUBHEIGHT]
Measure=Calc
Formula=#HEIGHT#*2

[RIGHT_SEMI_CIRCLE]
Meter=ROUNDLINE
MeasureName=Nothing
X=[POSI]
W=[DUBHEIGHT]
H=#HEIGHT#
LineLength=#HEIGHT#
LineStart=[HEIGHT_MT]
StartAngle=5.75
RotationAngle=1.07
AntiAlias=1
LineColor=173,173,173
Solid=1
DynamicVariables=1
LeftMousedownAction=!Execute [!SetVariable DOWORK (#DOWORK#=0)][!SetVariable HIDDER 1]

;============END CODE=====================
;=========================================

;###############################################################################
;###############################################################################
;###############################################################################

;////////////////////////////////////////
;   BACKGROUND
;////////////////////////////////////////

;////////////////////////////////////////
;   Measure Time
;////////////////////////////////////////

[MeasureAMPM]
Measure=Time
Format=%p

[MeasureTimeH]
Measure=Time
Format="%I"

[MeasureTimeM]
Measure=Time
Format="%M"

[MeasureDate]
Measure=Time
Format="%a, %b %#d %Y"

[MeasureTimeS]
Measure=Time
Format="%S"

[MeasureASec]
Measure=Calc
Formula=1-MeasureASec
Substitute="0":"","1":":"

[TimeZone]
Measure=Time
Format="%Z"
Substitute="Mitteleuropäische Zeit":"Central European Time"

;////////////////////////////////////////
;   Meter Time
;////////////////////////////////////////

[MeterTimeH2]
Meter=STRING
Prefix="88:"
X=100
Y=20
FontColor=255,255,255,40
FontSize=30
FontFace=Digital
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

[MeterTimeH]
Meter=STRING
MeasureName=MeasureTimeH
X=r
Y=r
FontColor=255,255,255,255
FontSize=30
FontFace=Digital
StringEffect=Border
FontEffectColor=0,148,255,128
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

[MeterColonBlink1]
Meter=String
MeasureName=MeasureASec
X=42r
Y=r
FontColor=255,255,255,255
FontSize=30
FontFace=Digital
StringEffect=Border
FontEffectColor=0,148,255,128
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

[MeterTimeM2]
Meter=STRING
Prefix="88:"
X=10r
Y=r
FontColor=255,255,255,40
FontSize=30
FontFace=Digital
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

[MeterTimeM]
Meter=STRING
MeasureName=MeasureTimeM
X=r
Y=r
FontColor=255,255,255,255
FontSize=30
FontFace=Digital
StringEffect=Border
FontEffectColor=0,148,255,128
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

[MeterColonBlink2]
Meter=String
MeasureName=MeasureASec
X=42r
Y=r
FontColor=255,255,255,255
FontSize=30
FontFace=Digital
StringEffect=Border
FontEffectColor=0,148,255,128
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

[MeterTimeS]
Meter=STRING
MeasureName=MeasureTimeS
x=14r
y=1r
FontColor=255,255,255,255
FontSize=18
FontFace=Digital
StringEffect=Border
FontEffectColor=0,148,255,128
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

[MeterTimeS2]
Meter=STRING
Prefix="88"
x=r
y=r
FontColor=255,255,255,40
FontSize=18
FontFace=Digital
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

[MeterAMPM]
Meter=STRING
MeasureName=MeasureAMPM
X=5r
Y=20r
FontColor=255,255,255,255
FontSize=9
FontFace=hooge 05_53
StringEffect=Border
FontEffectColor=0,148,255,128
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

[MeterTimeZone]
Meter=String
MeasureName=TimeZone
x=-100r
y=20r
FontColor=255,255,255
FontSize=6
FontFace=hooge 05_53
StringEffect=Border
FontEffectColor=0,148,255,128
AntiAlias=1
hidden=#HIDDER#
DynamicVariables=1

;###############################################################################
;###############################################################################
;###############################################################################
GitHub | DeviantArt | Tumblr
This is the song that never ends. It just goes on and on my friends. Some people started singing it not knowing what it was, and they'll continue singing it forever just because . . .
Top
User avatar
Mordasius
Posts: 1171
Joined: January 22nd, 2011, 4:23 pm
Location: GMT +8

Re: Animated Touch to Pull-Out Clock (Proof of Concept)

Post by Mordasius »

I think [MeasureTime] may be used in [MeasureASec] to set the colons blinking, but that aside and going back to the earlier point about CPU use and "slowing Rainmeter down", is there any significant resource hit from running a skin like this with Update=10? It's fairly easy to slow down the clock display section by putting something like UpdateDivider=100 in all the relevant meters and there are a few Measures like [Nothing] and [Angle] that are quite happy with UpdateDivider=360000, but I guess that disabling calcs like [cCounter], [POSI] and [Dec] along with only updating [Circle], [BARtop], [BARbottom] and [RIGHT_SEMI_CIRCLE] when they are needed would have the greatest impact on resource use. But is it really worth bothering with these sorts of economies on a skin like this?
:???:

P.S. It also seems to me that !ShowMeterGroup and !HideMeterGroup might be easier/neater than !SetVariable HIDDER to show and hide the clock meters.
Top
User avatar
DeimosPhoenix
Posts: 3
Joined: December 3rd, 2011, 2:54 am

Re: Animated Touch to Pull-Out Clock (Proof of Concept)

Post by DeimosPhoenix »

Thanks for the tips, I'm still learning. :) And the clock code is not mine at all, its g3xter's, and was just copied and pasted. The end of the display code was the end of my additions.

Here is a modified version of the flap, a little bigger and without any additions. My idea is that anything can be placed inside the flap, and touching it opens whats inside:

Code: Select all

[Rainmeter]
Update=10

;Animation design and compilation by DeimosPhoenix
;Rainmeter counter idea thanks to Smurfier
[Variables]
MaxNumber=200
HEIGHT=200
THICK=15
speed=10

;MaxNumber dictates how far the bars extend --Still works
;HEIGHT currently does not work, don't change.
;
;THICK is the thickness of the lines --Still works
;Higher Speed is faster movement --Still works

DOWORK=1
HIDDER=0

;Use hidden=#HIDDER# for stuff in the display

;=========================================
;===========THE DISPLAY CODE==============


[cCounter]
Measure=Calc
Formula= (#DOWORK# ? (cCounter+(cCounter<#MaxNumber#)*#speed#) : (cCounter-(cCounter>0)*#speed#))
IfEqualValue=0
IfEqualAction=!SetVariable HIDDER (#HIDDER#=0)
DynamicVariables=1

;If true, increment the counter until it reaches the max number.
;If false, decrement the counter until it reaches zero.
;Speed multiplies the one, to count faster.

[Nothing]
Measure=Calc
Formula=1

[DEC]
Measure=Calc
Formula = (#maxnumber# - cCounter)

[LEFT_SEMI_CIRCLE]
Meter=ROUNDLINE
MeasureName=Nothing
X=-375
Y=0
W=[DUBHEIGHT]
H=#HEIGHT#
LineLength=#HEIGHT#
LineStart=[HEIGHT_MT]
StartAngle=5.75
RotationAngle=1.07
AntiAlias=1
LineColor=173,173,173
Solid=1
DynamicVariables=1
LeftMousedownAction=!Execute [!SetVariable DOWORK (#DOWORK#=0)][!SetVariable HIDDER 1]


[BARtop]
Meter=BAR
MeasureName=Nothing
X=0
Y=0
W=[DEC]
H=#THICK#
AntiAlias=1
BarColor=173,173,173
Solid=1
BarOrientation=HORIZONTAL
DynamicVariables=1
LeftMousedownAction=!Execute [!SetVariable DOWORK (#DOWORK#=0)][!SetVariable HIDDER 1]

[HEIGHT_MT]
measure=Calc
Formula=(#HEIGHT# - #THICK#)

[BARbottom]
Meter=BAR
MeasureName=Nothing
X=0
Y=[HEIGHT_MT]
W=[DEC]
H=#THICK#
AntiAlias=1
BarColor=173,173,173
Solid=1
BarOrientation=HORIZONTAL
DynamicVariables=1
LeftMousedownAction=!Execute [!SetVariable DOWORK (#DOWORK#=0)][!SetVariable HIDDER 1]


[POSI]
Measure=Calc
Formula = (#maxnumber# - (95*(#HEIGHT# - 50))/50 -83 - cCounter)

;That silly thing is trying to predict where the semicircle line on the right should go.
;Currently does not work.

[DUBHEIGHT]
Measure=Calc
Formula = (#HEIGHT#)*2

[RIGHT_SEMI_CIRCLE]
Meter=ROUNDLINE
MeasureName=Nothing
X=[POSI]
Y=0
W=[DUBHEIGHT]
H=#HEIGHT#
LineLength=#HEIGHT#
LineStart=[HEIGHT_MT]
StartAngle=5.73
RotationAngle=1.10
AntiAlias=1
LineColor=173,173,173
Solid=1
DynamicVariables=1
LeftMousedownAction=!Execute [!SetVariable DOWORK (#DOWORK#=0)][!SetVariable HIDDER 1]

;============END CODE=====================
;=========================================
Top

Return to “Date and Time”