It is currently March 28th, 2024, 6:59 pm

Interactive buttons

Get help with creating, editing & fixing problems with skins
thefunniman
Posts: 3
Joined: July 21st, 2019, 9:36 am

Interactive buttons

Post by thefunniman »

Hey guys, im kinda new here (so I hope I posted this in the right section), but I was hoping someone could help me out. I want to create an interactive button, like what was done in this reddit post :

https://www.reddit.com/r/twice/comments/6e1skv/made_a_signal_themed_wallpaper/?utm_source=amp&utm_medium=comment_list

Does anyone know how to do it?

any help would be appreciated, thanks a lot :D
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Interactive buttons

Post by balala »

thefunniman wrote: July 21st, 2019, 9:41 am I want to create an interactive button, like what was done in this reddit post :
You need those images sliding down when you are hovering the mouse over the place where they are? Have I understood well your request?
If I did, ActionTimer plugin measures might help.
thefunniman
Posts: 3
Joined: July 21st, 2019, 9:36 am

Re: Interactive buttons

Post by thefunniman »

balala wrote: July 21st, 2019, 10:07 am You need those images sliding down when you are hovering the mouse over the place where they are? Have I understood well your request?
If I did, ActionTimer plugin measures might help.
yea, like when I went hovered over one of the icons, the image slid down, Ill try actiontimer plugin, thanks :D
hope it aint too complicated cause im realll bad at this coding things xd
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Interactive buttons

Post by jsmorley »

The concept isn't hard, although it will take a bit of code to do this right. The idea is that you want all the images to be positioned "outside" of some container meter. Then when you hover over a trigger meter (the icons) it uses ActionTimer to incrementally "slide" the images from outside the container to "inside" it, so they are displayed. You do this by changing the Y position of the image meters in the container. When you move off of the trigger meter, ActionTimer slides the image back outside.

I think you will need an ActionTimer measure for each image, so you can simultaneously have one sliding "in" while the other is sliding back "out".
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Interactive buttons

Post by jsmorley »

At its most basic, it will look something like this...

Code: Select all

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

[Variables]
U=[!UpdateMeasure *][!UpdateMeter *][!Redraw]
Image1Y=-64
Image2Y=-64

; Measures 

[Image1Slider]
Measure=Plugin
Plugin=ActionTimer
DynamicVariables=1
ActionList1=Repeat SlideDown,1,8
ActionList2=Repeat SlideUp,20,16
SlideDown=[!SetVariable Image1Y "(Clamp(#Image1Y#+8,-64,0))"]#U#
SlideUp=[!SetVariable Image1Y "(Clamp(#Image1Y#-4,-64,0))"]#U#

[Image2Slider]
Measure=Plugin
Plugin=ActionTimer
DynamicVariables=1
ActionList1=Repeat SlideDown,1,8
ActionList2=Repeat SlideUp,20,16
SlideDown=[!SetVariable Image2Y "(Clamp(#Image2Y#+8,-64,0))"]#U#
SlideUp=[!SetVariable Image2Y "(Clamp(#Image2Y#-4,-64,0))"]#U#

; Meters

[MeterContainer]
Meter=Shape
X=0
Y=0
Shape=Rectangle 0,0,138,64 | StrokeWidth 0

[MeterImage1]
Meter=Image
ImageName=#@#Images\MovieBlue.png
X=0
Y=#Image1Y#
W=64
PreserveAspectRatio=1
DynamicVariables=1
Container=MeterContainer

[MeterImage2]
Meter=Image
ImageName=#@#Images\MovieRed.png
X=74
Y=#Image2Y#
W=64
PreserveAspectRatio=1
DynamicVariables=1
Container=MeterContainer

[MeterIcon1]
Meter=Image
ImageName=#@#Images\Check.png
X=16
Y=69
W=32
PreserveAspectRatio=1
SolidColor=0,0,0,1
MouseOverAction=[!CommandMeasure Image1Slider "Stop 2"][!CommandMeasure Image1Slider "Execute 1"]
MouseLeaveAction=[!CommandMeasure Image1Slider "Stop 1"][!CommandMeasure Image1Slider "Execute 2"]

[MeterIcon2]
Meter=Image
ImageName=#@#Images\Check.png
X=90
Y=69
W=32
PreserveAspectRatio=1
SolidColor=0,0,0,1
MouseOverAction=[!CommandMeasure Image2Slider "Stop 2"][!CommandMeasure Image2Slider "Execute 1"]
MouseLeaveAction=[!CommandMeasure Image2Slider "Stop 1"][!CommandMeasure Image2Slider "Execute 2"]

GIF.gif

Doesn't matter what images or icons you use, that is just a question of size and tweaking the W/H/X/Y settings. I'm glad to explain any of this as needed...

