Smooth Icon Transaction

[TheMightyOwl]

I have a working icon code that transitions into another image when hovered over with the mouse but I would like to make this a smooth transition from 1 to another image.
This is my (working) code so far.

Code: Select all

[Skyrim]
Meter=Image
ImageName=C:\Users\Robert\Documents\Rainmeter\Skins\Periodic Table Custom\@Recources\Images\SkyrimText.png
H=90
PreserveAspectRatio=1
MouseOverAction=[!SetOption #CURRENTSECTION# ImageName "C:\Users\Robert\Documents\Rainmeter\Skins\Periodic Table Custom\@Recources\Images\SkyrimIcon.png"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# ImageName "C:\Users\Robert\Documents\Rainmeter\Skins\Periodic Table Custom\@Recources\Images\SkyrimText.png"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
LeftMouseUpAction=["D:\  Steam\steamapps\common\Skyrim\TESV.exe"]

[fonpaolo]

I have no doubt someone will give you a more detailed explanation, I can only suggest you ActionTimer plugin.

[jsmorley]

What do you mean by "transition"? You want one to fade out and the other to fade in?

[TheMightyOwl]

What do you mean by "transition"? You want one to fade out and the other to fade in?

Whenever my mouse hovers over the icon in goes from the normal one to the mouse over one is a millisecond.
I would like the hover over image to slowly fade in and not to instantly appear completely.

[jsmorley]

https://docs.rainmeter.net/manual/plugins/actiontimer/

Code: Select all

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

[Variables]
U=[!UpdateMeasure MeasureFader][!UpdateMeter *][!Redraw]
W=10
DogAlpha=255
CatAlpha=1

[MeterIconDog]
Meter=Image
ImagePath=#@#Images\
ImageName=Dog.png
ImageAlpha=#DogAlpha#
DynamicVariables=1
MouseOverAction=[!CommandMeasure MeasureFader "Stop 2"][!CommandMeasure MeasureFader "Execute 1"]
MouseLeaveAction=[!CommandMeasure MeasureFader "Stop 1"][!CommandMeasure MeasureFader "Execute 2"]

[MeterIconCat]
Meter=Image
ImagePath=#@#Images\
ImageName=Cat.png
ImageAlpha=#CatAlpha#
DynamicVariables=1

[MeasureFader]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat FadeOutDog,#W#,26
FadeOutDog=[!SetVariable DogAlpha "(Clamp(#DogAlpha#-10,1,255))"][!SetVariable CatAlpha "(Clamp(#CatAlpha#+10,1,255))"]#U#
ActionList2=Repeat FadeOutCat,#W#,26
FadeOutCat=[!SetVariable DogAlpha "(Clamp(#DogAlpha#+10,1,255))"][!SetVariable CatAlpha "(Clamp(#CatAlpha#-10,1,255))"]#U#
DynamicVariables=1

dog.png

cat.png

GIF.gif

Note that I am using Clamp() to limit the fade of the opacity to "1" and not allowing it to get to "0", so while the dog image becomes invisible, it will still recognize the mouse.

This could be done with one Image meter, if you wanted to completely fade out the meter, change the ImageName on the meter, and then fade it back in.

[jsmorley]

This could be done with one Image meter, if you wanted to completely fade out the meter, change the ImageName on the meter, and then fade it back in.

Code: Select all

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

[Variables]
U=[!UpdateMeasure MeasureFader][!UpdateMeter *][!Redraw]
W=5
Alpha=255

[MeterIcon]
Meter=Image
ImagePath=#@#Images\
ImageName=Dog.png
ImageAlpha=#Alpha#
DynamicVariables=1
MouseOverAction=[!CommandMeasure MeasureFader "Stop 2"][!CommandMeasure MeasureFader "Execute 1"]
MouseLeaveAction=[!CommandMeasure MeasureFader "Stop 1"][!CommandMeasure MeasureFader "Execute 2"]

[MeasureFader]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat FadeOut,#W#,26 | #W# | ChangeToCat | #W# | Repeat FadeIn,#W#,26
ActionList2=Repeat FadeOut,#W#,26 | #W# | ChangeToDog | #W# | Repeat FadeIn,#W#,26
FadeOut=[!SetVariable Alpha "(Clamp(#Alpha#-10,1,255))"]#U#
FadeIn=[!SetVariable Alpha "(Clamp(#Alpha#+10,1,255))"]#U#
ChangeToCat=[!SetOption MeterIcon ImageName "Cat.png"]#U#
ChangeToDog=[!SetOption MeterIcon ImageName "Dog.png"]#U#
DynamicVariables=1

GIF.gif

[soyelrafa]

This could be done with one Image meter, if you wanted to completely fade out the meter, change the ImageName on the meter, and then fade it back in.

Code: Select all

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

[Variables]
U=[!UpdateMeasure MeasureFader][!UpdateMeter *][!Redraw]
W=5
Alpha=255

[MeterIcon]
Meter=Image
ImagePath=#@#Images\
ImageName=Dog.png
ImageAlpha=#Alpha#
DynamicVariables=1
MouseOverAction=[!CommandMeasure MeasureFader "Stop 2"][!CommandMeasure MeasureFader "Execute 1"]
MouseLeaveAction=[!CommandMeasure MeasureFader "Stop 1"][!CommandMeasure MeasureFader "Execute 2"]

[MeasureFader]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat FadeOut,#W#,26 | #W# | ChangeToCat | #W# | Repeat FadeIn,#W#,26
ActionList2=Repeat FadeOut,#W#,26 | #W# | ChangeToDog | #W# | Repeat FadeIn,#W#,26
FadeOut=[!SetVariable Alpha "(Clamp(#Alpha#-10,1,255))"]#U#
FadeIn=[!SetVariable Alpha "(Clamp(#Alpha#+10,1,255))"]#U#
ChangeToCat=[!SetOption MeterIcon ImageName "Cat.png"]#U#
ChangeToDog=[!SetOption MeterIcon ImageName "Dog.png"]#U#
DynamicVariables=1

GIF.gif

Great job, I tried it too and it works like a charm! But there is a way to do this with a string meter too?

[jsmorley]

Great job, I tried it too and it works like a charm! But there is a way to do this with a string meter too?

Sure, the approach is the same. Just use that #Alpha# variable on the InlineSetting=Color option (or FontColor if you insist) like InlineSetting=Color | 255,255,255,#Alpha#. Then use !SetOption to change the Text option of the meter instead of the ImageName.

[jsmorley]

Sure, the approach is the same. Just use that #Alpha# variable on the InlineSetting=Color option (or FontColor if you insist) like InlineSetting=Color | 255,255,255,#Alpha#. Then use !SetOption to change the Text option of the meter instead of the ImageName.

Code: Select all

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

[Variables]
U=[!UpdateMeasure MeasureFader][!UpdateMeter *][!Redraw]
W=5
Alpha=255

[MeterAlphaBeta]
Meter=String
W=160
X=80
StringAlign=Center
InlineSetting=Size | 40
InlineSetting2=Color | 255,255,255,#Alpha#
SolidColor=0,0,0,1
AntiAlias=1
Text=Alpha
DynamicVariables=1
MouseOverAction=[!CommandMeasure MeasureFader "Stop 2"][!CommandMeasure MeasureFader "Execute 1"]
MouseLeaveAction=[!CommandMeasure MeasureFader "Stop 1"][!CommandMeasure MeasureFader "Execute 2"]

[MeasureFader]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat FadeOut,#W#,26 | #W# | ChangeToBeta | #W# | Repeat FadeIn,#W#,26
ActionList2=Repeat FadeOut,#W#,26 | #W# | ChangeToAlpha | #W# | Repeat FadeIn,#W#,26
FadeOut=[!SetVariable Alpha "(Clamp(#Alpha#-10,1,255))"]#U#
FadeIn=[!SetVariable Alpha "(Clamp(#Alpha#+10,1,255))"]#U#
ChangeToBeta=[!SetOption MeterAlphaBeta Text "Beta"]#U#
ChangeToAlpha=[!SetOption MeterAlphaBeta Text "Alpha"]#U#
DynamicVariables=1

GIF.gif

[soyelrafa]

Code: Select all

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

[Variables]
U=[!UpdateMeasure MeasureFader][!UpdateMeter *][!Redraw]
W=5
Alpha=255

[MeterAlphaBeta]
Meter=String
W=160
X=80
StringAlign=Center
InlineSetting=Size | 40
InlineSetting2=Color | 255,255,255,#Alpha#
SolidColor=0,0,0,1
AntiAlias=1
Text=Alpha
DynamicVariables=1
MouseOverAction=[!CommandMeasure MeasureFader "Stop 2"][!CommandMeasure MeasureFader "Execute 1"]
MouseLeaveAction=[!CommandMeasure MeasureFader "Stop 1"][!CommandMeasure MeasureFader "Execute 2"]

[MeasureFader]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat FadeOut,#W#,26 | #W# | ChangeToBeta | #W# | Repeat FadeIn,#W#,26
ActionList2=Repeat FadeOut,#W#,26 | #W# | ChangeToAlpha | #W# | Repeat FadeIn,#W#,26
FadeOut=[!SetVariable Alpha "(Clamp(#Alpha#-10,1,255))"]#U#
FadeIn=[!SetVariable Alpha "(Clamp(#Alpha#+10,1,255))"]#U#
ChangeToBeta=[!SetOption MeterAlphaBeta Text "Beta"]#U#
ChangeToAlpha=[!SetOption MeterAlphaBeta Text "Alpha"]#U#
DynamicVariables=1

GIF.gif

Thanks you so much, it works perfect!!!