It is currently March 28th, 2024, 10:25 pm

Using images with Bar and Histogram meters

Our most popular Tips and Tricks from the Rainmeter Team and others
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Using images with Bar and Histogram meters

Post by jsmorley »

The Bar and Histogram meters are two very useful tools for displaying data from measures in your skins. While both of them support using colors for the graphs displayed, it may not be commonly known that they both also support images in a way that can make for very nice output.

First, here is the documentation for both meter types:

Bar meter
Histogram meter

Bar Meter

A Bar meter uses the current value of any measure that returns a percentage, displaying a horizontal or vertical rectangle that is "filled" to the percentage value of the measure. The size of the meter is generally set with the W and H general meter options, and the color of the "bar" is set with BarColor.

So we might use code like this:

Code: Select all

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

[MeasureInc]
Measure=Calc
Formula=(MeasureInc + 1) % 101
MinValue=0
MaxValue=100

[MeterBar1]
Meter=Bar
Y=250
MeasureName=MeasureInc
BarColor=95,189,79,255
W=300
H=50
SolidColor=47,47,47,150
BarOrientation=Horizontal
To get a result like:
GraphImage1.gif
That is nice, but if we use an image, we can get something that is a lot more informative, and is only limited by your creativity and artistic talent.

First, let's create an image to use. You can create this in PhotoShop, or Gimp, or Paint.NET, or any other image editing software you like.
300x50HorBar.jpg
Then we can use BarImage in our code like this:

Code: Select all

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

[MeasureInc]
Measure=Calc
Formula=(MeasureInc + 1) % 101
MinValue=0
MaxValue=100

[MeterBar1]
Meter=Bar
Y=250
MeasureName=MeasureInc
BarImage=#@#Images\300x50HorBar.jpg
SolidColor=47,47,47,150
BarOrientation=Horizontal
And get a result like this:
GraphImage2.gif
What the Bar meter does is "reveal" the portion of the image that corresponds to the percentage of the total the Measure you defined in MeasureName is currently at.

The only caveat, is that when you use an image in a Bar meter, you can't define the size of the image (or the meter) using the W and H options for the meter. The bar, and the meter will be the size of the actual image file you are using. So to keep that meter above to the 300 x 50 size the first example was, I created an image with a size of 300 x 50.

It's that simple. You can use any image you want. Something creative you make yourself, or something interesting you find on the internet. Up to you.

Histogram Meter

The same thing will work in a Histogram meter as well. What happens in this case is that the image is again "revealed" to correspond to the percentage value of the measure bound to the meter.

Let's create a slightly different image:
300x50VerBar.jpg
And use PrimaryImage in our code like this:

Code: Select all

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

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

[MeterHist1]
Meter=Histogram
MeasureName=MeasureRandom
PrimaryImage=#@#Images\300x50VerBar.jpg
SolidColor=47,47,47,150
To get results like this:
GraphImage3.gif
Again, the only caveat, is that when you use an image in a Histogram meter, you can't define the size of the image (or the meter) using the W and H options for the meter. The meter will be the size of the actual image file you are using. So to have that meter be 300 x 50, I created an image with a size of 300 x 50.

Other Notes

In both cases, Bar and Histogram, while you can't use W and H to change the "size" of the meter or image, you can use other general image options to change how the image looks and behaves. Be aware that most of these options have their own variants in the Histogram meter, due to the fact that the meter optionally supports two graphs at once in the meter.

Example Skin

Let's put it all together and use a couple of those image options:

Code: Select all

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

[MeasureInc]
Measure=Calc
Formula=(MeasureInc + 1) % 101
MinValue=0
MaxValue=100

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

[MeterHist1]
Meter=Histogram
MeasureName=MeasureRandom
PrimaryImage=#@#Images\300x50VerBar.jpg
SolidColor=47,47,47,150

[MeterHist2]
Meter=Histogram
MeasureName=MeasureRandom
Y=125
PrimaryImage=#@#Images\300x50VerBar.jpg
PrimaryImageRotate=180
SolidColor=47,47,47,150
Flip=1

[MeterBar1]
Meter=Bar
Y=250
MeasureName=MeasureInc
BarImage=#@#Images\300x50HorBar.jpg
SolidColor=47,47,47,150
BarOrientation=Horizontal

[MeterBar2]
Meter=Bar
MeasureName=MeasureInc
X=310
BarImage=#@#Images\300x50HorBar.jpg
ImageRotate=-90
SolidColor=47,47,47,150
BarOrientation=Vertical
Image

Requires at least the 3.0 release of Rainmeter from http://rainmeter.net.
GraphImage_1.0.rmskin
You do not have the required permissions to view the files attached to this post.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Using images with Bar and Histogram meters

Post by jsmorley »

Hint: You can use your image twice, once with GreyScale=1 set on an Image meter, to act as a nice background for your Bar meter, instead of using SolidColor.
BarRound.png

Code: Select all

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

[MeasureInc]
Measure=Calc
Formula=(MeasureInc + 1) % 101
MinValue=0
MaxValue=100

[MeterBarBack]
Meter=Image
ImageName=#@#Images\BarRound.png
GreyScale=1

[MeterBar]
Meter=Bar
MeasureName=MeasureInc
BarImage=#@#Images\BarRound.png
BarOrientation=Horizontal

[MeterText]
Meter=String
MeasureName=MeasureInc
FontSize=8
FontColor=255,255,255,255
X=290
Y=0
StringAlign=Right
AntiAlias=1
Text=%1%
BarRound.gif
You do not have the required permissions to view the files attached to this post.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Using images with Bar and Histogram meters

Post by jsmorley »

Another feature to keep in mind is BarBorder, which will use the number of pixels you define (left and right on a horizontal bar, top and bottom on a vertical bar) and always draw those as part of the bar as it displays the percentage.

