Shop Mobile More Submit  Join Login
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 = (1 * #Scaler#); 0; 0; (1 * #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.
Rotator Resize by Eclectic-Tech

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 = (1 * #Scaler#) ; 0 ; 0 ; (1 * #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 = (1 * #Scaler#); 0; 0; (1 * #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 = (1 * #Scaler#); 0; 0; (1 * #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.
Add a Comment:
 
:iconeclectic-tech:
Eclectic-Tech Featured By Owner Mar 19, 2015
Thanks AC! I will see about adding images

Aside: Made some corrections to the code; I shouldn't add these at 3 o'clock in the morning! :)
Reply
:iconactivecolors:
ActiveColors Featured By Owner Edited Mar 19, 2015  Hobbyist Interface Designer
Great approach! Maybe you could add some example screenshots because for amateurs it would be hard to grasp the idea without visualizing the process.
Reply
:iconeclectic-tech:
Eclectic-Tech Featured By Owner Mar 19, 2015
Thanks AC! Added a sample rmskin and some missing credits :X
Reply
:iconactivecolors:
ActiveColors Featured By Owner Mar 19, 2015  Hobbyist Interface Designer
Ah, sorry, overlooked :D
Reply
:iconactivecolors:
ActiveColors Featured By Owner Mar 19, 2015  Hobbyist Interface Designer
Where is the sample skin? :D
Reply
:iconeclectic-tech:
Eclectic-Tech Featured By Owner Mar 19, 2015
Click on the image with the Red Rectangle, near the top of the post, to go to the download page.

I will add a text link too... that image is confusing!
Reply
Add a Comment:
 
×




Details

Submitted on
March 18, 2015
Link
Thumb

Stats

Views
1,900 (3 today)
Favourites
10 (who?)
Comments
6
×