It is currently March 28th, 2024, 10:43 am

Rotate Image

Get help with creating, editing & fixing problems with skins
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Rotate Image

Post by xenium »

Hi,
I saw the example of how to Rotate an Image Around its Center from Rainmeter tips.
I would like to know if the following situation is possible:
I have 4 images with bulbs off. It would like the rotation, in the above example, after going through 180 degrees, to stop for 1-2 seconds and the bulb 1 to light up, then the rotation starts again. After 180 degrees again the rotation stops for 1-2 seconds and the bulb 2 turn on, then again to repeat the situation for the other bulbs. In the end all the bulbs will be on and the rotation switched off.
It's possible ?

Thanks
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Rotate Image

Post by balala »

xenium wrote:I would like to know if the following situation is possible:
I have 4 images with bulbs off. It would like the rotation, in the above example, after going through 180 degrees, to stop for 1-2 seconds and the bulb 1 to light up, then the rotation starts again. After 180 degrees again the rotation stops for 1-2 seconds and the bulb 2 turn on, then again to repeat the situation for the other bulbs. In the end all the bulbs will be on and the rotation switched off.
It's possible ?
Probably it is. Do you have the needed images? I suppose you should have both: the images with the bulbs off and with them turned on. Please post them.
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Rotate Image

Post by xenium »

balala wrote:Probably it is. Do you have the needed images? I suppose you should have both: the images with the bulbs off and with them turned on. Please post them.
these are the images:

Image Image
Image Image
Image Image
Image Image
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Rotate Image

Post by balala »

xenium wrote:these are the images:
There are four times the same pair of images. Right?

Here is my first attempt. Usually a such skin should have a very small Update value set in the [Rainmeter] section, to can have an acceptable rotation speed. Instead of this solution, I chosen another one: I've set the Update to -1 (which means the skin is never updated) and have used the very great ActionTimer plugin, which for such cases is very useful.
I chosen to rotate the images with TransformationMatrix options. I admit, it's not too easy, but it has a few advantages (at least in my opinion). Here you have a very good description of how it does work: https://docs.rainmeter.net/tips/transformation-matrix-guide/
First you have to know I've used two images: Off.png and On.png, accordingly. I placed both, in the @Resources folder. If you want to have them anywhere else, just modify the OffBulb and OnBulb variables, within the [Variables] section. When you load the skin, four bulbs are visible, all turned off. If you click the first one, it starts rotating, at 180 degrees stops, turns on, then continues rotating. When it finishes a whole rotation, the skin waits a number of seconds equal with the value of Wait variable (you can modify this variable to get a longer or shorter waiting), then the second bulb starts rotating. Then so on, until the last one finishes a complete rotation. In this moment all bulbs turn off. If you click again the first bulb, the whole process restarts. I know this is a bit different from what you've asked, but I just wanted to make the skin to can restart the whole process, even without a refresh. If you don't like this way, please let me know to can modify the code accordingly.
And finally, here is the code. Please let me know if it does what you'd like.

Code: Select all

[Rainmeter]
Update=-1
AccurateText=1
DynamicWindowSize=1

[Variables]
Rot1=0
Rot2=0
Rot3=0
Rot4=0
W=0
Wait=5
U1=[!UpdateMeasure "MeasureRotate1"][!UpdateMeasure "MeasureBulb1"][!UpdateMeter "MeterBulb1"][!Redraw]
U2=[!UpdateMeasure "MeasureRotate2"][!UpdateMeasure "MeasureBulb2"][!UpdateMeter "MeterBulb2"][!Redraw]
U3=[!UpdateMeasure "MeasureRotate3"][!UpdateMeasure "MeasureBulb3"][!UpdateMeter "MeterBulb3"][!Redraw]
U4=[!UpdateMeasure "MeasureRotate4"][!UpdateMeasure "MeasureBulb4"][!UpdateMeter "MeterBulb4"][!Redraw]
OffBulb=#@#Off.png
OnBulb=#@#On.png