For instance:

Code: Select all

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

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

[MeterBar]
Meter=Bar
MeasureName=MeasureBar
BarImage=#@#Images\BarFront.png
BarBorder=3
BarOrientation=Horizontal
SolidColor=26,74,25,255
BarFront.png
test.gif
Basically what is going on is that the first 3 and last 3 pixels of the overall image replace the first 3 and last 3 pixels of the "revealed" image as the percentage changes.
You do not have the required permissions to view the files attached to this post.
drakulaboy
Posts: 165
Joined: June 29th, 2014, 8:35 pm

Re: Using images with Bar and Histogram meters

Post by drakulaboy »

gotta use this , thank you! my player will be cool with that line 8-) :D
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Using images with Bar and Histogram meters

Post by jsmorley »

drakulaboy wrote:gotta use this , thank you! my player will be cool with that line 8-) :D
You can do some nice stuff with it.
test.gif
BarFront.png
test.gif
You do not have the required permissions to view the files attached to this post.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Using images with Bar and Histogram meters

Post by jsmorley »

3dBarBack.png
3dBar.png

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
test.gif
You do not have the required permissions to view the files attached to this post.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Using images with Bar and Histogram meters

Post by jsmorley »

One more... ;-)
3DBar_1.0.rmskin
test.gif

Code: Select all

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

[MeasureBar]
Measure=Calc
Formula=(MeasureBar % 100) + 1
MinValue=1
MaxValue=100
IfCondition=MeasureBar < 80
IfTrueAction=[!SetOption MeterBar MeterStyle "MatrixGreen"][!UpdateMeter *][!Redraw]
IfCondition2=(MeasureBar >= 80) && (MeasureBar < 90)
IfTrueAction2=[!SetOption MeterBar MeterStyle "MatrixYellow"][!UpdateMeter *][!Redraw]
IfCondition3=MeasureBar >= 90
IfTrueAction3=[!SetOption MeterBar MeterStyle "MatrixRed"][!UpdateMeter *][!Redraw]

[MatrixGreen]
ColorMatrix1=0; 0; 0; 0; 0
ColorMatrix2=0; 1.5; 0; 0; 0
ColorMatrix3=0; 0; 0; 0; 0

[MatrixYellow]
ColorMatrix1=1.5; 0; 0; 0; 0
ColorMatrix2=0; 1.5; 0; 0; 0
ColorMatrix3=0; 0; 0; 0; 0

[MatrixRed]
ColorMatrix1=1.5; 0; 0; 0; 0
ColorMatrix2=0; 0; 0; 0; 0
ColorMatrix3=0; 0; 0; 0; 0

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

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

[MeterPercent]
Meter=String
MeasureName=MeasureBar
X=304
Y=23
FontSize=10
FontColor=255,255,255,255
StringAlign=Right
AntiAlias=1
Text=%1%
You do not have the required permissions to view the files attached to this post.
User avatar
Cellinarac
Posts: 50
Joined: May 19th, 2017, 4:03 pm

Re: Using images with Bar and Histogram meters

Post by Cellinarac »

I have a few questions about making progress bars. I am working on a fully functional full desktop for myself and a few friends who are big Knight Rider fans (the 80s version). what I am trying to do is take the curved meter (pic below) and make it so that it is used as a system meter to display load of RAM, CPU or network speed, which ever I decide to set it to. after getting a little help in another area, I finally have the animation working, however I can not get it to display JUST the bar. if I use a bmp or non-transparent png, it has an ugly rectangle around it that covers other things as it is being "filled", but if I use a transparent png, nothing displays at all. this is the basic animation code that helped me to get it working

Code: Select all

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

[MeasureInc]
Measure=Calc
Formula=(MeasureInc + 1) % 101
MinValue=0
MaxValue=100

[MeterBar1]
Meter=Bar
Y=100
MeasureName=MeasureInc
BarImage=#@#Images\CPU\KITTCPU.png
SolidColor=47,47,47,150
BarOrientation=Horizontal

and then I tied it into

[MeasureCPULoad]
Measure=CPU
MaxValue=100
MinValue=0

;[MeasureCPULoad]
Measure=Plugin
Plugin=Plugins\CoreTemp.dll
CoreTempType=Load
MaxValue=100
MinValue=0
to get it to display CPU load (not the full code but parts of it)
this is the image on the desktop I am working on.
KITT setup 2.png
This is without the meter
KITT setup.png
and this is the bar image I am working with (nontransparent)
KITTCPU.png
You do not have the required permissions to view the files attached to this post.
Last edited by fonpaolo on May 20th, 2017, 12:53 pm, edited 1 time in total.
Reason: Please use the [code] tags
Cellinarac
User avatar
Cellinarac
Posts: 50
Joined: May 19th, 2017, 4:03 pm

Re: Using images with Bar and Histogram meters

Post by Cellinarac »

think I got it working now.
kitttest (1).gif
p.s. , sorry about not using the code thing in my earlier post, new to the forums here and was unaware of this but thanks for pointing it out and will follow directions from here on out :thumbup:
You do not have the required permissions to view the files attached to this post.
Cellinarac
User avatar
Cellinarac
Posts: 50
Joined: May 19th, 2017, 4:03 pm

Re: Using images with Bar and Histogram meters

Post by Cellinarac »

ok, well I seem to now have everything going in the right direction with this. the meter bars are working, the buttons have been re-done as well as new upload and download meters using actual gauge meters from the dash and the voice module now actually detects sound and is no longer just an animated image, you can also click the voice module and KITT will identify himself. now on to getting the rest done now that the parts that were driving me crazy are done!
thanks everyone for the help!
screen capture.gif
You do not have the required permissions to view the files attached to this post.
Cellinarac