It is currently February 16th, 2019, 2:13 am

Circular Line with Gradient

Tips and Tricks from the Rainmeter Community
User avatar
fonpaolo
Moderator
Posts: 1351
Joined: April 11th, 2013, 8:08 pm
Location: Italy

Re: Circular Line with Gradient

fonpaolo » April 24th, 2018, 8:10 pm

I'm not surprised at all,that's why I added that emoticon.
Unfortunately it's how things works and I've to study a lot of workarounds to try to mitigate all the CPU load...
Resizing Images adds a little more CPU usage, even without TransformationMatrix, I'm planning (or better hoping) to use Shapes, thus, my interest in it.
User avatar
balala
Rainmeter Sage
Posts: 7628
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Circular Line with Gradient

balala » April 24th, 2018, 8:16 pm

fonpaolo wrote:Resizing Images adds a little more CPU usage, even without TransformationMatrix, I'm planning (or better hoping) to use Shapes, thus, my interest in it.
I think resizing images is one of the most expensive things in Rainmeter.
But same way as I like using the TransformationMatrix, the Shape meter also seems a very versatile new addition.

I think we hijacked this thread...
User avatar
fonpaolo
Moderator
Posts: 1351
Joined: April 11th, 2013, 8:08 pm
Location: Italy

Re: Circular Line with Gradient

fonpaolo » April 24th, 2018, 8:37 pm

balala wrote:...
I think we hijacked this thread...
Yes, sorry... :17oops
Sooner or later I must start a thread... some threads... to get answers to all my questions, but I think it'll be a flood. :17denial
User avatar
ChicknwithNoName
Posts: 18
Joined: February 17th, 2018, 11:08 pm

Re: Circular Line with Gradient

ChicknwithNoName » April 25th, 2018, 1:57 am

eclectic-tech wrote:Clever work 'Chickn...'!
Thanks. :D
balala wrote:And an addition to ChicknwithNoName's code:
That's a great addition! Using TransformationMatrix is something I just don't understand how to use.
kyriakos876 wrote:Well, here's another way:
...
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.
I originally started trying to use Arcs for the quarter circles, but I couldn't quite figure it out. I didn't think to try using just 2 half circles. Thanks for the alternative. :thumbup:
balala wrote:Probably using the Rotation parameter on the Shape meters is a much simpler solution than any other, but what if the shape has more Shape options, as it had on ChicknwithNoName's initial code? For me it's not clear yet, how it can be used in such cases and I couldn't get it yet to work.
Using my initial code and implementing your ActionTimer routine to Rotate vs. TransformationMatrix, here is how I got it working. I've also added some scaling, if someone wanted to adjust it's size.

Code: Select all

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

[Metadata]
Name=Circle Line Gradient
Author=ChicknwitNoName
Information=Fake it 'til they make it.
Version=1.0
License=Creative Commons Attribution-NonCommercial-ShareAlike 4.0

[Variables]
Size=1.5
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 | Extend ExtraNW
Shape2=Path Path2 | StrokeWidth 0 | Fill LinearGradient NE | Extend ExtraNE
Shape3=Path Path3 | StrokeWidth 0 | Fill LinearGradient SE | Extend ExtraSE
Shape4=Path Path4 | StrokeWidth 0 | Fill LinearGradient SW | Extend ExtraSW
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
ExtraNW=Rotate #Angle#,50,50 | Scale #Size#,#Size#,0,0
ExtraNE=Rotate #Angle#,0,50 | Scale #Size#,#Size#,-50,0
ExtraSE=Rotate #Angle#,0,0 | Scale #Size#,#Size#,-50,-50
ExtraSW=Rotate #Angle#,50,0 | Scale #Size#,#Size#,0,-50
DynamicVariables=1
I couldn't get the same smooth rotation using kyriakos876 half-circles meter.
User avatar
kyriakos876
Posts: 914
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: Circular Line with Gradient

kyriakos876 » April 25th, 2018, 12:23 pm

By the way, here's something that could be used as a loading animation. I come to correct myself saying it's not possible to do it with ActionTimer alone.

Code: Select all

[Rainmeter]
Update=1800
OnUpdateAction=[!CommandMeasure MeasureRotate "Execute 1"][!SetVariable R "0"][!UpdateMeasureGroup Anim][!UpdateMeterGroup Anim][!Redraw]
[Variables]
R=0

[MeterCircle]
Group=Anim
Meter=Shape
Shape=Arc 3,103,203,103,100,100,0,0,0,0 | StrokeWidth 6 | Stroke LinearGradient MyStrokeGradient | Rotate #R#,103,103 
MyStrokeGradient=0 | 255,255,255,255 ; 0.0 | 255,255,255,127 ; 1.0
Shape2=Arc 203,103,3,103,100,100,0,0,0,0 | StrokeWidth 6 | Stroke LinearGradient MyStrokeGradient2 | Rotate #R#,103,0
MyStrokeGradient2=180 | 255,255,255,127 ; 0.0 | 255,255,255,0 ; 1.0 
LeftMouseUpAction=[!CommandMeasure MeasureRotate "Execute 1"]
DynamicVariables=1

