It is currently March 28th, 2024, 7:32 pm

Creating Buttons

Tips and Tricks from the Rainmeter Community
Ao Nuu Shin
Posts: 128
Joined: May 2nd, 2015, 9:13 am

Re: Creating Buttons

Post by Ao Nuu Shin »

Thank you so much for answering me! I'm not sure if i understand, but i'll give it a try! XD thanks!!
User avatar
fonpaolo
Moderator
Posts: 1387
Joined: April 11th, 2013, 8:08 pm
Location: Italy

Re: Creating Buttons

Post by fonpaolo »

You're welcome.

Maybe an image is better than one hundred words...
http://fav.me/d8ru56q
Ao Nuu Shin
Posts: 128
Joined: May 2nd, 2015, 9:13 am

Re: Creating Buttons

Post by Ao Nuu Shin »

Ah! Man, thanks again! But that wasn't my problem, I think I know what you meant, what i'm having a difficulty with is...i'm also learning about PS, and it's hard as hell to do all these. XD hahahaha sorry about that! And seriously, thanks for your time!!
User avatar
fonpaolo
Moderator
Posts: 1387
Joined: April 11th, 2013, 8:08 pm
Location: Italy

Re: Creating Buttons

Post by fonpaolo »

Well, as a suggestion, create your main image/icon, for example let's say 64x64 pixels.
- After that, resize your image width (or height, depending how you want to position your image/icon), so you'll have:
64 (width) x 3 (images for a button) = 192 pixels width.
- If you want, you can add some space between the images, so you'll have:
1 (space) + 64 + 1 (space) + 1 + 64 + 1 + 1 + 64 +1 = 198 pixels width.
It's important that you always use the same size, if you don't do this, you'll end having the image button moving , or displayed only partially.
Ao Nuu Shin
Posts: 128
Joined: May 2nd, 2015, 9:13 am

Re: Creating Buttons

Post by Ao Nuu Shin »

Thanks a lot my friend! I appreciate it! Thank you!
User avatar
fonpaolo
Moderator
Posts: 1387
Joined: April 11th, 2013, 8:08 pm
Location: Italy

Re: Creating Buttons

Post by fonpaolo »

You're welcome.

I'm using Gimp, so I think the process is almost the same.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Creating Buttons

Post by jsmorley »

At the risk of a slight thread-hijack, it might be worth considering if you really need to use a Button meter at all, given the relative complexity of creating the bitmap images need for a Button.

You can get quite close to the desired functionality with an Image meter and three images.

Code: Select all

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

[MeterBackground]
Meter=Image
W=94
H=94
SolidColor=37,47,57,255

[MeterButton]
Meter=Image
W=64
H=64
X=15
Y=15
ImagePath=#@#Images\
ImageName=Off.png
MouseOverAction=[!SetOption MeterButton ImageName "Over.png"][!UpdateMeter *][!Redraw]
MouseLeaveAction=[!SetOption MeterButton ImageName "Off.png"][!UpdateMeter *][!Redraw]
LeftMouseDownAction=[!SetOption MeterButton ImageName "Down.png"][!UpdateMeter *][!Redraw]
LeftMouseUpAction=[!Log "Button clicked!"][!SetOption MeterButton ImageName "Over.png"][!UpdateMeter *][!Redraw]
test.gif
FakeButton_1.0.rmskin
You do not have the required permissions to view the files attached to this post.
User avatar
fonpaolo
Moderator
Posts: 1387
Joined: April 11th, 2013, 8:08 pm
Location: Italy

Re: Creating Buttons

Post by fonpaolo »

I was rather worried to suggest this kind of solution, even if I use it often (but in a more complicated way, having different image dimensions and effects for every stage and using some workarounds to avoid overlapping)...

Thanks jsmorley, as always! :thumbup: :D
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Creating Buttons

Post by jsmorley »

fonpaolo wrote:I was rather worried to suggest this kind of solution, even if I use it often (but in a more complicated way, having different image dimensions and effects for every stage and using some workarounds to avoid overlapping)...

Thanks jsmorley, as always! :thumbup: :D
There are a few advantages and disadvantages with either:

Image meter:
Pro: Doesn't require complicated bitmap image creation.
Pro: Can be resized with W and H
Pro: "Effects" can be had with simple ImageTint, ImageAlpha, ImageRotate etc.
Con: LeftMouseDown action will preclude dragging the skin with the meter unless CTRL is held down.
Con: If there is a background on the skin, or any meter "behind" the button, then the entire size of the image, including any "transparent" areas, will trigger the mouse.

Button meter:
Pro: Does not require all the different mouse actions to define the behavior.
Pro: Skin can be dragged with the meter.
Pro: Only "solid" areas of the button image will trigger the mouse.
Con: Complicated bitmap image creation.
Con: Button cannot be resized. Button will be the size of 1/3rd of the actual image.
Con: No "effects" can be done on the button image.

At the end of the day, the biggest advantage (and maybe only important one) to a real Button meter is the issue of transparency and mouse detection. That might well be the deciding factor depending on your skin design.
User avatar
fonpaolo
Moderator
Posts: 1387
Joined: April 11th, 2013, 8:08 pm
Location: Italy

Re: Creating Buttons

Post by fonpaolo »

Yes, exactly.

The "problem" with transparent areas and mouse has given me many headaches, but at the end I found a solution.

I was worried to suggest something that could solve the "problem" to build a button image, but maybe give some other problems.