It is currently October 21st, 2019, 4:12 am

Tips and Tricks from the Rainmeter Community
ChicknwithNoName
Posts: 18
Joined: February 17th, 2018, 11:08 pm

As far as I'm aware, there's no option to use gradients on strokes of a shape. Most people seem to want to have a gradient on a circular line. I thought I'd share my version of some visual fakery.

It's basically 4 quarter-circle shapes with individual linear gradients.*

Code: Select all

``````[Rainmeter]
BackgroundMode=2
SolidColor=0,0,0,1

Author=ChicknwitNoName
Information=Fake it 'til they make it.
Version=1.0

[Circle]
Meter=Shape
Shape =Path Path1 | StrokeWidth 0 | Fill LinearGradient NW
Shape2=Path Path2 | StrokeWidth 0 | Fill LinearGradient NE
Shape3=Path Path3 | StrokeWidth 0 | Fill LinearGradient SE
Shape4=Path Path4 | StrokeWidth 0 | Fill LinearGradient SW
Path1=50,3 | CurveTo 3,50,24.06,3,3,24.06 | LineTo 0,50 | CurveTo 50,0,0,22.404,22.404,0 | LineTo 50,3 | ClosePath 1
Path2=50.323,0.001 | CurveTo 100,50,77.77,0.175,100,22.512 | LineTo 97,50 | CurveTo 50,3,97,24.06,75.94,3 | LineTo 50,0 |     LineTo 50.323,0.001 | ClosePath 1
Path3=100,50 | CurveTo 50,100,100,77.596,77.596,100 | LineTo 50,97 | CurveTo 97,50,75.94,97,97,75.94 | LineTo 100,50 | ClosePath 1
Path4=3,50 | CurveTo 50,97,3,75.94,24.06,97 | LineTo 50,100 | CurveTo 0,50,22.404,100,0,77.596 | LineTo 3,50 | ClosePath 1
NW=90 | 255,255,255,200 ; 0.0 | 255,255,255,150 ; 1.0
NE=-90 | 255,255,255,150 ; 0.0 | 255,255,255,100 ; 1.0
SE=0 | 255,255,255,100 ; 0.0 | 255,255,255,50 ; 1.0
SW=0 | 255,255,255,50 ; 0.0 | 255,255,255,0 ; 1.0``````
*Note: I created an SVG for the shapes then converted it using VectorConverter 0.1.3.

If you have an alternative method, please share it.
You do not have the required permissions to view the files attached to this post.
eclectic-tech
Rainmeter Sage
Posts: 3575
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

### Re: Circular Line with Gradient

"Fake it 'til they make it"

Clever work 'Chickn...'!

I think this is the only way, for now, to apply a continuous gradient to a shape that curls back beyond 180 degrees, since a single gradient is applied across the entire shape. Multiple shapes and gradients... sweet!
balala
Rainmeter Sage
Posts: 8871
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

### Re: Circular Line with Gradient

And an addition to ChicknwithNoName's code:

Code: Select all

``````[Rainmeter]
Update=100
BackgroundMode=2
SolidColor=0,0,0,1
SkinWidth=100
SkinHeight=100

Author=ChicknwitNoName
Information=Fake it 'til they make it.
Version=1.0

[MeasureAngle]
Measure=Calc
Formula=(( MeasureAngle + 10 ) % 360 )

[Circle]
Meter=Shape
Shape =Path Path1 | StrokeWidth 0 | Fill LinearGradient NW
Shape2=Path Path2 | StrokeWidth 0 | Fill LinearGradient NE
Shape3=Path Path3 | StrokeWidth 0 | Fill LinearGradient SE
Shape4=Path Path4 | StrokeWidth 0 | Fill LinearGradient SW
Path1=50,3 | CurveTo 3,50,24.06,3,3,24.06 | LineTo 0,50 | CurveTo 50,0,0,22.404,22.404,0 | LineTo 50,3 | ClosePath 1
Path2=50.323,0.001 | CurveTo 100,50,77.77,0.175,100,22.512 | LineTo 97,50 | CurveTo 50,3,97,24.06,75.94,3 | LineTo 50,0 | LineTo 50.323,0.001 | ClosePath 1
Path3=100,50 | CurveTo 50,100,100,77.596,77.596,100 | LineTo 50,97 | CurveTo 97,50,75.94,97,97,75.94 | LineTo 100,50 | ClosePath 1
Path4=3,50 | CurveTo 50,97,3,75.94,24.06,97 | LineTo 50,100 | CurveTo 0,50,22.404,100,0,77.596 | LineTo 3,50 | ClosePath 1
NW=90 | 255,255,255,200 ; 0.0 | 255,255,255,150 ; 1.0
NE=-90 | 255,255,255,150 ; 0.0 | 255,255,255,100 ; 1.0
SE=0 | 255,255,255,100 ; 0.0 | 255,255,255,50 ; 1.0
SW=0 | 255,255,255,50 ; 0.0 | 255,255,255,0 ; 1.0
DynamicVariables=1``````
Yes, I know there are other ways to add the rotation as well (eg using the COUNTER function), but this was just a quick attempt. I would have been created the original code with Update=-1 and in this case the ActionTimer plugin would have been the only possibility.
kyriakos876
Posts: 915
Joined: January 30th, 2017, 2:01 am
Location: Greece

