It is currently March 29th, 2024, 8:47 am

Increasing Size on Mouse Over?

Get help with creating, editing & fixing problems with skins
closer2thelung
Posts: 72
Joined: August 29th, 2013, 5:01 am

Increasing Size on Mouse Over?

Post by closer2thelung »

I'm fairly new to rainmeter coding and i cant figure out how to increase the size of a panel on mouse over. Can anyone help?
User avatar
Mordasius
Posts: 1167
Joined: January 22nd, 2011, 4:23 pm
Location: GMT +8

Re: Increasing Size on Mouse Over?

Post by Mordasius »

The following will make the width and height of the background grow on mouse over and shrink back on mouse leave.

Code: Select all

[MtBackground]
Meter=IMAGE
SolidColor=255,204,84
W=300
H=50
MouseOverAction=[!SetOption #CURRENTSECTION# W 500] [!SetOption #CURRENTSECTION# H 100] [!UpdateMeter #CURRENTSECTION#] [!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# W 300] [!SetOption #CURRENTSECTION# H 50] [!UpdateMeter #CURRENTSECTION#] [!Redraw]
closer2thelung
Posts: 72
Joined: August 29th, 2013, 5:01 am

Re: Increasing Size on Mouse Over?

Post by closer2thelung »

I'm sorry I dont quite understand how to tweak that so my icon changes size, not just a colored background. here is my coding for the panel:

Code: Select all

[Rainmeter]
Author=Xyrfo and fediaFedia
Update=-1
MouseActionCursor=0
MouseOverAction=!Execute [!Refresh "WP7\InstalledPanels\#Windows8\DesktopTile" "desktoptile.ini"][!SetWallpaper "C:\Users\MAC PC\Pictures\Game Wallpapers\alanwake.jpg"] 
[!ShowMeter btn1][!ShowMeter MeterClose][!ShowMeter size][!Redraw]
MouseLeaveAction=!Execute [!HideMeter btn1][!HideMeter MeterClose][!HideMeter size][!
Redraw]
MiddleMouseUpAction=!DeactivateConfig
Blur=#globalblurenable#
BlurRegion=#blurtype#,5,5,(#Height#+5),(#Height#+5),#blurcornerradius#

[Variables]
@include=#ROOTCONFIGPATH#Common\Variables\UserVariables.inc
@include2=#ROOTCONFIGPATH#Common\color\color.inc
@include3=size.inc
@include4=UserVariables.inc
Name=ALAN WAKE
Image=alan wake icon.png
Action=G:\Program Files\SteamLibrary\SteamApps\common\Alan Wake\AlanWake.exe

ScaleMargins=10,10,10,10
Meter=Image
ImageName=#ROOTCONFIGPATH#Common\Borders\#shadow#.png
X=0
Y=0
W=(#Height#+10)
H=(#Height#+10)
ImageTint=#bordercolor#
Greyscale=1

[bg]
Meter=Image
ImageName=#Imagedir#\btn3.png
X=5
Y=5
W=#Height#
H=#Height#
ImageTint=#colorskin#,#opacity#
Greyscale=1

[btn1]
Meter=Image
ImageName=#Imagedir#\btn3.png
X=5
Y=5
W=#Height#
H=#Height#
Hidden=1
ImageTint=#colorskin2#,#opacity2#
Greyscale=1

[overlay]
Meter=Image
ImageName=#ROOTCONFIGPATH#Common\Overlay\#overlay#.png
X=5
Y=5
W=#Height#
H=#Height#

[icon]
Meter=Image
ImageName=#Image#
X=5
Y=5
W=#Height#
H=#Height#
AntiAlias=1
LeftMouseUpAction=!Execute ["#Action#"]

[text]
Meter=String
X=(153+(#Height#/#xposition#))
Y=((#Height#/(#yposition#))+5)
StringStyle=NORMAL
StringAlign=right
FontFace=#fonttype#
FontColor=#textcolor2#,255
FontSize=8
AntiAlias=1
Text=#Name#

[MeterClose]
Meter=Button
ButtonImage=#ROOTCONFIGPATH#Common\Panel\Close.png
X=(#Height#-10)
Y=5
ButtonCommand=!DeactivateConfig
Hidden=1

[size]
Meter=Button
ButtonImage=#ROOTCONFIGPATH#Common\Panel\size.png
X=(#Height#-10) 
Y=(#Height#-10)
ButtonCommand=!Execute ["#ROOTCONFIGPATH#Common\Size\size.exe" single "#CURRENTCONFIG#" 

"#SETTINGSPATH#"]
Hidden=1
RayDurlok
Posts: 3
Joined: June 19th, 2018, 9:57 am

Re: Increasing Size on Mouse Over?

Post by RayDurlok »

Hello,
Is there a way to "center" this animation?

I used it to improve my honeycombs but the skin will resize shifting to the lower right (which makes sense because the coorinate origin is top left) so how could i center the resizing?
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Increasing Size on Mouse Over?

Post by balala »

RayDurlok wrote:Is there a way to "center" this animation?
Yep, it is. The simplest way is to place the meter a bit to right and low, then, while you're resizing it, you'll have to move it, as well:

Code: Select all

[MtBackground]
Meter=IMAGE
SolidColor=255,204,84
X=100
Y=25
W=300
H=50
MouseOverAction=[!SetOption #CURRENTSECTION# X "0"][!SetOption #CURRENTSECTION# Y "0"][!SetOption #CURRENTSECTION# W "500"][!SetOption #CURRENTSECTION# H "100"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# X "100"][!SetOption #CURRENTSECTION# Y "25"][!SetOption #CURRENTSECTION# W "300"][!SetOption #CURRENTSECTION# H "50"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
This is Mordasius's above code, a bit modified. See the newly added X and Y options and the two new !SetOption bangs on both mouse action options (MouseOverAction and MouseLeaveAction).
RayDurlok
Posts: 3
Joined: June 19th, 2018, 9:57 am

Re: Increasing Size on Mouse Over?

Post by RayDurlok »

Thanks a lot!

Is there a way to slow down the resizing animation?
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Increasing Size on Mouse Over?

Post by balala »

RayDurlok wrote:Is there a way to slow down the resizing animation?
There is:
  1. This isn't practically a slow down. Just a delay. For this you have to add a !Delay bang at the beginning of the MouseOverAction option: MouseOverAction=[color=#FF0000][!Delay "200"][/color][!SetOption #CURRENTSECTION# X "0"][!SetOption #CURRENTSECTION# Y "0"][!SetOption #CURRENTSECTION# W "500"][!SetOption #CURRENTSECTION# H "100"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]. The numeric value used under the !Delay bang sets the wait time (in milliseconds) between the moment when you're hovering the mouse over the meter and the moment when it is resized (Just mention that I think this isn't what you would like).
  2. A much better solution would be to use the ActionTimer plugin to gradually increase the meter. This is a bit harder (but definitely not impossible) to achieve. I don't have enough time right now, but if you want, a bit later I'll post an example how this can be achieved.
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Increasing Size on Mouse Over?

Post by balala »

RayDurlok wrote:Is there a way to slow down the resizing animation?
As I promised, here is the much better solution, which uses the ActionTimer plugin, to gradually resize the meter (this is what I think you need).
In order this to work, I had to add a new variable (into the [Variables] section). I named it Size (and additionally I added two more variables: Wait and U - I'll explain them a bit later).
The ActionTimer plugin measure is used to increase / decrease the value of the Size variable, when you're hovering the mouse over / leaving the meter. Its value is incremented from 0 to 10, in 10 steps, then decremented back to 0. On every this kind of change, the position and size of the meter is recalculated. This method requires a DynamicVariables=1 option to be added to the Image meter, because the plugin measure sets dynamically the value of the Size variable.
The code:

Code: Select all

[Rainmeter]
Update=-1

[Variables]
U=[!UpdateMeasure "MeasureSlide"][!UpdateMeter "MtBackground"][!Redraw]
Size=0
Wait=15

[MeasureSlide]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat Up,#Wait#,10
Up=[!SetVariable Size "(Clamp((#Size#+1),0,10))"]#U#
ActionList2=Repeat Down,#Wait#,10
Down=[!SetVariable Size "(Clamp((#Size#-1),0,10))"]#U#
DynamicVariables=1

[MtBackground]
Meter=IMAGE
SolidColor=255,204,84
X=(10*(10-#Size#))
Y=(2.5*(10-#Size#))
W=(300+20*#Size#)
H=(50+5*#Size#)
MouseOverAction=[!CommandMeasure "MeasureSlide" "Execute 1"][!CommandMeasure "MeasureSlide" "Stop 2"]
MouseLeaveAction=[!CommandMeasure "MeasureSlide" "Stop 1"][!CommandMeasure "MeasureSlide" "Execute 2"]
DynamicVariables=1
Take into account the followings:
  • In the [Rainmeter] section, I set the Update to -1. This means that the skin is never updated. If for any reason (you can have further measures / meters) you have to set it to any other value (like the default Update=1000), do it freely. From the point of view of the ActionTimer plugin, this doesn't matter too much.
  • The Wait variable determines how long the plugin waits from an incremenet / decrement of the variable, until the next value for the variable is set. It is expressed into milliseconds. If you'll use a larger value, the animation will be slower and vice-versa: for smaller values, the animation will be quicker.
  • The bangs used into the U variable determin the updated sections.
Please check out this code and let me know if this is what you wanted.
RayDurlok
Posts: 3
Joined: June 19th, 2018, 9:57 am

Re: Increasing Size on Mouse Over?

Post by RayDurlok »

Sorry for the late answer.

Thank you it works perfect for me!
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Increasing Size on Mouse Over?

Post by balala »

RayDurlok wrote:Thank you it works perfect for me!
I'm glad. :17good