[MeasureRotate]
Group=Anim
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat Rotate, 25, 72
Rotate=[!SetVariable R "(#R#+5)][!UpdateMeasureGroup Anim][!UpdateMeterGroup Anim][!Redraw]
DynamicVariables=1
User avatar
kyriakos876
Posts: 914
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: Circular Line with Gradient

kyriakos876 » April 25th, 2018, 1:48 pm

balala wrote:Right. As I said, I couldn't figure out a way to achieve a proper rotation in a such case, using the Rotation. Eg, adding a Rotate 45 parameter to each ShapeN option of ChicknwithNoName's initial code, this is what I got (also added a SolidColor option):
Image
Same shape(s), this time not rotated:
Image

Code: Select all

[Rainmeter]
Update=1800
BackgroundMode=2
SolidColor=0,0,0,1
OnUpdateAction=[!CommandMeasure MeasureRotate "Execute 1"][!SetVariable R "0"][!UpdateMeasureGroup Anim][!UpdateMeterGroup Anim][!Redraw]
MouseScrollDownAction=[!Refresh]

[Metadata]
Name=Circle Line Gradient
Author=ChicknwitNoName
Information=Fake it 'til they make it.
Version=1.0
License=Creative Commons Attribution-NonCommercial-ShareAlike 4.0

[Variables]
R=0

[Circle]
Group=Anim
Meter=Shape
Shape =Path Path1 | StrokeWidth 0 | Fill LinearGradient NW | Rotate #R#,50,50
Shape2=Path Path2 | StrokeWidth 0 | Fill LinearGradient NE | Rotate #R#,0,50
Shape3=Path Path3 | StrokeWidth 0 | Fill LinearGradient SE | Rotate #R#,0,0
Shape4=Path Path4 | StrokeWidth 0 | Fill LinearGradient SW | Rotate #R#,50,0
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


[MeasureRotate]
Group=Anim
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat Rotate, 25, 72
Rotate=[!SetVariable R "(#R#+5)][!UpdateMeasureGroup Anim][!UpdateMeterGroup Anim][!Redraw]
DynamicVariables=1
Here's what you need to do.
User avatar
balala
Rainmeter Sage
Posts: 7628
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Circular Line with Gradient

balala » April 25th, 2018, 2:11 pm

ChicknwithNoName wrote:That's a great addition! Using TransformationMatrix is something I just don't understand how to use.
Nor TransformationMatrix isn't so complicated as it seems at a first look. The Transformation Matrix Guide is a very good tutorial on how to use this option.
ChicknwithNoName wrote:Using my initial code and implementing your ActionTimer routine to Rotate vs. TransformationMatrix, here is how I got it working.
Very good! I have to study this code a bit, but it definitely works. Congratulations.
User avatar
kyriakos876
Posts: 914
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: Circular Line with Gradient

kyriakos876 » April 25th, 2018, 2:36 pm

ChicknwithNoName wrote:

Code: Select all

.
.
.

[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 | Extend ExtraNW
Shape2=Path Path2 | StrokeWidth 0 | Fill LinearGradient NE | Extend ExtraNE
Shape3=Path Path3 | StrokeWidth 0 | Fill LinearGradient SE | Extend ExtraSE
Shape4=Path Path4 | StrokeWidth 0 | Fill LinearGradient SW | Extend ExtraSW
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
ExtraNW=Rotate #Angle#,50,50 | Scale #Size#,#Size#,0,0
ExtraNE=Rotate #Angle#,0,50 | Scale #Size#,#Size#,-50,0
ExtraSE=Rotate #Angle#,0,0 | Scale #Size#,#Size#,-50,-50
ExtraSW=Rotate #Angle#,50,0 | Scale #Size#,#Size#,0,-50
DynamicVariables=1
I couldn't get the same smooth rotation using kyriakos876 half-circles meter.
ops, I never saw that you figured it out as well so I went ahead and posted mine too anyway.. I dont know... mine ran pretty smoothly too... just play around with the time between every repetition
and the +10 you have and it'll run as smooth as you want it ^_^
User avatar
balala
Rainmeter Sage
Posts: 7628
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Circular Line with Gradient

balala » April 25th, 2018, 2:50 pm

kyriakos876 wrote:Here's what you need to do.
I admit I didn't notice your code before, but it's very good, thanks.
User avatar
ChicknwithNoName
Posts: 18
Joined: February 17th, 2018, 11:08 pm

Re: Circular Line with Gradient

ChicknwithNoName » April 25th, 2018, 5:48 pm

kyriakos876 wrote:
ops, I never saw that you figured it out as well so I went ahead and posted mine too anyway.. I dont know... mine ran pretty smoothly too... just play around with the time between every repetition
and the +10 you have and it'll run as smooth as you want it ^_^
I meant that I tried implementing balala's ActionTimer routine to your half-circle alternative, but I couldn't get the offset anchors right and so the rotation wasn't a smooth circle; it was wobbling because it was off-center.