This is not a complete guide to ActionTimer, and that link above is the best reference as you use the plugin. What I want to do here is demonstrate the concept and approach of how you might slide a skin in and out.
This .rmskin contains all the skins I will be going through in this guide. Download this and install it if you want to follow along or for future reference:
First off, let's look at a completed example, so you can get a sense of what I'm talking about:
The skin might be parked on the right-hand side of your screen, and when you click it, it slides out to display the contents. When you click it again, it slides back, or is "put away". The arrow is just to give a hint of what is expected...
So what is the idea behind this?
We have a skin, in our example one that gets a displays various kinds of system memory. What we would do is go ahead and create that skin as we normally would, ending up with something that perhaps looks like this:
What we want to do, as demonstrated in that first .gif animation, is to have the skin start with just that black "MEMORY" header visible, and the rest of the panel hidden and waiting to be "slid left". So what we visibly want is something like this, where I have put a temporary red background on the skin to show what is going on:
What we really do is create the skin like this:
Click to animate: And simply use the SkinWidth and SkinHeight settings in the Rainmeter section to constrain how much of the skin is "visible".
No matter what you define in a skin, if you use SkinWidth and / or SkinHeight, only that much of the skin will actually be "drawn" on the screen.
So we have a skin that visibly looks like this:
And is really this:
Ok, so how do I "slide" it?
So for this bit, let's use a much simpler example.
Code: Select all
[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
SkinWidth=220
SkinHeight=185
[Metadata]
Name=SlideDemo\SimpleToLeft
Author=JSMorley
Version=May 11, 2016
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
Information=Demonstration of using ActionTimer to slide out a panel
[Variables]
OffSet=190
State=1
U=[!UpdateMeasure MeasureSlider][!UpdateMeter *][!Redraw]
; Slider Measure
[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideLeft, 2, 22
SlideLeft=[!SetVariable State "2"][!SetVariable OffSet "(Clamp(#OffSet#-9,0,190))"]#U#
ActionList2=Repeat SlideRight, 2, 22
SlideRight=[!SetVariable State "1"][!SetVariable OffSet "(Clamp(#OffSet#+9,0,190))"]#U#
DynamicVariables=1
; Meters
[MeterBack]
Meter=Image
X=#OffSet#
W=220
H=185
SolidColor=16,42,55,255
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #State#"]
First off, we defined SkinWidth=220 and SkinHeight=185 in the [Rainmeter] section of the skin. How do we know how big to make that? We know in this case because we defined an Image meter, [MeterBack] with those dimensions. That is what we want for the "visible" size of our skin.
Then in [Variables] we set OffSet=190. We will use that in a minute, but what it defines in this case is the amount we want to initially push the panel off to the right, out of the dimensions defined in SkinWidth. So if we have a SkinWidth of 220, and we push some meter 190 pixels to the right, only 30 pixels of that meter is going to be inside the "visible" part of the skin.
Then we simply set the X option for our Image meter to that #OffSet# value, and make sure we add DynamicVariables=1 so we can change it later. Hopefully you can see that if we change the value of X=#OffSet# from 190 to 189 for instance, the panel will move one pixel to the left. It is "offset" to the right by one less pixel.
The ActionTimer measure
Code: Select all
[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideLeft, 2, 22
SlideLeft=[!SetVariable State "2"][!SetVariable OffSet "(Clamp(#OffSet#-9,0,190))"]#U#
ActionList2=Repeat SlideRight, 2, 22
SlideRight=[!SetVariable State "1"][!SetVariable OffSet "(Clamp(#OffSet#+9,0,190))"]#U#
DynamicVariables=1
It is Repeating the Action "SlideLeft" 22 times, with a wait time of 2 milliseconds between each repeat.
The Action "SlideLeft" is subtracting 9 from the value of #OffSet# each time, then updating the measure (so it always has the current value of #OffSet# to use) and updating all meters using the [Variable] #U# we defined as a shortcut.
So it will subtract 9 from 190 in #OffSet# and redraw everything. The [MeterBack] meter will move 9 pixels to the left. It does this 22 times, or until #OffSet# reaches the lower Clamp() limit of 0.
9 times 22 is 198, which is a tad more than we need, but Clamp() will not allow values to go outside the defined Clamp(value, low, high). So we don't have to try to be exact.
Play with the values for the number of times to repeat, the amount of "wait" between each action, and how much you "subtract" from #OffSet# in order to tune the speed and smoothness of the animation as you like. Some trial and error may be needed to get the desired results.
That's really all there is to it. To slide back to the right, we simply "add" to #OffSet# instead of "subtracting" from it. For our more complicated example at the beginning, we simply used that #OffSet# variable in the X options for all the meters, and when we change the value of #OffSet# with ActionTimer, they all slide at the same time.
Code: Select all
[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
SkinWidth=220
SkinHeight=185
[Metadata]
Name=SlideDemo\MemoryToLeft
Author=JSMorley
Version=May 11, 2016
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
Information=Demonstration of using ActionTimer to slide out a panel
[Variables]
OffSet=190
RightOffset=205
State=1
U=[!UpdateMeasure MeasureSlider][!UpdateMeter *][!Redraw]
; Measures
[MeasurePhysTotal]
Measure=PhysicalMemory
Total=1
[MeasurePhysUsed]
Measure=PhysicalMemory
[MeasurePhysFree]
Measure=PhysicalMemory
InvertMeasure=1
[MeasureSwapTotal]
Measure=SwapMemory
Total=1
[MeasureSwapUsed]
Measure=SwapMemory
[MeasureSwapFree]
Measure=SwapMemory
InvertMeasure=1
[MeasurePageTotal]
Measure=Calc
Formula=MeasureSwapTotal - MeasurePhysTotal
[MeasurePageUsed]
Measure=Calc
Formula=MeasureSwapUsed - MeasurePhysUsed
[MeasurePageFree]
Measure=Calc
Formula=MeasurePageTotal - MeasurePageUsed
; Slider Measure
[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideIn, 2, 22 | Wait 1 | HeaderOut
SlideIn=[!SetVariable State "2"][!SetVariable OffSet "(Clamp(#OffSet#-9,0,190))"]#U#
HeaderOut=[!SetOption MeterHeader ImageName "HeaderOut.jpg"]#U#
ActionList2=Repeat SlideOut, 2, 22 | Wait 1 | HeaderIn
SlideOut=[!SetVariable State "1"][!SetVariable OffSet "(Clamp(#OffSet#+9,0,190))"]#U#
HeaderIn=[!SetOption MeterHeader ImageName "HeaderIn.jpg"]#U#
DynamicVariables=1
; Meters
[MeterBack]
Meter=Image
X=#OffSet#
W=220
H=185
SolidColor=16,42,55,255
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #State#"]
[MeterHeader]
Meter=Image
X=#OffSet#
W=30
H=185
ImagePath=#@#Images\
ImageName=HeaderIn.jpg
DynamicVariables=1
; Physical
[MeterPhysTotalLabel]
Meter=String
X=(#OffSet# + 40)
Y=10
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AntiAlias=1
Text=Physical Total
DynamicVariables=1
[MeterPhysTotal]
Meter=String
MeasureName=MeasurePhysTotal
X=(#OffSet# + 205)
Y=0r
StringAlign=Right
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AutoScale=1
NumOfDecimals=1
AntiAlias=1
Text=%1B
DynamicVariables=1
[MeterPhysUsedLabel]
Meter=String
X=(#OffSet# + 40)
Y=0R
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AntiAlias=1
Text=Physical Used
DynamicVariables=1
[MeterPhysUsed]
Meter=String
MeasureName=MeasurePhysUsed
X=(#OffSet# + 205)
Y=0r
StringAlign=Right
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AutoScale=1
NumOfDecimals=1
AntiAlias=1
Text=%1B
DynamicVariables=1
[MeterPhysFreeLabel]
Meter=String
X=(#OffSet# + 40)
Y=0R
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AntiAlias=1
Text=Physical Free
DynamicVariables=1
[MeterPhysFree]
Meter=String
MeasureName=MeasurePhysFree
X=(#OffSet# + 205)
Y=0r
StringAlign=Right
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AutoScale=1
NumOfDecimals=1
AntiAlias=1
Text=%1B
DynamicVariables=1
; Swap
[MeterSwapTotalLabel]
Meter=String
X=(#OffSet# + 40)
Y=10R
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AntiAlias=1
Text=Swap Total
DynamicVariables=1
[MeterSwapTotal]
Meter=String
MeasureName=MeasureSwapTotal
X=(#OffSet# + 205)
Y=0r
StringAlign=Right
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AutoScale=1
NumOfDecimals=1
AntiAlias=1
Text=%1B
DynamicVariables=1
[MeterSwapUsedLabel]
Meter=String
X=(#OffSet# + 40)
Y=0R
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AntiAlias=1
Text=Swap Used
DynamicVariables=1
[MeterSwapUsed]
Meter=String
MeasureName=MeasureSwapUsed
X=(#OffSet# + 205)
Y=0r
StringAlign=Right
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AutoScale=1
NumOfDecimals=1
AntiAlias=1
Text=%1B
DynamicVariables=1
[MeterSwapFreeLabel]
Meter=String
X=(#OffSet# + 40)
Y=0R
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AntiAlias=1
Text=Swap Free
DynamicVariables=1
[MeterSwapFree]
Meter=String
MeasureName=MeasureSwapFree
X=(#OffSet# + 205)
Y=0r
StringAlign=Right
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AutoScale=1
NumOfDecimals=1
AntiAlias=1
Text=%1B
DynamicVariables=1
; Page
[MeterPageTotalLabel]
Meter=String
X=(#OffSet# + 40)
Y=10R
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AntiAlias=1
Text=Page Total
DynamicVariables=1
[MeterPageTotal]
Meter=String
MeasureName=MeasurePageTotal
X=(#OffSet# + 205)
Y=0r
StringAlign=Right
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AutoScale=1
NumOfDecimals=1
AntiAlias=1
Text=%1B
DynamicVariables=1
[MeterPageUsedLabel]
Meter=String
X=(#OffSet# + 40)
Y=0R
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AntiAlias=1
Text=Page Used
DynamicVariables=1
[MeterPageUsed]
Meter=String
MeasureName=MeasurePageUsed
X=(#OffSet# + 205)
Y=0r
StringAlign=Right
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AutoScale=1
NumOfDecimals=1
AntiAlias=1
Text=%1B
DynamicVariables=1
[MeterPageFreeLabel]
Meter=String
X=(#OffSet# + 40)
Y=0R
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AntiAlias=1
Text=Page Free
DynamicVariables=1
[MeterPageFree]
Meter=String
MeasureName=MeasurePageFree
X=(#OffSet# + 205)
Y=0r
StringAlign=Right
FontSize=11
FontColor=255,255,255,255
SolidColor=0,0,0,1
AutoScale=1
NumOfDecimals=1
AntiAlias=1
Text=%1B
DynamicVariables=1
Same concepts. Just change the #OffSet# variable as needed, and play with the amounts you add or subtract in the ActionTimer measure.
Right:
Code: Select all
[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
SkinWidth=220
SkinHeight=185
[Metadata]
Name=SlideDemo\SimpleToRight
Author=JSMorley
Version=May 11, 2016
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
Information=Demonstration of using ActionTimer to slide out a panel
[Variables]
OffSet=-190
State=1
U=[!UpdateMeasure MeasureSlider][!UpdateMeter *][!Redraw]
; Slider Measure
[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideRight, 2, 22
SlideRight=[!SetVariable State "2"][!SetVariable OffSet "(Clamp(#OffSet#+9,-190,0))"]#U#
ActionList2=Repeat SlideLeft, 2, 22
SlideLeft=[!SetVariable State "1"][!SetVariable OffSet "(Clamp(#OffSet#-9,-190,0))"]#U#
DynamicVariables=1
; Meters
[MeterBack]
Meter=Image
X=#OffSet#
W=220
H=185
SolidColor=16,42,55,255
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #State#"]
Code: Select all
[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
SkinWidth=220
SkinHeight=185
[Metadata]
Name=SlideDemo\SimpleToUp
Author=JSMorley
Version=May 11, 2016
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
Information=Demonstration of using ActionTimer to slide out a panel
[Variables]
OffSet=155
State=1
U=[!UpdateMeasure MeasureSlider][!UpdateMeter *][!Redraw]
; Slider Measure
[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideUp, 2, 22
SlideUp=[!SetVariable State "2"][!SetVariable OffSet "(Clamp(#OffSet#-9,0,155))"]#U#
ActionList2=Repeat SlideDown, 2, 22
SlideDown=[!SetVariable State "1"][!SetVariable OffSet "(Clamp(#OffSet#+9,0,155))"]#U#
DynamicVariables=1
; Meters
[MeterBack]
Meter=Image
X=0
Y=#OffSet#
W=220
H=185
SolidColor=16,42,55,255
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #State#"]
Code: Select all
[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
SkinWidth=220
SkinHeight=185
[Metadata]
Name=SlideDemo\SimpleToDown
Author=JSMorley
Version=May 11, 2016
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
Information=Demonstration of using ActionTimer to slide out a panel
[Variables]
OffSet=-155
State=1
U=[!UpdateMeasure MeasureSlider][!UpdateMeter *][!Redraw]
; Slider Measure
[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideDown, 2, 22
SlideDown=[!SetVariable State "2"][!SetVariable OffSet "(Clamp(#OffSet#+9,-155,0))"]#U#
ActionList2=Repeat SlideUp, 2, 22
SlideUp=[!SetVariable State "1"][!SetVariable OffSet "(Clamp(#OffSet#-9,-155,0))"]#U#
DynamicVariables=1
; Meters
[MeterBack]
Meter=Image
X=0
Y=#OffSet#
W=220
H=185
SolidColor=16,42,55,255
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #State#"]