LinearIcons Shape Meters

[pul53dr1v3r]

Doesn't using TranformatioMatrix in the other meters with different variables do just the job, where the variable "Scale" is for the general skin scaling, and the others for rest.
I didn't test it thoroughly, but don't see any issue with my blind eyes.

Code: Select all

[Variables]
Scale=2
Size=(0.40 * #Scale#)
Size2=(0.50 * #Scale#)
Size3=(0.30 * #Scale#)

[StyleIcon]
Shape=Path Path1 | StrokeWidth 0 | Fill Color 240,240,240 
Shape2=Path Path2 | StrokeWidth 0 | Fill Color 200,220,250 
Shape3=Path Path3 | StrokeWidth 0 | Fill Color 70,210,255 
Shape4=Path Path4 | StrokeWidth 0 | Fill Color 70,210,255 
Shape5=Path Path5 | StrokeWidth 0 | Fill Color 70,210,255 
Shape6=Path Path6 | StrokeWidth 0 | Fill Color 70,210,255 
Path1=350.5, 225.5 | CurveTo 272, 160, 343.6, 188.3, 311.2, 160 | CurveTo 237.7, 168, 259.7, 160, 248.1, 163 | CurveTo 160, 128, 220.3, 143.9, 192.1, 128 | CurveTo 64, 224, 107, 128, 64, 171 | CurveTo 64.2, 225.6, 64, 224.5, 64.2, 225.1 | CurveTo 0, 304, 27.6, 232.9, 0, 265.2 | CurveTo 80, 384, 0, 348.2, 35.8, 384 | LineTo 336, 384 | CurveTo 416, 304, 380.2, 384, 416, 348.2 | CurveTo 350.5, 225.5, 416, 264.8, 387.8, 232.3 | ClosePath 1
Path2=567.9, 223.8 | CurveTo 432.9, 113, 497.5, 237.1, 432.9, 183.5 | CurveTo 490.4, 14.9, 432.9, 72.4, 454.8, 35 | CurveTo 488.3, 2.4, 495.9, 11.8, 494.5, 3.5 | CurveTo 461.8, 0, 479.6, 0.8, 470.7, 0 | CurveTo 317.4, 137.9, 383.9, 0, 320.7, 61.2 | CurveTo 376.3, 199.6, 344.1, 149.8, 365.6, 171.7 | CurveTo 446.5, 286.4, 413.4, 213.9, 440.3, 247 | CurveTo 461.7, 287.9, 451.6, 286.9, 456.5, 287.9 | CurveTo 574.3, 234.6, 506.4, 287.9, 547.3, 267.7 | CurveTo 567.9, 223.8, 578.5, 229.8, 574.1, 222.6 | ClosePath 1
Path3=364.5, 418.1 | CurveTo 342.7, 424.1, 356.9, 413.8, 347.1, 416.3 | LineTo 306.1, 488.1 | CurveTo 312.1, 509.9, 301.7, 495.8, 304.4, 505.5 | CurveTo 320, 512, 314.6, 511.3, 317.3, 512 | CurveTo 333.9, 503.9, 325.5, 512, 330.9, 509.1 | LineTo 370.5, 439.9 | CurveTo 364.5, 418.1, 374.8, 432.2, 372.2, 422.5 | ClosePath 1
Path4=268.5, 418.1 | CurveTo 246.7, 424.1, 260.9, 413.8, 251.1, 416.3 | LineTo 210.1, 488.1 | CurveTo 216.1, 509.9, 205.7, 495.8, 208.4, 505.5 | CurveTo 224, 512, 218.6, 511.3, 221.3, 512 | CurveTo 237.9, 503.9, 229.5, 512, 234.9, 509.1 | LineTo 274.5, 439.9 | CurveTo 268.5, 418.1, 278.8, 432.2, 276.2, 422.5 | ClosePath 1
Path5=172.5, 418.1 | CurveTo 150.7, 424.1, 164.9, 413.8, 155.1, 416.3 | LineTo 114.1, 488.1 | CurveTo 120.1, 509.9, 109.7, 495.8, 112.4, 505.5 | CurveTo 128, 512, 122.6, 511.3, 125.3, 512 | CurveTo 141.9, 503.9, 133.5, 512, 138.9, 509.1 | LineTo 178.5, 439.9 | CurveTo 172.5, 418.1, 182.8, 432.2, 180.2, 422.5 | ClosePath 1
Path6=76.5, 418.1 | CurveTo 54.7, 424.1, 68.9, 413.8, 59.1, 416.3 | LineTo 18.1, 488.1 | CurveTo 24.1, 509.9, 13.7, 495.8, 16.4, 505.5 | CurveTo 32, 512, 26.6, 511.3, 29.3, 512 | CurveTo 45.9, 503.9, 37.5, 512, 42.9, 509.1 | LineTo 82.5, 439.9 | CurveTo 76.5, 418.1, 86.8, 432.2, 84.2, 422.5 | ClosePath 1
DynamicVariables=1
Hidden=1

[MeterIcon-1x]
Meter=Shape
MeterStyle=StyleIcon
X=0
Y=30
TransformationMatrix=#Size2#;0;0;#Size2#;0;0
DynamicVariables=1
Hidden=0

[MeterIcon-0.25x]
Meter=Shape
MeterStyle=StyleIcon
X=290
Y=60
TransformationMatrix=#Size3#;0;0;#Size3#;0;0
DynamicVariables=1

Hidden=0

[SilverAzide]

These are great! I actually had already considered converting the weather icons to shape meters, but there is a problem. In order to have multiple colors in a shape, you cannot combine those shapes, since combining a shape will inherit all attribute modifiers from the parent shape.

I didn't know about that limitation... bummer. (I upvoted your enhancement request. ) But in the meantime... instead of combining, what about using a Union? I thought I was able to make a shape with multiple colors using a union.

[jsmorley]

The Combine shape creates an entirely new shape that makes use of the drawing strokes of the shapes you are combining. There really is no way I can see, in the context of how D2D works, to support combining shapes while maintaining distinct attribute modifiers. Attribute modifiers are applied after the shape is drawn, and at that point it is a single shape, which can only have one each of the attribute modifiers.

If you want distinct attribute modifiers, you are going to need distinct individual shapes.

Perhaps theAzack9 can weigh in on this, but I wouldn't hold out much hope for being able to change this behavior.

[eclectic-tech]

You can use TransformationMatrix to scale the icon, but you then also need to make sure the skin height and width are large enough to prevent clipping enlarged icons. You can change the color of the lines, but not fill the shape as currently defined; these are LinearIcons (line drawings).

@ nikko
I mentioned you could not fill certain areas due to how the vectors are defined. This is related to other discussions here concerning attributes for combined shapes. Combined shapes will only have the attributes of the first shape in the combined shapes.

In order to "color" certain areas of this shape, it is necessary to NOT combine shapes, but to leave them as separate shapes with their own attributes. This may not be possible with some defined shapes, but for the one you inquired about, it can be done.

Here is a demo skin that shows the combined shapes at the top.
You can only control Shape4's attributes since it is the first combined shape; changed the combined shapes' fill color to red.
The lower shape removes the combine definition (Shape7) which allows unique attributes for the individual shapes (Shape4, Shape5, and Shape6); now you can fill each of those shapes with unique colors.

vol2.png

Code: Select all

[Rainmeter]
SkinHeight=340
SkinWidth=170

[Variables]
Scale=3

[VolumeHigh]
TooltipText=VolumeHigh
Meter=Shape
X=0
Y=0
Shape = Path Path1 | fill color 255,255,255 | StrokeWidth 0
Shape2 = Path Path2 | fill color 255,255,255 | StrokeWidth 0
Shape3 = Path Path3 | fill color 255,255,255 | StrokeWidth 0
Shape4 = Path Path4 | fill color 255,55,55 | StrokeWidth 0
Shape5 = Path Path5 | StrokeWidth 0
Shape6 = Path Path6 | StrokeWidth 0
Shape7 = Combine Shape4 | XOR Shape5 | XOR Shape6
Path1 = 13.653, 14.881 | CurveTo 13.265, 14.697, 13.508, 14.881, 13.364, 14.818 | CurveTo 13.337, 13.994, 13.091, 14.483, 13.123, 14.168 | CurveTo 15, 10.501, 14.394, 13.135, 15, 11.861 | CurveTo 13.338, 7.008, 15, 9.141, 14.394, 7.868 | CurveTo 13.266, 6.305, 13.124, 6.834, 13.091, 6.519 | CurveTo 13.969, 6.233, 13.441, 6.091, 13.755, 6.058 | CurveTo 16, 10.502, 15.26, 7.283, 16, 8.839 | CurveTo 13.969, 14.771, 16, 12.165, 15.26, 13.72 | CurveTo 13.654, 14.883, 13.876, 14.846, 13.765, 14.883 | ClosePath 1
Path2 = 15.545, 17.209 | CurveTo 15.157, 17.025, 15.4, 17.209, 15.256, 17.146 | CurveTo 15.229, 16.322, 14.983, 16.811, 15.015, 16.496 | CurveTo 18, 10.501, 16.99, 14.89, 18, 12.768 | CurveTo 15.229, 4.68, 18, 8.234, 16.99, 6.112 | CurveTo 15.157, 3.977, 15.015, 4.506, 14.982, 4.191 | CurveTo 15.86, 3.905, 15.332, 3.763, 15.646, 3.73 | CurveTo 19, 10.502, 17.855, 5.528, 19, 7.933 | CurveTo 15.86, 17.099, 19, 13.071, 17.856, 15.476 | CurveTo 15.545, 17.211, 15.767, 17.174, 15.656, 17.211 | ClosePath 1
Path3 = 11.762, 12.552 | CurveTo 11.374, 12.368, 11.617, 12.552, 11.473, 12.489 | CurveTo 11.446, 11.665, 11.2, 12.154, 11.232, 11.839 | CurveTo 12, 10.501, 11.798, 11.378, 12, 10.954 | CurveTo 11.446, 9.337, 12, 10.048, 11.798, 9.623 | CurveTo 11.374, 8.634, 11.232, 9.163, 11.199, 8.848 | CurveTo 12.077, 8.562, 11.549, 8.42, 11.863, 8.387 | CurveTo 13, 10.502, 12.664, 9.039, 13, 9.746 | CurveTo 12.077, 12.442, 13, 11.258, 12.663, 11.965 | CurveTo 11.762, 12.554, 11.984, 12.517, 11.873, 12.554 | ClosePath 1
Path4 = 8.15, 3.207 | CurveTo 7.414, 3.516, 7.903, 3.207, 7.656, 3.311 | LineTo 3.316, 6.999 | LineTo 1.5, 6.999 | CurveTo 6.6613381477509e-16, 8.499, 0.673, 6.999, 6.6613381477509e-16, 7.672 | LineTo 6.6613381477509e-16, 12.499 | CurveTo 1.5, 13.999, 6.6613381477509e-16, 13.326, 0.673, 13.999 | LineTo 3.316, 13.999 | LineTo 7.414, 17.482 | CurveTo 8.15, 17.791, 7.655, 17.687, 7.903, 17.791 | CurveTo 8.15, 17.791, 8.15, 17.791, 8.15, 17.791 | CurveTo 8.82, 17.429, 8.422, 17.791, 8.666, 17.659 | CurveTo 9, 16.749, 8.939, 17.25, 9, 17.021 | LineTo 9, 4.249 | CurveTo 8.15, 3.206, 9, 3.529, 8.573, 3.206 | ClosePath 1
Path5 = 1, 12.5 | LineTo 1, 8.5 | CurveTo 1.5, 8, 1, 8.224, 1.224, 8 | LineTo 3, 8 | LineTo 3, 13 | LineTo 1.5, 13 | CurveTo 1, 12.5, 1.224, 13, 1, 12.776 | ClosePath 1
Path6 = 8, 16.669 | LineTo 4, 13.269 | LineTo 4, 7.731 | LineTo 8, 4.331 | LineTo 8, 16.669 | ClosePath 1
TransformationMatrix=#Scale#;0;0;#Scale#;0;0

[VolumeHigh2]
TooltipText=VolumeHigh
Meter=Shape
X=0
Y=R
Shape = Path Path1 | fill color 255,255,255 | StrokeWidth 0
Shape2 = Path Path2 | fill color 255,255,255 | StrokeWidth 0
Shape3 = Path Path3 | fill color 255,255,255 | StrokeWidth 0
Shape4 = Path Path4 | fill color 0,0,0 | StrokeWidth 0
Shape5 = Path Path5 | StrokeWidth 0 | fill color 255,255,55 
Shape6 = Path Path6 | StrokeWidth 0 | fill color 55,255,55 
;Shape7 = Combine Shape4 | XOR Shape5 | XOR Shape6
Path1 = 13.653, 14.881 | CurveTo 13.265, 14.697, 13.508, 14.881, 13.364, 14.818 | CurveTo 13.337, 13.994, 13.091, 14.483, 13.123, 14.168 | CurveTo 15, 10.501, 14.394, 13.135, 15, 11.861 | CurveTo 13.338, 7.008, 15, 9.141, 14.394, 7.868 | CurveTo 13.266, 6.305, 13.124, 6.834, 13.091, 6.519 | CurveTo 13.969, 6.233, 13.441, 6.091, 13.755, 6.058 | CurveTo 16, 10.502, 15.26, 7.283, 16, 8.839 | CurveTo 13.969, 14.771, 16, 12.165, 15.26, 13.72 | CurveTo 13.654, 14.883, 13.876, 14.846, 13.765, 14.883 | ClosePath 1
Path2 = 15.545, 17.209 | CurveTo 15.157, 17.025, 15.4, 17.209, 15.256, 17.146 | CurveTo 15.229, 16.322, 14.983, 16.811, 15.015, 16.496 | CurveTo 18, 10.501, 16.99, 14.89, 18, 12.768 | CurveTo 15.229, 4.68, 18, 8.234, 16.99, 6.112 | CurveTo 15.157, 3.977, 15.015, 4.506, 14.982, 4.191 | CurveTo 15.86, 3.905, 15.332, 3.763, 15.646, 3.73 | CurveTo 19, 10.502, 17.855, 5.528, 19, 7.933 | CurveTo 15.86, 17.099, 19, 13.071, 17.856, 15.476 | CurveTo 15.545, 17.211, 15.767, 17.174, 15.656, 17.211 | ClosePath 1
Path3 = 11.762, 12.552 | CurveTo 11.374, 12.368, 11.617, 12.552, 11.473, 12.489 | CurveTo 11.446, 11.665, 11.2, 12.154, 11.232, 11.839 | CurveTo 12, 10.501, 11.798, 11.378, 12, 10.954 | CurveTo 11.446, 9.337, 12, 10.048, 11.798, 9.623 | CurveTo 11.374, 8.634, 11.232, 9.163, 11.199, 8.848 | CurveTo 12.077, 8.562, 11.549, 8.42, 11.863, 8.387 | CurveTo 13, 10.502, 12.664, 9.039, 13, 9.746 | CurveTo 12.077, 12.442, 13, 11.258, 12.663, 11.965 | CurveTo 11.762, 12.554, 11.984, 12.517, 11.873, 12.554 | ClosePath 1
Path4 = 8.15, 3.207 | CurveTo 7.414, 3.516, 7.903, 3.207, 7.656, 3.311 | LineTo 3.316, 6.999 | LineTo 1.5, 6.999 | CurveTo 6.6613381477509e-16, 8.499, 0.673, 6.999, 6.6613381477509e-16, 7.672 | LineTo 6.6613381477509e-16, 12.499 | CurveTo 1.5, 13.999, 6.6613381477509e-16, 13.326, 0.673, 13.999 | LineTo 3.316, 13.999 | LineTo 7.414, 17.482 | CurveTo 8.15, 17.791, 7.655, 17.687, 7.903, 17.791 | CurveTo 8.15, 17.791, 8.15, 17.791, 8.15, 17.791 | CurveTo 8.82, 17.429, 8.422, 17.791, 8.666, 17.659 | CurveTo 9, 16.749, 8.939, 17.25, 9, 17.021 | LineTo 9, 4.249 | CurveTo 8.15, 3.206, 9, 3.529, 8.573, 3.206 | ClosePath 1
Path5 = 1, 12.5 | LineTo 1, 8.5 | CurveTo 1.5, 8, 1, 8.224, 1.224, 8 | LineTo 3, 8 | LineTo 3, 13 | LineTo 1.5, 13 | CurveTo 1, 12.5, 1.224, 13, 1, 12.776 | ClosePath 1
Path6 = 8, 16.669 | LineTo 4, 13.269 | LineTo 4, 7.731 | LineTo 8, 4.331 | LineTo 8, 16.669 | ClosePath 1
TransformationMatrix=#Scale#;0;0;#Scale#;0;0

By not combining the shape definitions in this shape meter, it is possible to color each shape definition uniquely. As mentioned, once you combine shape definitions, you create a single new shape definition which can only have the attributes of the first one defined.

Hope this help you achieve your desired effect.

[raiguard]

The Combine shape creates an entirely new shape that makes use of the drawing strokes of the shapes you are combining. There really is no way I can see, in the context of how D2D works, to support combining shapes while maintaining distinct attribute modifiers. Attribute modifiers are applied after the shape is drawn, and at that point it is a single shape, which can only have one each of the attribute modifiers.

If you want distinct attribute modifiers, you are going to need distinct individual shapes.

Perhaps theAzack9 can weigh in on this, but I wouldn't hold out much hope for being able to change this behavior.

Well that's a shame, thanks anyway. The second best option would be to have some way of retrieving the top-left pixel of a shape. For example, something like [MeterIcon:Shape4X]. This way you could just add Scale 0.25,0.25,-[#CURRENTSECTION#:ShapeNX],-[#CURRENTSECTION#:ShapeNY] to each shape, and it would work.

Edit: or, better yet, adding the ability to define a transform anchor in terms of the top-left of the meter, rather than the individual shape. Something like Scale 0.25,0.25,0A,0A (A as in absolute), which would anchor it to the top-left of the entire meter.

[eclectic-tech]

Well that's a shame, thanks anyway. The second best option would be to have some way of retrieving the top-left pixel of a shape. For example, something like [MeterIcon:Shape4X]. This way you could just add Scale 0.25,0.25,-[#CURRENTSECTION#:ShapeNX],-[#CURRENTSECTION#:ShapeNY] to each shape, and it would work.

Edit: or, better yet, adding the ability to define a transform anchor in terms of the top-left of the meter, rather than the individual shape. Something like Scale 0.25,0.25,0A,0A (A as in absolute), which would anchor it to the top-left of the entire meter.

You can define the anchor in the Scale definition; I always use Scale 0.25,0.25,0,0; the last 2 parameters set the fixed point for scaling. The default point is the center of the shape...

Also, you can apply Transform parameters to Combined shape; Rotate, Scale, Skew, and Offset.

This still does not allow separate coloration of combined shapes, but you can use the scale parameter instead of TransformationMatrix; sometimes you may need to changes to shape combination parameters (I will post the code separate if you want; too large for this board!).

Here are some weather icons I have been testing. The first set uses TransformationMatrix to scale the shapes. The second set uses the shape meter's scale parameter to scale combined shapes. Both can work, but as you pointed out in an earlier post, there are limits to coloration when combined shapes are used.

TransformationMatrix Scaled

meteottrans.png

Shape Scale Parameter Used

meteoscale.png

[raiguard]

You can define the anchor in the Scale definition; I always use Scale 0.25,0.25,0,0; the last 2 parameters set the fixed point for scaling. The default point is the center of the shape...

Also, you can apply Transform parameters to Combined shape; Rotate, Scale, Skew, and Offset.

This still does not allow separate coloration of combined shapes, but you can use the scale parameter instead of TransformationMatrix; sometimes you may need to changes to shape combination parameters (I will post the code separate if you want; too large for this board!).

Here are some weather icons I have been testing. The first set uses TransformationMatrix to scale the shapes. The second set uses the shape meter's scale parameter to scale combined shapes. Both can work, but as you pointed out in an earlier post, there are limits to coloration when combined shapes are used.

TransformationMatrix Scaled
meteottrans.png

Shape Scale Parameter Used
meteoscale.png

Sorry, I must not have been clear, I already use that method in ModernGadgets. When you set the anchor to 0,0, it sets it to the top-left of that SHAPE. What I want is to be able to set it to the top-left of the METER. If you do the former with non-combined shapes, the result is as it is shown in the second example image in my long post.

The whole problem I am trying to solve is easily setting the anchor point to the top-left of the entire meter, rather than having to go from the top-left of each individual shape.

[eclectic-tech]

@ raiguard

Yeah, sorry , I didn't examine you code closely, but now see what you are trying to do by using an Extend for scale control on your universal shape style.

A universal shape style is an ambitious objective ; I don't see a way to easily do that given the available options in the shape meter.

But I don't really see the benefit in being able to scale individual meters in a skin. Skins usually are created at a preset (times 1 scale) size and meters are positioned relative to create the desired style. To scale is simply a matter of using TransformationMatrix or a Scaler variable to resize X,Y,W, & H for the entire skin. This maintains the relationships between meters.

For me, a universal shape style is not something I can see the benefit of trying to do.
But I wish you well in your project.

[raiguard]

@ raiguard

Yeah, sorry , I didn't examine you code closely, but now see what you are trying to do by using an Extend for scale control on your universal shape style.

A universal shape style is an ambitious objective ; I don't see a way to easily do that given the available options in the shape meter.

But I don't really see the benefit in being able to scale individual meters in a skin. Skins usually are created at a preset (times 1 scale) size and meters are positioned relative to create the desired style. To scale is simply a matter of using TransformationMatrix or a Scaler variable to resize X,Y,W, & H for the entire skin. This maintains the relationships between meters.

For me, a universal shape style is not something I can see the benefit of trying to do.
But I wish you well in your project.

I like things to be neat and orderly, and I do have a justification for it: Depending on where the icon is located, it has to be displayed at a different scale. For instance, the "refresh" icon in my suite is used at two entirely different scales:

refresh scaling.png

You can also see that the scale for the gadget header icons, and the scale for the HWiNFO SMV button icon, are all different from each other. This is why I hope to solve my issue - I hope to find an easy and flexible way to set the initial scale relative to everything else.

After creating the initial interface with the varied-scaled icons, TransformationMatrix is then used to be able to scale everything at once:

2019_06_06_15_22_24_D_Caleb_Development_Rainmeter_Testbench_Skins_ModernGadgets_Settings_Sidebars_C.png

Having a universal, generalized icon style saves a ton of time when creating a suite with over 50 unique icons (not counting the weather condition icons), some of which are used dozens of times (e.g. checkboxes).