It is currently September 18th, 2019, 12:06 am

Create a Bar meter with Shapes

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

Create a Bar meter with Shapes

jsmorley » August 26th, 2019, 11:35 am

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.