Blocking specific input events if certain conditions are met?


#1

Hi!

I’m building a touchless gesture controlled prototype and am curious how far I can go in Noodl…
Imagine the following secnario:

  1. I have a vertical list of items that can be browsed using a swipe gesture.

  2. There is also a contextual menu that I can summon (which will cover all content in the view like a modal) using an open hand gesture. The contextual menu is also scrollable/browsable using the swipe gesture.

To the issue:
Once the contextual menu is summoned (and covers the view like a modal), I want the swipe gesture input to only trigger the contextual menu, and not the list in the background.

Is there any way for me to do this? Can I prevent a specific input source from triggering if certain conditions are met? What Noodl components should I use?

Screenshot of a very rough prototype of the functionality:

Thanks!


#2

Great question, here are a few alternatives:

A state node
Make a State node that keeps track of the current state. So it’ll have states “Contextual menu” and “Background list” (for lack of a better name :slight_smile:) and start in the “Background list” state. Openhand sets the state to “Contextual menu” and closehand sets it to “Background list”.

You can then use an “And” node and the current state to control the different lists. So to browse the background list you would connect State output “At Background List” and “swipe_left” to an And node, and connect that And node to the “Browse animation”. Same for swipe_right.
And then the same for the contextual menu and use the “At Contextual Menu” output instead.

So you won’t use any of the animation capabilities of the state mode, it’s only for logic and keeping track of state. So all transitions should be set to 0 milliseconds.
Hope that made sense!

Javascript
Connect the swipe outputs to a javascript node, and let it control all the flow and keep track of the current state. So it’ll have multiple outputs, like “background list left”, "background list left"m “contextual menu left” etc.
If you’re comfortable with Javascript this option might be a bit easier, especially if it grows to include more and more states.


#3

Wow, quick reply!
I’ll go for the approach with JS since I will be adding more interactions/logic to the contextual menu later on.
Will post my progress here, thank you so much! :slight_smile: