How to fade a meter?

[Nilvarno]

Hello this is part of a skin of mine:

Code: Select all

[GamingSlot.1]
Meter=image
ImageName=#G[S.1-A]#
X=10
Y=504
w=720
h=404
MouseOverAction=[!ShowMeter GamingSlot.1H][!Redraw]
MouseLeaveAction=[!HideMeter GamingSlot.1H][!Redraw]
Group=Page2

[GamingSlot.1H]
Meter=image
ImageName=#G[S.1-B]#
X=10
Y=504
w=720
h=404
LeftMouseUpAction=["steam://rungameid/976730"]
Hidden=1

I'd like the second one to fade in and out, not just pop up, is there any way to do it?
Plus, the transition is a little laggy, is there a way to make it faster?
Thanks for your time.

[balala]

I'd like the second one to fade in and out, not just pop up, is there any way to do it?

To do this you need an ActionTimer plugin measure and a few variables.
For first add the following variables to the [Variables] section:

Code: Select all

[Variables]
...
Alpha=0
Speed=20
U=[!UpdateMeasure "MeasureSlide1"][!UpdateMeter "GamingSlot.1H"][!Redraw]

Also add the following measure:

Code: Select all

[MeasureSlide1]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat In,#Speed#,10
In=[!SetVariable Alpha "(Clamp((#Alpha#+25.5),0,255))"]#U#
ActionList2=Repeat Out,#Speed#,10
Out=[!SetVariable Alpha "(Clamp((#Alpha#-25.5),0,255))"]#U#
DynamicVariables=1

When executed the In and Out options of this measure will increase / decrease the Alpha variable, which will be used to control the transparency of the [GamingSlot.1H] Image meter.
Add the following options to this [GamingSlot.1H] meter, beside the already existing options:

Code: Select all

[GamingSlot.1H]
...
ImageAlpha=#Alpha#
DynamicVariables=1

and remove the Hidden=1 option of the same meter (important, don't forget this).
Finally modify the MouseOverAction and MouseLeaveAction options of the [GamingSlot.1] meter, as it follows:

Code: Select all

[GamingSlot.1]
...
MouseOverAction=[!CommandMeasure "MeasureSlide1" "Execute 1"][!CommandMeasure "MeasureSlide1" "Stop 2"]
MouseLeaveAction=[!CommandMeasure "MeasureSlide1" "Execute 2"][!CommandMeasure "MeasureSlide1" "Stop 1"]

Note that the Speed variable can be used to set the speed of the animation. Just take care that increasing this variable reduces the speed of the fade effect and vice-versa: decreasing the variable increases the speed, so it is somehow a "reverse" speed.

[Nilvarno]

thank you very much, it's working but it seems to be quite slow even setting speed to 10 and below, and the fade isn't smooth. Actually below 20 doesn't change at all, don't know if 20 is the minimum. It's sad a !ShowFadeMeter command doesn't exist, the usuale !fade command is really smooth.
Thanks again anyway.

[Yincognito]

thank you very much, it's working but it seems to be quite slow even setting speed to 10 and below, and the fade isn't smooth. Actually below 20 doesn't change at all, don't know if 20 is the minimum. It's sad a !ShowFadeMeter command doesn't exist, the usuale !fade command is really smooth.
Thanks again anyway.

Decreasing the value of the #Speed# variable is not the only way of making the fade go faster. You can also decrease the number of repeats, i.e. the 10 in Repeat In,#Speed#,10 and similar areas, while also increasing the amount by which the animation variable changes, i.e. the 25.5 in [!SetVariable Alpha "(Clamp((#Alpha#+25.5),0,255))"] and similar areas. For example, you could change the 10 to 5 and change the 25.5 to 51 (so dividing the 10 by 2 and multiplying 25.5 by the same amount - notice the inverted proportionality here). If it was not clear by now, these things can and should be applied to the "Out" process as well, leaving the sign of the operations unchanged.

Naturally, you could very well have a combination of small #Speed# and number of repeats, coupled with a large amount by which the fade variable is changing, to achieve a very fast effect...

HINT: The 25.5 value can actually be expressed as 255/10. In other words, the amount by which the fade variable is changing should be equal to (255/numberofrepeats). Of course, if you create and use a variable that stores the number of repeats, you can use it in such a formula in the !SetVariable-s, to further "automate" the change of the fading rate:

Code: Select all

[Variables]
Alpha=0
Speed=2
Repeat=5
U=[!UpdateMeasure "MeasureSlide1"][!UpdateMeter "GamingSlot.1H"][!Redraw]

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

---Measures---

[MeasureSlide1]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat In,#Speed#,#Repeat#
In=[!SetVariable Alpha "(Clamp((#Alpha#+255/#Repeat#),0,255))"]#U#
ActionList2=Repeat Out,#Speed#,#Repeat#
Out=[!SetVariable Alpha "(Clamp((#Alpha#-255/#Repeat#),0,255))"]#U#
DynamicVariables=1

---Meters---

[GamingSlot.1]
Meter=image
;ImageName=#G[S.1-A]#
ImageName=#@#a.png
;X=10
;Y=504
w=720
h=404
;MouseOverAction=[!ShowMeter GamingSlot.1H][!Redraw]
;MouseLeaveAction=[!HideMeter GamingSlot.1H][!Redraw]
MouseOverAction=[!CommandMeasure "MeasureSlide1" "Stop 1"][!CommandMeasure "MeasureSlide1" "Stop 2"][!CommandMeasure "MeasureSlide1" "Execute 1"]
MouseLeaveAction=[!CommandMeasure "MeasureSlide1" "Stop 1"][!CommandMeasure "MeasureSlide1" "Stop 2"][!CommandMeasure "MeasureSlide1" "Execute 2"]
Group=Page2

[GamingSlot.1H]
Meter=image
;ImageName=#G[S.1-B]#
ImageName=#@#b.png
;X=10
;Y=504
w=720
h=404
LeftMouseUpAction=["steam://rungameid/976730"]
;Hidden=1
ImageAlpha=#Alpha#
DynamicVariables=1

I used my own images in the above code instead of the unavailable yours, but you get the idea.

[Nilvarno]

thanks you too for your reply, but still i'm not satisfied, it seems that this code make my skin heavier (it is already quite heavy) and all things get laggy, so whatever, thanks anyway.

[balala]

thanks you too for your reply, but still i'm not satisfied, it seems that this code make my skin heavier (it is already quite heavy) and all things get laggy, so whatever, thanks anyway.

Ok, please pack the whole config and upload the package. If the package has more skins, please let us (me) know which is the one we have to work with.

[Nilvarno]

Well, thanks i don't want to disturb anyway.
https://mega.nz/file/y5hRxYRA#d-fuEFm23cFhxFkvz6PZ_UdU5mL4OUeE5YpJQzT_Ais
Here is the whole skin i'm making for myself, it's a forever work in progress but i'm having fun with it and Rainmeter is a nice hobby. It is supposed to be a vertical taskbar with shortcuts and launcher platform for games, app etc, it's not meant to be released or something, too many things done fitting my needs. Of the whole pack the main and heavy config is "TaskbarPages", what i wanted to learn with this topic was how to implement the fade effect to give buttons etc a smooth animation. Thank you very much

[Yincognito]

thanks you too for your reply, but still i'm not satisfied, it seems that this code make my skin heavier (it is already quite heavy) and all things get laggy, so whatever, thanks anyway.

I'll be honest with you, this code (or balala's one earlier) will not make any skin heavier in a general use scenario, unless it's already heavy because of other stuff going on. Just downloaded your package and the CPU usage is already 5% after loading TaskbarPages.ini without doing anything in particular. Since it will be harder for me to test this because of the Y=504 to Y=1800 ( ) occurences that position stuff to the bottom or outside of my screen (1366x768 resolution), I'm just going to say that some of that high CPU can already be alleviated by adding UpdateDivider=-1 to most meters.