### Re: Circular Line with Gradient

Well, here's another way:

Code: Select all

``````[MeterCircle]
Meter=Shape
MyStrokeGradient=180 | 255,0,0 ; 0.0 | 255,0,0,127 ; 1.0
MyStrokeGradient2=0 | 255,0,0,127 ; 0.0 | 255,0,0,0 ; 1.0
``````
just 2 arcs, first stops at "127" of opacity which is almost half of 255 and the second starts from where the other ended but in 180 degrees apart.
kyriakos876
Posts: 915
Joined: January 30th, 2017, 2:01 am
Location: Greece

### Re: Circular Line with Gradient

balala wrote: Yes, I know there are other ways to add the rotation as well (eg using the COUNTER function), but this was just a quick attempt. I would have been created the original code with Update=-1 and in this case the ActionTimer plugin would have been the only possibility.
you can't rotate gradient with ActionTimer plugin on a circular way and get this effect. I tried many things and I'm pretty sure it can't be done with that plugin.
eclectic-tech
Rainmeter Sage
Posts: 3575
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

### Re: Circular Line with Gradient

kyriakos876 wrote:Well, here's another way:

Code: Select all

``````[MeterCircle]
Meter=Shape
MyStrokeGradient=180 | 255,0,0 ; 0.0 | 255,0,0,127 ; 1.0
MyStrokeGradient2=0 | 255,0,0,127 ; 0.0 | 255,0,0,0 ; 1.0
``````
just 2 arcs, first stops at "127" of opacity which is almost half of 255 and the second starts from where the other ended but in 180 degrees apart.
Also a working alternative

I think the point is that you will need to create separate shapes with separate gradients defined for each, that continue the desired overall gradient effect; you can't currently do it with 1 ellipse/curve/arc shape that revolves more than 180 degrees and 1 gradient definition.

You were able to do it with just 2 shapes and 2 gradients.
kyriakos876
Posts: 915
Joined: January 30th, 2017, 2:01 am
Location: Greece

### Re: Circular Line with Gradient

eclectic-tech wrote:Also a working alternative

I think the point is that you will need to create separate shapes with separate gradients defined for each, that continue the desired overall gradient effect; you can't currently do it with 1 ellipse/curve/arc shape that revolves more than 180 degrees and 1 gradient definition.

You were able to do it with just 2 shapes and 2 gradients.
I was playing with this one sometime ago trying to create a loading animation (like the one balala created above with TransformationMatrix) and it is actually possible with 1 shape and 1 gradient too, but the code for that is stupid big and unnecessary. (At least the code I came up with... there might be something even simpler but for the time being I stick with my 2 half circles )
balala
Rainmeter Sage
Posts: 8871
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

### Re: Circular Line with Gradient

kyriakos876 wrote:you can't rotate gradient with ActionTimer plugin on a circular way and get this effect. I tried many things and I'm pretty sure it can't be done with that plugin.
What I said was that instead of a low Update value, you can set the Update=-1 (or alternatively the default Update=1000) and rotate the meter same way as I did above using the TransformationMatrix, but set the value of the angle (through the [MeasureAngle] measure) using an ActionTimer plugin measure. I assure you it works.
balala
Rainmeter Sage
Posts: 8871
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

### Re: Circular Line with Gradient

kyriakos876 wrote:you can't rotate gradient with ActionTimer plugin on a circular way and get this effect. I tried many things and I'm pretty sure it can't be done with that plugin.
Here are two solutions.
• The first rotates the meter just once and for each new rotation you have to click:

Code: Select all

``````[Rainmeter]
Update=-1
BackgroundMode=2
SolidColor=0,0,0,1
LeftMouseUpAction=[!CommandMeasure "MeasureAngle" "Execute 1"]

Author=ChicknwitNoName
Information=Fake it 'til they make it.
Version=1.0

[Variables]
Angle=0
U=[!UpdateMeasure "MeasureAngle"][!UpdateMeter "Circle"][!Redraw]

