It is currently March 19th, 2024, 7:44 am

Changing text color behind a bar meter

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

Changing text color behind a bar meter

Post by 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.
User avatar
Active Colors
Moderator
Posts: 1250
Joined: February 16th, 2012, 3:32 am
Location: Berlin, Germany
Contact:

Re: Changing text color behind a bar meter

Post by Active Colors »

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

Re: Changing text color behind a bar meter

Post by balala »

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

Re: Changing text color behind a bar meter

Post by FreeRaider »

Active Colors, balala, thank you so much.

:bow: :bow:
User avatar
StArL0rd84
Posts: 424
Joined: February 8th, 2015, 10:07 pm
Location: EU, Denmark.

Re: Changing text color behind a bar meter

Post by StArL0rd84 »

Very nice :bow:
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. ;-)
User avatar
Yincognito
Rainmeter Sage
Posts: 6949
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Changing text color behind a bar meter

Post by 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.
User avatar
jsmorley
Developer
Posts: 22632
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Changing text color behind a bar meter

Post by 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.
User avatar
FreeRaider
Posts: 826
Joined: November 20th, 2012, 11:58 pm

Re: Changing text color behind a bar meter

Post by FreeRaider »

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:

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! :thumbup:
User avatar
Yincognito
Rainmeter Sage
Posts: 6949
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Changing text color behind a bar meter

Post by Yincognito »

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

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

Re: Changing text color behind a bar meter

Post by 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... :oops:
Post Reply