Help with Rotating Clock Hands Image

[Thoisi]

I am trying to make my own custom clock display but I am having trouble centering and resizing my clock hands.

How can I make a PNG image rotate on a custom axis while also being able to resize the image to my liking?
I have a PNG of a clock hand and I am using "MeasureName=MeasureRotate" to create the clock "ticking"

I can get my PNG to rotate by setting "Meter=Rotator" but this removes my ability to resize.
When I initialize it as "Meter=Image" I lose all functionality of the rotation.

Any Ideas will be appreciated.

[eclectic-tech]

TransformationMatrix is one solution to scale Rotator meters. This may help: Scaling Tip

Modified example clock code:

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1

[Variables]
Scaler=1.0
ImageW=110
ImageH=116
MaxDiameter=(SQRT(#ImageW# ** 2 + #ImageH# ** 2))
ImageSW=(#ImageW#*#Scaler#)
ImageSH=(#ImageH#*#Scaler#)
; To use with a different image, change the ImageW & ImageH 'numbers' to match your image size

[MeasureTime]
Measure=Time

; Background meter used to detect mouse actions
[MeterBG]
Meter=Image
SolidColor=0,0,0,1
X=#ImageW#
Y=#ImageH#
W=(#MaxDiameter#*#Scaler#)
H=(#MaxDiameter#*#Scaler#)
MouseScrollUpAction=[!SetVariable Scaler (Clamp(#Scaler#+0.1,0.5,2.9))][!UpdateMeter *][!Redraw]
MouseScrollDownAction=[!SetVariable Scaler (Clamp(#Scaler#-0.1,0.5,2.9))][!UpdateMeter *][!Redraw]
MiddleMouseUpACtion=[!SetVariable Scaler 1][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeterClockFace]
Meter=Image
ImageName=#@#Images\ClockFace.png
X=#ImageW#
Y=#ImageH#
W=#ImageW#
H=#ImageH#
TransformationMatrix=#Scaler#;0;0;#Scaler#;((1-#Scaler#)*([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2));((1-#Scaler#)*([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2))
DynamicVariables=1

[MeterHoursHand]
Meter=ROTATOR
MeasureName=MeasureTime
X=#ImageW#
Y=#ImageH#
W=#ImageW#
H=#ImageH#
ImageName=#@#Images\Hours.png
OffsetX=3
OffsetY=3
StartAngle=4.7124
RotationAngle=6.2832
ValueRemainder=43200
TransformationMatrix=#Scaler#;0;0;#Scaler#;((1-#Scaler#)*([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2));((1-#Scaler#)*([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2))
DynamicVariables=1

[MeterMinutesHand]
Meter=ROTATOR
MeasureName=MeasureTime
X=#ImageW#
Y=#ImageH#
W=#ImageW#
H=#ImageH#
ImageName=#@#Images\Minutes.png
OffsetX=3
OffsetY=3
StartAngle=4.7124
RotationAngle=6.2832
ValueRemainder=3600
TransformationMatrix=#Scaler#;0;0;#Scaler#;((1-#Scaler#)*([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2));((1-#Scaler#)*([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2))
DynamicVariables=1

[MeterSecondsHand]
Meter=ROUNDLINE
MeasureName=MeasureTime
X=#ImageW#
Y=#ImageH#
W=#ImageW#
H=#ImageH#
LineLength=52
LineColor=247,220,129,255
LineWidth=2
AntiAlias=1
StartAngle=4.7124
RotationAngle=6.2832
ValueRemainder=60
TransformationMatrix=#Scaler#;0;0;#Scaler#;((1-#Scaler#)*([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2));((1-#Scaler#)*([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2))
DynamicVariables=1

This matrix scales the meters from their center point from 0.5 to ~3X scale. Scaling beyond this value would require setting the initial skin Width/Height large enough to prevent clipping.

clockscale.gif

[balala]

How can I make a PNG image rotate on a custom axis while also being able to resize the image to my liking?
I have a PNG of a clock hand and I am using "MeasureName=MeasureRotate" to create the clock "ticking"

I can get my PNG to rotate by setting "Meter=Rotator" but this removes my ability to resize.
When I initialize it as "Meter=Image" I lose all functionality of the rotation.

There are more possibilities. The simplest one is that one suggested by eclectic-tech. Another (much more complicated, however not impossible) would be to use an Image meter instead of a Rotator and properly create the TransformationMatrix in a way to get it both rotated and resized. Even if the math behind is not too simple, believe me it can be done.
Please pack the config you have so far and upload it, to can take a look.

[jsmorley]

I am not a huge fan of TransformationMatrix for anything that involves "images", as images don't scale very gracefully, and will get "jaggy / fuzzy" if you scale them up.

I'd be tempted to look at the Shape meter for this...

https://forum.rainmeter.net/viewtopic.php?f=5&t=24448&start=10#p129705

[Thoisi]

Thank you for your responses. I looked into the TransformationMatrix and it looks like a very possible solution but also a complicated one at that.
I peered into the link jsmorley provided and it was exactly what I was looking for. I changed the code to use my own images and it worked the way I pictured it.

[balala]

I looked into the TransformationMatrix and it looks like a very possible solution but also a complicated one at that.

No, it isn't at all such complicated as it seems at a first look. In fact TransformationMatrix is a quite powerful tool, which additionally can be applied on any kind of meter.

I changed the code to use my own images and it worked the way I pictured it.

The code provided by jsmorley works with Shape meters, not at all with images.