It is currently July 9th, 2020, 10:59 pm

Create a Bar meter with Shapes

Tips and Tricks from the Rainmeter Community
User avatar
jsmorley
Developer
Posts: 21008
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Create a Bar meter with Shapes

Post by jsmorley »

You might like to create a functional "Bar" meter using the Shape meter, rather than having to create and include image files to display the bar with a gradient effect.

It's not at all hard to do...

Code: Select all

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

[Variables]
BarW=300
BarH=10
BackColor=120,120,120,255
LowColor=118,211,0,255
MidColor=235,227,21,255
HighColor=240,19,19,255

[MeasureValue]
Measure=Loop
StartValue=0
EndValue=100
Increment=5
MinValue=0
MaxValue=100

[MeterBarShape]
Meter=Shape
Shape=Rectangle 0,0,#BarW#,#BarH# |  Fill Color #BackColor# | StrokeWidth 0
Shape2=Rectangle 0,0,([MeasureValue:%]*#BarW#/100),#BarH# | Fill LinearGradient BarGradient | StrokeWidth 0
BarGradient=180 | #LowColor# ; 0.0 | #LowColor# ; (0.5 + (100-[MeasureValue:%])/100) | #MidColor# ; (0.85 + (100-[MeasureValue:%])/100) | #HighColor# ; (1.0 + (100-[MeasureValue:%])/100)
DynamicVariables=1

[MeterValue]
Meter=String
Y=5R
FontSize=11
FontWeight=400
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
DynamicVariables=1
Text=Value: [MeasureValue:] Percent: [MeasureValue:%,0]%


GIF.gif


So the key to this is the Shape meter:

Code: Select all

Shape2=Rectangle 0,0,([MeasureValue:%]*#BarW#/100),#BarH# | Fill LinearGradient BarGradient | StrokeWidth 0
BarGradient=180 | #LowColor# ; 0.0 | #LowColor# ; (0.5 + (100-[MeasureValue:%])/100) | #MidColor# ; (0.85 + (100-[MeasureValue:%])/100) | #HighColor# ; (1.0 + (100-[MeasureValue:%])/100)
What we do is first have the shape meter resize itself based on the percentage the value is of the MinValue/MaxValue range of the measure in question.
Rectangle 0,0,([MeasureValue:%]*#BarW#/100),#BarH#.
That way it "grows" and "shrinks" according to the value.

The "gradient" however, must always be based on the full potential width of the bar. So the gradient must always assume the value is at 100%. You do this by adding the "unused" portion of the value percentage to the gradient, so the total for the gradient is always 100%.

We want the color to stay at our #LowColor# (in the "ok" range) for the first 50% of the overall width of the bar.
#LowColor# ; 0.0 | #LowColor# ; (0.5 + (100-[MeasureValue:%])/100).
So this will stay solid "green" for the first 50%. We don't want any transition to creep into this portion.

Then we want to transition to our #MidColor# (in the "warning" range) from 50% to 85% of the overall width of the bar.
#MidColor# ; (0.85 + (100-[MeasureValue:%])/100).
This will start changing from "green" to "yellow" at 50%, and be fully "yellow" at 85%.

Then we want to transition to our #HighColor# ("danger") from 85% to 100% of the overall width of the bar.
#HighColor# ; (1.0 + (100-[MeasureValue:%])/100)
This will start changing from "yellow" to "red" at 85%, and be fully "red" at 100%.

This can be based on any measure value, with any explicit or implicit MinValue/MaxValue range, and you can easily adjust where the "transitions" take place with the 0.0, 0.5, 0.85, 1.0 values in the gradient formulas.

Code: Select all

[MeasureValue]
Measure=Loop
StartValue=3058
EndValue=9272
Increment=300

GIF1.gif

https://docs.rainmeter.net/manual/meters/shape/#Rectangle
https://docs.rainmeter.net/manual/meters/shape/#Fill
https://docs.rainmeter.net/manual/meters/shape/#DefiningGradients
https://docs.rainmeter.net/manual/variables/section-variables/#Percentual
https://docs.rainmeter.net/manual/variables/section-variables/#Decimals


Feel free to ask any questions...
You do not have the required permissions to view the files attached to this post.
User avatar
Beuwolf
Posts: 28
Joined: February 15th, 2020, 10:08 pm

Re: Create a Bar meter with Shapes

Post by Beuwolf »

Hi jsmorley,

First of, thank you for posting this, it helped me making my Hard Drives bar looking better ! :thumbup:

Now to my question. I have tried to figure out how to do this radiant bar to be applied to a circle bar. Not even sure if it is possible though, I have only recently start playing around with Rainmeter and it's functions.

Here is a picture of what I'm trying to figure out how to work it into. The Circle's are from the Rainmeter's own Tutorial's.

Image

Is it possible with this method, or should one be using another one to make it work ??

Thank you and I be appreciating any and all help with this little dilemma of mine ! :cheers:

PS: Also added the source code that I got working so far.

Code: Select all

[Rainmeter]
Update=1000

[Variables]
fontName=Stencil
TextSize=12
colorTitleMain=192,0,54,255
colorTextInfo=65,166,212,255
AlmostBlack=40,40,40,255

[MeasureCPU]
Measure=CPU
IfAboveValue=49
IfAboveAction=[!SetOption MeterCPUPercent FontColor #colorBarTop#][!UpdateMeter *][!Redraw]
IfBelowValue=50
IfBelowAction=[!SetOption MeterCPUPercent FontColor #colorTextInfo#][!UpdateMeter *][!Redraw]


[styleRightText]
StringAlign=Right
StringCase=None
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorTextInfo#
FontFace=Segoe UI
FontSize=14
AntiAlias=1
ClipString=1

[styleLeftText]
StringAlign=Left
; Meters using styleLeftText will be left-aligned.
StringCase=None
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorTextInfo#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1


[MeterBackground]
Meter=Image
X=0
Y=0
W=185
H=90
SolidColor=#AlmostBlack#

[MeterCPUCircleBack]
Meter=Roundline
X=20
Y=20
W=50
H=50
StartAngle=(Rad(270))
RotationAngle=(Rad(360))
LineStart=25
LineLength=30
Solid=1
LineColor=#colorTitleMain#
AntiAlias=1

[MeterCPUCircle]
Meter=Roundline
MeasureName=MeasureCPU
X=20
Y=20
W=50
H=50
StartAngle=(Rad(270))
RotationAngle=(Rad(360))
LineStart=25
LineLength=30
Solid=1
LineColor=#colorTextInfo#
AntiAlias=1

[MeterCPUPercent]
Meter=String
MeasureName=MeasureCPU
MeterStyle=styleRightText
X=45
Y=43
StringAlign=CenterCenter
Text=%1%
; %1 stands for the value of MeasureName (measureCPU in this case).

[meterLabelCPU]
Meter=String
MeterStyle=styleLeftText
X=80
Y=10
Text=CPU Usage
User avatar
jsmorley
Developer
Posts: 21008
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Create a Bar meter with Shapes

Post by jsmorley »

No, I don't know of any reasonable way to have a gradient, which can only be "linear" or "radial", to follow the path created by a shape that is curving in a circle like that.
User avatar
Beuwolf
Posts: 28
Joined: February 15th, 2020, 10:08 pm

Re: Create a Bar meter with Shapes

Post by Beuwolf »

jsmorley wrote:
February 15th, 2020, 11:59 pm
No, I don't know of any reasonable way to have a gradient, which can only be "linear" or "radial", to follow the path created by a shape that is curving in a circle like that.
Ahh right. Thanks for your quick replay, much appreciated ! :thumbup:

I'll just have to do it some other way then. :D