[MeasureAngle]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat Rotate,30,36
Rotate=[!SetVariable Angle "(Clamp((#Angle#+10),0,360))"]#U#
IfCondition=(#Angle#>=360)
IfTrueAction=[!CommandMeasure "MeasureAngle" "Stop 1"][!SetVariable Angle "0"]#U#
DynamicVariables=1

[Circle]
Meter=Shape
Shape =Path Path1 | StrokeWidth 0 | Fill LinearGradient NW
Shape2=Path Path2 | StrokeWidth 0 | Fill LinearGradient NE
Shape3=Path Path3 | StrokeWidth 0 | Fill LinearGradient SE
Shape4=Path Path4 | StrokeWidth 0 | Fill LinearGradient SW
Path1=50,3 | CurveTo 3,50,24.06,3,3,24.06 | LineTo 0,50 | CurveTo 50,0,0,22.404,22.404,0 | LineTo 50,3 | ClosePath 1
Path2=50.323,0.001 | CurveTo 100,50,77.77,0.175,100,22.512 | LineTo 97,50 | CurveTo 50,3,97,24.06,75.94,3 | LineTo 50,0 | LineTo 50.323,0.001 | ClosePath 1
Path3=100,50 | CurveTo 50,100,100,77.596,77.596,100 | LineTo 50,97 | CurveTo 97,50,75.94,97,97,75.94 | LineTo 100,50 | ClosePath 1
Path4=3,50 | CurveTo 50,97,3,75.94,24.06,97 | LineTo 50,100 | CurveTo 0,50,22.404,100,0,77.596 | LineTo 3,50 | ClosePath 1
NW=90 | 255,255,255,200 ; 0.0 | 255,255,255,150 ; 1.0
NE=-90 | 255,255,255,150 ; 0.0 | 255,255,255,100 ; 1.0
SE=0 | 255,255,255,100 ; 0.0 | 255,255,255,50 ; 1.0
SW=0 | 255,255,255,50 ; 0.0 | 255,255,255,0 ; 1.0
DynamicVariables=1``````
• The second starts rotating when you click, but once started, it rotates indefinitely:

Code: Select all

``````[Rainmeter]
Update=-1
BackgroundMode=2
SolidColor=0,0,0,1
LeftMouseUpAction=[!CommandMeasure "MeasureAngle" "Execute 1"]

Author=ChicknwitNoName
Information=Fake it 'til they make it.
Version=1.0

[Variables]
Angle=0
U=[!UpdateMeasure "MeasureAngle"][!UpdateMeter "Circle"][!Redraw]

[MeasureAngle]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat Rotate,30,36
Rotate=[!SetVariable Angle "(Clamp((#Angle#+10),0,360))"]#U#
IfCondition=(#Angle#>=360)
IfTrueAction=[!SetVariable Angle "0"][!CommandMeasure "MeasureAngle" "Execute 1"]#U#
DynamicVariables=1

[Circle]
Meter=Shape
Shape =Path Path1 | StrokeWidth 0 | Fill LinearGradient NW
Shape2=Path Path2 | StrokeWidth 0 | Fill LinearGradient NE
Shape3=Path Path3 | StrokeWidth 0 | Fill LinearGradient SE
Shape4=Path Path4 | StrokeWidth 0 | Fill LinearGradient SW
Path1=50,3 | CurveTo 3,50,24.06,3,3,24.06 | LineTo 0,50 | CurveTo 50,0,0,22.404,22.404,0 | LineTo 50,3 | ClosePath 1
Path2=50.323,0.001 | CurveTo 100,50,77.77,0.175,100,22.512 | LineTo 97,50 | CurveTo 50,3,97,24.06,75.94,3 | LineTo 50,0 | LineTo 50.323,0.001 | ClosePath 1
Path3=100,50 | CurveTo 50,100,100,77.596,77.596,100 | LineTo 50,97 | CurveTo 97,50,75.94,97,97,75.94 | LineTo 100,50 | ClosePath 1
Path4=3,50 | CurveTo 50,97,3,75.94,24.06,97 | LineTo 50,100 | CurveTo 0,50,22.404,100,0,77.596 | LineTo 3,50 | ClosePath 1
NW=90 | 255,255,255,200 ; 0.0 | 255,255,255,150 ; 1.0
NE=-90 | 255,255,255,150 ; 0.0 | 255,255,255,100 ; 1.0
SE=0 | 255,255,255,100 ; 0.0 | 255,255,255,50 ; 1.0
SW=0 | 255,255,255,50 ; 0.0 | 255,255,255,0 ; 1.0