Page 1 of 5

Sliding image

Posted: March 11th, 2018, 9:12 am
by xenium
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
How can I do that?

Re: Sliding image

Posted: March 11th, 2018, 9:46 am
by ChicknwithNoName
You could start with searching the forum then try implementing the examples. Check out: https://forum.rainmeter.net/viewtopic.php?p=144130#p144130

Re: Sliding image

Posted: March 11th, 2018, 12:38 pm
by balala
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?

Re: Sliding image

Posted: March 11th, 2018, 1:01 pm
by xenium
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

Re: Sliding image

Posted: March 11th, 2018, 1:56 pm
by jsmorley
Still not obvious to me what effect you are looking for. Please be clear...

Re: Sliding image

Posted: March 11th, 2018, 2:41 pm
by eclectic-tech
From your description, this seems to be what you want this (click to animate):
glass.gif
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):
glass2.gif
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

Re: Sliding image

Posted: March 11th, 2018, 2:49 pm
by balala
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

Posted: March 11th, 2018, 3:03 pm
by xenium
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?

Re: Sliding image

Posted: March 11th, 2018, 3:32 pm
by jsmorley
Not too difficult to get things to slide in any direction you want...

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
SkinWidth=400
SkinHeight=300
AccurateText=1

[Variables]
HorzOffset=0
VertOffset=0
LeftArrow=←
UpArrow=↑
RightArrow=→
DownArrow=↓
W=5
U=[!UpdateMeasureGroup Sliders][!UpdateMeterGroup Sliders][!Redraw]

; Slider Measures

[SlideLeft]
Measure=Plugin
Group=Sliders
Plugin=ActionTimer
ActionList1=Repeat Left,#W#,30
Left=[!SetVariable HorzOffset "(Clamp(#HorzOffset#-10,-300,300))"]#U#
DynamicVariables=1

[SlideRight]
Measure=Plugin
Group=Sliders
Plugin=ActionTimer
ActionList1=Repeat Right,#W#,30
Right=[!SetVariable HorzOffset "(Clamp(#HorzOffset#+10,-300,300))"]#U#
DynamicVariables=1

[SlideUp]
Measure=Plugin
Group=Sliders
Plugin=ActionTimer
ActionList1=Repeat Up,#W#,20
Up=[!SetVariable VertOffset "(Clamp(#VertOffset#-10,-200,200))"]#U#
DynamicVariables=1

[SlideDown]
Measure=Plugin
Group=Sliders
Plugin=ActionTimer
ActionList1=Repeat Down,#W#,20
Down=[!SetVariable VertOffset "(Clamp(#VertOffset#+10,-200,200))"]#U#
DynamicVariables=1

; Background and Sliding Meters

[MeterBack]
Meter=Image
W=400
H=300
SolidColor=47,47,47,100

