Thread for help with the Shape meter

[Yincognito]

I got a better solution, will post it in a couple of moments.

And here it is - applying hard-stop / drop-dead gradients, no second shape required:

Code: Select all

[Rainmeter]
BackgroundMode=2
SolidColor=250,250,250,180
SkinWidth=240
SkinHeight=80

[MeterCharging]
Meter=Shape
X=100
Y=5
Shape=Path MyPath | Extend CableModifiers
MyPath=100,60 | ArcTo 120,50,20,10,0,1,0 | ArcTo 0,20,120,30,0,1,0 | ClosePath 0
CableModifiers=StrokeWidth 4 | Stroke LinearGradient ExcludeGradient
ExcludeGradient=180 | 0,0,0,150 ; 0.0 | 0,0,0,150 ; 0.4 | 0,0,0,0 ; 0.4 | 0,0,0,0 ; 0.9 | 0,0,0,150 ; 0.9 | 0,0,0,150 ; 1.0

Solution 02.jpg

This doesn't have any of the drawbacks of using a container or having to draw another shape - it only requires playing a bit with those percentages where colors stop or begin until you get the desired outcome, that's all. The only limitation is the fact that there are just a few gradient types to choose from.

[death.crafter]

And here it is - applying hard-stop / drop-dead gradients, no second shape required:

Code: Select all

[Rainmeter]
BackgroundMode=2
SolidColor=250,250,250,180
SkinWidth=240
SkinHeight=80

[MeterCharging]
Meter=Shape
X=100
Y=5
Shape=Path MyPath | Extend CableModifiers
MyPath=100,60 | ArcTo 120,50,20,10,0,1,0 | ArcTo 0,20,120,30,0,1,0 | ClosePath 0
CableModifiers=StrokeWidth 4 | Stroke LinearGradient ExcludeGradient
ExcludeGradient=180 | 0,0,0,150 ; 0.0 | 0,0,0,150 ; 0.4 | 0,0,0,0 ; 0.4 | 0,0,0,0 ; 0.9 | 0,0,0,150 ; 0.9 | 0,0,0,150 ; 1.0

Solution 02.jpg
This doesn't have any of the drawbacks of using a container or having to draw another shape - it only requires playing a bit with those percentages where colors stop or begin until you get the desired outcome, that's all. The only limitation is the fact that there are just a few gradient types to choose from.

Mm... It is a solution for the current case but it wouldn't work if the lower point of the arc were to be extended to a little left. Well in order to get something you have to lose something

[Yincognito]

Mm... It is a solution for the current case but it wouldn't work if the lower point of the arc were to be extended to a little left. Well in order to get something you have to lose something

Well, the initial excluded rectangle (or even the container) in their current form wouldn't have worked for that case either, now, would it?

But ... I have to disagree that it wouldn't work in leaving the lower arc alone. I suppose you mean that it would happen something like (I extended the transparent gradient instead of extending the lower point of the arc to the left, as it was easier):

Code: Select all

[Rainmeter]
BackgroundMode=2
SolidColor=250,250,250,180
SkinWidth=240
SkinHeight=80

[MeterCharging]
Meter=Shape
X=100
Y=5
Shape=Path MyPath | Extend CableModifiers
MyPath=100,60 | ArcTo 120,50,20,10,0,1,0 | ArcTo 0,20,120,30,0,1,0 | ClosePath 0
CableModifiers=StrokeWidth 4 | Stroke LinearGradient ExcludeGradient
ExcludeGradient=180 | 0,0,0,150 ; 0.0 | 0,0,0,150 ; 0.4 | 0,0,0,0 ; 0.4 | 0,0,0,0 ; 0.95 | 0,0,0,150 ; 0.95 | 0,0,0,150 ; 1.0

Little 01.jpg

So, a small portion of the lower arc (the downside part) is cut off as well, right? However, if I separate the shapes in the meter, this so called drawback (which, as mentioned above, would have happened in the case of the initial excluded rectangle attempt as well, so no chage there) is cancelled:

Code: Select all

[Rainmeter]
BackgroundMode=2
SolidColor=250,250,250,180
SkinWidth=240
SkinHeight=80

[MeterCharging]
Meter=Shape
X=100
Y=5
Shape=Path MyPath | StrokeWidth 4 | Stroke Color 0,0,0,150
MyPath=100,60 | ArcTo 120,50,20,10,0,1,0
Shape2=Path MyPath2 | Extend CableModifiers
MyPath2=120,50 | ArcTo 0,20,120,30,0,1,0 | ClosePath 0
CableModifiers=StrokeWidth 4 | Stroke LinearGradient ExcludeGradient
ExcludeGradient=180 | 0,0,0,150 ; 0.0 | 0,0,0,150 ; 0.5 | 0,0,0,0 ; 0.5 | 0,0,0,0 ; 0.97 | 0,0,0,150 ; 0.97 | 0,0,0,150 ; 1.0

Little 02.jpg

[Yincognito]

Just for fun, to combine again progress bars with gradients, Windows style animated progress bars:

Code: Select all

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

---Measures---

[Progress]
Measure=Loop
StartValue=0
EndValue=100
Increment=1

[GradientLight]
Measure=Loop
StartValue=0
EndValue=100
Increment=5

---Meters---

