Font Color

[Tr1plex]

I have a bar graph with the text percentage value superimposed.
However, now I'm attempting (without much success) to have the text change color depending on the position of the bar beneath it.

Such as this...


Anyone know how I might achieve this?

[jsmorley]

I really don't know of any way to get that effect.

The obvious solution is to use InlineSetting with GradientColor, but there is an issue there that makes this impossible for your specific example. GradientColor is based on percentages of the string, but it is only the "visible" text in the string meter. It can't be based on a fixed meter width. Since you can never know the width in pixels of the visible text in the meter, there is just no way to apply any percentages to the gradient that has anything to do with either the overall width of the bar meter or the width of the current value.

You can't "truncate" a string based on the meter width, only on the width of the entire skin. So having two meters with "50%" with one in front truncated half-way won't work either.

Maybe someone has some clever idea I haven't thought of, but about the best I could come up with is to have the "bar" in front of the text, and partially transparent, so the bar color will play an indirect role in the color of the text under it.

Code: Select all

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

[MeasureBar]
Measure=Calc
Formula=0.5

[MeterBarBack]
Meter=Image
W=100
H=30
SolidColor=47,47,47,255

[MeterOne]
Meter=String
W=100
H=30
X=50
StringAlign=Center
FontSize=20
FontColor=255,255,255,255
AntiAlias=1
Text=50%

[MeterBar]
Meter=Bar
MeasureName=MeasureBar
W=100
H=30
BarColor=255,0,0,120
SolidColor=47,47,47,47
BarOrientation=Horizontal

1.jpg

[Tr1plex]

That might be my best bet.
10Q JS.

I was hoping to think of a way to use an alpha image where the bar determined visibility.
It works if I have a fixed image, but a text value...
...no such luck.

[balala]

I think I found a solution, but it has a few limitations. Maybe you could take a look.
So, in my solution, you'll need two skins, loaded in the same time (first limitation). I named them Master.ini (in the Master config) and Slave.ini (in the Master\Slave) config. Slave.ini will gradually cover Master.ini:

Master.ini:

Code: Select all

[Rainmeter]
Update=100
DynamicWindowSize=1
OnRefreshAction=[!ActivateConfig "#CURRENTCONFIG#\Slave" "Slave.ini"][!Move "#CURRENTCONFIGX#" "#CURRENTCONFIGY#" "#CURRENTCONFIG#\Slave"][!ZPos "-1"]

[MeasureCalc]
Measure=Calc
Formula=( COUNTER % 101 )
MinValue=0
MaxValue=100
OnChangeAction=[!SetVariable Val "[MeasureCalc]" "#CURRENTCONFIG#\Slave"][!UpdateMeter "MeterPercentValue" "#CURRENTCONFIG#\Slave"][!Redraw "#CURRENTCONFIG#\Slave"]

[MeterBackground]
Meter=Image
SolidColor=150,150,150
X=0
Y=0
W=250
H=30

[MeterPercentValue]
MeasureName=MeasureCalc
Meter=STRING
X=0
Y=15
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
FontSize=18
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=LEFTCENTER
AntiAlias=1
Text=%1%

[MeasureCalc] will return a value between 0 and 100, which will be used to set the width of the bar. Here I must say, that finally I didn't use a bar meter, having in the Slave.ini skin just a string meter, with SolidColor and a growing width. At the very first moment you'll have to load just the Master.ini, because its OnRefreshAction will load the Slave.ini skin, will move it to the same position as Master.ini and will set the Master.ini behind Slave.ini.

Slave.ini:

Code: Select all

[Rainmeter]
Update=100
BackgroundMode=2
SolidColor=185,250,160,255

[MeterPercentValue]
Meter=STRING
X=0
Y=15
W=(250*#Val#/100)
H=30
FontColor=0,0,0
FontEffectColor=220,220,220
StringEffect=Shadow
FontSize=18
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=LEFTCENTER
AntiAlias=1
Text=#Val#%
DynamicVariables=1

The value shown by the [MeterPercentValue] meter and its width (in the Slave.ini skin) are set by the Master.ini skin, through the Val variable (OnChangeAction option of the [MeasureCalc] measure, in Master.ini).
A second very important limitation of these codes, is that the string meters must be aligned to left, otherwise the result won't look as it should (you can give it a try to see what's happening).
You need to do all these compromises because if you have in a skin more meters, with different widths, the string meter will be totally visible even if you set a very small width. That's why I had to move the second string meter ([MeterPercentValue]) into a new skin.
If all these limitations seem acceptable, I think these skins can be used.

