Changing text color behind a bar meter

[jsmorley]

 

[back #C1F7B7] This tip is entirely based on a very clever bit of work by FreeRaider [/back]

One of the things that comes up from time to time is how to change the color of a String meter "behind" a Bar meter as the bar progresses. An example might be the best way to visualize this:

Anim1.gif

This can be done with a bit of math to figure out the relationship between the String meter's X position and the end of the Bar meter's progression, and using InlineSetting to set a GradientColor on the text.

Code: Select all

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

[MeasureLoop]
Measure=Loop
StartValue=0
EndValue=100

[MeasurePercentage]
Measure=Calc
Formula=MeasureLoop / 100
OnChangeAction=[!UpdateMeasure MeasureSetGradient]

[MeasureSetGradient]
Measure=Calc
Formula=( ((([MeterBar:W] * [MeasurePercentage]) - [MeterString:X]) / [MeterString:W]) ) < 1 ? ( ((([MeterBar:W] * [MeasurePercentage]) - [MeterString:X]) / [MeterString:W]) ) : 1
IfCondition=([MeasurePercentage]) <= ([MeterString:X]/[MeterBar:W])
IfTrueAction=[!SetOption MeterString InlineSetting "GradientColor | 180 | 255,255,255,255 ; 0.0 | 255,255,255,255 ; 1.0"][!UpdateMeter *][!Redraw]
IfFalseAction=[!SetOption MeterString InlineSetting "GradientColor | 180 | 0,0,0,255 ; 0.0 | 0,0,0,255 ; [MeasureSetGradient] | 255,255,255,255 ; [MeasureSetGradient] | 255,255,255,255 ; 1.0"][!UpdateMeter *][!Redraw]
IfConditionMode=1
UpdateDivider=-1
DynamicVariables=1

[MeterBar]
Meter=Bar
MeasureName=MeasurePercentage
X=0
Y=0
W=150
H=([MeterString:H])
BarColor=255,0,0,255
SolidColor=47,47,47,255
BarOrientation=Horizontal
DynamicVariables=1

[MeterString]
Meter=String
MeasureName=MeasureLoop
X=(([MeterBar:W]-[MeterString:W])/2)
Y=0
H=([MeterString:H])
FontSize=25
FontColor=255,255,255,255
InlinePattern=.*
Text=%1%
AntiAlias=1
DynamicVariables=1

The key to this is that the X position of the String meter must be set with a formula to center it in the width of the Bar meter, one that dynamically uses its own width in the formula. That is because we have to "know" the X position of the String meter, and using W and X and StringAlign=Center or StringAlign=Right won't allow you to know that on a variable length string without being one update behind.

[Active Colors]

Very astute technique. Impressive!

[balala]

Indeed a nice piece of code. Congratulations, FreeRaider!

[FreeRaider]

Active Colors, balala, thank you so much.

[StArL0rd84]

Very nice
At first i couldn't figure out why nothing was showing when i tried the example code.
Turns out both MeterBar and MeterString had H=([MeterString:H]) set.

[Yincognito]

I don't mean to take out credit from the ingenious solution of FreeRaider, but just for the sake of being up to date with "modern" Rainmeter, this can be done now using the text as a Container meter masking a second bar as well:

Code: Select all

[Variables]

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

---Measures---

[MeasureBar]
Measure=Calc
Formula=((MeasureBar+1)%101)
MinValue=0
MaxValue=100
DynamicVariables=1

---Meters---

[MeterBar]
Meter=Bar
X=0r
Y=0r
W=130
H=34
BarColor=255,0,0,255
SolidColor=47,47,47,255
BarOrientation=Horizontal
MeasureName=MeasureBar
DynamicVariables=1

[MeterText]
Meter=String
X=([MeterBar:W]/2)r
Y=0r
W=[MeterBar:W]
H=[MeterBar:H]
FontColor=255,255,255,255
FontSize=24
StringAlign=Center
AntiAlias=1
MeasureName=MeasureBar
Text="%1%"
DynamicVariables=1

[MeterBar2]
Container=MeterText
Meter=Bar
X=(-[MeterBar:W]/2)r
Y=0r
W=[MeterBar:W]
H=[MeterBar:H]
BarColor=0,0,0,255
SolidColor=255,255,255,255
BarOrientation=Horizontal
MeasureName=MeasureBar
DynamicVariables=1

BarTextColor.jpg

Containers are in top 5 Rainmeter features, in my view.

[jsmorley]

Yeah, Container makes this a bunch easier...

And yes, I LOVE Container. It has the absolute beauty of "simplicity" combined with "power" that is so rare.

[FreeRaider]

I don't mean to take out credit from the ingenious solution of FreeRaider, but just for the sake of being up to date with "modern" Rainmeter, this can be done now using the text as a Container meter masking a second bar as well:

Code: Select all

[Variables]

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

---Measures---

[MeasureBar]
Measure=Calc
Formula=((MeasureBar+1)%101)
MinValue=0
MaxValue=100
DynamicVariables=1

---Meters---

[MeterBar]
Meter=Bar
X=0r
Y=0r
W=130
H=34
BarColor=255,0,0,255
SolidColor=47,47,47,255
BarOrientation=Horizontal
MeasureName=MeasureBar
DynamicVariables=1

[MeterText]
Meter=String
X=([MeterBar:W]/2)r
Y=0r
W=[MeterBar:W]
H=[MeterBar:H]
FontColor=255,255,255,255
FontSize=24
StringAlign=Center
AntiAlias=1
MeasureName=MeasureBar
Text="%1%"
DynamicVariables=1

[MeterBar2]
Container=MeterText
Meter=Bar
X=(-[MeterBar:W]/2)r
Y=0r
W=[MeterBar:W]
H=[MeterBar:H]
BarColor=0,0,0,255
SolidColor=255,255,255,255
BarOrientation=Horizontal
MeasureName=MeasureBar
DynamicVariables=1

BarTextColor.jpg
Containers are in top 5 Rainmeter features, in my view.

Nice one!

[Yincognito]

[/Spoiler]

Nice one!

Nah, you did better, since you managed to do it at a time when Container meters didn't exist yet...

[brax64]

Hi there,
I'm trying to do the same thing changing the color to the label and the line meter:

Untitled.png

so when the yellow bar go toward 100%, overlapping the line meter and the label, the latter change color to 255,198,33,20

code for the bar:

Code: Select all

[measureCPU]
Measure=Plugin
Plugin=UsageMonitor
Alias=CPU

[BCKGCPU]
Meter=Shape
Shape=Rectangle 80,655,200,22,11 | StrokeWidth 0 | Fill Color 255,198,33,20

[BARCPU]
Meter=Shape
Shape=Rectangle 80,655,([measureCPU:0]*2),22,11 | StrokeWidth 0 | Fill Color 255,198,33,220
DynamicVariables=1

[CPULabel]
Meter=String
MeasureName=measureCPU
X=265
Y=660
FontColor=255,198,33,80
MeterStyle=LabelStyle
Text=[measureCPU:0]%
DynamicVariables=1

[GraphCPU]
Meter=Line
MeasureName=measureCPU
LineColor=255,198,33,40
X=130
Y=657
W=90
H=20
AutoScale=1

I can't wrap my head around it...