https://docs.rainmeter.net/manual/meters/shape/
https://docs.rainmeter.net/manual/meters/general-options/container/
https://docs.rainmeter.net/manual/plugins/actiontimer/
https://docs.rainmeter.net/manual/formulas/#Functions
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: Interactive buttons

Post by balala »

jsmorley wrote: July 21st, 2019, 11:27 am At its most basic, it will look something like this...
Just to explain a little bit jsmorley's code, here is what it does.
There are two variables (defined into the [Variables] section, which control the position of those two image meters (Image1Y=-64 and Image2Y=-64). The [Image1Slider] and [Image2Slider] ActionTimer plugin measures are used to increase / decrease the values of those two variables. Both measures have two actions defined: in both cases, the first action (ActionList1) is used to increase the value of the appropriate variable (Image1Y and Image2Y respectively, sliding the Image meters down), while the second one (ActionList2) to decrease the value of the same variable, sliding the meters up (the used Clamp functions keep these values into a defined range, from -64 to 0). The vertical (Y) positions of the sliding Image meters ([MeterImage1] and [MeterImage2]) are using the Image1Y and Image2Y variables, so when their values are modified by the appropriate ActionTimer plugin measure, the images are sliding in / out, accordingly. The [MeterIcon1] and [MeterIcon2] meters are used to execute one of the actions defined into the ActionTimer plugin measures. Whenever are you hovering the mouse over any of these meters, the appropriate MouseOverAction option executes the appropriate action list of the appropriate measure, when you're leaving the meters, the appropriate MouseLeaveAction option being executed. These slide in and out the appropriate Image meters. The last thing you need there is a Container meter (in this case [MeterContainer]), which controls which part of the meters is visible at any given moment.
The essence of this plugin is that it can be used to execute something (in this case to update the values of those variables) much more frequently then the Update value of the skin. See that in the above code, the Update is set to 1000 (so the skin is updated once per 1000 milliseconds = 1 second), but the variables are updated 50 times per second (due to the Wait time value, the second numeric value used into the ActionList1 and ActionList2 options - but see below my remark - which is set to 20 and this means an update per 1000 / 20 = 50 milliseconds).

Jsmorley, just as a remark here, I think the Wait time number of both ActionList1 options are set to small. Instead of 1, they should have to have the same values as those used into the ActionList2, so 20. So accordingly the ActionList1=Repeat SlideDown,1,16 should be ActionList1=Repeat SlideDown,20,16. Am I right?
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Interactive buttons

Post by jsmorley »

balala wrote: July 21st, 2019, 12:02 pm Jsmorley, just as a remark here, I think the Wait time number of both ActionList1 options are set to small. Instead of 1, they should have to have the same values as those used into the ActionList2, so 20. So accordingly the ActionList1=Repeat SlideDown,1,16 should be ActionList1=Repeat SlideDown,20,16. Am I right?
No, based on the video the guy posted, I wanted to replicate the effect that the images slide "in" quite quickly, but slide back "out" more slowly. So for the slide "in", I made the wait time between each repeat less, cut the number of increments in half, and increased the amount of change for each increment. All of this is a judgment call based in the size of the images, thus the total amount of movement you need, and the speed and smoothness you want.

Basically, animations with ActionTimer are controlled by 1) The number of times you repeat the change, 2) The amount of time you wait between each repeat, 3) The amount of change you do in each increment. There is no good way to quantify that, it's best to try things until you get the effect you want. "Smoothness" and "Speed" more or less act against each other, so you have to find the balance between them that you want.
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Interactive buttons

Post by balala »

jsmorley wrote: July 21st, 2019, 12:07 pm No, based on the video the guy posted, I wanted to replicate the effect that the images slide "in" quite quickly, but slide back "out" more slowly. So for the slide "in", I made the wait time between each repeat less, cut the number of increments in half, and increased the amount of change for each increment.
Oh, ok in this case, I though it was something not intentional. Sorry for my intervention. Updated my reply above.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Interactive buttons

Post by jsmorley »

My approach to this was the following thought process...

1) How big are the images I want to slide in and out? Ok, they are 64X64. That means I will need to slide them 64 pixels "down" to have them "slide into" view.

2) That means that to start "outside" the view, I need to set them with an initial Y (top) value of -64. When they are fully visible, they will have a Y value of 0.

3) So I need a container meter to hold them, and to create a "viewport" they can slide in and out of. How big do I need to make that? Well, since I have two 64 pixels wide images, that is 128. I don't really want them jammed up next to each other, so let's add 10 pixels between them, so the container will be 138 pixels wide, by 64 pixels tall. Shape=Rectangle 0,0,138,64 | StrokeWidth 0.

