It is currently July 20th, 2019, 8:52 pm

Histogram Gradient without images

Tips and Tricks from the Rainmeter Community
TGonZo
Posts: 58
Joined: April 25th, 2015, 8:19 pm
Location: Virginia

Histogram Gradient without images

TGonZo » August 15th, 2015, 4:50 pm

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

;-------------------------
You do not have the required permissions to view the files attached to this post.
User avatar
ikarus1969
Posts: 331
Joined: February 28th, 2011, 3:20 pm
Location: Vienna, Austria

Re: Histogram Gradient without images

ikarus1969 » August 15th, 2015, 6:25 pm

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
;-------------------------
You do not have the required permissions to view the files attached to this post.
TGonZo
Posts: 58
Joined: April 25th, 2015, 8:19 pm
Location: Virginia

Re: Histogram Gradient without images

TGonZo » August 15th, 2015, 8:49 pm

Hi ikarus1969,

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