Windows Phone Style Sliding Entry

[sea1monkey2]

I'm working on making a series of skins based on the style and themes of the Windows Phone 7 Metro UI. It will be sidebar based with tiles like the home screen of WP7. When you hover(or click, havnt decided yet), the tile will "slide" open in WP7 fashion.

I'm working on developing this "sliding" motor using the transformation matrix and a system involving the counter to make an animation.

Here is a copy of the splash screen that somebody has made for an example (i would embed the image but it only runs the animation once up load(refresh to run it again))
http://www.xda-developers.com/wp-content/uploads/2010/08/wp7_anim.gif

This is a prodotype code i'm using to make try to make the animation

Code: Select all

[Rainmeter]
Author=Sea1monkey2
Update=40

[variables]
font=Segoe UI
frames=25
counterstart=0
counterhigh=0

[mCounter]
measure=calc
formula=counter%#frames#

[mCounter2]
measure=calc
formula=counter
maxvalue=#counterhigh#
dynamicvariables=1

[mSlide]
measure=calc
formula=sin(PI*(1+(mCounter2-#CounterStart#))/(2*#frames#))
dynamicvariables=1

[mSlidebackup]
measure=calc
formula=sin(PI*(1+mCounter)/(2*#frames#))
dynamicvariables=1

[mTransCorrec]
measure=calc
formula=(200-200*mSlide)
;dynamicvariables=1

[backgroundbox]
meter=image
x=0
y=0
w=400
h=65
solidcolor=100,100,100,255

[counterdisplay]
meter=string
x=0
y=0
fontface=#font#
fontcolor=255,255,255,255
text=[mCounter], [mcounter2], [mSlide], [mSlideBackup], [mTransCorrec], #Counterstart#, #CounterHigh#
antialias=1
dynamicvariables=1

[stretchbox]
meter=image
x=200
y=20
w=200
h=20
solidcolor=0,0,0,255
transformationmatrix=[mSlide];0;0;1;[mTransCorrec];0
mouseoveraction=!Execute [!RainmeterSetVariable counterstart [mcounter2]][!RainmeterSetVariable counterhigh ([mcounter2]+#Frames#)]
dynamicvariables=1

[stretchbox2]
meter=image
x=0
y=40
w=400
h=20
solidcolor=0,0,0,255
transformationmatrix=[mSlideBackup];0;0;1;0;0
dynamicvariables=1

[counterdisplay2]
meter=string
x=0
y=40
fontface=#font#
fontcolor=255,255,255,255
text="This will be text and images when the motor is complete
transformationmatrix=[mSlideBackup];0;0;1;0;0

Anyways, i'm having a problem where the transformation matrix, to the best of my knowledge, is set up properly, but it floats around and i cant find a way to stop it. Also, i'm running into trouble putting a max value on the counter to "pause" the animation so it stops fully extended.

Any help would be appreciated, thanks.

[sea1monkey2]

Update: I've been working around...pretty much all of the code, and I've come to the conclusion if-statements are the cause of my issues. The motor is set up as a series of if-statement triggers, but it seems that none of them want to go off, even though strings confirm that the parameters are met.

Current code:

Code: Select all

[Rainmeter]
Author=Sea1monkey2
Update=40

[variables]
font=Segoe UI
frames=25
counterstart=0
motor=0

[mCounter2]
measure=calc
formula=counter

[mCounter]
measure=calc
formula=counter%#frames#

[mSlide]
measure=calc
formula=sin(PI*(mCounter2-#CounterStart#)/(2*#frames#))
dynamicvariables=1

[mSlidebackup]
measure=calc
formula=sin(PI*mCounter/(2*#frames#))
dynamicvariables=1

[mTransCorrec]
measure=calc
formula=(200-200*mSlide)
dynamicvariables=1

[mSlide2]
measure=calc
formula=#motor#
dynamicvariables=1

[mMotor]
measure=calc
formula=([mSlide2]=1?#motor#=1:[mSlide2]=0?#motor#=0)

[backgroundbox]
meter=image
x=0
y=0
w=400
h=85
solidcolor=100,100,100,255

[counterdisplay]
meter=string
x=0
y=0
fontface=#font#
fontcolor=255,255,255,255
text=[mCounter], [mcounter2], [mSlide], [mSlideBackup], [mTransCorrec], #Counterstart#
antialias=1
dynamicvariables=1

[stretchbox]
meter=image
x=200
y=20
w=200
h=20
solidcolor=0,0,0,255
transformationmatrix=[mSlide];0;0;1;[mTransCorrec];0
mouseoveraction=!Execute [!RainmeterSetVariable counterstart [mcounter2]]
dynamicvariables=1

[stretchbox2]
meter=image
x=0
y=40
w=400
h=20
solidcolor=0,0,0,255
transformationmatrix=[mSlideBackup];0;0;1;0;0
dynamicvariables=1

[counterdisplay2]
meter=string
x=0
y=40
fontface=#font#
fontcolor=255,255,255,255
text="This will be text and images when the motor is complete
transformationmatrix=[mSlideBackup];0;0;1;0;0
antialias=1
dynamicvariables=1

[stretchbox3]
meter=image
x=0
y=60
w=400
h=20
solidcolor=0,0,0,255
transformationmatrix=[mSlide2];0;0;1;0;0
mouseoveraction=!Execute [!RainmeterSetVariable motor sin(PI*(mCounter2-#CounterStart#)/(2*#frames#))][!RainmeterSetVariable counterstart [mcounter2]]
dynamicvariables=1