It is currently March 29th, 2024, 1:09 pm

Sliding image

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

Sliding image

Post 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?
You do not have the required permissions to view the files attached to this post.
ChicknwithNoName
Posts: 18
Joined: February 17th, 2018, 11:08 pm

Re: Sliding image

Post 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
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Sliding image

Post 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?
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Sliding image

Post 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
You do not have the required permissions to view the files attached to this post.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Sliding image

Post by jsmorley »

Still not obvious to me what effect you are looking for. Please be clear...
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 »

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
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: Sliding image

Post 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?
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Sliding image

Post 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?
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Sliding image

Post 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.
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 »

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