[ProgressBar]
Meter=Shape
Shape=Rectangle 0,0,200,50 | Fill Color 0,0,0,128 | StrokeWidth 2 | StrokeColor 255,255,255,255
Shape2=Rectangle 0,0,(200*[Progress:%]/100),50 | Fill LinearGradient ProgressGradient | StrokeWidth 2 | StrokeColor 255,0,0,255
ProgressGradient=180 | 0,144,0,255 ; 0.0 | 0,255,0,255 ; ([GradientLight:%]/100) | 0,144,0,255 ; 1.0
DynamicVariables=1

ezgif.com-gif-maker.gif

[death.crafter]

So, a small portion of the lower arc (the downside part) is cut off as well, right? However, if I separate the shapes in the meter, this so called drawback (which, as mentioned above, would have happened in the case of the initial excluded rectangle attempt as well, so no chage there) is cancelled:

Code: Select all

[Rainmeter]
BackgroundMode=2
SolidColor=250,250,250,180
SkinWidth=240
SkinHeight=80

[MeterCharging]
Meter=Shape
X=100
Y=5
Shape=Path MyPath | StrokeWidth 4 | Stroke Color 0,0,0,150
MyPath=100,60 | ArcTo 120,50,20,10,0,1,0
Shape2=Path MyPath2 | Extend CableModifiers
MyPath2=120,50 | ArcTo 0,20,120,30,0,1,0 | ClosePath 0
CableModifiers=StrokeWidth 4 | Stroke LinearGradient ExcludeGradient
ExcludeGradient=180 | 0,0,0,150 ; 0.0 | 0,0,0,150 ; 0.5 | 0,0,0,0 ; 0.5 | 0,0,0,0 ; 0.97 | 0,0,0,150 ; 0.97 | 0,0,0,150 ; 1.0

Little 02.jpg

Umm if you are going by the last solution you are better of using an arc and a curve I guess... Bet then again comes the problem of non-math guys. So your solution will come in handy no doubt.

[death.crafter]

Just for fun, to combine again progress bars with gradients, Windows style animated progress bars:

Code: Select all

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

---Measures---

[Progress]
Measure=Loop
StartValue=0
EndValue=100
Increment=1

[GradientLight]
Measure=Loop
StartValue=0
EndValue=100
Increment=5

---Meters---

[ProgressBar]
Meter=Shape
Shape=Rectangle 0,0,200,50 | Fill Color 0,0,0,128 | StrokeWidth 2 | StrokeColor 255,255,255,255
Shape2=Rectangle 0,0,(200*[Progress:%]/100),50 | Fill LinearGradient ProgressGradient | StrokeWidth 2 | StrokeColor 255,0,0,255
ProgressGradient=180 | 0,144,0,255 ; 0.0 | 0,255,0,255 ; ([GradientLight:%]/100) | 0,144,0,255 ; 1.0
DynamicVariables=1

ezgif.com-gif-maker.gif

Wow... Never thought of that... But now that I have seen it my brain is already formulating ideas of how to use this in a skin(only because it looks good LoL). Thanks for the trick

[Yincognito]

Umm if you are going by the last solution you are better of using an arc and a curve I guess...

Maybe. I just worked with what I already got from the original code.

Wow... Never thought of that... But now that I have seen it my brain is already formulating ideas of how to use this in a skin(only because it looks good LoL). Thanks for the trick

Haha, no problem - never thought of that earlier either, but it's an interesting application of what has been discussed and proposed up until now (i.e. the CodeCode problem). Unfortunately, for a perspective implementation of this, a bit more math is required, as it requires that you know the angle at which to rotate the gradient in each update, from 0% to 100%. Not a terribly complicated problem thanks to Pythagoras, of course, but at least the classic bar implementation is simple enough for everyone to understand.

[death.crafter]

Just for fun, to combine again progress bars with gradients, Windows style animated progress bars:

A little enhancement:

Code: Select all

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

---Measures---

[Progress]
Measure=Loop
StartValue=0
EndValue=300
Increment=1

[GradientLight]
Measure=Loop
StartValue=0
EndValue=1000
Increment=14

---Meters---

[ProgressBar]
Meter=Shape
X=1
Y=1
Shape=Rectangle 0,0,(400*[Progress:%]/100),20 | Fill LinearGradient ProgressGradient | StrokeWidth 0 | StrokeColor 255,0,0,255
Shape2=Rectangle 0,0,400,20 | Fill Color 0,0,0,0 | StrokeWidth 2 | StrokeColor 255,255,255,255
ProgressGradient=180 | 0,160,0,255 ; -0.6 | 0,160,0,255 ; (-1+(2.2*[GradientLight:%]/100)/([Progress:%]/100)-(0.3/2)/([Progress:%]/100)) | 0,255,0,255 ; (-1+(2.2*[GradientLight:%]/100)/([Progress:%]/100)) | 0,160,0,255 ; (-1+(2.2*[GradientLight:%]/100)/([Progress:%]/100)+(0.3/2)/([Progress:%]/100)) | 0,160,0,255 ; 1.6
DynamicVariables=1

ezgif.com-gif-maker.gif

[Yincognito]

A little enhancement [...]

Very good! I knew I still had to play with the approach to make it look even better, but I was focused more on presenting the case. But as you said, nobody is stopping users to further develop these approaches and come up with really great looking visuals.

[balala]

And here it is - applying hard-stop / drop-dead gradients, no second shape required:

Your and death.crafter's previous idea about the container was good enough, but this is indeed even better. So now I'm saying this is what am I gonna use. So thank you both again, immediately I'm gonna start working in implementing this.