It is currently March 28th, 2024, 6:02 pm

LinearIcons Shape Meters

Skins with graphics and animations
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5382
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA
Contact:

LinearIcons Shape Meters

Post by eclectic-tech »

There has been a bit of discussion concerning scalable icons for skins, and member raiguard has done some skins that demonstrate the advantages of using SVG icons that he converted into shape meters using theAzack9's Vector Convertor skin. You can see an example in his ColorPickerPlus skin. :thumbup:

After seeing the results of his conversions, I took another look at the vector convertor; honestly, I didn't have much interest in it because I seldom use icons in my skins, and most other SVG images I tried would not convert for me. Raiguard has found that most times the issue is the Relative Path definitions in the SVG code; he was able to correct most failed conversions by converting all path coordinates to absolute; See this post. :great:

In hopes of making it simpler to use scalable icons in your skins, I created a skin that has 170 shape meters from icons by LinearIcons. These icons are available in several formats including SVG and are free to use. I converted them to shape meters that are line drawings path icons that can easily be scaled, colored, and filled for use in your skins.
Click on the skin to open the code in your editor. Locate the associated shape meter for your desired icon and copy and paste it into your skin. You can then edit it to the size and colors you need.
lineariconsShape.png
LinearIcons_1.2019.06.01.rmskin
(89.32 KiB) Downloaded 383 times

Copying and pasting is easy enough, but because I like things as simple as possible, I also created a Snippet Library of these 170 icon shape meters that can be imported into Notepad++ to use along side the Rainmeter Templates and Rainmeter Action Bangs Libraries. This let's you quickly add a shape meter icon to your code. Download the library from here and follow the steps to install the new library as described in Notepad++: Snippets for Rainmeter.

RainmeterLinearIconsLibrary.zip
(84.53 KiB) Downloaded 308 times
User avatar
raiguard
Posts: 660
Joined: June 25th, 2015, 7:02 pm
Location: The Sky, USA
Contact:

Re: LinearIcons Shape Meters

Post by raiguard »

This is great! Hopefully it will encourage more people to start using icons this way, since it is both more performant (I assume) and more accurate than using images or fonts. You can scale and morph shapes into any size or proportion you need!

To show the full power of shape icons, have a look at this image. Literally every icon you can see is a shape meter, except for the weather condition and the album cover!

My point is that I feel like using shapes for your icons is in almost every way better than other methods. In exchange for some slightly higher code complexity, you get beautiful, completely scalable icons that will fit any situation.

I highly encourage anyone reading this to check out the VectorConverter skin, and either use these icons that eclectic-tech so helpfully converted, or to start converting your own!

Cheesy rant over, have a nice day. :)
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5382
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA
Contact:

Re: LinearIcons Shape Meters

Post by eclectic-tech »

raiguard wrote: June 3rd, 2019, 5:28 am This is great! Hopefully it will encourage more people to start using icons this way, since it is both more performant (I assume) and more accurate than using images or fonts. You can scale and morph shapes into any size or proportion you need!

To show the full power of shape icons, have a look at this image. Literally every icon you can see is a shape meter, except for the weather condition and the album cover!

My point is that I feel like using shapes for your icons is in almost every way better than other methods. In exchange for some slightly higher code complexity, you get beautiful, completely scalable icons that will fit any situation.

I highly encourage anyone reading this to check out the VectorConverter skin, and either use these icons that eclectic-tech so helpfully converted, or to start converting your own!

Cheesy rant over, have a nice day. :)
That was exactly my point in offering these line icons; the coding is more complex than using images or Icon fonts, but the benefits of shape meters in terms of scaling and flexibility are worth the time.

Here is a good article on LambdaTest comparing Icon Fonts and SVG Icons: It’s 2019! Let’s End The Debate On Icon Fonts vs SVG Icons Posted by Nikhil | March 14, 2019
User avatar
SilverAzide
Rainmeter Sage
Posts: 2588
Joined: March 23rd, 2015, 5:26 pm
Contact:

Re: LinearIcons Shape Meters

Post by SilverAzide »

eclectic-tech wrote:In hopes of making it simpler to use scalable icons in your skins, I created a skin that has 170 shape meters from icons by LinearIcons.
raiguard wrote: June 3rd, 2019, 5:28 amTo show the full power of shape icons, have a look at this image. Literally every icon you can see is a shape meter, except for the weather condition and the album cover!
Hey guys... If you are interested, I scraped all 47 weather icons off the Weather Underground site a while back, in SVG format. Since WU is now owned by the Weather Channel, the icons match the TWC icon numbers in their XML feed. The style is similar to what the Modern Gadgets Weather Meter is using now.

If they are of interest to you or eclectic-tech, maybe these could be converted to shapes as well. Then Modern Gadgets will have no images at all.
:) :thumbup:

EDIT: I take it back, the icon numbers are not a perfect match between TWC and WU. 44-47 seem flipped, so the numbers might need to be tweaked.
Attachments
wunderground.zip
(39.27 KiB) Downloaded 291 times
nikko
Posts: 44
Joined: December 5th, 2017, 5:58 pm

Re: LinearIcons Shape Meters

Post by nikko »

how resize shape volumehigh and color blank area?

thank you
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5382
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA
Contact:

Re: LinearIcons Shape Meters

Post by eclectic-tech »

nikko wrote: June 5th, 2019, 9:33 am how resize shape volumehigh and color blank area?

thank you
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).

Here is the Volume High enlarged 3x 's and colored white (255,255,255).

Code: Select all

[Rainmeter]
SkinHeight=70
SkinWidth=70

