problem, change image size

[jsmorley]

@ balala

I DO use the TransformationMatrix code you posted when I want to scale meters
I didn't include the move segment in my example because I got lazy
Thank you for the reminder

Code to add to scale a meter using a #size# variable:
TransformationMatrix=#size#;0;0;#size#;((1-#size#)*[#CURRENTSECTION#:X]);((1-#size#)*[#CURRENTSECTION#:Y])

I thought this was worth saving someplace easy to find...

Scaling with TransformationMatrix.

Perhaps you or balala can add an example in that thread where you scale it based on the center of the image rather that the top left, so it grows and shrinks while maintaining the same relative position?

[eclectic-tech]

You can use: TransformationMatrix=#Scale#;0;0;#Scale#;((1-#Scale#)*([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2));((1-#Scale#)*([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2))

The only concern is the X & Y positions need to be such that the meter is not clipped on the top and left (similar to being clipped at the bottom and right if the SkinWidth and SkinHeight are not defined in the [Rainmeter] section). Setting it's intial position to the center of it's width and height should prevent this. So those position should be: ((SQRT((#ImageWidth#**2)+(#ImageHeight#**2)))/2)

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
SkinWidth=((SQRT((#ImageWidth#**2)+(#ImageHeight#**2)))*2)
SkinHeight=((SQRT((#ImageWidth#**2)+(#ImageHeight#**2)))*2)

[Variables]
U=[!UpdateMeasure MeasureScaleIt][!UpdateMeter *][!Redraw]
Scale=1
ImageWidth=134
ImageHeight=134

[MeterTest]
Meter=Image
X=((SQRT((#ImageWidth#**2)+(#ImageHeight#**2)))/2)
Y=((SQRT((#ImageWidth#**2)+(#ImageHeight#**2)))/2)
ImageName=#@#Grr.png
DynamicVariables=1
MouseScrollUpAction=[!CommandMeasure MeasureScaleIt "Execute 1"]
MouseScrollDownAction=[!CommandMeasure MeasureScaleIt "Execute 2"]
TransformationMatrix=#Scale#;0;0;#Scale#;((1-#Scale#)*([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2));((1-#Scale#)*([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2))

[MeasureScaleIt]
Measure=Plugin
Plugin=ActionTimer
ActionList1=ScaleUp
ScaleUp=[!SetVariable Scale "(Clamp(#Scale#+0.05,0.2,2))"]#U#
ActionList2=ScaleDown
ScaleDown=[!SetVariable Scale "(Clamp(#Scale#-0.05,0.2,2))"]#U#
DynamicVariables=1

My Grr.png test image:

grr.gif

[jsmorley]

Great, thanks. Added that to the Tips and Tricks thread.

[balala]

Perhaps you or balala can add an example in that thread where you scale it based on the center of the image rather that the top left, so it grows and shrinks while maintaining the same relative position?

Well, I also started to work, but it seems eclectic-tech took it before me. Congratulations to him.

[eclectic-tech]

Well, I also started to work, but it seems eclectic-tech took it before me. Congratulations to him.

Thanks balala!

I can see both TransformationMatrix formula variations being useful as solutions to resizing meters that use Width & Height to control other options rather than the image size. You may not always want the expansion to be from the center, and positioning of centered expansion is a bit more complicated to prevent clipping.

Hopefully, this will help people get interested in the power of TransformationMatrix formulas.

Like you always say "It's just math!" but for most people, their eyes start to glaze over if the formula is longer than one line!

Have a look at this: Balala's TransformationMatrix for Rotating Example
(Click circle to rotate)

Code: Select all

[Rainmeter]
Update=-1
BackgroundMode=2
SolidColor=0,0,0,1
LeftMouseUpAction=[!CommandMeasure "MeasureAngle" "Execute 1"]

[Metadata]
Name=Circle Line Gradient
Author=ChicknwitNoName
Information=Fake it 'til they make it.
Version=1.0
License=Creative Commons Attribution-NonCommercial-ShareAlike 4.0

[Variables]
Angle=0
U=[!UpdateMeasure "MeasureAngle"][!UpdateMeter "Circle"][!Redraw]

[MeasureAngle]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat Rotate,30,36
Rotate=[!SetVariable Angle "(Clamp((#Angle#+10),0,360))"]#U#
IfCondition=(#Angle#>=360)
IfTrueAction=[!CommandMeasure "MeasureAngle" "Stop 1"][!SetVariable Angle "0"]#U#
DynamicVariables=1

[Circle]
Meter=Shape
Shape =Path Path1 | StrokeWidth 0 | Fill LinearGradient NW
Shape2=Path Path2 | StrokeWidth 0 | Fill LinearGradient NE
Shape3=Path Path3 | StrokeWidth 0 | Fill LinearGradient SE
Shape4=Path Path4 | StrokeWidth 0 | Fill LinearGradient SW
Path1=50,3 | CurveTo 3,50,24.06,3,3,24.06 | LineTo 0,50 | CurveTo 50,0,0,22.404,22.404,0 | LineTo 50,3 | ClosePath 1
Path2=50.323,0.001 | CurveTo 100,50,77.77,0.175,100,22.512 | LineTo 97,50 | CurveTo 50,3,97,24.06,75.94,3 | LineTo 50,0 | LineTo 50.323,0.001 | ClosePath 1
Path3=100,50 | CurveTo 50,100,100,77.596,77.596,100 | LineTo 50,97 | CurveTo 97,50,75.94,97,97,75.94 | LineTo 100,50 | ClosePath 1
Path4=3,50 | CurveTo 50,97,3,75.94,24.06,97 | LineTo 50,100 | CurveTo 0,50,22.404,100,0,77.596 | LineTo 3,50 | ClosePath 1
NW=90 | 255,255,255,200 ; 0.0 | 255,255,255,150 ; 1.0
NE=-90 | 255,255,255,150 ; 0.0 | 255,255,255,100 ; 1.0
SE=0 | 255,255,255,100 ; 0.0 | 255,255,255,50 ; 1.0
SW=0 | 255,255,255,50 ; 0.0 | 255,255,255,0 ; 1.0
TransformationMatrix=(Cos(Rad(#Angle#)));(-Sin(Rad(#Angle#)));(Sin(Rad(#Angle#)));(Cos(Rad(#Angle#)));(([Circle:X]+[Circle:W]/2)-([Circle:X]+[Circle:W]/2)*Cos(Rad(#Angle#))-([Circle:Y]+[Circle:H]/2)*Sin(Rad(#Angle#)));(([Circle:Y]+[Circle:H]/2)+([Circle:X]+[Circle:W]/2)*Sin(Rad(#Angle#))-([Circle:Y]+[Circle:H]/2)*Cos(Rad(#Angle#)))
DynamicVariables=1

[balala]

You can use: TransformationMatrix=#Scale#;0;0;#Scale#;((1-#Scale#)*([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2));((1-#Scale#)*([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2))

The only concern is the X & Y positions need to be such that the meter is not clipped on the top and left (similar to being clipped at the bottom and right if the SkinWidth and SkinHeight are not defined in the [Rainmeter] section). Setting it's intial position to the center of it's width and height should prevent this. So those position should be: ((SQRT((#ImageWidth#**2)+(#ImageHeight#**2)))/2)

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
SkinWidth=((SQRT((#ImageWidth#**2)+(#ImageHeight#**2)))*2)
SkinHeight=((SQRT((#ImageWidth#**2)+(#ImageHeight#**2)))*2)

[Variables]
U=[!UpdateMeasure MeasureScaleIt][!UpdateMeter *][!Redraw]
Scale=1
ImageWidth=134
ImageHeight=134

[MeterTest]
Meter=Image
X=((SQRT((#ImageWidth#**2)+(#ImageHeight#**2)))/2)
Y=((SQRT((#ImageWidth#**2)+(#ImageHeight#**2)))/2)
ImageName=#@#Grr.png
DynamicVariables=1
MouseScrollUpAction=[!CommandMeasure MeasureScaleIt "Execute 1"]
MouseScrollDownAction=[!CommandMeasure MeasureScaleIt "Execute 2"]
TransformationMatrix=#Scale#;0;0;#Scale#;((1-#Scale#)*([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2));((1-#Scale#)*([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2))

[MeasureScaleIt]
Measure=Plugin
Plugin=ActionTimer
ActionList1=ScaleUp
ScaleUp=[!SetVariable Scale "(Clamp(#Scale#+0.05,0.2,2))"]#U#
ActionList2=ScaleDown
ScaleDown=[!SetVariable Scale "(Clamp(#Scale#-0.05,0.2,2))"]#U#
DynamicVariables=1

My Grr.png test image:
grr.gif

Here is a small addition to eclectic-tech's code. I added two new variables, CenterX and CenterY. These are the coordinates of the "center" of resizing (the unmoving point).
Initially this point is set to CenterX=161 and CenterY=161 (the center of image), but obviously this can be modified accordingly to your needs. Later you can anytime click the skin, to set the new center. This point is indicated by a small red point. If you don't want to see this point, simply hide the point, by adding a Hidden=1 option to [MeterCenter] meter.
Note that when you set a new center (by clicking the skin) the image is set to its default size.
The code uses eclectic-tech's above posted Grr.png image, but you can use any other image as well. Just take care to modify the ImageWidth and ImageHeight variables (the size of the used image), within the [Variables] section.
And one more observation: the skin has a set size (through the SkinWidth and SkinHeight options of [Rainmeter] section). In such circumstances, the DynamicWindowSize=1 option is useless. That's why I commented it out.
The modified code:

Code: Select all

[Rainmeter]
Update=-1
;DynamicWindowSize=1
AccurateText=1
SkinWidth=((SQRT((#ImageWidth#**2)+(#ImageHeight#**2)))*2)
SkinHeight=((SQRT((#ImageWidth#**2)+(#ImageHeight#**2)))*2)
BackgroundMode=2
SolidColor=0,0,0,1
MouseScrollUpAction=[!CommandMeasure MeasureScaleIt "Execute 1"]
MouseScrollDownAction=[!CommandMeasure MeasureScaleIt "Execute 2"]
LeftMouseUpAction=[!SetVariable Scale "1"][!SetVariable CenterX "$MouseX$"][!SetVariable CenterY "$MouseY$"][!UpdateMeter "MeterTest"][!UpdateMeter "MeterCenter"][!Redraw]

[Variables]
U=[!UpdateMeasure MeasureScaleIt][!UpdateMeter *][!Redraw]
Scale=1
ImageWidth=134
ImageHeight=134
CenterX=161
CenterY=161

[MeterTest]
Meter=Image
X=((SQRT((#ImageWidth#**2)+(#ImageHeight#**2)))/2)
Y=((SQRT((#ImageWidth#**2)+(#ImageHeight#**2)))/2)
ImageName=#@#Grr.png
DynamicVariables=1
MouseScrollUpAction=[!CommandMeasure MeasureScaleIt "Execute 1"]
MouseScrollDownAction=[!CommandMeasure MeasureScaleIt "Execute 2"]
TransformationMatrix=#Scale#;0;0;#Scale#;((1-#Scale#)*#CenterX#);((1-#Scale#)*#CenterY#)

[MeasureScaleIt]
Measure=Plugin
Plugin=ActionTimer
ActionList1=ScaleUp
ScaleUp=[!SetVariable Scale "(Clamp(#Scale#+0.05,0.2,2))"]#U#
ActionList2=ScaleDown
ScaleDown=[!SetVariable Scale "(Clamp(#Scale#-0.05,0.2,2))"]#U#
DynamicVariables=1

[MeterCenter]
Meter=Image
SolidColor=255,0,0
X=(#CenterX#-1)
Y=(#CenterY#-1)
W=3
H=3
DynamicVariables=1
UpdateDivider=-1

I also set the Update of the skin to Update=-1, because a such mouse controlled skin doesn1t worth to be updated periodically.

[eclectic-tech]

More "Black Magic!"

Nice additions balala!

[balala]

More "Black Magic!"

Nice additions balala!

Thanks eclectic-tech. I'm always glad when you're appreciating my work.

[jsmorley]

Thanks eclectic-tech. I'm always glad when you're appreciating my work.

You were born at the right time, as 200 years ago you would have been burned at the stake...

[balala]

You were born at the right time, as 200 years ago you would have been burned at the stake...

Thanks. You also said this a few times before...