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.
It is currently April 23rd, 2024, 1:48 pm
Help with Rotating Clock Hands Image
-
- Posts: 2
- Joined: February 11th, 2020, 3:05 am
-
- Rainmeter Sage
- Posts: 5406
- Joined: April 12th, 2012, 9:40 pm
- Location: Cedar Point, Ohio, USA
Re: Help with Rotating Clock Hands Image
TransformationMatrix is one solution to scale Rotator meters. This may help: Scaling Tip
Modified example clock code: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.
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
You do not have the required permissions to view the files attached to this post.
:: My DA Gallery :: Rainmeter DA Gallery :: Rainmeter Workshops :: Rainmeter Documentation :: BBCode Guide ::
-
- Rainmeter Sage
- Posts: 16162
- Joined: October 11th, 2010, 6:27 pm
- Location: Gheorgheni, Romania
Re: Help with Rotating Clock Hands Image
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.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.
Please pack the config you have so far and upload it, to can take a look.
-
- Developer
- Posts: 22629
- Joined: April 19th, 2009, 11:02 pm
- Location: Fort Hunt, Virginia, USA
Re: Help with Rotating Clock Hands Image
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
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
-
- Posts: 2
- Joined: February 11th, 2020, 3:05 am
Re: Help with Rotating Clock Hands Image
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.
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.
-
- Rainmeter Sage
- Posts: 16162
- Joined: October 11th, 2010, 6:27 pm
- Location: Gheorgheni, Romania
Re: Help with Rotating Clock Hands Image
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.
The code provided by jsmorley works with Shape meters, not at all with images.