[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,255,255 | 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
DynamicVariables=1
User avatar
raiguard
Posts: 660
Joined: June 25th, 2015, 7:02 pm
Location: The Sky, USA
Contact:

Re: LinearIcons Shape Meters

Post by raiguard »

SilverAzide wrote: June 3rd, 2019, 3:52 pm Hey guys... If you are interested, I scraped all 47 weather icons off the Weather Underground site a while back, in SVG format. Since WU is now owned by the Weather Channel, the icons match the TWC icon numbers in their XML feed. The style is similar to what the Modern Gadgets Weather Meter is using now.

If they are of interest to you or eclectic-tech, maybe these could be converted to shapes as well. Then Modern Gadgets will have no images at all.
:) :thumbup:

EDIT: I take it back, the icon numbers are not a perfect match between TWC and WU. 44-47 seem flipped, so the numbers might need to be tweaked.
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.

If you are only using one color, it works fine:

Image

Code: Select all

[Rainmeter]
MiddleMouseUpAction=[!Refresh]
AccurateText=1

[StyleIcon]
Shape=Path Path1 | StrokeWidth 0 | Extend Fill
Shape2=Path Path2 | StrokeWidth 0
Shape3=Path Path3 | StrokeWidth 0
Shape4=Path Path4 | StrokeWidth 0
Shape5=Path Path5 | StrokeWidth 0
Shape6=Path Path6 | StrokeWidth 0
Shape7=Combine Shape1 | XOR Shape2 | XOR Shape3 | XOR Shape4 | XOR Shape5 | XOR Shape6
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

[MeterBackground]
Meter=Shape
Shape=Rectangle 3,3,825,600,3 | Stroke Color 58,84,110 | Fill Color 24,32,43 | StrokeWidth 3

[MeterIcon-1x]
Meter=Shape
MeterStyle=StyleIcon
Fill=Fill Color 255,100,100
X=30
Y=30

[MeterIcon-0.25x]
Meter=Shape
MeterStyle=StyleIcon
Fill=Fill Color 100,255,100
Shape7=Combine Shape1 | XOR Shape2 | XOR Shape3 | XOR Shape4 | XOR Shape5 | XOR Shape6 | Scale 0.25,0.25,0,0
X=30R
Y=r
However, with multiple colors, you can't use the combined shape. Therefore, when you change the scale, this happens:

Image

Code: Select all

[Rainmeter]
MiddleMouseUpAction=[!Refresh]
AccurateText=1

[StyleIcon]
Shape=Path Path1 | StrokeWidth 0 | Fill Color 240,240,240 | Extend Scale
Shape2=Path Path2 | StrokeWidth 0 | Fill Color 200,220,250 | Extend Scale
Shape3=Path Path3 | StrokeWidth 0 | Fill Color 70,210,255 | Extend Scale
Shape4=Path Path4 | StrokeWidth 0 | Fill Color 70,210,255 | Extend Scale
Shape5=Path Path5 | StrokeWidth 0 | Fill Color 70,210,255 | Extend Scale
Shape6=Path Path6 | StrokeWidth 0 | Fill Color 70,210,255 | Extend Scale
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

[MeterBackground]
Meter=Shape
Shape=Rectangle 3,3,1100,600,3 | Stroke Color 58,84,110 | Fill Color 24,32,43 | StrokeWidth 3

[MeterIcon-1x]
Meter=Shape
MeterStyle=StyleIcon
Scale=Scale 1,1,0,0
X=30
Y=30

[MeterIcon-0.25x]
Meter=Shape
MeterStyle=StyleIcon
Scale=Scale 0.25,0.25,0,0
X=30R
Y=r
You could use TransformationMatrix to scale it instead, but I am already using that for my generalized skin scaling, so that doesn't work. The only other way to fix this is to manually find the top-left pixel of every shape, and set the anchor points for the scaling manually. This is very time-consuming and difficult to do.

This is why I suggested adding the ability to group shapes together without "combining" them. The idea is that it would behave like a combined shape in terms of being able to apply transform modifiers to the group as a whole, but would allow each shape in the group to have separate attribute modifiers. However, this has garnered absolutely no response from the developers... :-(

As an aside, you might also have noticed that I had to redefine the combine shape when changing the scale in the first example. This is because, for some arbitrary reason, the "extend" modifier is not allowed to be used on a combine shape. This greatly inhibits the ability to easily scale a combine shape in a way that is easily able to be used with MeterStyles.

Anyway, all of this exposition was to say that having easily scaled multicolored icons is dang near impossible to pull off without tons of manual labor (or using TransformationMatrix, which as I said before, doesn't work for me).
nikko
Posts: 44
Joined: December 5th, 2017, 5:58 pm

Re: LinearIcons Shape Meters

Post by nikko »

tranformationmatrix is busy. another way to make it?

thank you and sorry
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: LinearIcons Shape Meters

Post by balala »

nikko wrote: June 5th, 2019, 7:38 pm tranformationmatrix is busy.
Not sure what you mean by this. :confused:
User avatar
raiguard
Posts: 660
Joined: June 25th, 2015, 7:02 pm
Location: The Sky, USA
Contact:

Re: LinearIcons Shape Meters

Post by raiguard »

nikko wrote: June 5th, 2019, 7:38 pm tranformationmatrix is busy. another way to make it?

thank you and sorry
Not easily, you'll run into the same issue that I described in my earlier post: if you use the shape meter's built-in scaling option, you will have to define a scale for each individual shape that isn't combined, which is horrendously difficult and time-consuming.
Post Reply