New Shape Meter

[jsmorley]

Meter=Shape

Thanks to an idea and code from our newest developer theAzack9, and lots of help from Brian, we are happy to announce our first new meter type in many years. Introducing the Shape meter!

The Shape meter will allow you to "draw" shapes using vector graphics. This has a couple of advantages over using the raster images (.png, .jpg etc.) supported by the Image meter.

First, the shapes can be dynamically changed as needed, using shape definitions and modifiers like color and stroke, rotate and scale and much more. When the shapes are changed, there is no "pixelating" or "aliasing" that is a common problem when sizing or transforming static raster images. Second, the shapes are created entirely in code, there is no need to load or include bulky image files from disk in your skins.

Make no mistake, this is not a replacement for raster image .png or .jpg. files. There is a huge different in what can be achieved with raster "painting" (i.e. Photoshop) vs. vector "drawing" (i.e Illustrator). Rastor is a "bitmap", which each and every pixel in the image painted to achieve the image. Vector is a "drawing", basically using paths to draw an outline of a shape and filling it in. So while you probably don't want to try to do the Mona Lisa as a vector graphic (it can be done, but whew...) you also probably don't want or need to "paint" a rounded rectangle pixel by pixel, you want to draw the outline and fill it in. Both have their strengths and uses.

This is a powerful meter. It can do a ton of things (and more coming) and can be pretty involved to use. Be sure to keep the documentation for the meter handy, you are going to need it!

>> Shape Meter Documentation

Also see the .rmskin you can download at the bottom of the documentation, it has a bunch of skins that demonstrate a variety of ways to use the meter and its various options.

>> Example .rmskin

Let's give a really quick overview, with some examples:

A Shape meter can have one or more Shape(N) options in it. These define the shape "type", followed by any "attribute" or "transform" modifiers you want. The shapes can also be "combined" in the meter in a variety of ways, to create more complex overall shapes.

In this early beta, we have only implemented the Rectangle and Combine shape types. More are coming soon, but lets take a quick look at some of the things it can do using just those types. Don't worry about the syntax too much right now, that will come as you explore the documentation. At it's most basic, the syntax is:

Shape(N)=ShapeType coordinates | modifier | modifier | modifier

Some basic shapes

Code: Select all

[MeterShape1]
Meter=Shape
X=6
Y=6
Shape=Rectangle 0,0,100,100
Shape2=Rectangle 120,0,200,100
Shape3=Rectangle 340,0,200,100,25
Shape4=Rectangle 560,0,100,100,50

Basic Shapes.jpg

Fill Color

Code: Select all

[MeterShape1]
Meter=Shape
X=6
Y=6
Shape=Rectangle 0,0,100,100 | Fill Color 191,237,239,255
Shape2=Rectangle 120,0,200,100 | Fill Color 240,236,192,255
Shape3=Rectangle 340,0,200,100,25 | Fill Color 206,240,192,255
Shape4=Rectangle 560,0,100,100,50 | Fill Color 240,192,192,255

Fill Color.jpg

Stroke Width

Code: Select all

[MeterShape1]
Meter=Shape
X=6
Y=6
Shape=Rectangle 0,0,100,100 | Fill Color 191,237,239,255 | StrokeWidth 2
Shape2=Rectangle 120,0,200,100 | Fill Color 240,236,192,255 | StrokeWidth 4
Shape3=Rectangle 340,0,200,100,25 | Fill Color 206,240,192,255 | StrokeWidth 6
Shape4=Rectangle 560,0,100,100,50 | Fill Color 240,192,192,255 | StrokeWidth 8

Stroke Width.jpg

Stroke Color

Code: Select all

[MeterShape1]
Meter=Shape
X=6
Y=6
Shape=Rectangle 0,0,100,100 | Fill Color 191,237,239,255 | StrokeWidth 2 | Stroke Color 28,115,120,255
Shape2=Rectangle 120,0,200,100 | Fill Color 240,236,192,255 | StrokeWidth 4 | Stroke Color 120,112,22,255
Shape3=Rectangle 340,0,200,100,25 | Fill Color 206,240,192,255 | StrokeWidth 6 | Stroke Color 49,115,23,255
Shape4=Rectangle 560,0,100,100,50 | Fill Color 240,192,192,255 | StrokeWidth 8 | Stroke Color 107,22,22,255

Stroke Color.jpg

Fill Gradient

Code: Select all

[MeterShape1]
Meter=Shape
X=6
Y=6
Shape=Rectangle 0,0,100,100 | Fill LinearGradient ShapeGradient
ShapeGradient=360 | 191,237,239,255 ; 0.0 | 28,115,120,255 ; 1.0
Shape2=Rectangle 120,0,200,100 | Fill LinearGradient Shape2Gradient
Shape2Gradient=90 | 240,236,192,255 ; 0.0 | 120,112,22,255 ; 0.8
Shape3=Rectangle 340,0,200,100,25 | Fill LinearGradient Shape3Gradient
Shape3Gradient=270 | 206,240,192,255 ; 0.0 | 49,115,23,255 ; 0.8
Shape4=Rectangle 560,0,100,100,50 | Fill RadialGradient Shape4Gradient
Shape4Gradient=0,0,-10,-10 | 240,192,192,255 ; 0.0 | 107,22,22,255 ; 1.0

