Creating an Image Slider

[smurfier]

Bars are quite good at indicating the percentual value of a measure. What if you want to move an image in the same fashion? It's quite easy with an Image Meter and some math.

I'm going to refer to the result as a Slider for the purpose of this article.

First some variables that we're going to use.

Code: Select all

[Variables]
StartingX=
StartingY=
OffsetX=
OffsetY=
Height=
Width=

Let's start out with a basic horizontal slider that starts on the left.

Code: Select all

X=(#StartingX#+([Measure:%]/100)*#Width#)
Y=#StartingY#

Lets add some offsets so that we can define which part of the image indicates the measure value.

Code: Select all

X=(#StartingX#+([Measure:%]/100)*#Width#-#OffsetX#)
Y=(#StartingY#-#OffsetY#)

Now we want to center the measure value in the height of the slider.

Code: Select all

X=(#StartingX#+([Measure:%]/100)*#Width#-#OffsetX#)
Y=(#StartingY#-#OffsetY#+#Height#/2)

Changing the direction of the slider is very easy.

Code: Select all

X=(#StartingX#+(1-[Measure:%]/100)*#Width#-#OffsetX#)
Y=(#StartingY#-#OffsetY#+#Height#/2)

We can very easily make the slider vertical instead by switching a few things around.

Code: Select all

Y=(#StartingY#+(1-[Measure:%]/100)*#Height#-#OffsetY#)
X=(#StartingX#-#OffsetX#+#Width#/2)

Important Note: The image used should have a height/width that is an odd number if the center is to be used as the indicator. This will increase the accuracy of the indicator. The specified height/width should also be a factor of 10.

[jsmorley]

Here is a little example skin to demonstrate:

SlideCPU.gif

SlideCPU_1.0.rmskin

Requires the latest Rainmeter 2.5 beta or better from http://rainmeter.net.

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1

[Variables]
StartingX=12
ImageOffsetX=7
ValueWidth=146

[MeasureCPU]
Measure=CPU
IfBelowValue=50
IfBelowAction=[!SetOption MeterSlideBar ImageTint 135,217,132,255][!UpdateMeter MeterSlideBar][!Redraw]
IfAboveValue=49
IfAboveAction=[!SetOption MeterSlideBar ImageTint 247,146,92,255][!UpdateMeter MeterSlideBar][!Redraw]

[MeterSkinBack]
Meter=Image
W=173
H=66
SolidColor=60,60,60,255

[MeterLabel]
Meter=String
X=10
Y=5
FontFace=Segoe UI
FontColor=250,250,250,255
FontSize=13
StringStyle=Bold
AntiAlias=1
Text=CPU

[MeterValue]
Meter=String
MeasureName=MeasureCPU
X=158
Y=10
FontFace=Segoe UI
FontColor=250,250,250,255
FontSize=10
StringStyle=Bold
StringAlign=Right
AntiAlias=1
Text=%1%

[MeterSlideBack]
Meter=Image
ImageName=#@#Images\SlideBack.png
W=#ValueWidth#
H=5
X=#StartingX#
Y=33

[MeterSlideBar]
Meter=Bar
MeasureName=MeasureCPU
BarImage=#@#Images\SlideBack.png
ImageTint=135,217,132,255
BarOrientation=Horizontal
W=#ValueWidth#
H=5
X=#StartingX#
Y=33

[MeterPointer]
Meter=Image
ImageName=#@#Images\Slide.png
ImageAlpha=160
W=15
H=18
X=(#StartingX#+([MeasureCPU]/100)*#ValueWidth#-#ImageOffsetX#)
Y=30
DynamicVariables=1

[Meter0Tick]
Meter=Image
W=1
H=8
X=#StartingX#
Y=48
SolidColor=201,201,201,255

[Meter25Tick]
Meter=Image
W=1
H=5
X=(#StartingX#+(#ValueWidth#*0.25))
Y=48
SolidColor=201,201,201,255

[Meter50Tick]
Meter=Image
W=1
H=8
X=(#StartingX#+(#ValueWidth#*0.50))
Y=48
SolidColor=201,201,201,255

[Meter75Tick]
Meter=Image
W=1
H=5
X=121
X=(#StartingX#+(#ValueWidth#*0.75))
Y=48
SolidColor=201,201,201,255

[Meter100Tick]
Meter=Image
W=1
H=8
X=(#StartingX#+#ValueWidth#)
Y=48
SolidColor=201,201,201,255