Navigating a Vertical Menu using Arrow Keys

I use Axure to create prototypes that can be manipulated with a video game controller using JoyToKey and OnKeyDown events.

I’d like to create a vertical menu that is navigated by pressing Up and Down arrows. Preferably one that also scrolls as you navigate below/above the fold of the list.

Like this.

So far I’ve done this with a Dynamic Panel with a different state for each selection, but this gets combersome really quickly. I’ve also got it working pretty well with Repeaters, but performance gets slow since I need to refresh and select a different row each time a key is pressed.

So far I prefer the Repeater option and would like to improve its performance. Any thoughts on how I could accomplish this?

Thanks!

Take a look at this: RepeaterMenuNav.rp (117.9 KB)

I did a search of this forum for “navigating a repeater” and came across this thread from a few years back. That shows you how to control selection of repeater items to navigate up and down the list. (Gregor is the all time master of repeater lists!)

I applied that method to your Up/Down keystrokes and request to scroll the repeater list within a dynamic panel to come up with a styled wireframe that seems pretty responsive. You can update the shapes and rectangles with your own graphics to fully skin this to match your example–you just need to create the right size PNGs and animated GIFs, maybe style it with CSS and webfonts. Just search the forum for tips.

You can also do a search for “sound” to add in game sound effects or HTML video via javascript.

1 Like

Dude, this is amazing!

I had something very similar working, but I thought the only way to get this effect was to refresh the repeater via updating rows or removing filters. I didn’t realize you could manipulate repeaters this way with selection groups.

Your scrolling logic is way better than mine, too. I was tracking how many items were currently visible, the top visible item, and the bottom visible item with variables. I used those to determine if the list needs to scroll or not.

Thank you so much. This is going to seriously enhance my growing library of widgets that work with controllers.

After playing around with this some more, I noticed one problem with using math to determine if the selected list item is above/below the fold for scrolling.

You can see it in Page 1 of your file if you nav down to Quinto, then up to Horst Borsodi. The list scrolls down because it thinks it needs to move to something below the fold.

Any thoughts on how to solve this? Tracking top visible, visible count, and bottom visible works pretty well, but makes the whole thing a lot less elegant and the mask has to be a precise height that ends at the bottom of a list item.