It is currently February 29th, 2020, 3:46 am

Help with Rotating Clock Hands Image

Help with creating, editing & fixing problems with skins
Thoisi
Posts: 2
Joined: February 11th, 2020, 3:05 am

Help with Rotating Clock Hands Image

Post by 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.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 3767
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Help with Rotating Clock Hands Image

Post by 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
You do not have the required permissions to view the files attached to this post.
User avatar
balala
Rainmeter Sage
Posts: 9799
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Help with Rotating Clock Hands Image

Post by balala »

Thoisi wrote:
February 11th, 2020, 3:15 am
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.
User avatar
jsmorley
Developer
Posts: 20297
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Help with Rotating Clock Hands Image

Post by 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
Posts: 2
Joined: February 11th, 2020, 3:05 am

Re: Help with Rotating Clock Hands Image

Post by 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.
User avatar
balala
Rainmeter Sage
Posts: 9799
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Help with Rotating Clock Hands Image

Post by balala »

Thoisi wrote:
February 12th, 2020, 12:32 am
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.
Thoisi wrote:
February 12th, 2020, 12:32 am
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.