[FreeRaider]

A solution :

skin.ini

Code: Select all

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

[MeasureRandom]
Measure=Calc
Formula=(Random/100)
LowBound=0
HighBound=100
DynamicVariables=1
RegExpSubstitute=1
Substitute="^(\d)$":"0\1"

[MeasureCalc]
Measure=Calc
Formula=( ((([MeterBar:W] * [MeasureRandom])  - [MeterPercentual:X]) / [MeterPercentual:W]) ) < 1 ? ( ((([MeterBar:W] * [MeasureRandom])  - [MeterPercentual:X]) / [MeterPercentual:W]) ) : 1
DynamicVariables=1

[MeasureCalc2]
Measure=Calc
Formula=MeasureCalc
DynamicVariables=1
IfCondition=([MeasureRandom]) <= ([MeterPercentual:X]/[MeterBar:W])
IfTrueAction=[!SetOption MeterPercentual InlineSetting "GradientColor | 180 | 0,255,255,255 ; 0.0 | 0,255,255,255 ; 1.0"][!SetOption MeterPercentual InlinePattern "(.*)"][!Redraw]
IfCondition2=([MeasureRandom]) > ([MeterPercentual:X]/[MeterBar:W])
IfTrueAction2=[!SetOption MeterPercentual InlineSetting "GradientColor | 180 | 0,0,0,255 ; 0.0 | 0,0,0,255 ; [MeasureCalc] | 255,255,255,255 ; [MeasureCalc2] | 255,255,255,255 ; 1.0"][!SetOption MeterPercentual InlinePattern "(.*)"][!Redraw]
IfConditionMode=1

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

[MeterPercentual]
Meter=String
MeasureName=MeasureRandom
X=(([MeterBar:W]-[MeterPercentual:W])/2)
Y=0
H=([MeterPercentual:H])
FontSize=25
FontColor=255,255,255,255
Text=%1%
Percentual=1
AntiAlias=1
DynamicVariables=1

testing_bar.gif

[jsmorley]

Huh. Nice one. Aside from some weirdness with cyan where I assume you meant to start with 255,255,255,255, that indeed works pretty well.

Code: Select all

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

[MeasureLoop]
Measure=Calc
Formula=(MeasureLoop %1) + 0.01

[MeasureCalc]
Measure=Calc
Formula=( ((([MeterBar:W] * [MeasureLoop])  - [MeterPercentual:X]) / [MeterPercentual:W]) ) < 1 ? ( ((([MeterBar:W] * [MeasureLoop])  - [MeterPercentual:X]) / [MeterPercentual:W]) ) : 1
DynamicVariables=1

[MeasureCalc2]
Measure=Calc
Formula=MeasureCalc
DynamicVariables=1
IfCondition=([MeasureLoop]) <= ([MeterPercentual:X]/[MeterBar:W])
IfTrueAction=[!SetOption MeterPercentual InlineSetting "GradientColor | 180 | 255,255,255,255 ; 0.0 | 255,255,255,255 ; 1.0"][!SetOption MeterPercentual InlinePattern "(.*)"][!Redraw]
IfCondition2=([MeasureLoop]) > ([MeterPercentual:X]/[MeterBar:W])
IfTrueAction2=[!SetOption MeterPercentual InlineSetting "GradientColor | 180 | 0,0,0,255 ; 0.0 | 0,0,0,255 ; [MeasureCalc] | 255,255,255,255 ; [MeasureCalc2] | 255,255,255,255 ; 1.0"][!SetOption MeterPercentual InlinePattern "(.*)"][!Redraw]
IfConditionMode=1

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

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

test.gif

FreeRaider wins the "thinking outside the box award" today...

[FreeRaider]

Oh thanks. Cyan was just to test calculations and if statements.

[jsmorley]

Oh thanks. Cyan was just to test calculations and if statements.

Really nice job. I went into it with the starting assumption that I was going to have to use StringAlign=Center, which made InlineSetting just not workable. Centering the text with X and some math was really good thinking. It's the only way that in a round-about way you can "know" the X position of a variable length string that is centered.

[jsmorley]

FreeRaider, I'm going to turn your skin into a "Tips & Tricks" with full credit to you. This question has some up over and over again over the years, and I think we finally have a solution.

https://forum.rainmeter.net/viewtopic.php?p=120106#p120106

[FreeRaider]

Thank you so much. This make me proud and happy.