Rainmeter Forums


https://forum.rainmeter.net/

Changing text color behind a bar meter

https://forum.rainmeter.net/viewtopic.php?t=22765

Page 1 of 2

Changing text color behind a bar meter

Posted: February 15th, 2016, 12:39 am
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.

Re: Changing text color behind a bar meter

Posted: February 15th, 2016, 8:31 pm
by Active Colors
Very astute technique. Impressive!

Re: Changing text color behind a bar meter

Posted: February 15th, 2016, 9:18 pm
by balala
Indeed a nice piece of code. Congratulations, FreeRaider!

Re: Changing text color behind a bar meter

Posted: February 15th, 2016, 9:55 pm
by FreeRaider
Active Colors, balala, thank you so much.

:bow: :bow:

Re: Changing text color behind a bar meter

Posted: August 15th, 2017, 10:01 am
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. ;-)

Re: Changing text color behind a bar meter

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

Re: Changing text color behind a bar meter

Posted: August 19th, 2020, 3:02 am
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.

Re: Changing text color behind a bar meter

Posted: August 24th, 2020, 11:18 am
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:

Re: Changing text color behind a bar meter

Posted: August 24th, 2020, 3:23 pm
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... ;-)

Re: Changing text color behind a bar meter

Posted: August 25th, 2020, 3:48 pm
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:
All times are UTC
Page 1 of 2

Powered by phpBB® Forum Software © phpBB Limited