Making a switch style button, and adding sliding images

[Aceina]

I'm attempting to make a button that, when pressed (with mouse action up) will make a bunch of other button slide out from it, and when pressed again (in the same way) will retract all the buttons it just made.

I tried looking up sliding for rainmeter which brought me to this:

http://rainmeter.net/forum/viewtopic.php?f=115&t=21582&hilit=slide

but this seems to be more for hovering over an area, rather than pressing a button.

First things first, what would be the best method to making a button that would work in that "switch" style, and once i figure that out, how can I apply the slide effect?

[balala]

As you saw on the example skin you've linked, the easiest (but not the only) way to do what you want is using the ActionTimer plugin. Here's a small code, try it:

Code: Select all

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

[Variables]
U=[!UpdateMeasure "SliderDown"][!UpdateMeter *][!Redraw]
SlideDownY=-30
Action=0

[ButtonStyle]
Padding=15,5,15,5
FontSize=12
FontColor=250,250,250
SolidColor=0,0,0,150
StringAlign=LEFT
StringStyle=BOLD
AntiAlias=1
DynamicVariables=1

[MeasureAction]
Measure=Calc
Formula=#Action#
IfCondition=(MeasureAction=0)
IfTrueAction=[!CommandMeasure SliderDown "Stop 1"][!CommandMeasure SliderDown "Execute 2"]
IfFalseAction=[!CommandMeasure SliderDown "Stop 2"][!CommandMeasure SliderDown "Execute 1"]
DynamicVariables=1

