Sliding image

Help with creating, editing & fixing problems with skins

Sliding image

March 11th, 2018, 9:12 am
xenium
   [153 posts]

Hi
In the skin below I would like the right image (glass.png) when clicking on the header to slide right, out and back.
TestSkin.zip
(20.73 KiB) Downloaded 13 times

How can I do that?
User avatar

Re: Sliding image

March 11th, 2018, 9:46 am
ChicknwithNoName
   [18 posts]

You could start with searching the forum then try implementing the examples. Check out: https://forum.rainmeter.net/viewtopic.php?p=144130#p144130
User avatar

Re: Sliding image

March 11th, 2018, 12:24 pm
dvo
   [525 posts]

just copy jsmorleys script and alter it :) me too balala... mixed info ...
Last edited by dvo on March 11th, 2018, 12:50 pm, edited 2 times in total.
User avatar

Re: Sliding image

March 11th, 2018, 12:38 pm
balala
Rainmeter Sage   [6281 posts]

Not exactly sure what you mean by
xenium wrote:slide right, out and back.

You'd like to slide the image to right, until it goes out of the skin, then back, to the same position as initial?
User avatar

Re: Sliding image

March 11th, 2018, 12:56 pm
dvo
   [525 posts]

i hope it's from the right sliding >>out>> and after leave sliding back ;-)

Re: Sliding image

March 11th, 2018, 1:01 pm
xenium
   [153 posts]

balala wrote:Not exactly sure what you mean by

You'd like to slide the image to right, until it goes out of the skin, then back, to the same position as initial?


not,
as it is now, when you click on the header to go back, and when you give it again click on the header to come back
I tried with an example on the forum but I did not get it
TestSkin.zip
(21.09 KiB) Downloaded 8 times
User avatar

Re: Sliding image

March 11th, 2018, 1:56 pm
jsmorley
Developer   [17591 posts]

Still not obvious to me what effect you are looking for. Please be clear...
User avatar

Re: Sliding image

March 11th, 2018, 2:41 pm
eclectic-tech
Rainmeter Sage   [2747 posts]

From your description, this seems to be what you want this (click to animate):
You are trying to move multiple images, when it is simpler to set them relatively and just move one of them. The code below will give you the above action.

If we misunderstood, then a precise step by step (spoon-feed-me) explanation would help.

Code: Select all

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

[Variables]
U=[!UpdateMeasureGroup Sliders][!UpdateMeterGroup Sliders][!Redraw]
W=1
Offset=-150
SlideAmount=10
RightOffset=205