;[MeasureRotate1]
;Measure=Calc
;Formula=( MeasureRotate1 + 5 )
;IfCondition=(#CURRENTSECTION#=180)
;IfTrueAction=[!PauseMeasure "#CURRENTSECTION#"]

[MeasureRotate1]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat On,10,360
On=[!SetVariable Rot1 "(Clamp((#Rot1#+1),0,360))"][!EnableMeasure "MeasureBulb1"]#U1#
ActionList2=Repeat Wait,1000,#Wait#
Wait=[!SetVariable W "(Clamp((#W#+1),0,#Wait#))"]#U1#
IfCondition=(#W#=#Wait#)
IfTrueAction=[!SetVariable W "0"][!CommandMeasure "MeasureRotate1" "Execute 1"][!CommandMeasure "MeasureRotate1" "Stop 2"]#U1#
DynamicVariables=1

[MeasureRotate2]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat On,10,360
On=[!SetVariable Rot2 "(Clamp((#Rot2#+1),0,360))"][!EnableMeasure "MeasureBulb2"]#U2#
ActionList2=Repeat Wait,1000,#Wait#
Wait=[!SetVariable W "(Clamp((#W#+1),0,#Wait#))"]#U2#
IfCondition=(#W#=#Wait#)
IfTrueAction=[!SetVariable W "0"][!CommandMeasure "MeasureRotate2" "Execute 1"][!CommandMeasure "MeasureRotate2" "Stop 2"]#U2#
DynamicVariables=1

[MeasureRotate3]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat On,10,360
On=[!SetVariable Rot3 "(Clamp((#Rot3#+1),0,360))"][!EnableMeasure "MeasureBulb3"]#U3#
ActionList2=Repeat Wait,1000,#Wait#
Wait=[!SetVariable W "(Clamp((#W#+1),0,#Wait#))"]#U3#
IfCondition=(#W#=#Wait#)
IfTrueAction=[!SetVariable W "0"][!CommandMeasure "MeasureRotate3" "Execute 1"][!CommandMeasure "MeasureRotate3" "Stop 2"]#U3#
DynamicVariables=1

[MeasureRotate4]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat On,10,360
On=[!SetVariable Rot4 "(Clamp((#Rot4#+1),0,360))"][!EnableMeasure "MeasureBulb4"]#U4#
ActionList2=Repeat Wait,1000,#Wait#
Wait=[!SetVariable W "(Clamp((#W#+1),0,#Wait#))"]#U4#
IfCondition=(#W#=#Wait#)
IfTrueAction=[!SetVariable W "0"][!CommandMeasure "MeasureRotate4" "Execute 1"][!CommandMeasure "MeasureRotate4" "Stop 2"]#U4#
DynamicVariables=1

[MeasureBulb1]
Measure=Calc
Formula=#Rot1#
IfCondition=(#CURRENTSECTION#=180)
IfTrueAction=[!CommandMeasure "MeasureRotate1" "Stop 1"][!CommandMeasure "MeasureRotate1" "Execute 2"][!SetOption MeterBulb1 ImageName "#OnBulb#"]#U1#
IfCondition2=(#CURRENTSECTION#=360)
IfTrueAction2=[!CommandMeasure "MeasureRotate1" "Stop 1"][!CommandMeasure "MeasureRotate2" "Execute 1"][!UpdateMeter "MeterBulb1"][!Redraw]
DynamicVariables=1
Disabled=1

[MeasureBulb2]
Measure=Calc
Formula=#Rot2#
IfCondition=(#CURRENTSECTION#=180)
IfTrueAction=[!CommandMeasure "MeasureRotate2" "Stop 1"][!CommandMeasure "MeasureRotate2" "Execute 2"][!SetOption MeterBulb2 ImageName "#OnBulb#"]#U2#
IfCondition2=(#CURRENTSECTION#=360)
IfTrueAction2=[!CommandMeasure "MeasureRotate2" "Stop 1"][!CommandMeasure "MeasureRotate3" "Execute 1"][!UpdateMeter "MeterBulb2"][!Redraw]
DynamicVariables=1
Disabled=1

[MeasureBulb3]
Measure=Calc
Formula=#Rot3#
IfCondition=(#CURRENTSECTION#=180)
IfTrueAction=[!CommandMeasure "MeasureRotate3" "Stop 1"][!CommandMeasure "MeasureRotate3" "Execute 2"][!SetOption MeterBulb3 ImageName "#OnBulb#"]#U3#
IfCondition2=(#CURRENTSECTION#=360)
IfTrueAction2=[!CommandMeasure "MeasureRotate3" "Stop 1"][!CommandMeasure "MeasureRotate4" "Execute 1"][!UpdateMeter "MeterBulb3"][!Redraw]
DynamicVariables=1
Disabled=1

[MeasureBulb4]
Measure=Calc
Formula=#Rot4#
IfCondition=(#CURRENTSECTION#=180)
IfTrueAction=[!CommandMeasure "MeasureRotate4" "Stop 1"][!CommandMeasure "MeasureRotate4" "Execute 2"][!SetOption MeterBulb4 ImageName "#OnBulb#"]#U4#
IfCondition2=(#CURRENTSECTION#=360)
IfTrueAction2=[!CommandMeasure "MeasureRotate4" "Stop 1"][!SetOption MeterBulb1 ImageName "#OffBulb#"][!SetOption MeterBulb2 ImageName "#OffBulb#"][!SetOption MeterBulb3 ImageName "#OffBulb#"][!SetOption MeterBulb4 ImageName "#OffBulb#"][!SetVariable Rot1 "0"][!SetVariable Rot2 "0"][!SetVariable Rot3 "0"][!SetVariable Rot4 "0"][!UpdateMeter "MeterBulb1"][!UpdateMeter "MeterBulb2"][!UpdateMeter "MeterBulb3"][!UpdateMeter "MeterBulb4"]#U1##U2##U3##U4#
DynamicVariables=1
Disabled=1

[MeterBulb1]
Meter=Image
ImageName=#OffBulb#
X=150
Y=20
TransformationMatrix=(Cos(Rad(#Rot1#)));(-Sin(Rad(#Rot1#)));(Sin(Rad(#Rot1#)));(Cos(Rad(#Rot1#)));(([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)-([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)*Cos(Rad(#Rot1#))-([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)*Sin(Rad(#Rot1#)));(([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)+([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)*Sin(Rad(#Rot1#))-([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)*Cos(Rad(#Rot1#)))
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure "MeasureRotate1" "Execute 1"]

[MeterBulb2]
Meter=Image
ImageName=#OffBulb#
X=90r
Y=0r
TransformationMatrix=(Cos(Rad(#Rot2#)));(-Sin(Rad(#Rot2#)));(Sin(Rad(#Rot2#)));(Cos(Rad(#Rot2#)));(([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)-([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)*Cos(Rad(#Rot2#))-([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)*Sin(Rad(#Rot2#)));(([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)+([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)*Sin(Rad(#Rot2#))-([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)*Cos(Rad(#Rot2#)))
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure "MeasureRotate2" "Execute 1"]

[MeterBulb3]
Meter=Image
ImageName=#OffBulb#
X=90r
Y=0r
TransformationMatrix=(Cos(Rad(#Rot3#)));(-Sin(Rad(#Rot3#)));(Sin(Rad(#Rot3#)));(Cos(Rad(#Rot3#)));(([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)-([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)*Cos(Rad(#Rot3#))-([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)*Sin(Rad(#Rot3#)));(([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)+([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)*Sin(Rad(#Rot3#))-([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)*Cos(Rad(#Rot3#)))
DynamicVariables=1

[MeterBulb4]
Meter=Image
ImageName=#OffBulb#
X=90r
Y=0r
TransformationMatrix=(Cos(Rad(#Rot4#)));(-Sin(Rad(#Rot4#)));(Sin(Rad(#Rot4#)));(Cos(Rad(#Rot4#)));(([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)-([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)*Cos(Rad(#Rot4#))-([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)*Sin(Rad(#Rot4#)));(([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)+([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)*Sin(Rad(#Rot4#))-([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)*Cos(Rad(#Rot4#)))
DynamicVariables=1
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Rotate Image

Post by xenium »

balala wrote: Please let me know if it does what you'd like.
First I would like to congratulate you for the work done, the result is amazing.
Although not what I wanted, I will use this example for a future skin.
The mistake is mine because I have not been able to explain clearly what they want.
When I saw the example of how to Rotate an Image around her Center from Rainmeter tips, I had in my mind just what I wanted to do, but the written expression was not clear.
My apologies!
I will summarize again, I hope to be clear this time:
Imagine an analogue clock only with second hand.
The 4 bulbs have a fixed position, for example one at 12 o'clock, one at 3 o'clock, one at 6 o'clock and one at 9 o'clock.
When you click on the bulb at 12 o'clock, the second hand runs 180 degrees stops for 1-2 seconds and the first light comes on. The second hand goes on and after 180 degrees it stops again for 1-2 seconds and second bulb illuminates. Then start again and repeat the procedure until the other two bulbs light up. Finally, the second hand is switched off and the four bulbs remain on.
By refreshing, the lights go out and the procedure restarts again
That's what I'd like
Sorry for my bad English.
Again, I apologize for misunderstanding.
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Rotate Image

Post by balala »

I'm glad if you like it.
What you've described here is definitely also possible, but still don't know something. At the very first moment, where the seconds hand should be? Then, the bulbs should turn on when the hand gets to them, or each 15 seconds after the hand starts walking?
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Rotate Image

Post by xenium »

balala wrote:I'm glad if you like it.
What you've described here is definitely also possible, but still don't know something. At the very first moment, where the seconds hand should be? Then, the bulbs should turn on when the hand gets to them, or each 15 seconds after the hand starts walking?
so I want to show the final skin with the bulbs off::
Image

image with circle frame:
Image


the frame begins to rotate when it clicks on the bulb at 12 o'clock, passes 180 degrees and stops for 1-2 seconds, the bulb at 12 o'clock turns on. The frame starts spinning again 180 degrees stops 1-2 seconds and the bulb at 3 o'clock turns on. The frame starts spinning again 180 degrees, stops for 1-2 seconds and the bulb at 6 o'clock turns on.
The frame starts spinning again 180 degrees stops 1-2 seconds and the bulb at 9 o'clock turns on.
At the end the frame is switched off and the four bulbs remain on.
By refresh, the bulbs turn off and the process starts again when you click on the bulb at 12 o'clock

I hope the third time is lucky! :D
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Rotate Image

Post by balala »

xenium wrote:the frame begins to rotate when it clicks on the bulb at 12 o'clock, passes 180 degrees and stops for 1-2 seconds, the bulb at 12 o'clock turns on. The frame starts spinning again 180 degrees stops 1-2 seconds and the bulb at 3 o'clock turns on. The frame starts spinning again 180 degrees, stops for 1-2 seconds and the bulb at 6 o'clock turns on.
The frame starts spinning again 180 degrees stops 1-2 seconds and the bulb at 9 o'clock turns on.
At the end the frame is switched off and the four bulbs remain on.
By refresh, the bulbs turn off and the process starts again when you click on the bulb at 12 o'clock
Second attempt. I rewrote a lot of things on the code. Please take care the followings:
  • The Radius variable ([Variables] section) is the radius of the circle where the bulbs are placed. Changing it will increase / decrease the size of the skin. However a smaller value then 150 (or maybe 125?) isn't good to be used. Try it and you'll see why.
  • The Wait variable is the waiting time while the spinning of the frame is stoped (in seconds).
  • The RotP variable represents a measurement of the rotation speed. However take care that's not exactly the speed of the rotation: increasing it, decreases the rotation speed and vice-vers: decreasing it, increases the rotation speed. Its value represents the waiting time between two consecutive change of angle of rotation. 10 for example means that the angle of rotation changes with 1 degree every 10 milliseconds.
  • BulbOff and BulbOn are the same variables as in the previous code.
I also saved the image of the frame as Frame.png and placed it into the @Resources folder (near Off.png and On.png).
The code:

Code: Select all

[Rainmeter]
Update=-1
AccurateText=1
OnRefreshAction=[!CommandMeasure "MeasureRotate" "Stop 1"]

[Variables]
OffBulb=#@#Off.png
OnBulb=#@#On.png
Radius=150
Rot=0
RotP=10
W=0
Wait=2
UR=[!UpdateMeasure "MeasureRotate"][!UpdateMeter "MeterFrame"][!Redraw]
UW=[!UpdateMeasure "MeasureWait"]

[MeasureRotate]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat Rotation,#RotP#,720
Rotation=[!SetVariable Rot "(Clamp((#Rot#+1),0,720))"]#UR#
IfCondition=(#Rot#=180)
IfTrueAction=[!SetOption MeterBulb12 ImageName "#OnBulb#"][!CommandMeasure "MeasureRotate" "Stop 1"][!CommandMeasure "MeasureWait" "Execute 1"][!UpdateMeasure "MeasureWait"][!UpdateMeter "MeterBulb12"][!Redraw]
IfCondition2=(#Rot#=360)
IfTrueAction2=[!SetOption MeterBulb3 ImageName "#OnBulb#"][!CommandMeasure "MeasureRotate" "Stop 1"][!CommandMeasure "MeasureWait" "Execute 1"][!UpdateMeasure "MeasureWait"][!UpdateMeter "MeterBulb3"][!Redraw]
IfCondition3=(#Rot#=540)
IfTrueAction3=[!SetOption MeterBulb6 ImageName "#OnBulb#"][!CommandMeasure "MeasureRotate" "Stop 1"][!CommandMeasure "MeasureWait" "Execute 1"][!UpdateMeasure "MeasureWait"][!UpdateMeter "MeterBulb6"][!Redraw]
IfCondition4=(#Rot#=720)
IfTrueAction4=[!SetOption MeterBulb9 ImageName "#OnBulb#"][!CommandMeasure "MeasureRotate" "Stop 1"][!CommandMeasure "MeasureWait" "Execute 1"][!UpdateMeasure "MeasureWait"][!UpdateMeter "MeterBulb9"][!Redraw]
DynamicVariables=1

[MeasureWait]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat Wait,1000,3*#Wait#
Wait=[!SetVariable W "(Clamp((#W#+1),0,3*#Wait#))"]#UW#
IfCondition=(#W#%#Wait#=0)
IfTrueAction=[!CommandMeasure "MeasureWait" "Stop 1"][!CommandMeasure "MeasureRotate" "Execute 1"]
DynamicVariables=1

[MeterBulb3]
Meter=Image
ImageName=#OffBulb#
X=(#Radius#+#Radius#*Cos(0))
Y=(#Radius#+#Radius#*Sin(0))

[MeterBulb6]
Meter=Image
ImageName=#OffBulb#
X=(#Radius#+#Radius#*Cos(PI/2))
Y=(#Radius#+#Radius#*Sin(PI/2))

[MeterBulb9]
Meter=Image
ImageName=#OffBulb#
X=(#Radius#+#Radius#*Cos(PI))
Y=(#Radius#+#Radius#*Sin(PI))

[MeterBulb12]
Meter=Image
ImageName=#OffBulb#
X=(#Radius#+#Radius#*Cos(3*PI/2))
Y=(#Radius#+#Radius#*Sin(3*PI/2))
LeftMouseUpAction=[!CommandMeasure "MeasureRotate" "Execute 1"]

[MeterFrame]
Meter=Image
ImageName=#@#Frame.png
X=(90-2*90/3+15)
Y=(90-2*90/3+15)
W=(2*#Radius#)
H=(2*#Radius#)
PreserveAspectRatio=1
TransformationMatrix=(Cos(Rad(#Rot#)));(-Sin(Rad(#Rot#)));(Sin(Rad(#Rot#)));(Cos(Rad(#Rot#)));(([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)-([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)*Cos(Rad(#Rot#))-([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)*Sin(Rad(#Rot#)));(([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)+([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)*Sin(Rad(#Rot#))-([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)*Cos(Rad(#Rot#)))
DynamicVariables=1
If you want to rotate the frame clockwise, just replace each occurrence of the #Rot# variable in the TransformationMatrix option of the [MeterFrame] meter with -#Rot#.
How does this code work now?
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Rotate Image

Post by xenium »

balala wrote: How does this code work now?
That's it !!! :17good
It's exactly what I wanted.
My congratulations for the work you have done :bow:
Thank you very much for your help !
:welcome: :welcome:
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Rotate Image

Post by balala »

You're welcome. And I also thanks for the congratulations.
Post Reply