Fill Gradient.jpg

Rotate

Code: Select all

[MeterShape1]
Meter=Shape
X=20
Y=20
Shape=Rectangle 0,0,100,100
Shape2=Rectangle 140,0,100,100 | Rotate 45

Rotate.jpg

Scale

Code: Select all

[MeterShape1]
Meter=Shape
Shape=Rectangle 0,0,100,100,50
Shape2=Rectangle 40,40,100,100,50 | Scale 1.5,1.5

Scale.jpg

Skew

Code: Select all

[MeterShape1]
Meter=Shape
Shape=Rectangle 0,0,100,100
Shape2=Rectangle 140,0,100,100 | Skew -15,0
Shape3=Rectangle 255,0,100,100 | Skew 15,0

Skew.jpg

Combine

Code: Select all

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

[MeterShape1]
Meter=Shape
X=6
Y=6
W=152
H=100
Shape=Rectangle 0,0,100,100,100 | Fill Color 191,237,239,255 | StrokeWidth 2
Shape2=Rectangle 50,0,100,100,100 | Fill Color 191,237,239,255 | StrokeWidth 2

[MeterShape2]
Meter=Shape
X=10R
Y=6
W=152
H=100
Shape=Rectangle 0,0,100,100,100 | Fill Color 191,237,239,255 | StrokeWidth 2
Shape2=Rectangle 50,0,100,100,100 | Fill Color 191,237,239,255 | StrokeWidth 2
Shape3=Combine Shape | Union Shape2

[MeterShape3]
Meter=Shape
X=10R
Y=6
W=152
H=100
Shape=Rectangle 0,0,100,100,100 | Fill Color 191,237,239,255 | StrokeWidth 2
Shape2=Rectangle 50,0,100,100,100
Shape3=Combine Shape | Intersect Shape2

[MeterShape4]
Meter=Shape
X=6
Y=45R
W=152
H=100
Shape=Rectangle 0,0,100,100,100 | Fill Color 191,237,239,255 | StrokeWidth 2
Shape2=Rectangle 50,0,100,100,100
Shape3=Combine Shape | XOR Shape2

[MeterShape5]
Meter=Shape
X=10R
Y=0r
W=152
H=100
Shape=Rectangle 0,0,100,100,100 | Fill Color 191,237,239,255 | StrokeWidth 2
Shape2=Rectangle 50,0,100,100,100
Shape3=Combine Shape | Exclude Shape2

[MeterShape6]
Meter=Shape
X=10R
Y=0r
W=152
H=100
Shape=Rectangle 0,0,100,100,100 | Fill Color 191,237,239,255 | StrokeWidth 2
Shape2=Rectangle 50,0,100,100,100
Shape3=Combine Shape | Exclude Shape2

[MeterSeparate]
Meter=String
X=40
Y=115
FontSize=14
FontColor=47,47,47,255
AntiAlias=1
Text=Separate

[MeterUnion]
Meter=String
X=217
Y=115
FontSize=14
FontColor=47,47,47,255
AntiAlias=1
Text=Union

[MeterIntersect]
Meter=String
X=364
Y=115
FontSize=14
FontColor=47,47,47,255
AntiAlias=1
Text=Intersect

[MeterXOR]
Meter=String
X=60
Y=260
FontSize=14
FontColor=47,47,47,255
AntiAlias=1
Text=XOR

[MeterExclude2]
Meter=String
X=200
Y=260
FontSize=14
FontColor=47,47,47,255
AntiAlias=1
Text=Exclude 2

[MeterExclude1]
Meter=String
X=360
Y=260
FontSize=14
FontColor=47,47,47,255
AntiAlias=1
Text=Exclude 1

Combine.jpg

We are looking forward to seeing what the Rainmeter community comes up with using this new meter. It has a lot of power for creativity, and we have no doubt we will be dazzled soon.

Code: Select all

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

[Variables]
DarkBlue=65,138,217,255
LightBlue=220,234,250,255
DarkGreen=70,217,65,255
LightGreen=221,250,220,255
DarkGold=217,197,65,255
LightGold=250,248,220
DarkRed=217,65,65,255
LightRed=250,220,220,255

[MeasureLoop]
Measure=Loop
StartValue=0
EndValue=52
IfCondition=MeasureLoop = 52
IfTrueAction=[!SetOption MeasureLoop InvertMeasure "1"][!UpdateMeasure MeasureLoop]
IfCondition2=MeasureLoop = 0
IfTrueAction2=[!SetOption MeasureLoop InvertMeasure "0"][!UpdateMeasure MeasureLoop]

