Bar meter with curved ends

[Fuzzybat23]

I'm trying to use this code and bar --->

Code: Select all

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

[MeasureBar]
Measure=Calc
Formula=(MeasureBar % 100) + 1
MinValue=1
MaxValue=100

[MeterBack]
Meter=Image
ImageName=#@#Images\3DBarBack.png

[MeterBar]
Meter=Bar
MeasureName=MeasureBar
X=2
Y=1
BarImage=#@#Images\3DBar.png
BarBorder=6
BarOrientation=Horizontal

To do something similar only having the bar measure, say.. my cpu temp, using this bar image -->

CPU Bar.png

Code: Select all

[MeasureTemp]
Measure=Plugin
Plugin=CoreTemp
CoreTempType=MaxTemperature

[TempBarCalc]
Measure=Calc
Formula=(MeasureTemp % 100) +1
MinValue=1
MaxValue=100

[Background]
Meter=Image
ImageName="#@#/CPU/CPU.png"
x=0
y=0

[TempHeader]
Meter=String
MeterStyle=Text_Style
StringAlign=Center
FontSize=12
Text="CPU Temp"
x=([Background:x]+62)
y=([Background:y]+24)

[Temp]
Meter=String
MeterStyle=Text_Style
MeasureName=TempBarCalc
StringAlign=Right
x=([Background:x]+92)
y=([Background:y]+62)
Text="%1C"

[TempBar]
Meter=Bar
MeasureName=MeasureTemp
x=([Background:x]+14)
y=([Background:y]+50)
BarImage="#@#\CPU\CPU Bar.png"
BarOrientation=Horizontal

But as it runs, the end of the bar is flat and cut off, not rounded on both ends like the example above. -->

Temp.JPG

I'm pretty sure I'm missing something here, but I can't see it xD If anyone can spot where I went wrong, that'd be awesome

[jsmorley]

I use BarBorder in my skin to achieve that.

https://docs.rainmeter.net/manual-beta/meters/bar/#BarBorder

[Fuzzybat23]

Ahhhhh, hrm... Doing the gradient may prove problematic then xD

[jsmorley]

Ahhhhh, hrm... Doing the gradient may prove problematic then xD

Yeah, no easy solution for that.

I pays to keep in mind that in a sense the Bar meter "reveals" the image used in BarImage as the percentage increases, it shouldn't be thought of as "drawing" it using the percentage as any factor.

[eclectic-tech]

Ahhhhh, hrm... Doing the gradient may prove problematic then xD

With the bar meter you are limited, but you can use the rectangle shape meter to achieve similar results.
Here is a simple example:

Code: Select all

; ========= Variables ==========
[Variables]
BarW=200

; ========= Measures ==========
[mCPU]
Measure=CPU

; ========= Meters ==========
[MeterBar]
Meter=Shape
X=0
Y=0
; Shape=Rectangle X,Y,W,H,{Rx},{Ry} | StrokeWidth 2 | StrokeColor 0,0,0,255 | Fill Color 255,255,255,255
Shape=Rectangle 0,0,200,20,10 | Fill LinearGradient MyGradient | StrokeWidth 1 | StrokeColor 0,0,0,1
MyGradient=90 | 225,225,225 ; 0.0 | 32,32,32 ; 1.0

Shape2=Rectangle 0,0,([mCPU]*#BarW#/100),20,10 | Fill LinearGradient MyGradient1 | StrokeWidth 0 | StrokeColor 0,0,0,1
MyGradient1=90 | 32,32,32 ; 0.0 | 225,225,225 ; 1.0
DynamicVariables=1

barshape.gif

[jsmorley]

Yes, but the complicated bit isn't the vertical gradient, even with just the Bar meter. That's easy. The issue is the horizontal gradient from green to red, with it maintaining the proper gradient based on the entire length of the meter, while the shape itself shrinks and grows. I'm pretty sure it can be done, but will likely take some math in the gradient percentages as well.

[Fuzzybat23]

Actually it was a little easier than I thought. It just requires the use of more meter styles setting color matrices.

Code: Select all

[tMatrix1]
;r
ColorMatrix1=0; 0; 0; 0; 0;
;g
ColorMatrix2=0; 0; 0; 0; 0;
;b
ColorMatrix3=0; 0; 1; 0; 0;

[tMatrix2]
;r
ColorMatrix1=1.25; 0; 0; 0; 0;
;g
ColorMatrix2=0; 0; 0; 0; 0;
;b
ColorMatrix3=0; 0; 1.75; 0; 0;

[tMatrix3]
;r
ColorMatrix1=1.50; 0; 0; 0; 0;
;g
ColorMatrix2=0; 0; 0; 0; 0;
;b
ColorMatrix3=0; 0; 1.50; 0; 0;

[tMatrix4]
;r
ColorMatrix1=1.75; 0; 0; 0; 0;
;g
ColorMatrix2=0; 0; 0; 0; 0;
;b
ColorMatrix3=0; 0; 1.25; 0; 0;

[tMatrix5]
;r
ColorMatrix1=1; 0; 0; 0; 0;
;g
ColorMatrix2=0; 0; 0; 0; 0;
;b
ColorMatrix3=0; 0; 0; 0; 0;

Using that on a naturally white or grey bar image yields a somewhat choppy blue to red gradient.

[jsmorley]

So if you wanted both the horizontal "value" gradient and the vertical "3d" gradient, The math might look like:

Code: Select all

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

[Variables]
BarW=300

[MeasureLoop]
Measure=Loop
StartValue=0
EndValue=100

[MeterBar]
Meter=Shape
X=0
Y=0
Shape=Rectangle 0,0,#BarW#,20,10 | Fill LinearGradient MyGradient1 | StrokeWidth 0
MyGradient1=90 | 225,225,225 ; 0.0 | 32,32,32 ; 1.0
Shape2=Rectangle 0,0,([MeasureLoop]*#BarW#/100),20,10 | Fill LinearGradient1 MyGradient2 | StrokeWidth 0
MyGradient2=180 | 50,184,50,255 ; 0.0 | 50,184,50,255 ; (0.5 + (100-[MeasureLoop:%])/100) | 219,213,42,255 ; (0.9 + (100-[MeasureLoop:%])/100) | 199,36,36,255 ; (1.0 + (100-[MeasureLoop:%])/100)
Shape3=Rectangle 0,0,([MeasureLoop]*#BarW#/100),20,10 | Fill LinearGradient MyGradient3 | StrokeWidth 0
MyGradient3=90 | 32,32,32,190 ; 0.0 | 225,225,225,1 ; 1.0
DynamicVariables=1

GIF.gif

Basically you always want the value gradient to be based on the full 100% width of the bar, which will be more than 100% of the current width as the value changes, until the value is actually at 100%. Note that I have the "green" set twice, once at the start and once at a mathematically static 50%, as I don't want it to even think about starting to transition to yellow until it is past 50%.

So I have the gradient set to a solid green until 50% is reached, then transitioning to yellow at 90% and red at 100%.

[eclectic-tech]

Was going to get back to this with suggestions for the gradient colors, but you beat me, and provided a great example! Thanks!