Mouse wheel to change DP state


#1

Hi…
Been trying to find out how I can use the mouse wheel event (up & down) to change the states of a DP, one by one, according to wheel direction.

Haven’t found anything even remotely close… seems to me a fairly basic interaction for scrolling through images, for example.

Can anyone point me in the right direction (if there is one…!!)?

Thanks


#2

There’s a way to do it using the “Scrolled Up”/Scrolled Down" triggers on dynamic panels but it’s pretty convoluted: Scroll_States_wWheel.rp (68.9 KB)

I’ll hopefully the example will fill in the details but here’s what’s going on:

If you wanted the ability to only scroll down, things are pretty easy. Create the panel, set it to only scroll vertically, and then set its height to be one pixel shorter than the content in each state (this will force it to always have scroll bar). Then just set the “Scrolled Down” event to “Set Panel State” to state “Next”. If you check “Wrap from last to first” the scroll wheel will cycle from first to last forever.

Scrolling up is much trickier. This is because whenever the panel switches states, it starts back at the top so you can’t scroll up. You can add a one pixel high widget at the bottom of the panel and use it as an “Anchor Link” to scroll the panel, but there’s a problem. Since the anchor link counts as a scroll event, it will trigger any “Scrolled Down” logic. So if you use the anchor on “Scrolled Up”, you’ll just be sent back to where you started. If it’s on “Scrolled Down”, you’ll trigger an infinite loop.

The only way (that I can think of) to get around this is to use two dynamic panels: one for “Scrolled Down” events and one for “Scrolled Up” events.

The “Scrolled Up” panel is the panel that has all the states you want to flip through. Add the anchor widget at the bottom of one of the states. Now, you’ll need to put the “scroll to anchor link” action on some benign event, I used the panel’s “Rotated” event.

Next, set the up panel’s “Scrolled Up” event to set the next state and also rotate “This by 0”. This means that, whenever the panel scrolls up, it will immediately scroll down again so there’s always an option to scroll up.

Now, the fun part. Put the up panel inside another dynamic panel. This one will be for “Scrolled Down” events. On the “Scrolled Down” event, have it set the “up panel” to go to the next state and to rotate the “up panel” by 0. You’ll also need to “reset” the down panel to go back to the top each time so there’s always a way to scroll down.

So long as you don’t scroll too fast, it works. The only left to do is mask out the scroll bars with another widget.

The other thing I should mention is something I discovered as I was playing around with this solution. If a dynamic panel state has a border (and not set to automatically resize), it will always have a vertical scroll bar. I used them to help with scrolling down instead of messing around with resizing things. I just set them to the same color as the background.