It is currently March 29th, 2024, 3:11 pm

Sliding image

Get help with creating, editing & fixing problems with skins
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Sliding image

Post by balala »

xenium wrote:But at a small sliding speed of the small panel, the text and the icons appear in advance when the panel slides out and remains behind when the panel slips back.
I don't think. See jsmorley's example above.
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Sliding image

Post by xenium »

jsmorley wrote:Perhaps this will shed some light...

Code: Select all

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

[Variables]
Offset=0
U=[!UpdateMeasureGroup Sliders][!UpdateMeterGroup Sliders][!Redraw]
Wait=1
RAction=[!CommandMeasure MeasureSlider "Stop 2"][!CommandMeasure MeasureSlider "Execute 1"][!SetOption MeterSliderBar LeftMouseUpAction """#LAction#"""] 
LAction=[!CommandMeasure MeasureSlider "Stop 1"][!CommandMeasure MeasureSlider "Execute 2"][!SetOption MeterSliderBar LeftMouseUpAction """#RAction#"""]

[MeterSliderBar]
Group=Sliders
Meter=Image
X=(400 + #Offset#)
Y=50
W=10
H=150
SolidColor=150,150,150,255
DynamicVariables=1
LeftMouseUpAction=#RAction#

[MeterSmallPanel]
Group=Sliders
Meter=Image
X=(100 + #Offset#)
Y=50
W=300
H=150
SolidColor=60,60,60,255
DynamicVariables=1

[MeterSomeText1]
Group=Sliders
Meter=String
X=(115 + #Offset#)
Y=85
FontSize=13
FontWeight=400
FontColor=255,255,255,255
AntiAlias=1
DynamicVariables=1
Text=String Meter 1

[MeterSomeText2]
Group=Sliders
Meter=String
X=(115 + #Offset#)
Y=10R
FontSize=13
FontWeight=400
FontColor=255,255,255,255
AntiAlias=1
DynamicVariables=1
Text=String Meter 2

[MeterSomeText3]
Group=Sliders
Meter=String
X=(115 + #Offset#)
Y=10R
FontSize=13
FontWeight=400
FontColor=255,255,255,255
AntiAlias=1
DynamicVariables=1
Text=String Meter 3

[MeterSomeImage]
Group=Sliders
Meter=Image
ImageName=#@#Images\44.png
X=(250 + #Offset#)
Y=55
DynamicVariables=1

[MeterBigPanel]
Meter=Image
W=400
H=250
SolidColor=47,47,47,255

[MeasureSlider]
Group=Sliders
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat Right, #Wait#, 31
Right=[!SetVariable Offset "(Clamp(#Offset#+10,0,300))"]#U#
ActionList2=Repeat Left, #Wait#, 31
Left=[!SetVariable Offset "(Clamp(#Offset#-10,0,300))"]#U#
DynamicVariables=1
Click to Animate:
gif.gif

And if we make the [MeterBigPanel] image slightly transparent, we can see the man behind the curtain...

Click to Animate:
gif2.gif
It works! :17good :17drums
Thank you very much for your help !
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Sliding image

Post by xenium »

Hi,
I would like to know how to fill in the code below to make the following situation possible:

I have text A, B and C and three images 1, 2 and 3 (the images have the same position)
When I click on A, image 1 slides to the left when I click on A again, image 1 slides back
When I click B, image 2 slides to the left, when I click B again, image 2 slides back
Same for C and image 3
Repeat: All three images will have the same position

The code below works for A with image 1

Thank you

Code: Select all

 [Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
SkinWidth=210



[Variables]
OffSet=210
State=1
U=[!UpdateMeasure MeasureSlider][!UpdateMeter "Meter1"][!Redraw]


[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideLeft, 2, 22
SlideLeft=[!SetVariable State "2"][!SetVariable OffSet "(Clamp(#OffSet#-9,0,210))"]#U#
ActionList2=Repeat SlideRight, 2, 22
SlideRight=[!SetVariable State "1"][!SetVariable OffSet "(Clamp(#OffSet#+9,0,210))"]#U#
DynamicVariables=1


[BG]
Meter=Image
ImageName=#@#bg.png
X=0
Y=0


[Meter1]
Meter=Image
ImageName=#@#1.png
X=#OffSet#
Y=20
W=203
H=240
DynamicVariables=1


[MeterA]
Meter=String
X=10
Y=50
W=50
H=30
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
FontSize=12
Text=A
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #State#"]




[Meter2]
Meter=Image
ImageName=#@#2.png
X=#OffSet#
Y=20
W=203
H=240
DynamicVariables=1


[MeterB]
Meter=String
X=10
Y=90
W=50
H=30
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
FontSize=12
Text=B
DynamicVariables=1
LeftMouseUpAction=

[Meter3]
Meter=Image
ImageName=#@#3.png
X=#OffSet#
Y=20
W=203
H=240
DynamicVariables=1


[MeterC]
Meter=String
X=10
Y=130
W=50
H=30
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
FontSize=12
Text=C
DynamicVariables=1
LeftMouseUpAction=


User avatar
eclectic-tech
Rainmeter Sage
Posts: 5384
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Sliding image

Post by eclectic-tech »

I didn't have your images, but using some of mine, here is one solution...

Code: Select all

 [Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
SkinWidth=210



[Variables]
OffSet1=210
OffSet2=210
OffSet3=210
StateA=1
StateB=3
StateC=5
U1=[!UpdateMeasure MeasureSlider][!UpdateMeter "Meter1"][!Redraw]
U2=[!UpdateMeasure MeasureSlider][!UpdateMeter "Meter2"][!Redraw]
U3=[!UpdateMeasure MeasureSlider][!UpdateMeter "Meter3"][!Redraw]


[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideLeft1, 2, 22 | ChangeToState2
SlideLeft1=[!SetVariable OffSet1 "(Clamp(#OffSet1#-10,0,210))"]#U1#
ChangeToState2=[!SetVariable StateA 2]
ActionList2=Repeat SlideRight1, 2, 22 | ChangeToState1
SlideRight1=[!SetVariable OffSet1 "(Clamp(#OffSet1#+10,0,210))"]#U1#
ChangeToState1=[!SetVariable StateA 1]

ActionList3=Repeat SlideLeft2, 2, 22 | ChangeToState4
SlideLeft2=[!SetVariable OffSet2 "(Clamp(#OffSet2#-10,0,210))"]#U2#
ChangeToState4=[!SetVariable StateB 4]
ActionList4=Repeat SlideRight2, 2, 22 | ChangeToState3
SlideRight2=[!SetVariable OffSet2 "(Clamp(#OffSet2#+10,0,210))"]#U2#
ChangeToState3=[!SetVariable StateB 3]

ActionList5=Repeat SlideLeft3, 2, 22 | ChangeToState6
SlideLeft3=[!SetVariable OffSet3 "(Clamp(#OffSet3#-10,0,210))"]#U3#
ChangeToState6=[!SetVariable StateC 6]
ActionList6=Repeat SlideRight3, 2, 22 | ChangeToState5
SlideRight3=[!SetVariable OffSet3 "(Clamp(#OffSet3#+10,0,210))"]#U3#
ChangeToState5=[!SetVariable StateC 5]

DynamicVariables=1


[BG]
Meter=Image
;ImageName=#@#bg.png
SolidColor=0,0,0,100
X=0
Y=0
W=210
H=260

[Meter1]
Meter=Image
ImageName=1.png
ImagePath=#@#Images\Numbers
X=#OffSet1#
Y=20
W=203
H=240
DynamicVariables=1


[MeterA]
Meter=String
X=10
Y=50
W=50
H=30
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
FontSize=12
Text=A
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #StateA#"]
SolidColor=0,0,0,1



[Meter2]
Meter=Image
ImageName=2.png
ImagePath=#@#Images\Numbers
X=#OffSet2#
Y=20
W=203
H=240
DynamicVariables=1


[MeterB]
Meter=String
X=10
Y=90
W=50
H=30
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
FontSize=12
Text=B
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #StateB#"]
SolidColor=0,0,0,1

[Meter3]
Meter=Image
ImageName=3.png
ImagePath=#@#Images\Numbers
X=#OffSet3#
Y=20
W=203
H=240
DynamicVariables=1


[MeterC]
Meter=String
X=10
Y=130
W=50
H=30
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
FontSize=12
Text=C
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #StateC#"]
SolidColor=0,0,0,1


You will need to change the image names back to yours, but that won't effect the actions.
3slides.gif
You do not have the required permissions to view the files attached to this post.
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Sliding image

Post by xenium »

eclectic-tech wrote:I didn't have your images, but using some of mine, here is one solution...

Code: Select all

 [Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
SkinWidth=210



[Variables]
OffSet1=210
OffSet2=210
OffSet3=210
StateA=1
StateB=3
StateC=5
U1=[!UpdateMeasure MeasureSlider][!UpdateMeter "Meter1"][!Redraw]
U2=[!UpdateMeasure MeasureSlider][!UpdateMeter "Meter2"][!Redraw]
U3=[!UpdateMeasure MeasureSlider][!UpdateMeter "Meter3"][!Redraw]


[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideLeft1, 2, 22 | ChangeToState2
SlideLeft1=[!SetVariable OffSet1 "(Clamp(#OffSet1#-10,0,210))"]#U1#
ChangeToState2=[!SetVariable StateA 2]
ActionList2=Repeat SlideRight1, 2, 22 | ChangeToState1
SlideRight1=[!SetVariable OffSet1 "(Clamp(#OffSet1#+10,0,210))"]#U1#
ChangeToState1=[!SetVariable StateA 1]

ActionList3=Repeat SlideLeft2, 2, 22 | ChangeToState4
SlideLeft2=[!SetVariable OffSet2 "(Clamp(#OffSet2#-10,0,210))"]#U2#
ChangeToState4=[!SetVariable StateB 4]
ActionList4=Repeat SlideRight2, 2, 22 | ChangeToState3
SlideRight2=[!SetVariable OffSet2 "(Clamp(#OffSet2#+10,0,210))"]#U2#
ChangeToState3=[!SetVariable StateB 3]

ActionList5=Repeat SlideLeft3, 2, 22 | ChangeToState6
SlideLeft3=[!SetVariable OffSet3 "(Clamp(#OffSet3#-10,0,210))"]#U3#
ChangeToState6=[!SetVariable StateC 6]
ActionList6=Repeat SlideRight3, 2, 22 | ChangeToState5
SlideRight3=[!SetVariable OffSet3 "(Clamp(#OffSet3#+10,0,210))"]#U3#
ChangeToState5=[!SetVariable StateC 5]

DynamicVariables=1


[BG]
Meter=Image
;ImageName=#@#bg.png
SolidColor=0,0,0,100
X=0
Y=0
W=210
H=260

[Meter1]
Meter=Image
ImageName=1.png
ImagePath=#@#Images\Numbers
X=#OffSet1#
Y=20
W=203
H=240
DynamicVariables=1


[MeterA]
Meter=String
X=10
Y=50
W=50
H=30
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
FontSize=12
Text=A
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #StateA#"]
SolidColor=0,0,0,1



[Meter2]
Meter=Image
ImageName=2.png
ImagePath=#@#Images\Numbers
X=#OffSet2#
Y=20
W=203
H=240
DynamicVariables=1


[MeterB]
Meter=String
X=10
Y=90
W=50
H=30
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
FontSize=12
Text=B
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #StateB#"]
SolidColor=0,0,0,1

[Meter3]
Meter=Image
ImageName=3.png
ImagePath=#@#Images\Numbers
X=#OffSet3#
Y=20
W=203
H=240
DynamicVariables=1


[MeterC]
Meter=String
X=10
Y=130
W=50
H=30
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
FontSize=12
Text=C
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #StateC#"]
SolidColor=0,0,0,1


You will need to change the image names back to yours, but that won't effect the actions. 3slides.gif
:17good

Thank you very much for your help ! :bow:
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5384
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Sliding image

Post by eclectic-tech »

Happy to help!
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Sliding image

Post by xenium »

Hi,
I came back with a problem
I added to the code above a small panel (on the top of the skin), which slides down and then returns back.
when I click on D, the panel does not always work.
I have to give more clicks to get started.
What did I do wrong?

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
SkinWidth=210
SkinHeight=600


[Variables]
OffSet1=210
OffSet2=210
OffSet3=210
OffSet4=-600

StateA=1
StateB=3
StateC=5
StateD=7

U1=[!UpdateMeasure MeasureSlider][!UpdateMeter "Meter1"][!Redraw]
U2=[!UpdateMeasure MeasureSlider][!UpdateMeter "Meter2"][!Redraw]
U3=[!UpdateMeasure MeasureSlider][!UpdateMeter "Meter3"][!Redraw]
U4=[!UpdateMeasure MeasureSlider][!UpdateMeter "Meter4"][!Redraw]


[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideLeft1, 2, 22 | ChangeToState2
SlideLeft1=[!SetVariable OffSet1 "(Clamp(#OffSet1#-10,0,210))"]#U1#
ChangeToState2=[!SetVariable StateA 2]
ActionList2=Repeat SlideRight1, 2, 22 | ChangeToState1
SlideRight1=[!SetVariable OffSet1 "(Clamp(#OffSet1#+10,0,210))"]#U1#
ChangeToState1=[!SetVariable StateA 1]

ActionList3=Repeat SlideLeft2, 2, 22 | ChangeToState4
SlideLeft2=[!SetVariable OffSet2 "(Clamp(#OffSet2#-10,0,210))"]#U2#
ChangeToState4=[!SetVariable StateB 4]
ActionList4=Repeat SlideRight2, 2, 22 | ChangeToState3
SlideRight2=[!SetVariable OffSet2 "(Clamp(#OffSet2#+10,0,210))"]#U2#
ChangeToState3=[!SetVariable StateB 3]

ActionList5=Repeat SlideLeft3, 2, 22 | ChangeToState6
SlideLeft3=[!SetVariable OffSet3 "(Clamp(#OffSet3#-10,0,210))"]#U3#
ChangeToState6=[!SetVariable StateC 6]
ActionList6=Repeat SlideRight3, 2, 22 | ChangeToState5
SlideRight3=[!SetVariable OffSet3 "(Clamp(#OffSet3#+10,0,210))"]#U3#
ChangeToState5=[!SetVariable StateC 5]


ActionList7=Repeat SlideDown4, 2, 22 | ChangeToState8
SlideDown4=[!SetVariable OffSet4 "(Clamp(#OffSet4#+10,-600,0))"]#U4#
ChangeToState8=[!SetVariable StateD 8]
ActionList8=Repeat SlideUp4, 2, 22 | ChangeToState7
SlideUp4=[!SetVariable OffSet4 "(Clamp(#OffSet4#-10,-600,0))"]#U4#
ChangeToState7=[!SetVariable StateD 7]


DynamicVariables=1


[BG]
Meter=Image
SolidColor=0,0,0,100
X=0
Y=0
W=210
H=600

[Meter1]
Meter=Image
ImageName=1.png
ImagePath=#@#Images\Numbers
X=#OffSet1#
Y=20
W=203
H=240
DynamicVariables=1


[MeterA]
Meter=String
X=10
Y=50
W=50
H=30
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
FontSize=12
Text=A
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #StateA#"]
SolidColor=0,0,0,1



[Meter2]
Meter=Image
ImageName=2.png
ImagePath=#@#Images\Numbers
X=#OffSet2#
Y=20
W=203
H=240
DynamicVariables=1


[MeterB]
Meter=String
X=10
Y=90
W=50
H=30
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
FontSize=12
Text=B
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #StateB#"]
SolidColor=0,0,0,1

[Meter3]
Meter=Image
ImageName=3.png
ImagePath=#@#Images\Numbers
X=#OffSet3#
Y=20
W=203
H=240
DynamicVariables=1


[MeterC]
Meter=String
X=10
Y=130
W=50
H=30
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
FontSize=12
Text=C
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #StateC#"]
SolidColor=0,0,0,1

[Meter4]
Meter=Image
ImageName=#@#panel.png
X=50
Y=#OffSet4#
W=100
H=50
DynamicVariables=1

[MeterD]
Meter=String
X=10
Y=170
W=50
H=30
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
FontSize=12
Text=D
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #StateD#"]
SolidColor=0,0,0,1

 
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5384
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Sliding image

Post by eclectic-tech »

xenium wrote:Hi,
I came back with a problem
I added to the code above a small panel (on the top of the skin), which slides down and then returns back.
when I click on D, the panel does not always work.
I have to give more clicks to get started.
What did I do wrong?
You need to understand the action timer repeat function and the effect of changing the variable value as it relates to your skin.

You have an image [Meter4] that has a height of 50, and you initially set it's Y value to -600 pixels from the top of your skin by setting the variable 'Offset4' to -600. That may be what you intended, but the action list you added does not have values that will cause the 'Offset4' variable to ever place [meter4] in the visible area of your skin.

It changes the beginning value of the variable by 10 on each of the 22 repeats you coded; so it changes from -600 to -380 when you click the first time, then from -380 to -600 on the next click. The meter using this value for Y, will never be seen.

To correct I would suggest changing the initial value of 'Offset4' to -50 (the negative height of the meter you want it to control). That places the meter just above your skin.

Now change the action lists for that variable, to add 5 and subtract 5 on each of 10 updates, and have clamp values of -50 and 0.

Code: Select all

...{current code}...

[Variables]
...{current code}...
Offset4=-50

...{current code}...

ActionList7=Repeat SlideDown4, 2, 10 | ChangeToState8
SlideDown4=[!SetVariable OffSet4 "(Clamp(#OffSet4#+5,-50,0))"]#U4#
ChangeToState8=[!SetVariable StateD 8]
ActionList8=Repeat SlideUp4, 2, 10 | ChangeToState7
SlideUp4=[!SetVariable OffSet4 "(Clamp(#OffSet4#-5,-50,0))"]#U4#
ChangeToState7=[!SetVariable StateD 7]
Now when you click 'D' the value of 'Offset4' will start at -50 and change by 5 on each of the 10 repeated action timer updates; add 5 to -50, done ten times, equals 0. That is why the repeat formula was changed to 'Repeat SlideDown4, 2, 10'.

So when working with the action timer, you need to know:
  • the beginning and end values you want
  • the amount of change on each update
  • and the number of times the amount of change is needed to get from the beginning to the end values
Then put those values into the repeat function and action lists.

Happy coding! :welcome:
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Sliding image

Post by xenium »

eclectic-tech wrote:You need to understand the action timer repeat function and the effect of changing the variable value as it relates to your skin.

You have an image [Meter4] that has a height of 50, and you initially set it's Y value to -600 pixels from the top of your skin by setting the variable 'Offset4' to -600. That may be what you intended, but the action list you added does not have values that will cause the 'Offset4' variable to ever place [meter4] in the visible area of your skin.

It changes the beginning value of the variable by 10 on each of the 22 repeats you coded; so it changes from -600 to -380 when you click the first time, then from -380 to -600 on the next click. The meter using this value for Y, will never be seen.

To correct I would suggest changing the initial value of 'Offset4' to -50 (the negative height of the meter you want it to control). That places the meter just above your skin.

Now change the action lists for that variable, to add 5 and subtract 5 on each of 10 updates, and have clamp values of -50 and 0.

Code: Select all

...{current code}...

[Variables]
...{current code}...
Offset4=-50

...{current code}...

ActionList7=Repeat SlideDown4, 2, 10 | ChangeToState8
SlideDown4=[!SetVariable OffSet4 "(Clamp(#OffSet4#+5,-50,0))"]#U4#
ChangeToState8=[!SetVariable StateD 8]
ActionList8=Repeat SlideUp4, 2, 10 | ChangeToState7
SlideUp4=[!SetVariable OffSet4 "(Clamp(#OffSet4#-5,-50,0))"]#U4#
ChangeToState7=[!SetVariable StateD 7]
Now when you click 'D' the value of 'Offset4' will start at -50 and change by 5 on each of the 10 repeated action timer updates; add 5 to -50, done ten times, equals 0. That is why the repeat formula was changed to 'Repeat SlideDown4, 2, 10'.

So when working with the action timer, you need to know:
  • the beginning and end values you want
  • the amount of change on each update
  • and the number of times the amount of change is needed to get from the beginning to the end values
Then put those values into the repeat function and action lists.

Happy coding! :welcome:
:17good

Thank you very much for your help and for clarifications ! :bow:
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Sliding image

Post by xenium »

Hi
In the example below, the temperature is displayed in green, yellow or red, depending on the three temperature intervals.
I would like that when the temperature value is green and click on it, slide the green image (meter1);
when the value is yellow and click on it, slide the yellow image (meter2);
when the value is red and click on it, slide the red image (meter3)
How can I do this?

thanks

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
SkinWidth=210



[Variables]
UpdateRateSeconds=600
FontFace=arial

;green
URL=https://www.foreca.com/Canada/Nunavut/Coral_Harbour

;yellow
;URL=https://www.foreca.com/Finland/Helsinki

;red
;URL=https://www.foreca.com/Singapore/Singapore


TempColor1=0,255,0
TempColor2=255,255,0
TempColor3=255,0,0


OffSet1=210
OffSet2=210
OffSet3=210
StateA=1
StateB=3
StateC=5
U1=[!UpdateMeasure MeasureSlider][!UpdateMeter "Meter1"][!Redraw]
U2=[!UpdateMeasure MeasureSlider][!UpdateMeter "Meter2"][!Redraw]
U3=[!UpdateMeasure MeasureSlider][!UpdateMeter "Meter3"][!Redraw]


[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideLeft1, 2, 22 | ChangeToState2
SlideLeft1=[!SetVariable OffSet1 "(Clamp(#OffSet1#-10,0,210))"]#U1#
ChangeToState2=[!SetVariable StateA 2]
ActionList2=Repeat SlideRight1, 2, 22 | ChangeToState1
SlideRight1=[!SetVariable OffSet1 "(Clamp(#OffSet1#+10,0,210))"]#U1#
ChangeToState1=[!SetVariable StateA 1]

ActionList3=Repeat SlideLeft2, 2, 22 | ChangeToState4
SlideLeft2=[!SetVariable OffSet2 "(Clamp(#OffSet2#-10,0,210))"]#U2#
ChangeToState4=[!SetVariable StateB 4]
ActionList4=Repeat SlideRight2, 2, 22 | ChangeToState3
SlideRight2=[!SetVariable OffSet2 "(Clamp(#OffSet2#+10,0,210))"]#U2#
ChangeToState3=[!SetVariable StateB 3]

ActionList5=Repeat SlideLeft3, 2, 22 | ChangeToState6
SlideLeft3=[!SetVariable OffSet3 "(Clamp(#OffSet3#-10,0,210))"]#U3#
ChangeToState6=[!SetVariable StateC 6]
ActionList6=Repeat SlideRight3, 2, 22 | ChangeToState5
SlideRight3=[!SetVariable OffSet3 "(Clamp(#OffSet3#+10,0,210))"]#U3#
ChangeToState5=[!SetVariable StateC 5]

DynamicVariables=1



[MeasureTemp]
Measure=WebParser
Url=#URL#
RegExp="(?siU)<span class=".* txt-xxlarge"><strong>(.*)</strong>.*"
UpdateRate=#UpdateRateSeconds#
StringIndex=1

[MeasureColor]
Measure=Calc
Formula=(((MeasureTemp >= -15) && (MeasureTemp < 0)) ? 1 : (((MeasureTemp >= 0) && (MeasureTemp <= 15)) ? 2 : 3))

========================================

[BG]
Meter=Image
SolidColor=0,0,0,100
X=0
Y=0
W=210
H=260

[Meter1]
Meter=Image
SolidColor=0,255,0
X=#OffSet1#
Y=20
W=203
H=240
DynamicVariables=1

[Meter2]
Meter=Image
SolidColor=255,255,0
X=#OffSet2#
Y=20
W=203
H=240
DynamicVariables=1

[Meter3]
Meter=Image
SolidColor=255,0,0
X=#OffSet3#
Y=20
W=203
H=240
DynamicVariables=1

[MeterTemp]
Meter=String
MeasureName=MeasureTemp
X=70
Y=185
W=100
H=100
FontColor=[#TempColor[&MeasureColor]]
StringStyle=bold
StringEffect=SHADOW
FontFace=arial
StringAlign=Left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
FontSize=15
Postfix="°C"
DynamicVariables=1
LeftMouseUpAction=[!CommandMeasure MeasureSlider "Execute #StateA#"]