It is currently March 28th, 2024, 12:31 pm

Sliding image

Get help with creating, editing & fixing problems with skins
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5380
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA
Contact:

Re: Sliding image

Post by eclectic-tech »

xenium wrote: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?
Because you are using a semi-transparent background (foreground), it is not easy to have the glass appear to slide out from under the background. Changing the [Background] to an opaque color (alpha to 255) would be the simplest solution, but that may not satisfy your desired style. You could change the width of the glass image to match in the action timer; so it increases to match the current horizontal position (click to animate):
glass3.gif
And here is the modified code; I changed the offset variable to start at zero and expand by 150 in the action timer.

Code: Select all

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

[Variables]
U=[!UpdateMeasureGroup Sliders][!UpdateMeterGroup Sliders][!Redraw]
W=1
Offset=0
SlideAmount=10

[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders

ActionList1=Repeat Right,#W#,20
ActionList2=Repeat Left,#W#,20

Right=[!SetVariable Offset "(Clamp(#Offset#+#SlideAmount#,0,150))"]#U#
Left=[!SetVariable Offset "(Clamp(#Offset#-#SlideAmount#,0,150))"]#U#

IfCondition=#Offset# = 0
IfTrueAction=[!SetOption Header LeftMouseUpAction """[!CommandMeasure MeasureSlider "Stop 2"][!CommandMeasure MeasureSlider "Execute 1"]"""]
IfCondition2=#Offset# = 150
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=R
Y=17
W=#Offset#
H=260
DynamicVariables=1
hidden=0

[Header]
Meter=Image
Group=Sliders
ImageName=#@#header.png
X=R
Y=2
W=15
H=260
DynamicVariables=1
hidden=0
Then have the meters on that panel fade in when done moving, and fade out before moving back.
Hope this helps... :welcome:
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Sliding image

Post by xenium »

eclectic-tech wrote:Because you are using a semi-transparent background (foreground), it is not easy to have the glass appear to slide out from under the background. Changing the [Background] to an opaque color (alpha to 255) would be the simplest solution, but that may not satisfy your desired style. You could change the width of the glass image to match in the action timer; so it increases to match the current horizontal position (click to animate):glass3.gifAnd here is the modified code; I changed the offset variable to start at zero and expand by 150 in the action timer.

Code: Select all

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

[Variables]
U=[!UpdateMeasureGroup Sliders][!UpdateMeterGroup Sliders][!Redraw]
W=1
Offset=0
SlideAmount=10

[MeasureSlider]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders

ActionList1=Repeat Right,#W#,20
ActionList2=Repeat Left,#W#,20

Right=[!SetVariable Offset "(Clamp(#Offset#+#SlideAmount#,0,150))"]#U#
Left=[!SetVariable Offset "(Clamp(#Offset#-#SlideAmount#,0,150))"]#U#

IfCondition=#Offset# = 0
IfTrueAction=[!SetOption Header LeftMouseUpAction """[!CommandMeasure MeasureSlider "Stop 2"][!CommandMeasure MeasureSlider "Execute 1"]"""]
IfCondition2=#Offset# = 150
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=R
Y=17
W=#Offset#
H=260
DynamicVariables=1
hidden=0

[Header]
Meter=Image
Group=Sliders
ImageName=#@#header.png
X=R
Y=2
W=15
H=260
DynamicVariables=1
hidden=0
Then have the meters on that panel fade in when done moving, and fade out before moving back.
Hope this helps... :welcome:
That's it! Thank you very, very much! :17good
A last,last question :D :
I added on glass, text on 2 columns, and the text at the outer edge of the glass either stays a bit behind when I close the glass or take a little while before, when I open glass
Can this be solved ?
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Sliding image

Post by xenium »

I think we've solved the problem. I've increased the SlideAmount value
Once again, thank you very much for your help :welcome:
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5380
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA
Contact:

Re: Sliding image

Post by eclectic-tech »

xenium wrote:I think we've solved the problem. I've increased the SlideAmount value
Once again, thank you very much for your help :welcome:
Glad to help :welcome:
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Sliding image

Post by xenium »

Hi,
I come back with a question: at the above code, is it possible to set a slower sliding speed?
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5380
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA
Contact:

Re: Sliding image

Post by eclectic-tech »

xenium wrote:Hi,
I come back with a question: at the above code, is it possible to set a slower sliding speed?
You could increase the value of the 'W' variable; it is currently 1 millisecond as you increase it, the repeat action will Wait longer between actions.

You could also lower the 'slideamount' value, but if the value is set too small, the number of repeats in the action timer may need to be increased, so the movement stops when you reach the desired amount.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Sliding image

Post by jsmorley »

Right. As with any animation, the desired balance between "speed" and "smoothness" is achieved by balancing

1) The number of actions
2) The amount of change in each action
3) The amount of time between each action

There is no strict formula for this, it's entirely a judgement call.
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Sliding image

Post by xenium »

Indeed, changing the value of the W variable and the Slideamount value, we get what we wanted.
But I think I give up this idea, because the text and the icons appear in advance when the panel slides out and remains behind when the panel slips back.
Anyway, thank you very much for the answer
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Sliding image

Post by jsmorley »

xenium wrote:Indeed, changing the value of the W variable and the Slideamount value, we get what we wanted.
But I think I give up this idea, because the text and the icons appear in advance when the panel slides out and remains behind when the panel slips back.
Anyway, thank you very much for the answer
To have things move in synchronization, your simply have to use the same formulas for X and Y on the various other meters as you do on the sliding panel, and be sure to !UpdateMeter all the meters and !Redraw between each action.
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Sliding image

Post by xenium »

jsmorley wrote:To have things move in synchronization, your simply have to use the same formulas for X and Y on the various other meters as you do on the sliding panel, and be sure to !UpdateMeter all the meters and !Redraw between each action.
This is the skin.
TestSkinSlide.zip
(234.77 KiB) Downloaded 32 times
I can not figure out how to make it move in sync
Post Reply