[SliderDown]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideDown, 5, 15
SlideDown=[!SetVariable SlideDownY (Clamp(#SlideDownY#+5,-30,40))]#U#
ActionList2=Repeat SlideUp, 5, 15
SlideUp=[!SetVariable SlideDownY (Clamp(#SlideDownY#-5,-30,40))]#U#
DynamicVariables=1

[MeterButton1]
Meter=String
X=0
Y=#SlideDownY#
MeterStyle=ButtonStyle
Text=Button1

[MeterButton2]
Meter=String
X=10R
Y=#SlideDownY#
MeterStyle=ButtonStyle
Text=Button2

[MeterMainButton]
Meter=String
X=60
Y=0
MeterStyle=ButtonStyle
Text=Main
LeftMouseUpAction=[!SetVariable Action "(1-#Action#)"][!UpdateMeasure "MeasureAction"]

When you refresh (or load) the skin, you'll see just one button (in fact a string meter). The other two buttons are outside of the skin, you can't see them. You also have there a variable, named Action, which is 0 at the very first moment. When you click to the main button, the variable become 1 and, according to the actions set in the [MeasureAction] measure, the two buttons will start to slide down, becoming visible. At the next click, the variable become 0 again and once again, according to the actions set in [MeasureAction], the buttons will slide up, coming out of the skin.
Is this looking like what you wanted?

[jsmorley]

With SkinWdith / SkinHeight from the latest Rainmeter 3.3 beta at http://rainmeter.net and the ActionTimer plugin, you can do any number of cool things with slide-out menus of various kinds.

GamesSlider_1.0.rmskin

Click to animate:

test.gif

Code: Select all

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

[Variables]
ImagePath=#@#Images\
SliderX=295
LeastX=80
ImageWidth=70
SlideDirection=0
U=[!UpdateMeasure Slider][!UpdateMeter *][!Redraw]

; Clicker

[MeterClickerBack]
Meter=Image
Y=40
W=293
H=80
SolidColor=214,76,6,255
SolidColor2=173,63,9,255

[MeterClickerText]
Meter=String
X=90
Y=51
FontSize=37
FontColor=43,43,43,255
FontFace=Fira Sans
AntiAlias=1
Text=Games

[MeterClicker]
Meter=Image
X=4
Y=47
W=70
H=70
Path=#ImagePath#
ImageName=Controller.png
AntiAlias=1
DynamicVariables=1
LeftMouseUpAction=[!UpdateMeasure SlideOnClick]

; Slider

[SlideOnClick]
Measure=Calc
Formula=(1-#SlideDirection#)
IfCondition=SlideOnClick = 1
IfTrueAction=[!CommandMeasure Slider "Stop 2"][!CommandMeasure Slider "Execute 1"]
IfFalseAction=[!CommandMeasure Slider "Stop 1"][!CommandMeasure Slider "Execute 2"]
OnUpdateAction=[!SetVariable SlideDirection "(1-#SlideDirection#)"]
DynamicVariables=1
UpdateDivider=-1

[Slider]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideRight, 5, 15
SlideRight=[!SetVariable SliderX (Clamp(#SliderX#+15,#LeastX#,295))]#U#
ActionList2=Repeat SlideLeft, 5, 15
SlideLeft=[!SetVariable SliderX (Clamp(#SliderX#-15,#LeastX#,295))]#U#
DynamicVariables=1

; Games

[MeterGamesBack]
Meter=Image
X=#SliderX#
Y=0
W=213
H=160
SolidColor=214,76,6,100
SolidColor2=173,63,9,100
DynamicVariables=1
LeftMouseUpAction=[!UpdateMeasure SlideOnClick]

[MeterGame1]
Meter=Image
Path=#ImagePath#
X=#SliderX#
Y=8
W=70
H=70
ImageName=AssassinsCreed.png
AntiAlias=1
DynamicVariables=1
LeftMouseUpAction=[!Log "Assassins Creed"][!UpdateMeasure SlideOnClick]

[MeterGame2]
Meter=Image
Path=#ImagePath#
X=(#SliderX# + #ImageWidth#)
Y=8
W=70
H=70
ImageName=Bioshock.png
AntiAlias=1
DynamicVariables=1
LeftMouseUpAction=[!Log "BioShock"][!UpdateMeasure SlideOnClick]

[MeterGame3]
Meter=Image
Path=#ImagePath#
X=(#SliderX# + (#ImageWidth# * 2))
Y=8
W=70
H=70
ImageName=CallOfDuty4.png
AntiAlias=1
DynamicVariables=1
LeftMouseUpAction=[!Log "Call of Duty 4"][!UpdateMeasure SlideOnClick]

[MeterGame4]
Meter=Image
Path=#ImagePath#
X=#SliderX#
Y=83
W=70
H=70
ImageName=Fallout3.png
AntiAlias=1
DynamicVariables=1
LeftMouseUpAction=[!Log "Fallout 3"][!UpdateMeasure SlideOnClick]

[MeterGame5]
Meter=Image
Path=#ImagePath#
X=(#SliderX# + #ImageWidth#)
Y=83
W=70
H=70
ImageName=FarCry2.png
AntiAlias=1
DynamicVariables=1
LeftMouseUpAction=[!Log "Far Cry 2"][!UpdateMeasure SlideOnClick]

[MeterGame6]
Meter=Image
Path=#ImagePath#
X=(#SliderX# + (#ImageWidth# * 2))
Y=83
W=70
H=70
ImageName=GTA4.png
AntiAlias=1
DynamicVariables=1
LeftMouseUpAction=[!Log "Grand Theft Auto 4"][!UpdateMeasure SlideOnClick]

[Aceina]

Those are both basically what i was looking to do, thanks. I'm a little confused on how the slide commands work... is there a section somewhere in the manual that lists all the options?

Also, for the ActionTimer: do i need to download the .dll? or is it included in rainmeter beta 3.3?

Thanks for all the help though! I'm pretty sure i can piece together what i want to do now.

EDIT: nevermind on the action timer, i found the download section of that post. im assuming i need to put it in the @resources folder of any skin i want to ship out?

[balala]

I'm a little confused on how the slide commands work... is there a section somewhere in the manual that lists all the options?

All "slide commands" are related to the ActionTimer plugin. Here you can find the description.

Also, for the ActionTimer: do i need to download the .dll? or is it included in rainmeter beta 3.3?

EDIT: nevermind on the action timer, i found the download section of that post. im assuming i need to put it in the @resources folder of any skin i want to ship out?

No, at all. The simplest way is to download the ActionTimer_3.0.rmskin skin installer from the above jsmorley's link and install it. It'll install the proper version of the plugin, you don't even have to know where the file was copied (probably it'll be copied here: c:\Users\YourName\AppData\Roaming\Rainmeter\Plugins\ActionTimer.dll). After that, you can use the plugin.

[jsmorley]

I'm assuming i need to put it in the @resources folder of any skin i want to ship out?

You do need to include the plugin with any .rmskin you create and "ship out", but it won't be in @Resources. You will just include both the 32bit and 64bit versions of the plugin in your .rmskin when you create it.

http://docs.rainmeter.net/manual/publishing-skins

You will find the 32bit and 64bit versions of the plugin that you can use for distribution in your .rmskin either in the @Resources folder if you install the example .rmskin, or in separately in a .zip file, either of which you can download here:

ActionTimer 0.1 [Beta]

The appropriate 32bit or 64bit version of ActionTimer.dll will be installed on the end-user's system in C:\Users\TheirName\AppData\Roaming\Rainmeter\Plugins by your .rmskin when they install it.

[jsmorley]

I'm a little confused on how the slide commands work... is there a section somewhere in the manual that lists all the options?

There are no "slide commands" as such in Rainmeter.

What the ActionTimer plugin does is powerful, but really, really simple in concept. It allows you to execute a series of Rainmeter bangs or external commands, one after the other, with some amount of "pause" between each. That is all it is for...

The result of this is that you can have a series of actions that happen much "faster" than can be supported by just having some kind of loop and a really low overall skin "update rate".

All both balala and I are doing in our examples is just using that capability to change the "position" of some meters, in a series of "steps", really quickly. In a sense "animating" the movement of the meters in a short period of time.

So we are just changing one or more variables that are dynamically used by the meters in their X and / or Y positions, increasing or decreasing the value of the variables in a series of steps with a tiny 5 millisecond pause between each, while updating the meters and redrawing the skin between each.

ActionList1=Repeat SlideRight, 5, 15
SlideRight=[!SetVariable SliderX (Clamp(#SliderX#+15,#LeastX#,295))]#U#

So that is repeating 15 times, with a 5 millisecond pause between each step. The actual step itself is just adding 15 pixels to the value of the variable #SliderX#, while ensuring that it doesn't go below the value of #LeastX# or above 295. Then the variable #U# is just updating the measure (so it has the most recent up-to-date value for #SliderX# on each step, updating all the meters, and redrawing the skin.

Sliding the other way in ActionList2 is identical, only subtracting 15 pixels each time rather than adding...

That just has the visual effect of "sliding" the meters.

[Aceina]

I've finally gotten the hang of all of that and how it works. now I have a new problem:

I'm making a new skin using the same system, but fading the buttons in and out instead of sliding. I've gotten them to fade in, but they will now not fade back out.

Here's the code:

Code: Select all

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

[Variables]
W=50
U=[!UpdateMeasure "Fader"][!UpdateMeter *][!Redraw]
Action=0
Transparency=0

[MeasureAction]
Measure=Calc
Formula=#Action#
IfCondition=(MeasureAction=0)
IfTrueAction=[!CommandMeasure Fader "Stop 1"][!CommandMeasure Fader "Execute 2"]
IfFalseAction=[!CommandMeasure Fader "Stop 2"][!CommandMeasure Fader "Execute 1"]
DynamicVariables=1

[Fader]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat FadeIn, 5, 15
FadeIn=[!SetVariable Transparency (Clamp(#Transparency#+17,0,255))]#U#
ActionList2=Repeat FadeOut, 5, 15
FadeOut=[!SetVariable Transparency (Clamp(#Transparency#-17,0,255))]#U#
DynamicVariables=1

[MeterClickerBack]
Meter=Image
ImageName=#@#Images\folder.png
W=100
H=100
LeftMouseUpAction=[!SetVariable Action "(1-#Action#)"][!UpdateMeasure "MeasureAction"]

[MeterButton1]
Meter=Image
ImageName=#@#Images\notepad.png
W=100
H=100
X=40r
Y=75r
ImageAlpha=#Transparency#
LeftMouseUpAction=["C:\Windows\Notepad.exe"]
DynamicVariables=1

I'm also wondering if there's a way to put a delay on certain buttons. I'm trying to make it so each button fades in on after the other, so button 1 fades in, then button 2, then button 3, etc...
but mainly, I'm confused as to why it wont fade back out

[jsmorley]

The issue is here:

[MeterClickerBack]
Meter=Image
ImageName=#@#Images\folder.png
W=100
H=100
LeftMouseUpAction=[!SetVariable Action "(1-#Action#)"][!UpdateMeasure "MeasureAction"]
DynamicVariables=1

You must use the "current" value of the variable #Action#, or you are only ever going to change it once...

[jsmorley]

This is a suggestion on how you might approach your other question...

Code: Select all

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

[Variables]
Action=0
Alpha1=0
Alpha2=0
Alpha3=0
Alpha4=0
U=[!UpdateMeasure Fader][!UpdateMeter *][!Redraw]

[MeterFadeIn]
Meter=String
FontSize=14
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text=Toggle
DynamicVariables=1
LeftMouseUpAction=[!SetVariable Action "(1-#Action#)"][!UpdateMeasure "MeasureAction"]

[MeasureAction]
Measure=Calc
Formula=#Action#
IfCondition=MeasureAction=0
IfTrueAction=[!CommandMeasure Fader "Stop 1"][!CommandMeasure Fader "Execute 2"]
IfFalseAction=[!CommandMeasure Fader "Stop 2"][!CommandMeasure Fader "Execute 1"]
DynamicVariables=1

[Fader]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat FadeIn1, 15, 15 | Wait 20 | Repeat FadeIn2, 15, 15 | Wait 20 | Repeat FadeIn3, 15, 15 | Wait 20| Repeat FadeIn4, 15, 15
FadeIn1=[!SetVariable Alpha1 (Clamp(#Alpha1#+17,0,255))]#U#
FadeIn2=[!SetVariable Alpha2 (Clamp(#Alpha2#+17,0,255))]#U#
FadeIn3=[!SetVariable Alpha3 (Clamp(#Alpha3#+17,0,255))]#U#
FadeIn4=[!SetVariable Alpha4 (Clamp(#Alpha4#+17,0,255))]#U#
ActionList2=Repeat FadeOut4, 15, 15 | Wait 20 | Repeat FadeOut3, 15, 15 | Wait 20 | Repeat FadeOut2, 15, 15 | Wait 20| Repeat FadeOut1, 15, 15
FadeOut1=[!SetVariable Alpha1 (Clamp(#Alpha1#-17,0,255))]#U#
FadeOut2=[!SetVariable Alpha2 (Clamp(#Alpha2#-17,0,255))]#U#
FadeOut3=[!SetVariable Alpha3 (Clamp(#Alpha3#-17,0,255))]#U#
FadeOut4=[!SetVariable Alpha4 (Clamp(#Alpha4#-17,0,255))]#U#
DynamicVariables=1

[Meter1]
Meter=String
Y=5R
FontSize=14
FontColor=255,255,255,#Alpha1#
SolidColor=47,47,47,#Alpha1#
Padding=5,5,5,5
AntiAlias=1
DynamicVariables=1
Text=Item 1

[Meter2]
Meter=String
Y=5R
FontSize=14
FontColor=255,255,255,#Alpha2#
SolidColor=47,47,47,#Alpha2#
Padding=5,5,5,5
AntiAlias=1
DynamicVariables=1
Text=Item 2

[Meter3]
Meter=String
Y=5R
FontSize=14
FontColor=255,255,255,#Alpha3#
SolidColor=47,47,47,#Alpha3#
Padding=5,5,5,5
AntiAlias=1
DynamicVariables=1
Text=Item 3

[Meter4]
Meter=String
Y=5R
FontSize=14
FontColor=255,255,255,#Alpha4#
SolidColor=47,47,47,#Alpha4#
Padding=5,5,5,5
AntiAlias=1
DynamicVariables=1
Text=Item 4

test.gif

Note that I set Update=-1 in the [Rainmeter] section. There is no reason to let this skin waste cycles updating itself once a second, since the entire thing is on demand by clicks. Obviously if the skin was doing other stuff as well that needed updating, then you wouldn't do that.