[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat Right,#W#,20
; | Wait 1 | HeaderOut
ActionList2=Repeat Left,#W#,20
; | Wait 1 | HeaderIn
Right=[!SetVariable Offset "(Clamp(#Offset#+#SlideAmount#,-150,0))"]#U#
HeaderOut=[!SetOption Header ImageName "header.png "]#U#
Left=[!SetVariable Offset "(Clamp(#Offset#-#SlideAmount#,-150,0))"]#U#
HeaderIn=[!SetOption Header ImageName "header.png "]#U#
IfCondition=#Offset# = -150
IfTrueAction=[!SetOption Header LeftMouseUpAction """[!CommandMeasure MeasureSlider "Stop 2"][!CommandMeasure MeasureSlider "Execute 1"]"""]
IfCondition2=#Offset# = 0
IfTrueAction2=[!SetOption Header LeftMouseUpAction """[!CommandMeasure MeasureSlider "Stop 1"][!CommandMeasure MeasureSlider "Execute 2"]"""]
DynamicVariables=1

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

[glass]
Meter=Image
Group=Sliders
ImageName=#@#glass.png
X=(398 + #Offset#)
Y=17
W=150   
H=260
DynamicVariables=1
hidden=0

[Header]
Meter=Image
ImageName=#@#header.png
X=R
;(545 + #Offset#)
Y=2
W=15
H=260
DynamicVariables=1


If you just want the glass to move, and the header to not, like this (click to animate):
Use this code

Code: Select all

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

[Variables]
U=[!UpdateMeasureGroup Sliders][!UpdateMeterGroup Sliders][!Redraw]
W=1
Offset=-150
SlideAmount=10
RightOffset=205

[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat Right,#W#,20
; | Wait 1 | HeaderOut
ActionList2=Repeat Left,#W#,20
; | Wait 1 | HeaderIn
Right=[!SetVariable Offset "(Clamp(#Offset#+#SlideAmount#,-150,0))"]#U#
HeaderOut=[!SetOption Header ImageName "header.png "]#U#
Left=[!SetVariable Offset "(Clamp(#Offset#-#SlideAmount#,-150,0))"]#U#
HeaderIn=[!SetOption Header ImageName "header.png "]#U#
IfCondition=#Offset# = -150
IfTrueAction=[!SetOption Header LeftMouseUpAction """[!CommandMeasure MeasureSlider "Stop 2"][!CommandMeasure MeasureSlider "Execute 1"]"""]
IfCondition2=#Offset# = 0
IfTrueAction2=[!SetOption Header LeftMouseUpAction """[!CommandMeasure MeasureSlider "Stop 1"][!CommandMeasure MeasureSlider "Execute 2"]"""]
DynamicVariables=1

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

[Header]
Meter=Image
ImageName=#@#header.png
X=395
Y=2
W=15
H=260
DynamicVariables=1

[glass]
Meter=Image
Group=Sliders
ImageName=#@#glass.png
X=(398 + #Offset#)
Y=17
W=150   
H=260
DynamicVariables=1
hidden=0
User avatar

Re: Sliding image

March 11th, 2018, 2:49 pm
balala
Rainmeter Sage   [6281 posts]

jsmorley wrote:Still not obvious to me what effect you are looking for. Please be clear...

eclectic-tech wrote:If we misunderstood, then a precise step by step (spoon-feed-me) explanation would help.

Definitely not very clear, however this is what I understood: now the images moves to right when clicked, then stops. On a new click it moves back to its initial position, to left. Am I right if I think the images should have to go to right, then without a new click it should have to move back to left, immediately after it stops on the rightist position?

Re: Sliding image

March 11th, 2018, 3:03 pm
xenium
   [153 posts]

eclectic-tech wrote:From your description, this seems to be what you want this (click to animate):glass.gifYou are trying to move multiple images, when it is simpler to set them relatively and just move one of them. The code below will give you the above action.

If we misunderstood, then a precise step by step (spoon-feed-me) explanation would help.

Code: Select all

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

[Variables]
U=[!UpdateMeasureGroup Sliders][!UpdateMeterGroup Sliders][!Redraw]
W=1
Offset=-150
SlideAmount=10
RightOffset=205

[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat Right,#W#,20
; | Wait 1 | HeaderOut
ActionList2=Repeat Left,#W#,20
; | Wait 1 | HeaderIn
Right=[!SetVariable Offset "(Clamp(#Offset#+#SlideAmount#,-150,0))"]#U#
HeaderOut=[!SetOption Header ImageName "header.png "]#U#
Left=[!SetVariable Offset "(Clamp(#Offset#-#SlideAmount#,-150,0))"]#U#
HeaderIn=[!SetOption Header ImageName "header.png "]#U#
IfCondition=#Offset# = -150
IfTrueAction=[!SetOption Header LeftMouseUpAction """[!CommandMeasure MeasureSlider "Stop 2"][!CommandMeasure MeasureSlider "Execute 1"]"""]
IfCondition2=#Offset# = 0
IfTrueAction2=[!SetOption Header LeftMouseUpAction """[!CommandMeasure MeasureSlider "Stop 1"][!CommandMeasure MeasureSlider "Execute 2"]"""]
DynamicVariables=1

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

[glass]
Meter=Image
Group=Sliders
ImageName=#@#glass.png
X=(398 + #Offset#)
Y=17
W=150   
H=260
DynamicVariables=1
hidden=0

[Header]
Meter=Image
ImageName=#@#header.png
X=R
;(545 + #Offset#)
Y=2
W=15
H=260
DynamicVariables=1

hidden=0


It's exactly what I wanted.Thank you so much
Sorry if he did not understand what I wanted, my English expression is to blame
One more question is: when the slide is back to the left, this can be hidden in the end, not see through the other? Or if they are transparent can not?

Return to “Help: Rainmeter Skins”



Who is online

Users browsing this forum: Baidu [Spider] and 5 guests