It is currently September 10th, 2024, 4:29 pm

## 1 pixel strokes aliasing on Shape Meter

Tips and Tricks from the Rainmeter Community
jsmorley
Developer
Posts: 22726
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

### 1 pixel strokes aliasing on Shape Meter

One small thing to keep in mind when you are designing your skins and using the Shape meter is how StrokeWidth works.

It bears repeating that StrokeWidth does not create a "border around" the shape, but is the shape's drawing stroke. This means that 1/2 of the stroke will in effect be "inside" the shape, and 1/2 of the stroke will be "outside" the shape.

When a SrokeWidth is an odd number, 1,3,5 etc., this division will create a situation where "half a pixel" will be required. If you think about it, if StrokeWidth is 3, then 1.5 pixels will be drawn "inside" the shape and 1.5 pixels will be drawn "outside" the shape.

This is fine, the Shape meter uses Device Independent Pixels, and is perfectly happy to draw half a pixel. However the way this is really accomplished on the device is that aliasing is used to simulate half a pixel. This is very subtle and hard to notice with larger StrokeWidth values like 3 or 5 or 7, however...

When StrokeWdith is 1, this means that the entire stroke consists of an aliased 1/2 pixel "inside" and an aliased 1/2 pixel "outside". The effect is that the stroke looks kinda "washed out" and isn't the nice distinct color that you defined in Stroke Color.

If you are not happy with this result, there are two ways to attack it.

1) You can increase the StrokeWidth by some fractional amount. What you will find is that as it has to alias less and less of the stroke to achieve the desired width, the stroke will look more and more distinct and clear. I find that StrokeWidth 1.5 gives a result that is visibly quite close to 1 pixel in width, while much brighter and sharper than StrokeWidth 1.

Code: Select all

``````[MeterOne]
Meter=Shape
X=1
Y=1
Shape=Rectangle 0,0,300,100 | Fill Color 50,105,186 | StrokeWidth 1.5 | Stroke Color 255,255,255
``````
2) You can create two shapes in your meter. One will be a solid shape with no StrokeWidth defined, using the color you want for the stroke, and one will be the same shape, 2 pixels smaller, and offset by 1 pixel.

Code: Select all

``````[MeterSix]
Meter=Shape
X=1
Y=10R
Shape=Rectangle 0,0,300,100 | Fill Color 255,255,255,255 | StrokeWidth 0
Shape2=Rectangle 1,1,298,98 | Fill Color 50,105,186 | StrokeWidth 0
``````
This second approach will give a pretty perfect 1 pixel "border around" the shape, and if you want the sharpest, brightest effect that is exactly 1 pixel wide, this is the way to go. No "fractional" pixels are drawn at all.

Here is an example skin so you can see the differences:

Code: Select all

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

[Variables]

[MeterOne]
Meter=Shape
X=1
Y=1
Shape=Rectangle 0,0,300,100 | Fill Color 50,105,186 | StrokeWidth 1| Stroke Color 255,255,255

[MeterTwo]
Meter=Shape
X=1
Y=10R
Shape=Rectangle 0,0,300,100 | Fill Color 50,105,186 | StrokeWidth 1.25 | Stroke Color 255,255,255

[MeterThree]
Meter=Shape
X=1
Y=10R
Shape=Rectangle 0,0,300,100 | Fill Color 50,105,186 | StrokeWidth 1.5 | Stroke Color 255,255,255

[MeterFour]
Meter=Shape
X=1
Y=10R
Shape=Rectangle 0,0,300,100 | Fill Color 50,105,186 | StrokeWidth 1.75 | Stroke Color 255,255,255

[MeterFive]
Meter=Shape
X=1
Y=10R
Shape=Rectangle 0,0,300,100 | Fill Color 50,105,186 | StrokeWidth 2 | Stroke Color 255,255,255

[MeterSix]
Meter=Shape
X=1
Y=10R
Shape=Rectangle 0,0,300,100 | Fill Color 255,255,255,255 | StrokeWidth 0
Shape2=Rectangle 1,1,298,98 | Fill Color 50,105,186 | StrokeWidth 0
``````
1.png
You do not have the required permissions to view the files attached to this post.