It is currently March 19th, 2024, 7:58 am

Thread for help with the Shape meter

Get help with creating, editing & fixing problems with skins
User avatar
jsmorley
Developer
Posts: 22632
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Thread for help with the new Shape meter

Post by jsmorley »

P.S. Don't worry, you are exactly where I was just a week or two ago.. I had all the same questions, and it took more than a hot minute to really wrap my head around...
User avatar
jsmorley
Developer
Posts: 22632
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Thread for help with the new Shape meter

Post by jsmorley »

Here is a skin that I think might help demonstrate. Just scroll up and down on the square to change the stroke width, and see the result on the measured size of the overall meter. It might surprise you, but remember those "half pixels".

Code: Select all

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

[Variables]
sw=0

[MeterRectangle]
Meter=Shape
X=20
Y=20
Shape=Rectangle 0,0,100,100 | Extend MyModifiers1
MyModifiers1=Fill Color 255,0,0,255 | StrokeWidth #sw# | Stroke Color 0,0,0,255
MouseScrollDownAction=[!SetVariable sw "(#sw#<20 ? (#sw#+1) : 20)"][!UpdateMeter *][!Redraw]
MouseScrollUpAction=[!SetVariable sw "(#sw#>1 ? (#sw#-1) : 0)"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeterWidthHeight]
Meter=String
X=0
Y=140
FontSize=12
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text=StrokeWidth:#sw#  W:[MeterRectangle:W]  H:[MeterRectangle:H]
DynamicVariables=1
1.jpg
It's all a bit confusing I know, but the nub of it is that D2D is capable of drawing half a pixel, since it deals in "dots" on your screen and not purely in "pixels". So it draws half a pixel. (and for reasons known only to it, "alias" the transition.) Rainmeter on the other hand, which is for the time being still firmly rooted in GDI+, can only "measure" in terms of pixels. There is just no such thing as half a pixel. So in the above, "5" is 103 and "6" is 103. That appears to throw off the relative positioning in your earlier example. And it sorta does, by "half a pixel". D2D draws 2.5 pixels, and Rainmeter positions the next meter 3 pixels away.

If you use even-numbered StorkeWidth's then it can easily divide that by 2, and you get Ginsu Knife sharp edges and exact measurements. Personally, I will never use odd-numbered strokes if I can help it, but "1" is kinda unavoidable, particularly on smaller shapes.
User avatar
ikarus1969
Posts: 571
Joined: February 28th, 2011, 3:20 pm
Location: Vienna, Austria

Re: Thread for help with the new Shape meter

Post by ikarus1969 »

Hi jsmorley,

thank you for the extensive explanation of what a "stroke" is in this context and the consequences of the optical result!

i think it's good to not have all possible shapes at once so i can get used to what is possible already with "Rectangle", "Combine", "Gradients", ...

ikarus1969
User avatar
jsmorley
Developer
Posts: 22632
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Thread for help with the new Shape meter

Post by jsmorley »

ikarus1969 wrote:Hi jsmorley,

thank you for the extensive explanation of what a "stroke" is in this context and the consequences of the optical result!

i think it's good to not have all possible shapes at once so i can get used to what is possible already with "Rectangle", "Combine", "Gradients", ...

ikarus1969
Ellipse and Line coming very soon, hopefully followed closely by Arc and Curve. Line and Arc and Curve will be stand-alone "open" purely stroke shapes. There won't be anything to "fill", and they can't be joined in any "segment" sense. Then we can dig into the Big Kahuna, Path, which will consist of segments of lines, arcs and curves, and can result in an "open" or "closed" shape as you wish. That is probably the most important one, but also by far the most complex, and we need to try to get it right the first time.
User avatar
ikarus1969
Posts: 571
Joined: February 28th, 2011, 3:20 pm
Location: Vienna, Austria

Re: Thread for help with the new Shape meter

Post by ikarus1969 »