[MeterCylinder1]
Meter=Shape
X=10
Y=10
Shape=Rectangle 0,0,50,200,25,10 | StrokeWidth 2 | Fill LinearGradient MyGradient1
Shape2=Rectangle 0,0,50,20,25,10 | StrokeWidth 2 | Fill LinearGradient MyGradient2
MyGradient1=360 | #DarkBlue# ; 0.0 | #LightBlue# ; 1.0
MyGradient2=180 | #DarkBlue# ; 0.0 | #LightBlue# ; 1.0

[MeterCylinder2]
Meter=Shape
X=20R
Y=10
Shape=Rectangle 0,(50-[MeasureLoop]),50,(150+[MeasureLoop]),25,10 | StrokeWidth 2 | Fill LinearGradient MyGradient1
Shape2=Rectangle 0,(50-[MeasureLoop]),50,20,25,10 | StrokeWidth 2 | Fill LinearGradient MyGradient2
MyGradient1=360 | #DarkGreen# ; 0.0 | #LightGreen# ; 1.0
MyGradient2=180 | #DarkGreen# ; 0.0 | #LightGreen# ; 1.0
DynamicVariables=1

[MeterCylinder3]
Meter=Shape
X=20R
Y=10
Shape=Rectangle 0,(100-[MeasureLoop]),50,(100+[MeasureLoop]),25,10 | StrokeWidth 2 | Fill LinearGradient MyGradient1
Shape2=Rectangle 0,(100-[MeasureLoop]),50,20,25,10 | StrokeWidth 2 | Fill LinearGradient MyGradient2
MyGradient1=360 | #DarkGold# ; 0.0 | #LightGold# ; 1.0
MyGradient2=180 | #DarkGold# ; 0.0 | #LightGold# ; 1.0
DynamicVariables=1

[MeterCylinder4]
Meter=Shape
X=20R
Y=10
Shape=Rectangle 0,(150-[MeasureLoop]),50,(50+[MeasureLoop]),25,10 | StrokeWidth 2 | Fill LinearGradient MyGradient1
Shape2=Rectangle 0,(150-[MeasureLoop]),50,20,25,10 | StrokeWidth 2 | Fill LinearGradient MyGradient2
MyGradient1=360 | #DarkRed# ; 0.0 | #LightRed# ; 1.0
MyGradient2=180 | #DarkRed# ; 0.0 | #LightRed# ; 1.0
DynamicVariables=1

Cylinders.gif

Code: Select all

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

[Variables]
Green=75,201,83,255
Yellow=240,233,110,255

[MeasureLoop]
Measure=Loop
StartValue=0
EndValue=359

[MeterShape]
Meter=Shape
X=2
Y=2
Shape=Rectangle 60,60,80,80,10
Shape2=Rectangle 0,85,200,30,10 | Rotate -[MeasureLoop]
Shape3=Rectangle 85,0,30,200,10 | Rotate [MeasureLoop]
Shape4=Combine Shape | Union Shape2 | Union Shape3
Shape5=Rectangle 75,75,50,50,25 | StrokeWidth 4 | Fill LinearGradient MyGradient
MyGradient=180 | #Green# ; 0.0 | #Yellow# ; 0.5 | #Green# ; 1.0
Shape6=Combine Shape5 | XOR Shape4
DynamicVariables=1

RotateAndCutout.gif

[eclectic-tech]

AMAZING!!!!

Can't wait to start playing with this!

Thanks to theAzack9, and Brian (and Jeff) for all the work to make this happen!

[raiguard]

This is incredible! I've been following the GitHub repo so I knew the shape meter was in the works, but I never imagined it to be this capable! Great job!

[FreeRaider]

This is a real revolution. Thank you so much developers.





P.S.: And now a meter / measure to do something like this one,

helloworld.png

so you (honorable developers) allow us (humble users) to enter into a new era.

[jsmorley]

Drat, some last minute change we did seems to have broken the "angle" on LinearGradient. We are working on it, and will get another "oops" beta out as soon as possible.

[killall-q]

The more generic new shape types are, the more widely applicable they will be, at — maybe — the expense of ease of use, depending on the implementation.

I can think of nothing more generic than paths. Linear (a set of coordinates connected by lines), Bézier, continuous Bézier, B-spline. A point of contention may be how to handle open paths where the start does not meet the end.

A lot of arbitrary shapes can already be formed using combine operations on basic shapes, but paths will make things like

[ Direct Link ]

much simpler to implement.

[theAzack9]

The more generic new shape types are, the more widely applicable they will be, at — maybe — the expense of ease of use, depending on the implementation.

I can think of nothing more generic than paths. Linear (a set of coordinates connected by lines), Bézier, continuous Bézier, B-spline. A point of contention may be how to handle open paths where the start does not meet the end.

Remember that this is still a work in progress, and the rest of the planned shapes is yet to be added.

[killall-q]

Remember that this is still a work in progress, and the rest of the planned shapes is yet to be added.

I know, just making suggestions for the future. The sky's the limit!

I know my suggestions can be rather heavyweight.

[fonpaolo]

...I have no words.

[jsmorley]

Important

We have released a r2478 version of the beta, which corrects a few (one fairly major) bugs in the r2674 version released this morning. Be sure to get this latest version at https://www.rainmeter.net.