sliding in and and out a sidebar along with all its components

[sonarokz]

HI,
i am newbie at making skins but i have been using rainmeter for quite a while.
I have been recently modifying a skin made by Aiden drew called rusa jantan . I wanted to make the sidebar slide out of the screen when i moved my cursor over it and slide in when i move my cursor away.
here is a screenshot:

Capture.PNG

i used the Actiontimer plugin to do it .
But it seems I was able to move only one at a time using two ini files. how can i move both of them at the same time without
going over the shut down button button and just by moving the cursor over the white bar.

the codes for the logout button:

Code: Select all

[Rainmeter]
Update=1000

[Variables]
X1=140
U=[!UpdateMeasureGroup Sliders][!UpdateMeterGroup Items][!Redraw]

[Logout]
Meter=Image
Group=Items
ImageName=logout
X=#X1#
y=(#workareaheight#-50)
DynamicVariables=1
MouseOverAction=[!CommandMeasure MeasureSlide "Stop 1"][!CommandMeasure MeasureSlide "Execute 2"]
MouseLeaveAction=[!CommandMeasure MeasureSlide "Stop 2"][!CommandMeasure MeasureSlide "Execute 1"]
LeftMouseDownAction=!Execute 

[Logouttext]
Meter=STRING
Group=Items
Text=SHUTDOWN
FontFace=Lato
FontSize=11
FontColor=fbfbfb
X=(#X1#+18)
Y=(#workareaheight#-43)
AntiAlias=1
DynamicVariables=1
MouseOverAction=[!CommandMeasure MeasureSlide "Stop 1"][!CommandMeasure MeasureSlide "Execute 2"]
MouseLeaveAction=[!CommandMeasure MeasureSlide "Stop 2"][!CommandMeasure MeasureSlide "Execute 1"]

[MeasureSlide]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat Left,5,100
Left=[!SetVariable X1 "(Clamp(#X1#-3,0,213))"]#U#
ActionList2=Repeat Right,5,100
Right=[!SetVariable X1 "(Clamp(#X1#+4,0,213))"]#U#
DynamicVariables=1

the logout pic is here:

logout.png

the codes for the white bar:

Code: Select all

[Rainmeter]
Update=1000

[Variables]
X1=-195
U=[!UpdateMeasureGroup Sliders][!UpdateMeterGroup Items][!Redraw]

[Bar]
Meter=Bar
Group=Items
H=1366
W=250
X=#X1#
SolidColor=241,241,241,90
DynamicVariables=1
MouseOverAction=[!CommandMeasure MeasureSlide "Stop 1"][!CommandMeasure MeasureSlide "Execute 2"]
MouseLeaveAction=[!CommandMeasure MeasureSlide "Stop 2"][!CommandMeasure MeasureSlide "Execute 1"]

[MeasureSlide]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat Left,5,100
Left=[!SetVariable X1 "(Clamp(#X1#-3,-195,0))"]#U#
ActionList2=Repeat Right,5,100
Right=[!SetVariable X1 "(Clamp(#X1#+4,-195,0))"]#U#
DynamicVariables=1

I am really at wits end here as i have tried for about 1 hour without any result. plz help me out a bit.https://forum.rainmeter.net/posting.php?mode=post&f=5#

thnx in advance

[balala]

But it seems I was able to move only one at a time using two ini files. how can i move both of them at the same time without
going over the shut down button button and just by moving the cursor over the white bar.

You should have to modify the MouseOverAction and MouseLeaveAction options of the [Bar] meter of the "white bar". Here are they:

Code: Select all

[Bar]
...
MouseOverAction=[!CommandMeasure MeasureSlide "Stop 1"][!CommandMeasure MeasureSlide "Execute 2"][!CommandMeasure MeasureSlide "Stop 1" "The-Config-Of-The-Skin-With-The-Button"][!CommandMeasure MeasureSlide "Execute 2" "The-Config-Of-The-Skin-With-The-Button"]
MouseLeaveAction=[!CommandMeasure MeasureSlide "Stop 2"][!CommandMeasure MeasureSlide "Execute 1"][!CommandMeasure MeasureSlide "Stop 2" "The-Config-Of-The-Skin-With-The-Button"][!CommandMeasure MeasureSlide "Execute 1" "The-Config-Of-The-Skin-With-The-Button"]

With this trick, you can control the behavior of the [MeasureSlide] measure of the Button-Skin, from the White-Bar skin. See the added last parameter of the last two !CommandMeasure bangs, of both options: add here the Config of the skin which has the Button. Take a look at the Config parameter here: https://docs.rainmeter.net/manual/bangs/#CommandMeasure
If you don't succeed making this to work, for more specific help, please pack both configs and upload them.

[jsmorley]

Personally, I would think long and hard about have a "slider" effect on a panel that contains more than one skin. While with a great deal of thought and careful coding this can be done, be sure it is worth the effort to avoid having all the meters be in one skin.

With ActionTimer, you are likely going to be changing one or more "variables", that control the X and / or Y position of meters. When all the meters are in the same skin, having the X option of the meters set with a formula that uses that variable, like X=(10 + #Offset#) or something, can work really well. However, if you are using "ConfigName" as a parameter to the !SetVariable to change the variable at the same time in multiple skins, then it can get tricky.

The problem is the position of meters is relative to the skin, not the screen. So if you drag a skin out of the intended place, even by a pixel or two, the sliding effect will quickly get screwy. Keeping "skins" in a particular place relative to each other is not easy or graceful to do, other than manually dragging them around.

Just be quite sure you really need to go through the hassle of trying to keep two or more skins positioned "relative" to each other. It's not trivial to do.

You are likely going to need to have an OnRefreshAction in one of the skins that sets them all to some pre-defined place on the screen, in order to have things "start" in the right position, and to have a way to get things back where they belong if you drag a skin out of position. You are also going to need to send !UpdateMeter and !Redraw bangs to each skin between each "slide" action.

[balala]

Keeping "skins" in a particular place relative to each other is not easy or graceful to do, other than manually dragging them around.

Just be quite sure you really need to go through the hassle of trying to keep two or more skins positioned "relative" to each other. It's not trivial to do.

I don't contest you're right, however this can be achieved with one or two !Move bangs in the OnRefreshAction option. But this solution indeed doesn't control what happens if the user moves one (or the other) skin, without refreshing it.

[jsmorley]

I don't contest you're right, however this can be achieved with one or two !Move bangs in the OnRefreshAction option. But this solution indeed doesn't control what happens if the user moves one (or the other) skin, without refreshing it.

I don't like it. This means that you have to define one skin to be the "parent" of the entire group of skins, and have IT send !Move bangs to all the others on refresh. Then you have to be careful not to drag any of the skins while things are running, and in general it all just feels complicated and fragile.

Anything is possible, but I would look long and hard at having all this be in one skin.

[balala]

I don't like it. This means that you have to define one skin to be the "parent" of the entire group of skins, and have IT send !Move bangs to all the others on refresh. Then you have to be careful not to drag any of the skins while things are running, and in general it all just feels complicated and fragile.

Yes, you're right, I also said that with this solution you can't control the position of the skins if you're dragging one of them, without refreshing the "parent" skin. But it definitely is possible, I think.
And I also think defining one skin as a "parent" isn't absolutely necessary, you could add OnRefreshAction options with !Move bangs to move all other (or even the current) skins. I didn't try this yet, but I doubt it wouldn't work.
However this definitely isn't a desirable solution for a beginner.

[sonarokz]

You should have to modify the MouseOverAction and MouseLeaveAction options of the [Bar] meter of the "white bar". Here are they:

Code: Select all

[Bar]
...
MouseOverAction=[!CommandMeasure MeasureSlide "Stop 1"][!CommandMeasure MeasureSlide "Execute 2"][!CommandMeasure MeasureSlide "Stop 1" "The-Config-Of-The-Skin-With-The-Button"][!CommandMeasure MeasureSlide "Execute 2" "The-Config-Of-The-Skin-With-The-Button"]
MouseLeaveAction=[!CommandMeasure MeasureSlide "Stop 2"][!CommandMeasure MeasureSlide "Execute 1"][!CommandMeasure MeasureSlide "Stop 2" "The-Config-Of-The-Skin-With-The-Button"][!CommandMeasure MeasureSlide "Execute 1" "The-Config-Of-The-Skin-With-The-Button"]

Wow , thanx that really worked.https://forum.rainmeter.net/posting.php?mode=reply&f=5&t=27717#

Personally, I would think long and hard about have a "slider" effect on a panel that contains more than one skin. While with a great deal of thought and careful coding this can be done, be sure it is worth the effort to avoid having all the meters be in one skin.

With ActionTimer, you are likely going to be changing one or more "variables", that control the X and / or Y position of meters. When all the meters are in the same skin, having the X option of the meters set with a formula that uses that variable, like X=(10 + #Offset#) or something, can work really well. However, if you are using "ConfigName" as a parameter to the !SetVariable to change the variable at the same time in multiple skins, then it can get tricky.

The problem is the position of meters is relative to the skin, not the screen. So if you drag a skin out of the intended place, even by a pixel or two, the sliding effect will quickly get screwy. Keeping "skins" in a particular place relative to each other is not easy or graceful to do, other than manually dragging them around.

Just be quite sure you really need to go through the hassle of trying to keep two or more skins positioned "relative" to each other. It's not trivial to do.

You are likely going to need to have an OnRefreshAction in one of the skins that sets them all to some pre-defined place on the screen, in order to have things "start" in the right position, and to have a way to get things back where they belong if you drag a skin out of position. You are also going to need to send !UpdateMeter and !Redraw bangs to each skin between each "slide" action.

that was what i was trying initially but failed.can you tell me how to keep them in the same skin?

[jsmorley]

Yes, you're right, I also said that with this solution you can't control the position of the skins if you're dragging one of them, without refreshing the "parent" skin. But it definitely is possible, I think.
And I also think defining one skin as a "parent" isn't absolutely necessary, you could add OnRefreshAction options with !Move bangs to move all other (or even the current) skins. I didn't try this yet, but I doubt it wouldn't work.
However this definitely isn't a desirable solution for a beginner.

The trouble with not having a "parent", is that if you then drag any skin, you would have to refresh them all to get things back where they belong.

Certainly this all can be thought through and worked out to function pretty well, but I wouldn't do it. To each his own.

[jsmorley]

that was what i was trying initially but failed.can you tell me how to keep them in the same skin?

In general, what you want to do is create a variable, call it OffSet or something.

Then in every single meter, set the X option to be a formula like X=(10 + #OffSet#) and be sure to have DynamicVariables=1 on all the meters.

Then in the ActionTimer measure(s) you will use !SetVariable to alter the value of #OffSet#, and send an !UpdateMeter * to update all the meters and !Redraw to redraw the skin.

Then all meters will all move, in unison, as needed by applying the changing value of that #OffSet# variable.

[jsmorley]

Here is a small example skin:

Code: Select all

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

[Variables]
U=[!UpdateMeasureGroup Sliders][!UpdateMeterGroup Sliders][!Redraw]
W=1
Offset=-190
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#,-190,0))"]#U#
Left=[!SetVariable Offset "(Clamp(#Offset#-#SlideAmount#,-190,0))"]#U#
IfCondition=#Offset# = -190
IfTrueAction=[!SetOption MeterPanel LeftMouseUpAction """[!CommandMeasure MeasureSlider "Stop 2"][!CommandMeasure MeasureSlider "Execute 1"]"""]
IfCondition2=#Offset# = 0
IfTrueAction2=[!SetOption MeterPanel LeftMouseUpAction """[!CommandMeasure MeasureSlider "Stop 1"][!CommandMeasure MeasureSlider "Execute 2"]"""]
DynamicVariables=1

[MeterPanel]
Meter=Image
Group=Sliders
X=(0 + #Offset#)
W=200
H=100
SolidColor=0,0,0,255
DynamicVariables=1

[MeterItem1]
Meter=String
Group=Sliders
X=(20 + #Offset#)
Y=20
FontSize=11
FontWeight=400
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text=Item One
DynamicVariables=1
LeftMouseUpAction=[!Log "I clicked Item One"]

[MeterItem2]
Meter=String
Group=Sliders
X=(20 + #Offset#)
Y=10R
FontSize=11
FontWeight=400
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text=Item Two
DynamicVariables=1
LeftMouseUpAction=[!Log "I clicked Item Two"]

GIF.gif

Feel free to ask any questions...

Note that this will be a bit tricky to do with MouseOverAction / MouseLeaveAction instead of LeftMouseUpAction, as hovering over the "item" meters will cause a MouseLeaveAction to be seen by the panel. I'd have to chew on it. My assumption is that you are sliding out the panel with the items so you can take some action with them, so LeftMouseUpAction is going to make the most sense. You want to explicitly "take it out" and "put it away". Probably wouldn't be hard to have a MouseOverAction "take it out", but then have an explicit click with LeftMouseUpAction used to "put it away".