Rounded rectangle again

[rbriddickk84]

Hi! I'm just curious about the possibility to make a feature in Rainmeter.
I browse a lots of forums & topics about simple rounded rectangles. I made a full skin, with minimal style, all buttons and windows are just 45° edged rectangles. All graphical elements are 50% transparent, and has 1 pixel different colored edge. Becouse of the edges i had to use a lots of png, except the buttons, becouse that have just simple rectangles. Even those buttons have a long coding, 'couse every edge lines coded separately, and i've got 10 buttons. So will be there something like this in the future?
It would be nice, becouse the codes would be much shorter with such a code.
I know it would throw a lots of questions at dynamic-sizeing, and etc... Just an idea and a question.

[jsmorley]

To directly answer your question, I do think we will eventually get to doing image "masking" or another way of getting simple rounded rectangles in Rainmeter. However, given the personal schedules that the team has for the spring and summer, I don't expect that to perk up to the top of the list anytime very soon.

In the meantime, I would point out something that might help in some cases.

In this post:

http://rainmeter.net/forum/viewtopic.php?f=15&t=16418

I gave some tips how you can use a single image multiple times, in different sizes, while using ScaleMargins to protect the border of the image from being resized.

No reason why this image couldn't have rounded corners...

So If I create one single 50 X 50 image like:

2.jpg

Rounded.png

Then I can use code like:

Code: Select all

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

[MeterImage1]
Meter=Image
ImageName=#CURRENTPATH#Rounded.png
W=100
H=100
AntiAlias=1
ImageTint=177,204,252
ScaleMargins=6,6,6,6

[MeterImage2]
Meter=Image
ImageName=#CURRENTPATH#Rounded.png
Y=4R
W=96
H=150
AntiAlias=1
ImageTint=177,252,242
ScaleMargins=6,6,6,6

[MeterImage3]
Meter=Image
ImageName=#CURRENTPATH#Rounded.png
X=104
Y=0
W=136
H=68
AntiAlias=1
ImageTint=251,252,177
ScaleMargins=6,6,6,6

[MeterImage4]
Meter=Image
ImageName=#CURRENTPATH#Rounded.png
X=120
Y=15R
W=45
H=170
AntiAlias=1
ImageTint=184,252,177
ScaleMargins=6,6,6,6

And get rounded rectangles in different sizes and colors with just one simple image.

2014-03-25_084457.jpg

[Ben Hill]

jsmorley,
May I ask a really basic question? I see your Photoshop image has 10px radius corners. How did you decide to use 6 as your scalemargin value? Was it a trial and error, or does there even have to be a relation between these two numbers?

[jsmorley]

It's really more or less trial and error for me, but the idea in this case is that you want to "protect" the corners of the image. With a solid rounded image, what you are trying to protect are the pixels that contain at least the last pixel of solid area and "out", so you protect the transition from solid to transparent on the corners.

I try to use a ScaleMargins that is just big enough to do that. However, it is less important that you set it as "small as possible". Too much ScaleMargin is generally ok in this context, Too little is bad.

Not sure how to translate the "radius" in PhotoShop on a rounded rectangle to "pixels" that make up the relevant area of the curved corner. There probably is a way to know, but I really just play with it.

[Ben Hill]

Thanks, I'll try it right now.

[jsmorley]

I should note that this is most effective on a square or rectangle with straight edges and slightly rounded corners. The more toward elliptical or circular the entire shape becomes, the less you are able to use the approach to grow or shrink the image without getting strange effects. Although sometimes you can get interesting strange results...

[jsmorley]

It can be easier to see what is going on if you create an image that is just a "border" of a couple of pixels, and then use W and H to size it and ScaleMargins to protect the border area.

Code: Select all

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

[MeterImage1]
Meter=Image
ImageName=#CURRENTPATH#Rounded.png
W=150
H=100
AntiAlias=1
ImageTint=177,204,252
ScaleMargins=3,3,3,3

1.jpg

2.jpg

If you look at that last image, what you are trying to do is keep the corners from being stretched at all, and the top / bottom borders from being stretched "up or down". It is fine, and in fact the entire point, that the top / bottom borders that are straight are stretched "left or right". The opposite is true of the left / right borders. It is the point to stretch the straight part of them "up or down", but not "left or right".

[smurfier]

One thing to keep in mind is that if you don't leave a pixel or two to stretch when you define your ScaleMargins, then Rainmeter gets a bit confused.

Capture.PNG

[rbriddickk84]

Million thanks for the answers and ideas, and everything! That is really helpful!!!
I would have another question, but not in this subject. Must i open another topic, or can i ask here?

[jsmorley]

I would open a new topic.