4) Then I just create the two image meters, using my variables #Image1Y# and #Image2Y# to set their starting Y positions of -64. I put them in the container meter with Container=MeterContainer. They are invisible to start, as they are positioned outside (above) the "viewport" created by the container.

5) Now I need my ActionTimer measures. The things I need to consider here are:

a) How far in total do I need to slide the images down and up? That is 64 pixels, as discussed above.

b) Sliding them 1 pixel per increment 64 times is likely to be pretty slow. Let's try sliding them 4 pixels per increment, which means I need to repeat that change 16 times to get a total of 64 pixels of movement. I put a short wait of 20 milliseconds between each change, just to see how that looks.

You will find that a phenomenon called "persistence of vision" means you don't need to move things in many tiny increments to get a "smooth" visual effect. It's the reason that any "movie" even exists... Again, the idea is to strike a pleasing balance between "speed" and "smoothness".

c) So the meat and potatoes of the ActionTimer plugin are the named "actions" you repeat. In this case I have two for each measure, ActionList1 and ActionList2, which are used to repeat SlideDown and SlideUp respectively.
ActionList1=Repeat SlideDown,20,16
ActionList2=Repeat SlideUp,20,16

d) Initially, I had SlideDown and SlideUp set the same.
SlideDown=[!SetVariable Image1Y "(Clamp(#Image1Y#+4,-64,0))"]#U#
SlideUp=[!SetVariable Image1Y "(Clamp(#Image1Y#-4,-64,0))"]#U#
What this does on each repeated call to them is to increment the variable #Image1Y# by 4, (+ to move "down" and - to move "up") then update the measure(s) so the variable is kept current, and update the meter(s) so they reflect the change in the Y value.

The Clamp(NewValue,LeastAllowed,MostAllowed) function is used to ensure you don't "overrun" the low and high values you want. In this case my calculations are exact, 16 X 4 is 64 pixels, so the Clamp() in theory isn't really required, but most often you can't, or don't want to bother, with getting things exact, and Clamp() means you don't have to... In truth, since you can "interrupt" any of these actions in the middle, you do want and need to use Clamp().

6) Then I add MoveOverAction and MouseLeaveAction to the icon meters, which we will use as the "trigger" for the action. On MouseOverAction they call the ActionTimer measure and tell it to run ActionList1, and on MouseLeaveAction they tell it to run ActionList2.

That's all there is to it really. Later on, I decided to change the ActionList1 actions a bit to make that part "faster" as discussed in an earlier post.
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Interactive buttons

Post by balala »

jsmorley wrote: July 21st, 2019, 11:27 am Doesn't matter what images or icons you use, that is just a question of size and tweaking the W/H/X/Y settings.
Yes, really, however the posted code can't be used for any size, there are a few things which have to be rewritten, if you're using other images, with different sizes. So, I rewrote the code, here is what have I got.
First of all, I added an ImageSize variable to the [Variables] section, to set a size of both Image meters: ImageSize=64 (obviously you can freely change the value, if needed / desired). I also rewrote the Image1Y and Image2Y variables, to get used the newly added ImageSize variable: Image1Y=-#ImageSize# and Image2Y=-#ImageSize#. Note here that the ImageSize variable MUST be placed BEFORE Image1Y and Image2Y. Last I rewrote the U variable, to not getting updated all meters, because it's not needed:

Code: Select all

[Variables]
ImageSize=64
U=[!UpdateMeasure "Image1Slider"][!UpdateMeasure "Image2Slider"][!UpdateMeter "MeterImage1"][!UpdateMeter "MeterImage2"][!Redraw]
Image1Y=-#ImageSize#
Image2Y=-#ImageSize#
Next is to use the added ImageSize variable into the formulas used to calculate the updated values of the Image1Y and Image2Y variables within the SlideDown and SlideUp options of both ActionTimer plugin measures:

Code: Select all

[Image1Slider]
...
SlideDown=[!SetVariable Image1Y "(Clamp((#Image1Y#+#ImageSize#/16),-#ImageSize#,0))"]#U#
SlideUp=[!SetVariable Image1Y "(Clamp((#Image1Y#-#ImageSize#/16),-#ImageSize#,0))"]#U#

[Image2Slider]
...
SlideDown=[!SetVariable Image2Y "(Clamp((#Image2Y#+#ImageSize#/16),-#ImageSize#,0))"]#U#
SlideUp=[!SetVariable Image2Y "(Clamp((#Image2Y#-#ImageSize#/16),-#ImageSize#,0))"]#U#
Because in both options of both measures when the appropriate variable is updated it takes 16 steps to get a complete variation of them, I divided the value of the ImageSize variable with 16 and that1s what have I used for variable change into one single step. I also rewrote the lower limit of the Clamp function to -#ImageSize#.
Both positions of all four Image meters were also rewritten, to take into account the size of the images. A DynamicVariables=1 option has also been required on [MeterIcon1] and [MeterIcon2] meters:

