Thread for help with the new Shape meter

Help with creating, editing & fixing problems with skins
User avatar

Re: Thread for help with the new Shape meter

November 7th, 2016, 10:32 pm
jsmorley
Developer   [15494 posts]

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

Re: Thread for help with the new Shape meter

November 8th, 2016, 3:40 am
jsmorley
Developer   [15494 posts]

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

Re: Thread for help with the new Shape meter

November 8th, 2016, 4:20 am
ikarus1969
   [195 posts]

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

Re: Thread for help with the new Shape meter

November 8th, 2016, 4:25 am
jsmorley
Developer   [15494 posts]

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

Re: Thread for help with the new Shape meter

November 8th, 2016, 4:52 am
ikarus1969
   [195 posts]

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

Re: Thread for help with the new Shape meter

November 8th, 2016, 5:04 am
jsmorley
Developer   [15494 posts]

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



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

Re: Thread for help with the new Shape meter

November 8th, 2016, 9:55 am
FreeRaider
   [588 posts]

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

Re: Thread for help with the new Shape meter

November 8th, 2016, 1:16 pm
jsmorley
Developer   [15494 posts]

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

Re: Thread for help with the new Shape meter

November 8th, 2016, 3:35 pm
jsmorley
Developer   [15494 posts]

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



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

Re: Thread for help with the new Shape meter

November 8th, 2016, 7:27 pm
FreeRaider
   [588 posts]

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

Return to “Help: Rainmeter Skins”



Who is online

Users browsing this forum: Bing [Bot] and 2 guests