It is currently October 19th, 2021, 2:10 pm

Thread for help with the Shape meter

Help with creating, editing & fixing problems with skins
User avatar
Yincognito
Rainmeter Sage
Posts: 4069
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Thread for help with the Shape meter

Post by Yincognito »

Yincognito wrote: ↑June 12th, 2021, 9:16 pm 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.
You do not have the required permissions to view the files attached to this post.
User avatar
death.crafter
Posts: 1045
Joined: April 24th, 2021, 8:13 pm

Re: Thread for help with the Shape meter

Post by death.crafter »

Yincognito wrote: ↑June 12th, 2021, 9:36 pm 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 πŸ˜†
from the Realm of Death
My Current Desktop
User avatar
Yincognito
Rainmeter Sage
Posts: 4069
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Thread for help with the Shape meter

Post by Yincognito »

death.crafter wrote: ↑June 12th, 2021, 9:46 pm 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? :D

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
You do not have the required permissions to view the files attached to this post.
User avatar
Yincognito
Rainmeter Sage
Posts: 4069
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Thread for help with the Shape meter

Post by 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
You do not have the required permissions to view the files attached to this post.
User avatar
death.crafter
Posts: 1045
Joined: April 24th, 2021, 8:13 pm

Re: Thread for help with the Shape meter

Post by death.crafter »

Yincognito wrote: ↑June 12th, 2021, 10:15 pm
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.
from the Realm of Death
My Current Desktop
User avatar
death.crafter
Posts: 1045
Joined: April 24th, 2021, 8:13 pm

Re: Thread for help with the Shape meter

Post by death.crafter »

Yincognito wrote: ↑June 12th, 2021, 11:39 pm 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πŸ‘
from the Realm of Death
My Current Desktop
User avatar
Yincognito
Rainmeter Sage
Posts: 4069
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Thread for help with the Shape meter

Post by Yincognito »

death.crafter wrote: ↑June 13th, 2021, 3:32 amUmm 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. :confused:
death.crafter wrote: ↑June 13th, 2021, 3:35 amWow... 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.
User avatar
death.crafter
Posts: 1045
Joined: April 24th, 2021, 8:13 pm

Re: Thread for help with the Shape meter

Post by death.crafter »

Yincognito wrote: ↑June 12th, 2021, 11:39 pm 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
You do not have the required permissions to view the files attached to this post.
from the Realm of Death
My Current Desktop
User avatar
Yincognito
Rainmeter Sage
Posts: 4069
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Thread for help with the Shape meter

Post by Yincognito »

death.crafter wrote: ↑June 13th, 2021, 11:14 amA little enhancement [...]
Very good! :thumbup: 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. ;-)
User avatar
balala
Rainmeter Sage
Posts: 13324
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Thread for help with the Shape meter

Post by balala »

Yincognito wrote: ↑June 12th, 2021, 9:36 pm 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. :great: