It is currently September 20th, 2021, 4:49 pm

## Changing text color behind a bar meter

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

### Changing text color behind a bar meter

[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

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.
You do not have the required permissions to view the files attached to this post. Active Colors
Moderator
Posts: 842
Joined: February 16th, 2012, 3:32 am
Location: Berlin, Germany

### Re: Changing text color behind a bar meter

Very astute technique. Impressive! balala
Rainmeter Sage
Posts: 13208
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

### Re: Changing text color behind a bar meter

Indeed a nice piece of code. Congratulations, FreeRaider! FreeRaider
Posts: 816
Joined: November 20th, 2012, 11:58 pm

### Re: Changing text color behind a bar meter

Active Colors, balala, thank you so much.   StArL0rd84
Posts: 367
Joined: February 8th, 2015, 10:07 pm
Location: EU, Denmark.

### Re: Changing text color behind a bar meter

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. ([mWorkTime] = 1 ? #Work# : ([mEnergyLoss:%] >= 70% ? #Chillmode# : </>)) Yincognito
Rainmeter Sage
Posts: 4052
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

### Re: Changing text color behind a bar meter

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.
You do not have the required permissions to view the files attached to this post. jsmorley
Developer
Posts: 22285
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

### Re: Changing text color behind a bar meter

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
Posts: 816
Joined: November 20th, 2012, 11:58 pm

### Re: Changing text color behind a bar meter

Yincognito wrote: August 19th, 2020, 2:35 am 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:

Nice one!  Yincognito
Rainmeter Sage
Posts: 4052
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

### Re: Changing text color behind a bar meter

FreeRaider wrote: August 24th, 2020, 11:18 am [/Spoiler]

Nice one! Nah, you did better, since you managed to do it at a time when Container meters didn't exist yet...  brax64
Posts: 172
Joined: July 8th, 2018, 8:05 pm

### Re: Changing text color behind a bar meter

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... You do not have the required permissions to view the files attached to this post.