It is currently October 24th, 2018, 1:56 am

Changing text color behind a bar meter

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

Changing text color behind a bar meter

jsmorley » February 15th, 2016, 12:39 am


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

Re: Changing text color behind a bar meter

Active Colors » February 15th, 2016, 8:31 pm

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

Re: Changing text color behind a bar meter

balala » February 15th, 2016, 9:18 pm

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

Re: Changing text color behind a bar meter

FreeRaider » February 15th, 2016, 9:55 pm

Active Colors, balala, thank you so much.

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

Re: Changing text color behind a bar meter

StArL0rd84 » August 15th, 2017, 10:01 am

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. ;-)