Code: Select all

[MeterImage1]
...
X=0
Y=#Image1Y#
W=#ImageSize#
...

[MeterImage2]
...
X=([MeterImage1:XW]+10)
Y=#Image2Y#
W=#ImageSize#
...

[MeterIcon1]
...
X=([MeterImage1:X]+([MeterImage1:W]-[#CURRENTSECTION#:W])/2)
Y=(#ImageSize#+5)
...
DynamicVariables=1

[MeterIcon2]
...
X=([MeterImage2:X]+([MeterImage2:W]-[#CURRENTSECTION#:W])/2)
Y=(#ImageSize#+5)
...
DynamicVariables=1
And finally the size of the container meter has also had to be set:

Code: Select all

[MeterContainer]
...
Shape=Rectangle 0,0,(2*#ImageSize#+10),#ImageSize# | StrokeWidth 0
With all these modifications of the code, now you can set any size for the Image meters, however the two meters have to have the same size. There is also possible to have them with different sizes, but this modifications as described above, use the same size for both meters.
Just to make much easier, here is the updated code:

Code: Select all

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

[Variables]
ImageSize=64
U=[!UpdateMeasure "Image1Slider"][!UpdateMeasure "Image2Slider"][!UpdateMeter "MeterImage1"][!UpdateMeter "MeterImage2"][!Redraw]
Image1Y=-#ImageSize#
Image2Y=-#ImageSize#

; Measures 

[Image1Slider]
Measure=Plugin
Plugin=ActionTimer
DynamicVariables=1
ActionList1=Repeat SlideDown,1,16
ActionList2=Repeat SlideUp,20,16
SlideDown=[!SetVariable Image1Y "(Clamp((#Image1Y#+#ImageSize#/16),-#ImageSize#,0))"]#U#
SlideUp=[!SetVariable Image1Y "(Clamp((#Image1Y#-#ImageSize#/16),-#ImageSize#,0))"]#U#

[Image2Slider]
Measure=Plugin
Plugin=ActionTimer
DynamicVariables=1
ActionList1=Repeat SlideDown,1,16
ActionList2=Repeat SlideUp,20,16
SlideDown=[!SetVariable Image2Y "(Clamp((#Image2Y#+#ImageSize#/16),-#ImageSize#,0))"]#U#
SlideUp=[!SetVariable Image2Y "(Clamp((#Image2Y#-#ImageSize#/16),-#ImageSize#,0))"]#U#

; Meters

[MeterContainer]
Meter=Shape
X=0
Y=0
Shape=Rectangle 0,0,(2*#ImageSize#+10),#ImageSize# | StrokeWidth 0

[MeterImage1]
Meter=Image
ImageName=#@#Images\MovieBlue.png
X=0
Y=#Image1Y#
W=#ImageSize#
PreserveAspectRatio=1
DynamicVariables=1
Container=MeterContainer

[MeterImage2]
Meter=Image
ImageName=#@#Images\MovieRed.png
X=([MeterImage1:XW]+10)
Y=#Image2Y#
W=#ImageSize#
PreserveAspectRatio=1
DynamicVariables=1
Container=MeterContainer

[MeterIcon1]
Meter=Image
ImageName=#@#Images\Check.png
X=([MeterImage1:X]+([MeterImage1:W]-[#CURRENTSECTION#:W])/2)
Y=(#ImageSize#+5)
W=32
PreserveAspectRatio=1
SolidColor=0,0,0,1
MouseOverAction=[!CommandMeasure Image1Slider "Stop 2"][!CommandMeasure Image1Slider "Execute 1"]
MouseLeaveAction=[!CommandMeasure Image1Slider "Stop 1"][!CommandMeasure Image1Slider "Execute 2"]
DynamicVariables=1

[MeterIcon2]
Meter=Image
ImageName=#@#Images\Check.png
X=([MeterImage2:X]+([MeterImage2:W]-[#CURRENTSECTION#:W])/2)
Y=(#ImageSize#+5)
W=32
PreserveAspectRatio=1
SolidColor=0,0,0,1
MouseOverAction=[!CommandMeasure Image2Slider "Stop 2"][!CommandMeasure Image2Slider "Execute 1"]
MouseLeaveAction=[!CommandMeasure Image2Slider "Stop 1"][!CommandMeasure Image2Slider "Execute 2"]
DynamicVariables=1
Set the desired size of the Image meters.