It is currently May 16th, 2022, 7:44 am

Create a Bar meter with Shapes

Tips and Tricks from the Rainmeter Community
User avatar
jsmorley
Developer
Posts: 22519
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: 22519
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
User avatar
xenium
Posts: 662
Joined: January 4th, 2018, 9:52 pm

Re: Create a Bar meter with Shapes

Post by xenium »

Hi ,

Is it possible for the "Bar" meter to work from right to left (not from left to right)?

Thanks!
User avatar
balala
Rainmeter Sage
Posts: 14199
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Create a Bar meter with Shapes

Post by balala »

xenium wrote: February 8th, 2022, 9:37 am Is it possible for the "Bar" meter to work from right to left (not from left to right)?
The classic Bar meters can be flipped adding a Flip=1 option. However this doesn't apply if you're using Shape meters, as described in this topic. So what are you using?
User avatar
xenium
Posts: 662
Joined: January 4th, 2018, 9:52 pm

Re: Create a Bar meter with Shapes

Post by xenium »

balala wrote: February 8th, 2022, 7:07 pm The classic Bar meters can be flipped adding a Flip=1 option. However this doesn't apply if you're using Shape meters, as described in this topic. So what are you using?
I want to use the shape meter.
I know about the Flip=1 option for the bar meter, but I would like to know if something similar can apply to the shape meter.
User avatar
balala
Rainmeter Sage
Posts: 14199
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Create a Bar meter with Shapes

Post by balala »

xenium wrote: February 8th, 2022, 7:31 pm I want to use the shape meter.
I know about the Flip=1 option for the bar meter, but I would like to know if something similar can apply to the shape meter.
There are more solutions in this case as well. Here is one of them. Probably many will tell this is not a proper solution, however I think it is working. It is done with my friend, the TransformationMatrx option. Just add the following option to the [MeterBarShape] meter in jsmorely's first code above: TransformationMatrix=-1;0;0;1;(2*[#CURRENTSECTION#:X]+#BarW#);0. This will work even if you're moving the meter, by adding an X option to it.
Note that probably there are solutions even without using the TransformationMatrix option, but have to make a few tries first.
User avatar
balala
Rainmeter Sage
Posts: 14199
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Create a Bar meter with Shapes

Post by balala »

xenium wrote: February 8th, 2022, 7:31 pm I want to use the shape meter.
I know about the Flip=1 option for the bar meter, but I would like to know if something similar can apply to the shape meter.
A second solution, besides the TransformationMatrix, is the scaling of Shape meter. Talking about the jsmorley's same code, you should have to replace the Shape2 option with the following one (see red what have been altered / added): Shape2=Rectangle #BarW#,0,([MeasureValue:%]*#BarW#/100),#BarH# | Fill LinearGradient BarGradient | StrokeWidth 0 | Scale -1,1,0,0 .
See the last paragraph here.
User avatar
xenium
Posts: 662
Joined: January 4th, 2018, 9:52 pm

Re: Create a Bar meter with Shapes

Post by xenium »

Thank you very much, both solutions work perfectly.
It remains for me to decide which of the solutions to use

Thank you again! :bow: