It is currently March 28th, 2024, 10:05 am

Fade Image

Tips and Tricks from the Rainmeter Community
Post Reply
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Fade Image

Post by jsmorley »

FadeImage_1.0.rmskin
(41.86 KiB) Downloaded 109 times
GIF.gif
This demonstrates how to use the ActionTimer plugin to "fade" an image in and out on mouse over.

Both of the alternative methods shown are included in the .rmskin.

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

[Variables]
ButtonAlpha1=160
ButtonAlpha2=160
Wait=5
U=[!UpdateMeasure MeasureFader][!UpdateMeter *][!Redraw]

[MeterMyButton1]
Meter=Image
ImageName=#@#Images\Delete.png
W=100
PreserveAspectRatio=1
ImageAlpha=#ButtonAlpha1#
DynamicVariables=1
MouseOverAction=[!CommandMeasure MeasureFader "Stop 2"][!CommandMeasure MeasureFader "Execute 1"]
MouseLeaveAction=[!CommandMeasure MeasureFader "Stop 1"][!CommandMeasure MeasureFader "Execute 2"]
LeftMouseUpAction=[!Log "Hey, you clicked me!]

[MeterMyButton2]
Meter=Image
ImageName=#@#Images\Check.png
X=30R
W=100
PreserveAspectRatio=1
ImageAlpha=#ButtonAlpha2#
DynamicVariables=1
MouseOverAction=[!CommandMeasure MeasureFader "Stop 4"][!CommandMeasure MeasureFader "Execute 3"]
MouseLeaveAction=[!CommandMeasure MeasureFader "Stop 3"][!CommandMeasure MeasureFader "Execute 4"]
LeftMouseUpAction=[!Log "Hey, you clicked me!]

[MeasureFader]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat FadeIn1,#Wait#,20
FadeIn1=[!SetVariable ButtonAlpha1 "(Clamp(#ButtonAlpha1#+5,160,255))"]#U#
ActionList2=Repeat FadeOut1,#Wait#,20
FadeOut1=[!SetVariable ButtonAlpha1 "(Clamp(#ButtonAlpha1#-5,160,255))"]#U#
ActionList3=Repeat FadeIn2,#Wait#,20
FadeIn2=[!SetVariable ButtonAlpha2 "(Clamp(#ButtonAlpha2#+5,160,255))"]#U#
ActionList4=Repeat FadeOut2,#Wait#,20
FadeOut2=[!SetVariable ButtonAlpha2 "(Clamp(#ButtonAlpha2#-5,160,255))"]#U#
DynamicVariables=1
Here is an alternative that uses just one #Variable# and one ActionTimer measure, to control the various image meter "buttons".

While if you have a lot of images you want to treat this way, this approach can make for much shorter code, be aware that the disadvantage is that if you quickly move your mouse from one to the other, the one you are "leaving" may transition to the fully faded state abruptly rather than slowly fading out.

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

[Variables]
ButtonAlpha=160
Wait=5
U=[!UpdateMeasure MeasureFader][!UpdateMeter *][!Redraw]

[MeterMyButton1]
Meter=Image
Group=MyButtons
ImageName=#@#Images\Delete.png
W=100
PreserveAspectRatio=1
ImageAlpha=#ButtonAlpha#
DynamicVariables=1
MouseOverAction=[!SetOptionGroup MyButtons ImageAlpha 160][!SetOption MeterMyButton1 ImageAlpha "#*ButtonAlpha*#"][!CommandMeasure MeasureFader "Stop 2"][!CommandMeasure MeasureFader "Execute 1"]
MouseLeaveAction=[!SetOptionGroup MyButtons ImageAlpha 160][!SetOption MeterMyButton1 ImageAlpha "#*ButtonAlpha*#"][!CommandMeasure MeasureFader "Stop 1"][!CommandMeasure MeasureFader "Execute 2"]
LeftMouseUpAction=[!Log "Hey, you clicked me!]

[MeterMyButton2]
Meter=Image
Group=MyButtons
ImageName=#@#Images\Check.png
X=30R
W=100
PreserveAspectRatio=1
ImageAlpha=#ButtonAlpha#
DynamicVariables=1
MouseOverAction=[!SetOptionGroup MyButtons ImageAlpha 160][!SetOption MeterMyButton2 ImageAlpha "#*ButtonAlpha*#"][!CommandMeasure MeasureFader "Stop 2"][!CommandMeasure MeasureFader "Execute 1"]
MouseLeaveAction=[!SetOptionGroup MyButtons ImageAlpha 160][!SetOption MeterMyButton2 ImageAlpha "#*ButtonAlpha*#"][!CommandMeasure MeasureFader "Stop 1"][!CommandMeasure MeasureFader "Execute 2"]
LeftMouseUpAction=[!Log "Hey, you clicked me!]

[MeasureFader]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat FadeIn,#Wait#,20
FadeIn=[!SetVariable ButtonAlpha "(Clamp(#ButtonAlpha#+5,160,255))"]#U#
ActionList2=Repeat FadeOut,#Wait#,20
FadeOut=[!SetVariable ButtonAlpha "(Clamp(#ButtonAlpha#-5,160,255))"]#U#
DynamicVariables=1
So let's explain what is going on here...

We have our two image meters, our "buttons". They are set to an initial ImageAlpha of #ButtonAlpha#, which we have defined with a starting value of "160" in [Variables]. So they are about half-transparent to start.

On each of these image meters, we have defined a Group of "MyBottons", so they can be acted upon as a group with bangs like !SetOptionGroup. More on that in a minute.

Then we have one ActionTimer measure, [MeasureFader]. What that does when ActionList1 is executed, is to increase the value of the variable #ButtonAlpha# by 5, 20 times, up to 255, which is fully opaque. When ActionList2 is executed, we decrease the value of the variable by 5, down to 160, back to the starting value.

The trick to using the single variable #ButtonAlpha#, and the single ActionTimer measure [MeasureFader], to control any one of any number of image meters ([MyButton1], [MyButton2]) is in the !SetOptionGroup and !SetOption defined on the MouseOverAction and MouseLeaveAction on the image meters.

As you can see, we first set the ImageAlpha of ALL the meters in our MyButtons group to a STATIC value of "160", our starting value. Then we set the ImageAlpha of the single image meter we want to effect to a value of "#*ButtonAlpha*#". So we are escaping the variable #ButtonAlpha#, in order to treat it as a string literal, rather than as a resolved value. So the option ImageAlpha on our meter is set literally to ImageAlpha=#ButtonAlpha#, which means when the meter is updated, it will go find the current value of #ButtonAlpha# and use it.

All our other meters are in the meantime a static "160", and don't change.

Let me know if you have any questions about this.
User avatar
kyriakos876
Posts: 919
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: Fade Image

Post by kyriakos876 »

My opinion in case you are wondering which one to choose, ask yourself how many meters will you be controlling.

1) Just a few meters? Go for the first one if you don't mind some extra writing.
2) Son, I got more meters to handle than a Mexican has names. Then go for the second solution. It's recommended to avoid repeating the same piece of code many times.
3) Few meters but no crazy animation? Go for the second one.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Fade Image

Post by jsmorley »

kyriakos876 wrote:My opinion in case you are wondering which one to choose, ask yourself how many meters will you be controlling.

1) Just a few meters? Go for the first one if you don't mind some extra writing.
2) Son, I got more meters to handle than a Mexican has names. Then go for the second solution. It's recommended to avoid repeating the same piece of code many times.
3) Few meters but no crazy animation? Go for the second one.
Yeah, I would agree. The transition quirks if you very rapidly move your mouse between buttons can nag at you once you see it.
User avatar
kyriakos876
Posts: 919
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: Fade Image

Post by kyriakos876 »

jsmorley wrote:Yeah, I would agree. The transition quirks if you very rapidly move your mouse between buttons can nag at you once you see it.
(Some extra clarification: That's only for the second solution. First solution won't "compromise" the animation at all.)
Post Reply