It is currently March 29th, 2024, 1:43 am

How do I make an image go up and down smoothly?

Get help with creating, editing & fixing problems with skins
RANDOMDUDE
Posts: 4
Joined: June 30th, 2019, 12:38 am

How do I make an image go up and down smoothly?

Post by RANDOMDUDE »

Hello, I am new to rainmeter and I don't know how to make an image go up and down smoothly. What I am trying to achieve is to make a weather cloud image (the one where it shows if there is thunderstorm or sunny day) to go up and down in 2 seconds
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: How do I make an image go up and down smoothly?

Post by balala »

RANDOMDUDE wrote: July 2nd, 2019, 11:25 am I don't know how to make an image go up and down smoothly.
You have to change the Y position of the meter, through a properly written formula.
For example, for a less smoothly movement, here is an example:

Code: Select all

[Rainmeter]
Update = 1000

[Variables]

[MeasureY]
Measure=Calc
Formula=( 1 - MeasureY )

[MeterImage]
Meter=Image
Solidcolor=255,0,0
X=0
Y=(10*[MeasureY])
W=50
H=50
DynamicVariables=1
Note that here I used a solid red color instead of the image, you have to replace the SolidColor option of the [MeterImage] meter with probably a MeasureName option. The Y position of the meter is established by the value returned by the [MeasureY] measure (this is multiplied by 10, for much more visible movement - you can change this value to set the amplitude of the movement).
As I said, this isn't a quite smoothly movement. To smoother it, you'll need another formula, for instance using a Sinus function.
For a such function, replace the Formula option of the [MeasureY] measure with the following one: Formula=( Sin ( 2 * PI * (( COUNTER % 100 ) / 100 ))). You also will have to add a constant term to the Y option of the [MeterImage] meter, to can keep the Y position of the meter on the positive range. Replace the mentioned option with the following one: Y=(10*[MeasureY]+10). This requires to reduce the Update value of the skin to Update=25 (or something like this), within the [Rainmeter] section.
Take care, if you did this and your skin uses WebParser measures to get the icon, you will also have to increase the UpdateRate option of the parent WebParser measure, to not get banned by the weather forecast provider.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5384
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: How do I make an image go up and down smoothly?

Post by eclectic-tech »

RANDOMDUDE wrote: July 2nd, 2019, 11:25 am Hello, I am new to rainmeter and I don't know how to make an image go up and down smoothly. What I am trying to achieve is to make a weather cloud image (the one where it shows if there is thunderstorm or sunny day) to go up and down in 2 seconds
Besides balala's method, you could use the ActionTimer plugin. It is designed specifically to take actions as fast as possible while not updating the entire skin.

One caveat, is that it does use resources while taking the actions so should not be used for continuous motion.

This code will move the red square up 25 pixels and back down 25 pixels when you click the left mouse button on the image.

Code: Select all

[Rainmeter]
Update = 1000

[Variables]
YPosition1=25

[MeasureActionTimer]
; Measure=Calc
; Formula=( 1 - MeasureY )
Measure=Plugin
Plugin=ActionTimer
DynamicVariables=1

