It is currently March 29th, 2024, 12:39 pm

Slide in on hover, slide out when leaving.

Get help with creating, editing & fixing problems with skins
Banjer_HD
Posts: 1
Joined: September 10th, 2017, 5:27 pm

Slide in on hover, slide out when leaving.

Post by Banjer_HD »

Hello,
I am trying to make it so when you hover over an box the width starts increasing, and when hovering out of the box, it goes back slowly again.
My current code:

Code: Select all

[Rainmeter]
Update=500

[MeterBackground]
Meter=Image
W=145
H=95
SolidColor=99,101,104,150
MouseOverAction=[!SetOption MeterBackground W 250][!UpdateMeter #CURRENTSECTION#] [!Redraw]
MouseLeaveAction=[!SetOption MeterBackground W 145][!UpdateMeter #CURRENTSECTION#] [!Redraw]
This makes it bigger and smaller in 1 go, but I want it to 'slide'

Thanks for reading!
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Slide in on hover, slide out when leaving.

Post by balala »

For a such action, you probably should use the ActionTimer plugin (otherwise a very good and - at least for me - very useful plugin). For this, you have to cerate a variable, which will be the width of the [MeterBackground] meter. Ad it to the [Variables] section:

Code: Select all

[Variables]
Width=145
The next step is to add the following plugin measure:

Code: Select all

[MeasureWidth]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat Increase,10,55
Increase=[!SetVariable Width "(Clamp((#Width#+2),145,250))"]#U#
ActionList2=Repeat decrease,10,55
Decrease=[!SetVariable Width "(Clamp((#Width#-2),145,250))"]#U#
DynamicVariables=1
The Increase option will increase the width of the skin (through the Width variable), while Decrease will obviously decrease it. The above measure uses the U variable. This is used to tell which sections of the code should be updated repeatedly. In this case, the code is simple enough to know what to update: both the [MeasureWidth] measure and the [MeterBackground] meter. Add the U variable to the to the same [Variables] section (obviously don't remove the previously added Width variable:

Code: Select all

[Variables]
Width=145
U=[!UpdateMeasure "MeasureWidth"][!UpdateMeter "MeterBackground"][!Redraw]
The last thing is to tell the code when to start running the appropriate action of the [MeasureWidth] measure. For this you have to modify the MouseOverAction and MouseLeaveAction options of the [MeterBackground] meter and (don't forget this because is very important), add a DynamicVariables=1 option to the same [MeterBackground] meter:

Code: Select all

[MeterBackground]
...
MouseOverAction=[!CommandMeasure "MeasureWidth" "Execute 1"][!CommandMeasure "MeasureWidth" "Stop 2"]
MouseLeaveAction=[!CommandMeasure "MeasureWidth" "Stop 1"][!CommandMeasure "MeasureWidth" "Execute 2"]
DynamicVariables=1
Leave untouched the other options of the meter.
With all these modifications, your code should look like:

Code: Select all

[Rainmeter]
Update=500

[Variables]
Width=145
U=[!UpdateMeasure "MeasureWidth"][!UpdateMeter "MeterBackground"][!Redraw]

[MeasureWidth]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat Increase,10,55
Increase=[!SetVariable Width "(Clamp((#Width#+2),145,250))"]#U#
ActionList2=Repeat decrease,10,55
Decrease=[!SetVariable Width "(Clamp((#Width#-2),145,250))"]#U#
DynamicVariables=1

[MeterBackground]
Meter=Image
W=#Width#
H=95
SolidColor=99,101,104,150
MouseOverAction=[!CommandMeasure "MeasureWidth" "Execute 1"][!CommandMeasure "MeasureWidth" "Stop 2"]
MouseLeaveAction=[!CommandMeasure "MeasureWidth" "Stop 1"][!CommandMeasure "MeasureWidth" "Execute 2"]
DynamicVariables=1