It is currently October 27th, 2020, 3:17 am

Changing text color behind a bar meter

Tips and Tricks from the Rainmeter Community
User avatar
Yincognito
Posts: 2817
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Changing text color behind a bar meter

Post by Yincognito »

brax64 wrote: August 25th, 2020, 3:48 pm 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:
[...]
I can't wrap my head around it... :oops:
Yep, this presents a small "complication" - this would be a good subject to reflect on for the developers - currently you can't set the Container option to either a group of meters or more than one meter, and you can't "merge" multiple meters together either, the way the Combine option in a Shape does for shapes, for example. In other words, you can't set both the Line meter and the String meter to be the same container used to "mask" the shapes in your skin that act as "bars". Sure, you can just paste another set of nearly identical meters (e.g. [BCKGCPU3] and [BARCPU3]) to be masked by the String meters aka the labels while the first set (i.e. [BCKGCPU2] and [BARCPU2]) is masked by the Line meter, but that's just going to be a bit redundant and such.

So, if you want to keep it as simple as possible, you have to choose which meter will be the Container between the Line and the String. I chose the Line, because you can do a trick with the String that will pretty much create the same visual illusion of changing colors: keep the "normal" color of the String (i.e. the one that is similar to the color of the bar and needs to be changed on overlap) but at the same time set a Shadow effect on the String with the color you want the String to have on overlap. This way, the Line meter will mask the shapes normally since it's a Container, and on overlap the String's initial color will be more or less "invisible" due to the fact that it's similar with the shape color, leaving only the (different than the Shape's) color of the Shadow visible, in effect creating the illusion of changing its color.

Long story short, here is the code:

Code: Select all

[Variables]
InitialLabelColor=255,198,33,80
OverlapLabelColor=64,50,8,192
InitOverLineColor=128,99,17,192

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

[measureCPU]
Measure=Plugin
Plugin=UsageMonitor
Alias=CPU
; Set Update=100 in [Rainmeter] Above And Temporarily Replace Or Comment The Measure Code With The Code Below To Do A Quick Test
;Measure=Calc
;Formula=((measureCPU+1)%101)
;DynamicVariables=1

[BCKGCPU]
X=0
Y=0
Meter=Shape
Shape=Rectangle 0,0,200,22,11 | StrokeWidth 0 | Fill Color 255,198,33,20

[BARCPU]
Meter=Shape
X=0
Y=0
Shape=Rectangle 0,0,([measureCPU:0]*2),22,11 | StrokeWidth 0 | Fill Color 255,198,33,220
DynamicVariables=1

[GraphCPU]
Meter=Line
MeasureName=measureCPU
LineColor=255,255,255,255
X=50
Y=1
W=100
H=20
AutoScale=1

[CPULabel]
Meter=String
MeasureName=measureCPU
X=190
Y=3
FontColor=#InitialLabelColor#
StringEffect=Shadow
FontEffectColor=#OverlapLabelColor#
FontWeight=700
StringAlign=Right
Text=[measureCPU:0]%
DynamicVariables=1

[BCKGCPU2]
Container=GraphCPU
X=-50
Y=0
Meter=Shape
Shape=Rectangle 0,0,200,22,11 | StrokeWidth 0 | Fill Color #InitialLabelColor#
DynamicVariables=1

[BARCPU2]
Container=GraphCPU
X=-50
Meter=Shape
Y=0
Shape=Rectangle 0,0,([measureCPU:0]*2),22,11 | StrokeWidth 0 | Fill Color #OverlapLabelColor#
DynamicVariables=1
Be aware that I modified the positions in order to be able to work on this on my probably smaller monitor, so you'll need to change them back to similar values as in the original code. Take care though, to do this "proportionally" to what they are now, especially when it comes to the X options of [BCKGCPU2] and [BARCPU2]. Also, the color you wanted the label / line to have on overlap made absolutely no sense (its alpha value was way to small), so I changed that too - since we're at it, a piece of advice: if you want to "darken" a color, like I assume you wanted to, don't modify or reduce the color's alpha value as that would only make it more transparent, but decrease the RGB values by the same proportion (i.e. multiply them by the same fractional number, e.g. 255,128,64,255 would become twice darker if set to 128,64,32,255 because its RGB values were multiplied by 0.5 aka 1/2).
User avatar
brax64
Posts: 170
Joined: July 8th, 2018, 8:05 pm

Re: Changing text color behind a bar meter

Post by brax64 »

Yincognito wrote: August 25th, 2020, 7:19 pm Yep, this presents a small "complication" - this would be a good subject to reflect on for the developers
...
Hi Yicognito,

thank you very much for the code and, more important, for the exhaustive explanation that goes far and beyond the focus of the actual question, really appreciate!
User avatar
Yincognito
Posts: 2817
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Changing text color behind a bar meter

Post by Yincognito »

brax64 wrote: August 25th, 2020, 9:16 pm Hi Yicognito,

thank you very much for the code and, more important, for the exhaustive explanation that goes far and beyond the focus of the actual question, really appreciate!
You're welcome - glad you liked it. ;-)