jsmorley wrote:Ellipse and Line [...] Arc and Curve [...]Path
What a good way to start with the day (it's 5:47 here) - if i could i would give you all a hug. It's a pity i can't do much more than say thank you again from "good old europe".
User avatar
jsmorley
Developer
Posts: 22632
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Thread for help with the new Shape meter

Post by jsmorley »

If you want to really see the effect of the stroke just make a decent sized stroke semi transparent, so you can see what is under it...

Code: Select all

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

[MeterShape]
Meter=Shape
Shape=Rectangle 5,5,100,100 | Fill Color 0,0,0,255 | StrokeWidth 10 | Stroke Color 255,0,0,90
1.jpg
2.jpg
See what I mean about half "inside" and half "outside" the defined shape size? Again, it pays to never think of the stroke as "a border around the shape". It IS the shape, it's just that you can draw the shape with a big fat crayon, or the finest mechanical pencil...
User avatar
FreeRaider
Posts: 826
Joined: November 20th, 2012, 11:58 pm

Re: Thread for help with the new Shape meter

Post by FreeRaider »

Thanks for the explanations and examples, but assuming that, in creating a rectangle, anyone thinks directly to the width and height measurements, can you make a change to the meter to set as default StrokeWidth=0?
User avatar
jsmorley
Developer
Posts: 22632
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Thread for help with the new Shape meter

Post by jsmorley »

FreeRaider wrote:Thanks for the explanations and examples, but assuming that, in creating a rectangle, anyone thinks directly to the width and height measurements, can you make a change to the meter to set as default StrokeWidth=0?
No, while I understand the idea, we want to have a consistent default for that, and with other open shapes, like LIne and Arc and Curve and such, if the Default StrokeWidth is 0, the shape won't be visible at all. In a sense it won't exist.
User avatar
jsmorley
Developer
Posts: 22632
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Thread for help with the new Shape meter

Post by jsmorley »

StrokeWidth : Part 1

Taking StrokeWidth into account in your designs really is something you are always going to have to do, but it really isn't that hard, and is something I think you can get used to. Well, something you really will just have to get used to in order to use this meter in any "accurate" way.

You are "drawing" a shape of some defined size. Think of it as drawing a rectangle on a piece of paper with a pencil. So to draw a rectangle 100 x 100, you put your pencil down on the paper at exactly the point that defines 100, and draw the rectangle. So far so good.

But wait. The tip of the pencil has some "width" doesn't it? Doesn't matter how much you sharpen it, it still has some width. The drawing line on the paper (the "stroke") is "centered" on exactly 100, with half of the width of the stroke outside of the point that defines 100, and half inside.

So the "drawing" you end up with isn't really 100 x 100 is it... Its width is 100 + the width of the pencil tip. While what is "added" by the width of the pencil tip is only half "outside" the point that defines 100, it is both half on the left and half on the right, for a total change in width of the width of the pencil tip. The stroke. Same for the height, the top and bottom.

So you will always need to consider the size of the StrokeWidth you use on a shape. "How big is my pencil?" You will need to consider (StrokeWidth / 2) for the "position" of the shape in your skin, the X and Y, and the entire StrokeWidth for the "size" of the shape in your skin, the W and H.

Let's look at an example:

Code: Select all

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

[MeterShape]
Meter=Shape
Shape=Rectangle 5,5,200,200 | Fill Color 0,0,0,255 | StrokeWidth 10 | Stroke Color 255,0,0,90
Shape2=Rectangle 215,5,200,200 | Fill Color 0,0,0,255 | StrokeWidth 10 | Stroke Color 255,0,0,90
1.jpg
If we disassemble this a bit, I'll explain what is going on.

First, note that we have an X and Y position of the first shape within the overall meter of Rectangle=5,5. Why are we doing that? Well, since the meter is at 0,0 in the skin, no X and Y for the meter is defined, if we put our pencil down at 0,0 and start drawing, half of the width of the pencil tip is going to end up outside the entire skin on the left and top, and won't be drawn. Half of the stroke is going to be truncated. We need to move the shape in by (StrokeWidth / 2) to make room for it.

Then we define a rectangle that is 200,200 with StrokeWidth 10.

The result is that box on the left. Is it really 200 X 200? Nope. The "center" of the stroke defines 200, and the overall width and height of the shape is 210 X 210.

So to have a second shape that is the same size, and is exactly to the right of the first one, we need to define what X and Y position it should have in the meter.

So we set Rectangle 215,5 on the second shape. it needs to be positioned just to the right of the ACTUAL width of the first shape and its stroke, which is 210, and then allow for half of its own StrokeWidth being "outside" as well. So that is how we end up with 215 for the "position" of the second shape.

In order to have a shape that has a StrokeWidth of 10, and the entire shape, including the stroke, MUST be exactly 200 wide, you can certainly do that. You just have to define the "size" of the shape with a value that is (200 - (StrokeWidth/2)). So the shape will have a width of 190, half the StrokeWidth will be added to the left, and half to the right, and the resulting meter will be exactly 200 wide.

This won't be a concern if you have two shapes that are in two entirely separate meters, since the meter "container" automatically created by the first shape will be 210 wide, and using X=0R on a second meter will in fact properly position them without any need to figure it out for yourself. If however, you have two shapes in the same meter, you will need to account for StrokeWidth in your design.
User avatar
FreeRaider
Posts: 826
Joined: November 20th, 2012, 11:58 pm

Re: Thread for help with the new Shape meter

Post by FreeRaider »

Where am i wrong?

Code: Select all

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

[Variables]
sw=0

[MeterRectangle]
Meter=Shape
Shape=Rectangle 0,0,(100-#sw#),(100-#sw#) | StrokeWidth #sw# | Fill Color 255,0,0,255
MouseScrollDownAction=[!SetVariable sw "(#sw#<20 ? (#sw#+1) : 20)"][!UpdateMeter *][!Redraw]
MouseScrollUpAction=[!SetVariable sw "(#sw#>1 ? (#sw#-1) : 0)"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeterWidthHeight]
Meter=String
X=0
Y=140
FontSize=12
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text=StrokeWidth:#sw#  W:[MeterRectangle:W]  H:[MeterRectangle:H]
DynamicVariables=1
Post Reply