It is currently March 29th, 2024, 11:13 am

Make Button smaller on Click -> automatically resize after a short moment

Get help with creating, editing & fixing problems with skins
HachiroKureha
Posts: 2
Joined: April 13th, 2019, 10:18 pm

Make Button smaller on Click -> automatically resize after a short moment

Post by HachiroKureha »

Heyho Community,
I'm quite new to making my own Rainmeter skins and have the following issue:

I want to create a Button that
on Click gets smaller, and after a short moment automatically resizes.
(Just to show the effect of a pressed button)

Thats my try so far:
------------------------------------------------------------
LeftMouseUpAction=[!SetOption #CURRENTSECTION# ImageName "pressedButton"][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# ImageName "normalButton"][!UpdateMeter #CURRENTSECTION#][!Redraw]

------------------------------------------------------------
(I created two images, one normal and the other one 90% sized. I just shortened the location of the Images here to give a better overview)

The Problem with this: It only switches back to the normal button image, when I move the mouse away from it.
But I want that it automatically switches back after a short moment (~0.5sec), regardless where my mouse is.
I tried to solve this via the action timer plugin, but it seems that I'm not experienced enough at the moment, to get this to work.

Does someone knows an easy way for this?
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Make Button smaller on Click -> automatically resize after a short moment

Post by balala »

HachiroKureha wrote: April 14th, 2019, 9:51 am The Problem with this: It only switches back to the normal button image, when I move the mouse away from it.
You can set the pressedButton image when you press the mouse button and normalButton when you release it:

Code: Select all

LeftMouseDownAction=[!SetOption #CURRENTSECTION# ImageName "pressedButton"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
LeftMouseUpAction=[!SetOption #CURRENTSECTION# ImageName "normalButton"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
HachiroKureha wrote: April 14th, 2019, 9:51 am But I want that it automatically switches back after a short moment (~0.5sec), regardless where my mouse is.
I tried to solve this via the action timer plugin, but it seems that I'm not experienced enough at the moment, to get this to work.
Not needed an ActionTimer plugin measure, because we have the !Delay bang, which is excelent for such tasks. If the above solution isn't good enough for you, you can set the pressedButton image when you press it, then set the normalButton after a predefined period, regardless if you're releasing the button or not:

Code: Select all

LeftMouseDownAction=[!SetOption #CURRENTSECTION# ImageName "pressedButton"][!UpdateMeter "#CURRENTSECTION#"][!Redraw][!Delay "500"][!SetOption #CURRENTSECTION# ImageName "normalButton"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
I added here a [!Delay "500"] bang, which ensures to execute the following bangs after 500 milliseconds = 0.5 seconds after the first one. Obviously you can freely establish the period, changing the parameter.
Me personally think the first solution being a better one, but it's up to you which one do you prefere.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Make Button smaller on Click -> automatically resize after a short moment

Post by jsmorley »

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1

[MeterBack]
Meter=Image
W=100
H=100
SolidColor=47,47,47,255

[MeterImage]
Meter=Image
X=25
Y=25
ImageName=Off.png
Path=#@#Images\
MouseOverAction=[!SetOption MeterImage ImageName Over.png][!UpdateMeter MeterImage][!Redraw]
MouseLeaveAction=[!SetOption MeterImage ImageName Off.png][!UpdateMeter MeterImage][!Redraw]
LeftMouseDownAction=[!SetOption MeterImage ImageName Down.png][!UpdateMeter MeterImage][!Redraw]
LeftMouseUpAction=["Notepad.exe"][!SetOption MeterImage ImageName Over.png][!UpdateMeter MeterImage][!Redraw]

ImageButton_1.0.rmskin

GIF.gif


There are a ton of ways to skin this cat, this is just one...


If you really want a "delay" when the button is pressed and released, you can use the !Delay bang.

LeftMouseUpAction=["Notepad.exe"][!Delay 500][!SetOption MeterImage ImageName Over.png][!UpdateMeter MeterImage][!Redraw]

Note that you won't be able to drag the skin by the meter since LeftMouseDownAction is being used. That is why I put a background on the skin. You can also override the LeftMouseDownAction by holding CTRL while you click.

One thought on using different "sized" images in this scenario. Assuming you are creating the images, I would be tempted to make the overall images all the same size, with varying amounts of transparent "slack space" around the content, so you don't have to also deal with "position" in the meter as the size changes. Keeping different sized images in the same relative position as they change would not be rocket science, just mess with X and Y at the same time, but all things being equal, I'd probably spend an extra minute on the images and avoid it.
You do not have the required permissions to view the files attached to this post.
HachiroKureha
Posts: 2
Joined: April 13th, 2019, 10:18 pm

Re: Make Button smaller on Click -> automatically resize after a short moment

Post by HachiroKureha »

Thank you two very much, now I got it! :)
I did not know until now about the delay option
Last edited by HachiroKureha on April 14th, 2019, 1:15 pm, edited 1 time in total.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Make Button smaller on Click -> automatically resize after a short moment

Post by jsmorley »

Glad to help.
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Make Button smaller on Click -> automatically resize after a short moment

Post by balala »

Another possibility is to use a Button meter, instead of Image. If you properly create the image used into the Button meter, you can get what you need without having to care about the delays and different actions executed when you're hovering the mouse over it or click. Here you have a very good description of how to create the image used as button.
If you want to try this out as well, and have questions, please let us know.