[MeterSlideBox]
Meter=Image
Group=Sliders
X=(50 + #HorzOffset#)
Y=(50 + #VertOffset#)
W=300
H=200
SolidColor=47,47,47,150
DynamicVariables=1

; Arrow Meters

[MeterUpArrow]
Meter=String
Group=Sliders
X=([MeterSlideBox:X] + 145)
Y=([MeterSlideBox:Y] + 5)
FontSize=13
FontColor=255,255,255,255
FontWeight=700
SolidColor=0,0,0,1
Padding=5,5,5,5
DynamicVariables=1
AntiAlias=1
Text=#UpArrow#
LeftMouseUpAction=[!CommandMeasure SlideUp "Execute 1"]

[MeterDownArrow]
Meter=String
Group=Sliders
X=([MeterSlideBox:X] + ([MeterSlideBox:W] - 155))
Y=([MeterSlideBox:Y] + ([MeterSlideBox:H] - 40))
FontSize=13
FontColor=255,255,255,255
FontWeight=700
SolidColor=0,0,0,1
Padding=5,5,5,5
DynamicVariables=1
AntiAlias=1
Text=#DownArrow#
LeftMouseUpAction=[!CommandMeasure SlideDown "Execute 1"]

[MeterLeftArrow]
Meter=String
Group=Sliders
X=([MeterSlideBox:X] + 15)
Y=([MeterSlideBox:Y] + 85)
FontSize=13
FontColor=255,255,255,255
FontWeight=700
SolidColor=0,0,0,1
Padding=5,5,5,5
DynamicVariables=1
AntiAlias=1
Text=#LeftArrow#
LeftMouseUpAction=[!CommandMeasure SlideLeft "Execute 1"]

[MeterRightArrow]
Meter=String
Group=Sliders
X=([MeterSlideBox:X] + ([MeterSlideBox:W] - 40))
Y=([MeterSlideBox:Y] + ([MeterSlideBox:H] - 115))
FontSize=13
FontColor=255,255,255,255
FontWeight=700
SolidColor=0,0,0,1
Padding=5,5,5,5
DynamicVariables=1
AntiAlias=1
Text=#RightArrow#
LeftMouseUpAction=[!CommandMeasure SlideRight "Execute 1"]
Click to animate:
GIF.gif
So the key to this is the SkinWidth and SkinHeight settings in the [Rainmeter] section. That will allow the sliding box to slide "off" the skin and be truncated as needed.

Note that I made the position of the four "arrow" meters relative to the sliding box. You could just as easily apply the same formula adding or subtracting the "offsets" to these meters, it's kinda six of one half-dozen of the other.

Re: Sliding image

Posted: March 11th, 2018, 5:09 pm
by xenium
jsmorley wrote:Not too difficult to get things to slide in any direction you want...

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
SkinWidth=400
SkinHeight=300
AccurateText=1

[Variables]
HorzOffset=0
VertOffset=0
LeftArrow=←
UpArrow=↑
RightArrow=→
DownArrow=↓
W=5
U=[!UpdateMeasureGroup Sliders][!UpdateMeterGroup Sliders][!Redraw]

; Slider Measures

[SlideLeft]
Measure=Plugin
Group=Sliders
Plugin=ActionTimer
ActionList1=Repeat Left,#W#,30
Left=[!SetVariable HorzOffset "(Clamp(#HorzOffset#-10,-300,300))"]#U#
DynamicVariables=1

[SlideRight]
Measure=Plugin
Group=Sliders
Plugin=ActionTimer
ActionList1=Repeat Right,#W#,30
Right=[!SetVariable HorzOffset "(Clamp(#HorzOffset#+10,-300,300))"]#U#
DynamicVariables=1

[SlideUp]
Measure=Plugin
Group=Sliders
Plugin=ActionTimer
ActionList1=Repeat Up,#W#,20
Up=[!SetVariable VertOffset "(Clamp(#VertOffset#-10,-200,200))"]#U#
DynamicVariables=1

[SlideDown]
Measure=Plugin
Group=Sliders
Plugin=ActionTimer
ActionList1=Repeat Down,#W#,20
Down=[!SetVariable VertOffset "(Clamp(#VertOffset#+10,-200,200))"]#U#
DynamicVariables=1

; Background and Sliding Meters

[MeterBack]
Meter=Image
W=400
H=300
SolidColor=47,47,47,100

[MeterSlideBox]
Meter=Image
Group=Sliders
X=(50 + #HorzOffset#)
Y=(50 + #VertOffset#)
W=300
H=200
SolidColor=47,47,47,150
DynamicVariables=1

; Arrow Meters

[MeterUpArrow]
Meter=String
Group=Sliders
X=([MeterSlideBox:X] + 145)
Y=([MeterSlideBox:Y] + 5)
FontSize=13
FontColor=255,255,255,255
FontWeight=700
SolidColor=0,0,0,1
Padding=5,5,5,5
DynamicVariables=1
AntiAlias=1
Text=#UpArrow#
LeftMouseUpAction=[!CommandMeasure SlideUp "Execute 1"]

[MeterDownArrow]
Meter=String
Group=Sliders
X=([MeterSlideBox:X] + ([MeterSlideBox:W] - 155))
Y=([MeterSlideBox:Y] + ([MeterSlideBox:H] - 40))
FontSize=13
FontColor=255,255,255,255
FontWeight=700
SolidColor=0,0,0,1
Padding=5,5,5,5
DynamicVariables=1
AntiAlias=1
Text=#DownArrow#
LeftMouseUpAction=[!CommandMeasure SlideDown "Execute 1"]

[MeterLeftArrow]
Meter=String
Group=Sliders
X=([MeterSlideBox:X] + 15)
Y=([MeterSlideBox:Y] + 85)
FontSize=13
FontColor=255,255,255,255
FontWeight=700
SolidColor=0,0,0,1
Padding=5,5,5,5
DynamicVariables=1
AntiAlias=1
Text=#LeftArrow#
LeftMouseUpAction=[!CommandMeasure SlideLeft "Execute 1"]

[MeterRightArrow]
Meter=String
Group=Sliders
X=([MeterSlideBox:X] + ([MeterSlideBox:W] - 40))
Y=([MeterSlideBox:Y] + ([MeterSlideBox:H] - 115))
FontSize=13
FontColor=255,255,255,255
FontWeight=700
SolidColor=0,0,0,1
Padding=5,5,5,5
DynamicVariables=1
AntiAlias=1
Text=#RightArrow#
LeftMouseUpAction=[!CommandMeasure SlideRight "Execute 1"]
Click to animate:
GIF.gif

So the key to this is the SkinWidth and SkinHeight settings in the [Rainmeter] section. That will allow the sliding box to slide "off" the skin and be truncated as needed.

Note that I made the position of the four "arrow" meters relative to the sliding box. You could just as easily apply the same formula adding or subtracting the "offsets" to these meters, it's kinda six of one half-dozen of the other.
Thank you for your reply.
But I do not know how to apply in my case: In your example, the slidebox slide inside the meterback, in my case the slidebox slide out the meterback