ActionList1=Repeat MoveUp, 50, 26 | Repeat MoveDown, 50, 26
;ActionList2=
MoveUp=[!SetVariable YPosition1 (Clamp(#YPosition1#-1,0,25))][!UpdateMeasure #CurrentSection#][!UpdateMeter *][!Redraw]
MoveDown=[!SetVariable YPosition1 (Clamp(#YPosition1#+1,0,25))][!UpdateMeasure #CurrentSection#][!UpdateMeter *][!Redraw]

; Documentation: https://docs.rainmeter.net/manual-beta/plugins/actiontimer/

[MeterImage]
Meter=Image
Solidcolor=255,0,0
X=0
Y=#YPosition1#
;(10*[MeasureY])
W=50
H=50
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureActionTimer "Stop 1"][!CommandMeasure MeasureActionTimer "Stop 2"][!CommandMeasure MeasureActionTimer "Execute 1"]

updown.gif
You do not have the required permissions to view the files attached to this post.
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: How do I make an image go up and down smoothly?

Post by balala »

eclectic-tech wrote: July 2nd, 2019, 5:31 pm Besides balala's method, you could use the ActionTimer plugin. It is designed specifically to take actions as fast as possible while not updating the entire skin.
Yes, definitely much better solution :thumbup: . I just didn't want to enter directly into using the ActionTimer plugin.
RANDOMDUDE
Posts: 4
Joined: June 30th, 2019, 12:38 am

Re: How do I make an image go up and down smoothly?

Post by RANDOMDUDE »

Thanks, I will use it continuously though :( It will eat my cpu alive, is there better solutions to this? If not, thanks so much for your help devs.
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: How do I make an image go up and down smoothly?

Post by balala »

RANDOMDUDE wrote: July 3rd, 2019, 11:59 am It will eat my cpu alive,
I doubt any of the posted solutions would do this. Which one are you talking about?
RANDOMDUDE
Posts: 4
Joined: June 30th, 2019, 12:38 am

Re: How do I make an image go up and down smoothly?

Post by RANDOMDUDE »

Oh, forgot to mention that. I was talking about eclectic-tech's answer. Thanks for helping me out :D
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: How do I make an image go up and down smoothly?

Post by balala »

RANDOMDUDE wrote: July 4th, 2019, 12:16 pm I was talking about eclectic-tech's answer.
When using the ActionTimer plugin, usually there are no such problems. The skins in most cases are running without loading too much the CPU. Have you got it finally to work well?
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5384
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: How do I make an image go up and down smoothly?

Post by eclectic-tech »

RANDOMDUDE wrote: July 3rd, 2019, 11:59 am Thanks, I will use it continuously though :( It will eat my cpu alive, is there better solutions to this? If not, thanks so much for your help devs.
For simple animation of most meters you should not have any issues. As the number of animated meters increases (or the size of the image increases) more CPU cycles will be needed.

Just as an alternate option, a Loop measure may be a better choice for simple movements. Here is a sample. Pay attention to the DefaultUpdateDivider in the [Rainmeter] section so the only parts of the skin using the low update rate are the animations.

Code: Select all

[Rainmeter]
; Rate needed for faster actions
Update=25
DynamicWindowSize=1
AccurateText=1
; Sets the overall skin update rate back to 1000 ms
DefaultUpdateDivider=40

[Variables]
Start=0
End=25
Incr=1

[MeasureLoop]
Measure=Loop
StartValue=#Start#
EndValue=#End#
Increment=#Incr#
LoopCount=0
; Set the update divider to 1 for all action measures and meters
UpdateDivider=1

[MeasurePingPong]
Measure=Calc
IfCondition=MeasureLoop >= #End#
IfTrueAction=[!SetOption MeasureLoop InvertMeasure 1][!UpdateMeasure MeasureLoop]
IfCondition2=MeasureLoop <= #Start#
IfTrueAction2=[!SetOption MeasureLoop InvertMeasure 0][!UpdateMeasure MeasureLoop]
; Set the update divider to 1 for all action measures and meters
UpdateDivider=1

[MeterImage]
Meter=Image
Y=(25-[MeasureLoop:])
W=50
H=50
SolidColor=255,0,0,255
DynamicVariables=1
; Set the update divider to 1 for all action measures and meters
UpdateDivider=1
pingpong50.gif
You do not have the required permissions to view the files attached to this post.
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: How do I make an image go up and down smoothly?

Post by balala »

eclectic-tech wrote: July 5th, 2019, 1:18 pm Just as an alternate option, a Loop measure may be a better choice for simple movements. Here is a sample. Pay attention to the DefaultUpdateDivider in the [Rainmeter] section so the only parts of the skin using the low update rate are the animations.
I doubt a code with such a low Update (Update=25 in this case) is using less resources then the code with default update, working with the ActionTimer plugin. I simply doubt this. From my experience, I can say the codes working with ActionTimer measures are most efficient ones.