Hi
In the skin below I would like the right image (glass.png) when clicking on the header to slide right, out and back.
How can I do that?
It is currently April 20th, 2024, 9:33 am
Sliding image
-
- Posts: 865
- Joined: January 4th, 2018, 9:52 pm
Sliding image
You do not have the required permissions to view the files attached to this post.
-
- Posts: 18
- Joined: February 17th, 2018, 11:08 pm
Re: Sliding image
You could start with searching the forum then try implementing the examples. Check out: https://forum.rainmeter.net/viewtopic.php?p=144130#p144130
-
- Rainmeter Sage
- Posts: 16148
- Joined: October 11th, 2010, 6:27 pm
- Location: Gheorgheni, Romania
Re: Sliding image
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?xenium wrote:slide right, out and back.
-
- Posts: 865
- Joined: January 4th, 2018, 9:52 pm
Re: Sliding image
not,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?
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
You do not have the required permissions to view the files attached to this post.
-
- Developer
- Posts: 22629
- Joined: April 19th, 2009, 11:02 pm
- Location: Fort Hunt, Virginia, USA
Re: Sliding image
Still not obvious to me what effect you are looking for. Please be clear...
-
- Rainmeter Sage
- Posts: 5398
- Joined: April 12th, 2012, 9:40 pm
- Location: Cedar Point, Ohio, USA
Re: Sliding image
From your description, this seems to be what you want this (click to animate):
If we misunderstood, then a precise step by step (spoon-feed-me) explanation would help.
If you just want the glass to move, and the header to not, like this (click to animate): Use this code
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
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.
:: My DA Gallery :: Rainmeter DA Gallery :: Rainmeter Workshops :: Rainmeter Documentation :: BBCode Guide ::
-
- Rainmeter Sage
- Posts: 16148
- Joined: October 11th, 2010, 6:27 pm
- Location: Gheorgheni, Romania
Re: Sliding image
jsmorley wrote:Still not obvious to me what effect you are looking for. Please be clear...
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?eclectic-tech wrote:If we misunderstood, then a precise step by step (spoon-feed-me) explanation would help.
-
- Posts: 865
- Joined: January 4th, 2018, 9:52 pm
Re: Sliding image
It's exactly what I wanted.Thank you so mucheclectic-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
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?
-
- Developer
- Posts: 22629
- Joined: April 19th, 2009, 11:02 pm
- Location: Fort Hunt, Virginia, USA
Re: Sliding image
Not too difficult to get things to slide in any direction you want...
Click to animate:
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.
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"]
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.
-
- Posts: 865
- Joined: January 4th, 2018, 9:52 pm
Re: Sliding image
Thank you for your reply.jsmorley wrote:Not too difficult to get things to slide in any direction you want...
Click to animate: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"]
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.
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