Source
r/Rainmeter•
Halbridious

Can you add slide-in/out behavior to an existing skin? Curious about how that's actually constructed.

Question

I've been experimenting w/ Rainmeter for a week or so now, and I have some programming experience, but I'm still a bit lost on exactly how rainmeter actually handles the construction of it's skins, how things are nested and anchored to eachother etc. (Retraining my brain to the vernacular of rainmeter has been an adventure).

I have an existing dock system I rather Like the look of (it's a heavily modified version of the lefthand dock on this skin ). I want, if possible, to modify it to hide almost completely, unfurl the first darker toolbar on mouse-over, and then unfurl completely on mouse click.

What I'm not sure of is if I can build that behavior into the background and the text elements will slide w/, or if I have to move every element around, or what. I've read this topic on using action timers I'm just wondering exactly what the construction looks like.

Any help (or, if there's a suggestion of a skin that does what I want already) would be appreciated!

Posted Dec 17, 2019, 10:55 PM UTC

111
Wi1dCard2210•

A sort of related starting point- create a small rectangle which spans the left side of your screen and use a mouse over command to trigger the unfurl. Use a mouse leave command on the skin itself so it disappears when you take the cursor off the opened menu. Set the icons to open their respective translucent menu bar once you click on them with a left mouse up command.

As for the animation to open and close, you can simplify applying it to each element once you actually design a working animation- I looked into it myself but it seems too time consuming for me at the moment. If you make any progress in making the transition effect though, let me know and I could help you rig it up on all of the text elements and things.

1
HalbridiousOP•

So my simple question: am I applying a transition to ALL elements?

If I say "expand this rectangle on mouse over", is that rectangle a container that affects objects inside it? Or do I have to independently link a text element to have an effect somehow when that mouse over happens?

1
Wi1dCard2210•

You can assign the different meters to a single group and I'm fairly certain you can apply the transition effect to the whole group afterwards. I'm not sure if it would work to apply the transition effect to the whole skin or if you would have to set each individual meter and measure as a group member, but it wouldn't be too difficult to test.

And to have that rectangle trigger the rest of the skin to roll over, you'd just have to set it to start the animation on the sidebar group.

1
HalbridiousOP•

OK, that sounds like the answer I needed, thank you.

1
Wi1dCard2210•

Just keep in mind to disable "keep on screen" so you can stash the sidebar off the left edge when not in use.

1
PM_RAINMETER_ISSUES•

Like u/Wi1dCard2210 is getting at, there are quite a few ways to approach this, from the 'technically works but super time consuming' to 'organized and much neater'. Construction varies depending on your need, but your idea is very much in the realms of possibility. If you need any help to understand how to construct this, please let me know.

1
HalbridiousOP•

ANything you're willing to give me I'll take.

I'm just about to sit down and actually tackle this project tonight, and I understand (i think) how to use action timers to just progressively slide things in and out, my big thing is just how to arrange it so that all the things behave teh same way and are spaced correctly. WildCard suggested groups, which hopefully helps handle that.

1
PM_RAINMETER_ISSUES•

The way you want to use ActionTimer is set-up like this:

ActionList1=Repeat Action, x, y

Action=[!Bang]

where

x = wait time (in milliseconds), and y = repeat number.

For animation stuff, you change a quality of a meter (or a group of meters) such as position in many small increments. To give a meter a slide effect, you would assign a meter's X value to a dynamically changing variable. With ActionTimer, this means you change that variable's amount just a little bit every repetition of the action, which increments it a bit more for the next cycle. If you would like a simple example, I can provide one.

1
HalbridiousOP•

I've been experimenting over the last couple of days and I think i have a pretty good idea of what I need to do.

Now just comes the part where I make it look pretty and be, you know, functional lol.

Thanks for the help!

1
HalbridiousOP•

Well, u/PM_RAINMETER_ISSUES, I've hit a snag using ActionTimers, specifically in them failing to call the second element (ActionList2). If you've got a moment to diagnose me, I'd be eternally grateful. I've nested my behaviors inside of container elements to make it all slide nice and easy as one unit, which has worked. I've got a hidden panel that activates a rollout fine, and clicking that rollout bar (the "edgebar") activates a further extension just fine, but when I want to retract those elements... no go. My log shows that both States change to 2, but that doesn't actively call the second action list when state is called.

EDIT: You can't see the mouse, because i'm dumb, but here's a screencapped video do demonstrate

[Rainmeter]
Update=1000
AccurateText=1
SkinWidth=250
SkinHeight=#SCREENAREAHEIGHT#

[Metadata]
Name=HalDock
Author=Jacob "Halbridious" Hamberg
Information=A dock/launcher designed to slide in and out from the side of the screen in 2 phases based on mouse over and click
Version= .01
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0

[Variables]
Offset1=-50
Offset2=-250
;active offsets are the counters
Offset1_Active=-50
Offset2_Active=-200
State1=1
State2=1
Update=[!UpdateMeasure EdgeBarSlider][!UpdateMeter *][!Redraw]
Update2=[!UpdateMeasure ExtendedSlider][!UpdateMeter *][!Redraw]

----------------------------

;EDGE BAR

-----------------------------

;SLIDING ACTION
[EdgeBarSlider]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideRight, 3, 10
SlideRight=[!SetVariable State1 "2"][!SetVariable Offset1_Active "(Clamp(#Offset1_Active#+5,#Offset1#,0))"]#Update#
ActionList2=Repeat SlideLeft, 3, 10
SlideLeft[!SetVariable State1 "1"][!SetVariable Offset1_Active "(Clamp(#Offset1_Active#-5, #Offset1#, 0))"]#Update#
DynamicVariables=1

;Meter
[EdgeBar_Backer]
Meter=Image
W=20
H=#SCREENAREAHEIGHT#
SolidColor=255,255,255,1
MouseOverAction=[!CommandMeasure EdgeBarSlider "Execute 1"]

[EdgeBar_Container]
Meter=Image
X=#Offset1_Active#
W=50
H=#SCREENAREAHEIGHT#
SolidColor=255,255,255,255
DynamicVariables=1

[EdgeBar_Vis]
Meter=Image
W=50
H=#SCREENAREAHEIGHT#
SolidColor=0,0,0,150
Container=EdgeBar_Container
MouseLeaveAction=[!CommandMeasure EdgeBarSlider "Execute 2"]
LeftMouseUpAction=[!CommandMeasure ExtendedSlider "Execute #State2#"]

;LOGOS FOR THE EDGEBAR

[Icon1]
Meter=Image
ImageName=#@#pc.png
x=10
y=((#SCREENAREAHEIGHT#/2))
DynamicVariables=1
LeftMouseUpAction=["C:\Users\Jacob\Documents\DESKTOP"]
MouseOverAction=[!SetOption #CURRENTSECTION# ImageName "#@#pc_over.png"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# ImageName "#@#pc.png"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
ToolTipText="Desktop Folder"
Container=EdgeBar_Container

-----------------------------

;EXTENDED PANEL

-----------------------------

;SLIDING ACTION
[ExtendedSlider]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideRight, 3, 25
SlideRight=[!SetVariable State2 "2"][!SetVariable Offset2_Active "(Clamp(#Offset2_Active#+10,#Offset2#,50))"]#Update2#
ActionList2=Repeat SlideLeft, 3, 25
SlideLeft[!SetVariable State2 "1"][!SetVariable Offset2_Active "(Clamp(#Offset2_Active#-10, #Offset2#, 50))"]#Update2#
DynamicVariables=1

[ExtendedPanel_Container]
Meter=Image
X=#Offset2_Active#
W=200
H=#SCREENAREAHEIGHT#
SolidColor=255,255,255,255
DynamicVariables=1

[ExtendedPanel_Vis]
Meter=Image
W=200
H=#SCREENAREAHEIGHT#
SolidColor=0,0,0,100
DynamicVariables=1
Container=ExtendedPanel_Container

[Logo]
Meter=Image
X=50
y=100
ImageName=#@#feed_small.png
DynamicVariables=1
Container=ExtendedPanel_Container
1