Other than that, for the other details balala's computer is better suited, as it can use a higher resolution without the need to hunt down and modify every "out of screen" occurence in the code. I will say this though: the lag can usually be fixed by a more efficient code in terms of resource usage and some other tricks like using smaller images (and meters!) when possible.

Bottom line, if your code is already laggy, you won't be satisfied with any solution whatsoever. That being said, it is indeed true that the ActionTimer process will take a lot of CPU especially when done repeatedly quickly over a large image, and I'm not sure an appropriate method to avoid this is available in Rainmeter currently...

P.S. Point is, very large meters coupled with fast update rates do NOT make a easy code to handle for the CPU in terms of usage. Even if there would be no animation anywhere, large meters or skins updated very fast will quickly make the CPU/GPU really busy.

[Nilvarno]

Well, yes my monitor is 4k so i guess it's a big nightmare in yours xD Exactly where should i add the updatedivider thing? I know the whole skin takes its tollerable toll on cpu, but i like customize things to my tastes, and anyway rainmeter is shutted down when i have to use games and high cpu demanding software, so it's fine.

[Yincognito]

Well, yes my monitor is 4k so i guess it's a big nightmare in yours xD

Haha, yes, it is - I barely see some 20 pixels of it all towards the bottom right corner of my screen.

Exactly where should i add the updatedivider thing?

Anywhere within the [section] area of each meter, for example:

Code: Select all

[Page.1]
Meter=image
ImageName=#P[B1]#
X=747
Y=690
w=110
h=110
UpdateDivider=-1
MouseOverAction=[!ShowMeter Highlight.1][!Redraw]
MouseLeaveAction=[!HideMeter Highlight.1][!Redraw]
LeftMouseDownAction=[!HideMeterGroup "Page2"][!HideMeterGroup "Page3"][!HideMeterGroup "Page5"][!HideMeterGroup "Page6"][!Redraw]

Some meters might need normal updates though, but as far as I could see, most of them are just plain images that stay there and "do nothing", so to speak, so no point updating their meters once a second since one update at skin refresh time would be more than enough.