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

Button Orientation?

Get help with creating, editing & fixing problems with skins
rahulinho
Posts: 8
Joined: April 25th, 2017, 10:01 pm

Button Orientation?

Post by rahulinho »

Hi,

I'm trying to make a vertical button, with dimensions 50x200, so I have created a png with dimensions 150x200. However, I came across a problem where the button is split in the wrong orientation.

On the Rainmeter documentation for buttons, it says:
The image should have 3 frames laid out either either horizontally or vertically (the orientation is determined by the width and height of the image).
I was wondering what I could do to fix this?

Thanks in advance.
User avatar
kyriakos876
Posts: 919
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: Button Orientation?

Post by kyriakos876 »

Here is and example of a button:
1st frame = Mouse away from the button.
2nd frame = Mouse click on the button.
3rd frame = Mouse over the button.

Make sure your image is like this, and that every frame is centered on every 1/3 of your canvas.
For example if you have 150x200 pixels, you want to do 150/3 which is 50 pixels. Now you need to make three frames of 50x200.
The first one will start from 0x200 and end at 50x200, the next one from 50x200 to 100x200 and the last one, from 100x200 to 150x200. I hope you got what I mean :D
You do not have the required permissions to view the files attached to this post.
User avatar
kyriakos876
Posts: 919
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: Button Orientation?

Post by kyriakos876 »

Notice how even my first frame is smaller than the others, it's still on the center of it's limits.
User avatar
Bananorpion
Posts: 40
Joined: April 16th, 2017, 8:35 pm

Re: Button Orientation?

Post by Bananorpion »

So, you have three 50x200 frames and want them to be split in the right direction?
What you need is not a 150x200 picture, but 50x600 ;)
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5384
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Button Orientation?

Post by eclectic-tech »

rahulinho wrote:Hi,

I'm trying to make a vertical button, with dimensions 50x200, so I have created a png with dimensions 150x200. However, I came across a problem where the button is split in the wrong orientation.

On the Rainmeter documentation for buttons, it says:

I was wondering what I could do to fix this?

Thanks in advance.
Rainmeter will make a judgment that the longest axis is the how it should divide the image into 3 parts.

In your case, you are trying to compose a 50x200 button vertically, which results in a 150x200 button image; Rainmeter will think that it should divide the image horizontally because that is the longest axis (200 pixels).

The simplest solution is to create your button image horizontally, create a 50x600 image like this:
H-Button.png
If for some reason you have to create a vertical version, you can do it by placing your 50 pixel image in the center of a 70 pixel area, making an image that is 210x200, with 3, 50 pixel high button images, placed in the center of the each 70 pixel high region, like this:
V-Button.png
I believe the simplest and easiest solution is the first way. :thumbup:
You do not have the required permissions to view the files attached to this post.
rahulinho
Posts: 8
Joined: April 25th, 2017, 10:01 pm

Re: Button Orientation?

Post by rahulinho »

If for some reason you have to create a vertical version, you can do it by placing your 50 pixel image in the center of a 70 pixel area, making an image that is 210x200, with 3, 50 pixel high button images, placed in the center of the each 70 pixel high region.
Ah, so in that case wouldn't I have a 10px buffer on either side of the image? If this is transparent, the button should work?

Thanks for the replies!
rahulinho
Posts: 8
Joined: April 25th, 2017, 10:01 pm

Re: Button Orientation?

Post by rahulinho »

Bananorpion wrote:So, you have three 50x200 frames and want them to be split in the right direction?
What you need is not a 150x200 picture, but 50x600 ;)
Thanks a lot! This did the trick!