Scaling Bar, Bitmap, Histogram, Rotator Images

Scaling Certain Rainmeter Style Meters

To accomplish scaling in meters (Bar, Bitmap, Button, Histogram, Rotator), where W and H are used to set the size of the "meter", not the size of the "image", you can use a "universal" TransformationMatrix formula (Formula is by Xanci):

TransformationMatrix = (#Scaler#); 0; 0;(#Scaler#); ((1 - #Scaler#) * [#CURRENTSECTION#: X]); ((1 - #Scaler#) * [#CURRENTSECTION#: Y])

Adding this to your meter, and controlling a new #Scaler# variable, you can easily scale these meters to any desired size.

Here are 3 skins that demonstrate using TransformationMatrix to scale Rotator meters.


One uses modified coding from Rotate an Image Around its Center Tip by Smurfier and JSMorley in the Rainmeter Documentation.

The second one uses a color wheel rotating around the center.

And the third one demonstrates scaling a dial image; any image that rotates from a central point.

All files are commented to help explain how it works, and how to use it with your images.

RotatorResizeRect.ini

[Rainmeter]
Update = 50
Dynamicwindowsize = 1
LeftMouseDoubleClickAction = [!WriteKeyValue Variables Scaler 1][!Refresh]

[Variables]
Scaler = 1
ImageW = 128
ImageH = 64
MaxDiameter = (SQRT(#ImageW# ** 2 + #ImageH# ** 2))
ImageSW = (#ImageW# * #Scaler#)
ImageSH = (#ImageH# * #Scaler#)
; The rectangle image size is 128x64 pixels
; To use with a different image, change the ImageW & ImageH 'numbers' to match your image size

[mScalerUp]
Measure = Calc
Formula = (#Scaler# + 0.01 > 2.0)? 2.0 : (#Scaler# + 0.01)
DynamicVariables = 1
UpdateDivider = -1
; Measures the next largest size; limits it to 2x

[mScalerDn]
Measure = Calc
Formula = (#Scaler# - 0.01 < 0.1)? 0.1 : (#Scaler# - 0.01)
DynamicVariables = 1
UpdateDivider = -1
; Measures the next smallest size; limits it to .1x

[MeasureRotate]
Measure = Calc
Formula = (MeasureRotate % 360) + 1
MaxValue = 360
; Controls rotation

[MeterBG]
Meter = Image
SolidColor = 0,0,0,128
W = (#MaxDiameter# * #Scaler#)
H = (#MaxDiameter# * #Scaler#)
MouseScrollUpAction = [!WriteKeyValue Variables Scaler ([mScalerUp])][!Refresh #CurrentConfig#]
MouseScrollDownAction = [!WriteKeyValue Variables Scaler ([mScalerDn])][!Refresh #CurrentConfig#]

[MeterRotate]
Meter = Rotator
MeasureName = MeasureRotate
ImageName = #@#images\rectangle.png
X = ([MeterBG:W] / 2)
Y = ([MeterBG:H] / 2)
OffsetX = (#ImageW# / 2)
OffsetY = (#ImageH# / 2)
TransformationMatrix = (#Scaler#) ; 0 ; 0 ; (#Scaler#) ; ((1 - #Scaler#) * [#CURRENTSECTION#: X]) ; ((1 - #Scaler#) * [#CURRENTSECTION#: Y])
DynamicVariables = 1

[MeterScaleText]
Meter = String
X = ([MeterBG:W] / 2)
Y = ([MeterBG:W] / 2)
FontColor = 255,255,255
StringAlign = CenterCenter
StringEffect = Shadow
Text=Scale: #Scaler#

RotatorResizeColorwheel.ini

[Rainmeter]
Update = 50
DynamicWindowSize = 1
LeftMouseDoubleClickAction = [!WriteKeyValue Variables Scaler 1][!Refresh]

[Variables]
Scaler = 1
ImageW = 128
ImageH = 128
MaxDiameter = (SQRT(#ImageW# ** 2 + #ImageH# ** 2))
ImageSW = (#ImageW# * #Scaler#)
ImageSH = (#ImageH# * #Scaler#)
; The color wheel image size is 128x128 pixels
; To use with a different image, change the ImageW & ImageH 'numbers' to match your image size

[mScalerUp]
Measure = Calc
Formula = (#Scaler# + 0.01 > 2.0)? 2.0 : (#Scaler# + 0.01)
DynamicVariables = 1
UpdateDivider = -1
; Measures the next largest size; limits it to 2x

[mScalerDn]
Measure = Calc
Formula = (#Scaler# - 0.01 < 0.1)? 0.1 : (#Scaler# - 0.01)
DynamicVariables = 1
UpdateDivider = -1
; Measures the next smallest size; limits it to .1x

[MeasureRotate]
Measure = Calc
Formula = (MeasureRotate % 360) + 1
MaxValue = 360
; Controls rotation

[MeterBG]
Meter = Image
SolidColor = 0,0,0,128
W = (#MaxDiameter# * #Scaler#)
H = (#MaxDiameter# * #Scaler#)
MouseScrollUpAction = [!WriteKeyValue Variables Scaler ([mScalerUp])][!Refresh #CurrentConfig#]
MouseScrollDownAction = [!WriteKeyValue Variables Scaler ([mScalerDn])][!Refresh #CurrentConfig#]

[MeterRotate]
Meter = Rotator
MeasureName = MeasureRotate
ImageName = #@#images\colorwheel.png
X = ([MeterBG:W] / 2)
Y = ([MeterBG:H] / 2)
OffsetX = (#ImageW# / 2)
OffsetY = (#ImageH# / 2)
TransformationMatrix = (#Scaler#); 0; 0; (#Scaler#); ((1 - #Scaler#) * [#CURRENTSECTION#: X]); ((1 - #Scaler#) * [#CURRENTSECTION#: Y])
DynamicVariables = 1

[MeterScaleText]
Meter = String
X = ([MeterBG:W] / 2)
Y = ([MeterBG:W] / 2)
FontColor = 255,255,255
StringAlign = CenterCenter
StringEffect = Shadow
Text = Scale: #Scaler#

Extra Credit - Scaling Dials

What if you want to scale a 'dial' image; one that rotates outward from a constant center point, like a clock hand?

Well that is only slightly different, because the dial image is 1/2 of the total image size, and the offset never changes.

Here is coding for a radar dial. (Included in the download above)

RotatorResizeDial.ini

[Rainmeter]
Update = 50
Dynamicwindowsize = 1
LeftMouseDoubleClickAction = [!WriteKeyValue Variables Scaler 1][!Refresh]

[Variables]
Scaler = 1
ImageW = 61
ImageH = 55
MaxDiameter = ((SQRT(#ImageW# ** 2 + #ImageH# ** 2)) * 2)
ImageSW = (#ImageW# * #Scaler#)
ImageSH = (#ImageH# * #Scaler#)
; The radar dial image size is 61x55 pixels BUT
; We must multiply the 'Maxdiameter' by 2 because the dial image is actually 1/2 the 'scanned' area
; To use with a different image, change the ImageW & ImageH 'numbers' to match your image size

[mScalerUp]
Measure = Calc
Formula = (#Scaler# + 0.01 > 2.0)? 2.0 : (#Scaler# + 0.01)
DynamicVariables = 1
UpdateDivider = -1
; Measures the next largest size; limits it to 2x

[mScalerDn]
Measure = Calc
Formula = (#Scaler# - 0.01 < 0.1)? 0.1 : (#Scaler# - 0.01)
DynamicVariables = 1
UpdateDivider = -1
; Measures the next smallest size; limits it to .1x

[MeasureRotate]
Measure = Calc
Formula = (MeasureRotate % 360) + 1
MaxValue = 360
; Controls rotation

[MeterBG]
Meter = Image
SolidColor = 0,0,0,128
W = (#MaxDiameter# * #Scaler#)
H = (#MaxDiameter# * #Scaler#)
MouseScrollUpAction = [!WriteKeyValue Variables Scaler ([mScalerUp])][!Refresh #CurrentConfig#]
MouseScrollDownAction = [!WriteKeyValue Variables Scaler ([mScalerDn])][!Refresh #CurrentConfig#]

[RadarFade]
Meter = Rotator
MeasureName = MeasureRotate
ImageName = "#@#Images\RadarFade125"
X = ([MeterBG:W] / 2)
Y = ([MeterBG:H] / 2)
OffsetX = 0
OffsetY = 0
TransformationMatrix = (#Scaler#); 0; 0; (#Scaler#); ((1 - #Scaler#) * [#CURRENTSECTION#: X]); ((1 - #Scaler#) * [#CURRENTSECTION#: Y])

[MeterScaleText]
Meter = String
X = ([MeterBG:W] / 2)
Y = ([MeterBG:W] / 2)
FontColor = 255,255,255
StringAlign = CenterCenter
StringEffect = Shadow
Text = Scale: #Scaler#

If you do not download the demo skin above, you will need to create 3 images: Rectangle.png (128x64 pixels), colorwheel.png (128x128 pixels), & a radarfade.png(61x55 pixels) and save them in the "@ Resources\Images" folder, in the same folder where you saved the above codes, to see the action.