lysy1993lbn,
Overview
The ActionTimer plugin itself is pretty easy. It is simply "do something, wait, do something, wait, do something."
The trick is first defining:
- What is it I want it to do? In a sense you want to say "at the start I want these things set this way, and and the end I want them set that way." Define a goal. A beginning and an end.
- What actions will I need to change those settings from the beginning state to the end state in steps? Define the !SetVariable or !SetOption commands you would need to change from the beginning state to the end state.
- How many "steps" do I want this to have?
- How "fast" do I want this to happen?
Those last two are actually related. Just as with any "animation", the effect is a combination of how many "frames" you have in the animation, and how quickly you change from frame to frame. The more "frames" you have the more "smooth" the effect is, but you then need to balance the speed so "smooth" doesn't cause "slow".
So you might need to play with it to get the right balance of "steps", "size of each change", and "length of the waits" so you get the desired result.
Example
I'm not going to wade through your skin, as it's just more complicated than I think is useful for a demonstration that can help everyone. I am starting with the "concept" you have in mind however, and you should be able to adapt this to your needs.
So let's start by defining that "What do I want it to do?" question...
The goal here is to have a "toolbar" of icons, that behave much like the "auto hide" feature of the taskbar in Windows. They should be "hidden" as a starting state, and then "slide up" when the mouse is moved over the bar, and "slide down" when the mouse moves off.
While I want the "slide up" effect to happen as soon as I move the mouse over it, I find it pleasing to have a short "pause" before the "slide down" effect starts when I move the mouse off.
So I want an end result like this:
slide.gif
So let's start with a skin that does that, but without any ActionTimer "transition effect". Let's just get it working as a "starting" and "ending" state.
Code: Select all
[Rainmeter]
Update=1000
AccurateText=1
[Variables]
UnCropH=0
SlideH=0
IconY=48
DownPause=1000
W=5
U=[!UpdateMeterGroup Sliders][!Redraw]
[MeterSkinBack]
Meter=Image
W=116
H=50
SolidColor=0,0,0,1
MouseOverAction=[!SetVariable IconY "0"][!SetVariable SlideH "50"][!SetVariable UnCropH 48"]#U#
MouseLeaveAction=[!SetVariable IconY "48"][!SetVariable SlideH "0"][!SetVariable UnCropH "0"]#U#
[MeterSlideBack]
Meter=Image
Group=Sliders
W=116
H=#SlideH#
Y=#IconY#
SolidColor=15,55,79,255
DynamicVariables=1
[MeterBottomBar]
Meter=Image
W=116
H=2
Y=50
SolidColor=155,171,249,255
[MeterIcon1]
Meter=Image
Group=Sliders
X=5
Y=#IconY#
ImageName=#@#Images\DriveC.png
ImageTint=200,200,200,255
ImageCrop=0,0,48,#UnCropH#,1
DynamicVariables=1
MouseOverAction=[!SetOption #CURRENTSECTION# ImageTint ""]#U#
MouseLeaveAction=[!SetOption #CURRENTSECTION# ImageTint "200,200,200,255"]#U#
LeftMouseUpAction=["C:"]
[MeterIcon2]
Meter=Image
Group=Sliders
X=10R
Y=#IconY#
ImageName=#@#Images\ControlPanel.png
ImageTint=200,200,200,255
ImageCrop=0,0,48,#UnCropH#,1
DynamicVariables=1
MouseOverAction=[!SetOption #CURRENTSECTION# ImageTint ""]#U#
MouseLeaveAction=[!SetOption #CURRENTSECTION# ImageTint "200,200,200,255"]#U#
LeftMouseUpAction=["Control"]
Hold on a sec, we need to stop here for a minute to touch on something that has nothing to do with ActionTimer as such, but is important for this.
I sorta hate the approach of just having the icons be "off the screen" at the bottom, and then sliding them up "on to the screen" as the effect. While this can work if you put the skin at the very bottom of the screen, it is not going to work even as a concept if you want to change it around to slide out from the top or sides. It also means you are going to get in a fight with the Windows taskbar, which WILL insist on being "in front" at all times.
So what I do instead is use the
ImageCrop option to crop and uncrop the images at the same time as I slide them up and down. That way I'm not playing games with the edge of the screen to get the effect, and the skin can be anywhere.
Ok, back to it. Le't look at that code, and the result:
What I am doing is creating an invisible background meter that will define the overall size of the skin, and be the place where I put the mouse "over" and "leave" actions to trigger the effect.
Then I create meters for my two icons. I initially set their "Y" option so they are being displayed outside the skin, and at the same time using ImageCrop to crop their height to "nothing". So they are invisible. Images that are set outside the skin
will still display, so we use ImageCrop to overcome that behavior. I use ImageCrop rather than W and H, as the goal is not to "resize" them, but literally to "crop" them.
Now in our MouseOverAction, we just change the "Y" option to move the images up to the top of the skin, and at the same time remove that ImageCrop, so the entire image is displayed.
That gives us something like this:
pop.gif
Good! That's the "result" I want to end up with, now we just need to add the "transition effect".
Code: Select all
[Rainmeter]
Update=1000
[Variables]
UnCropH=0
SlideH=0
IconY=48
DownPause=1000
W=5
U=[!UpdateMeasureGroup Sliders][!UpdateMeterGroup Sliders][!Redraw]
[MeterSkinBack]
Meter=Image
W=116
H=50
SolidColor=0,0,0,1
MouseOverAction=[!CommandMeasure MeasureSliders "Stop 2"][!CommandMeasure MeasureSliders "Execute 1"]
MouseLeaveAction=[!CommandMeasure MeasureSliders "Stop 1"][!CommandMeasure MeasureSliders "Execute 2"]
[MeasureSliders]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp|Wait #W#|SlideUp
SlideUp=[!SetVariable IconY "(Clamp(#IconY#-3,0,48))"][!SetVariable SlideH "(Clamp(#SlideH#+3,0,50))"][!SetVariable UnCropH "(Clamp(#UnCropH#+3,0,48))"]#U#
ActionList2=Wait #DownPause#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown|Wait #W#|SlideDown
SlideDown=[!SetVariable IconY "(Clamp(#IconY#+3,0,48))"][!SetVariable SlideH "(Clamp(#SlideH#-3,0,50))"][!SetVariable UnCropH "(Clamp(#UnCropH#-3,0,48))"]#U#
DynamicVariables=1
UpdateDivider=-1
IgnoreWarnings=1
[MeterSlideBack]
Meter=Image
Group=Sliders
W=116
H=#SlideH#
Y=#IconY#
SolidColor=15,55,79,255
DynamicVariables=1
[MeterBottomBar]
Meter=Image
W=116
H=2
Y=50
SolidColor=155,171,249,255
[MeterIcon1]
Meter=Image
Group=Sliders
X=5
Y=#IconY#
ImageName=#@#Images\DriveC.png
ImageTint=200,200,200,255
ImageCrop=0,0,48,#UnCropH#,1
DynamicVariables=1
MouseOverAction=[!SetOption #CURRENTSECTION# ImageTint ""]#U#
MouseLeaveAction=[!SetOption #CURRENTSECTION# ImageTint "200,200,200,255"]#U#
LeftMouseUpAction=["C:"]
[MeterIcon2]
Meter=Image
Group=Sliders
X=10R
Y=#IconY#
ImageName=#@#Images\ControlPanel.png
ImageTint=200,200,200,255
ImageCrop=0,0,48,#UnCropH#,1
DynamicVariables=1
MouseOverAction=[!SetOption #CURRENTSECTION# ImageTint ""]#U#
MouseLeaveAction=[!SetOption #CURRENTSECTION# ImageTint "200,200,200,255"]#U#
LeftMouseUpAction=["Control"]
So first, I changed the MouseOverAction and MouseLeaveAction options on the background meter so they trigger one of the two ActionTimer effects I want. "Slide up and show", or "Slide down and hide".
Then I created the ActionTimer Measure [MeasureSliders] with two ActionList
N options. The First, ActionList1 will slide the toolbar up, and the second, ActionList2 will slide the bar down.
The plugin measure itself is pretty simple. I decided it worked pretty well with 20 "steps" and a "wait" of 5 milliseconds between each "step" of 3 pixels. So there are 20 instances of "SlideUp" and "SlideDown" in the measure, and #W# is set to "5".
Each step simply increases or decreases variables for the "Y" of the icons and the sliding background I decided I wanted, and at the same time changes variables for the ImageCrop settings. I use "Clamp" so I don't have to be "exact" with the number of steps and how many pixels each step changes things. You can't ever define "half a pixel", so rather than fight to get things exact, I can just use Clamp to enforce the lower and upper bounds.
I decided on these settings by looking at how many pixels of total change would be required (50 pixels) and just guessing that 20 steps would make for a nice transition. If I divide 50 by 20, I get 2.5. I can't use half-pixels, so I just made the increment +-3, and let the Clamp function take care of any overrun. I ran it once and then tweaked #W# to get the final effect I liked.
At a high level, you want to ask "how long do I want the entire change to take?" If you want the transition to get from the "beginning" to the "end" in say 200 milliseconds, then you need to use settings so that the total of all "waits" in the ActionList adds up to 200 milliseconds or less. Factor in a millisecond or two for each "action" Rainmeter takes as well. Note that this will never be "exact", as there can be some tiny, impossible to quantify "delays" that happen between actions if Rainmeter is "busy" doing something else at that precise instant.
The goal is to have enough "steps" to be as "smooth" as possible, while also being as "fast" as desired. Don't assume that to "move" or "change" something 200 units (pixels, color, whatever) means you need 200 "steps". First, getting that to be "fast" enough is going to be hard and relatively "CPU expensive", and second, the human eye really doesn't need tons and tons of incremental changes to see it as "smooth". Don't forget that an actual movie is only 24 frames per second, a good video game maxes out around 60 frames per second, and those work perfectly well.
I added an initial "pause" of one second before the "slide down" effect starts, and made sure my #U# "update" variable also updates the ActionTimer measure as well as the meters, so the ActionTimer measure always has the most current value for variables as it is doing those formulas.
Now I end up with my desired:
slide.gif
I have added this example skin to the .rmskin in the first post of this threadYou do not have the required permissions to view the files attached to this post.
I look forward to "playing" with my new toy and applying to my WIPs.
