Histogram Gradient without images

[TGonZo]

I like the idea of a histogram using a gradient to show different colors at low values verses high values. I thought I would try to do this without the use of images. That way you can change the size of the Histogram to any size you like. For the most part, I have a working solution to that.

I created a simple gradient on the fly with the Image Meter, I then overlaid the Histogram meter, but I inverted the data values and the histogram, to cover the upper part of the gradient. That way the exposed color part of the Histogram shows the correct data value.

It starts off looking a bit odd, but after the Histogram fills the width, it looks perfectly normal. It's just another way to do this. Maybe somebody will find it useful.

You can change these values to any size you want, and everything scales with it.
meterGradientBackground:W
meterGradientBackground:H



How it looks when it is just starting out.

HistoGradientTest01.jpg

After it has filled the width.

HistoGradientTest02.jpg

HistoGradientTest.ini

Code: Select all

[Rainmeter]
BackgroundMargins=0,0,10,10
Group=AllPerf
BackgroundMode=2
SolidColor=0,50,100,255


[Metadata]
Name=HistoGradient
Author=TGonZo
Information=Gradient testing
License=Creative Commons BY-NC-SA 3.0
Version=1.0


;-------------------------

[MeasureRandom]
Measure=Calc
Formula=Random
UpdateRandom=1
UniqueRandom=1
LowBound=0
HighBound=100
MinValue=0
MaxValue=100
UpdateDivider=2

[MeasureRandomInvert]
Measure=Calc
Formula=(100 - MeasureRandom)
MinValue=0
MaxValue=100

;-------------------------

[meterDataValue]
Meter=String
MeasureName=MeasureRandom
X=10
Y=10
Text=Data Value: %1
FontColor=255,255,255,255
AntiAlias=1

[meterWhiteBorder]
Meter=Image
X=10
Y=20r
W=([meterGradientBackground:W] + 4)
H=([meterGradientBackground:H] + 4)
SolidColor=200,200,200,255
DynamicVariables=1

[meterGradientBackground]
Meter=Image
X=2r
Y=2r
W=150
H=50
SolidColor=255,40,40,255
SolidColor2=60,255,60,255
GradientAngle=90

[meterHistoTest]
Meter=Histogram
MeasureName=MeasureRandomInvert
Flip=1
X=0r
Y=0r
W=[meterGradientBackground:W]
H=[meterGradientBackground:H]
PrimaryColor=0,50,100,255

;-------------------------

[ikarus1969]

Hi TGonZo!

I have made a variant of your really clever idea without the "fills the width" situation:

Just wait a few seconds - there's a refresh

Histo.gif

Code: Select all

[Rainmeter]
BackgroundMargins=0,0,10,10
Group=AllPerf
BackgroundMode=2
SolidColor=0,50,100,255
OnRefreshAction=[!SetVariable "GRAD_OFFSET" 0]


[Metadata]
Name=HistoGradient
Author=TGonZo
Information=Gradient testing
License=Creative Commons BY-NC-SA 3.0
Version=1.0

[Variables]
GRAD_OFFSET=0

;-------------------------

[MeasureRandom]
Measure=Calc
Formula=Random
UpdateRandom=1
UniqueRandom=1
LowBound=0
HighBound=100
MinValue=0
MaxValue=100
UpdateDivider=2

[MeasureRandomInvert]
Measure=Calc
Formula=(100 - MeasureRandom)
MinValue=0
MaxValue=100
OnUpdateAction=[!SetVariable "GRAD_OFFSET" "(#GRAD_OFFSET# + 1)"]
DynamicVariables=1

;-------------------------

[meterDataValue]
Meter=String
MeasureName=MeasureRandom
X=10
Y=10
Text=Data Value: %1
FontColor=255,255,255,255
AntiAlias=1

[meterWhiteBorder]
Meter=Image
X=10
Y=20r
W=(150 + 4)
H=(50 + 4)
SolidColor=200,200,200,255
DynamicVariables=1

[meterBlueBackground]
Meter=Image
X=2r
Y=2r
W=150
H=50
SolidColor=0,50,100,255
DynamicVariables=1

[meterGradientBackground]
Meter=Image
X=([meterWhiteBorder:X] + 2 + (CLAMP((150 - #GRAD_OFFSET#), 0, 150)) )
Y=2r
W=(CLAMP(#GRAD_OFFSET#, 0, 150))
H=50
SolidColor=255,40,40,255
SolidColor2=60,255,60,255
GradientAngle=90
DynamicVariables=1

[meterHistoTest]
Meter=Histogram
MeasureName=MeasureRandomInvert
Flip=1
X=([meterWhiteBorder:X] + 2)
Y=([meterWhiteBorder:Y] + 2)
W=150
H=50
PrimaryColor=0,50,100,255
DynamicVariables=1
;-------------------------

[TGonZo]

Hi ikarus1969,

That's awesome! That makes it a good solution now. Thanks.