“Press and Hold” Button Functionality

A lot of modern UIs include gestures that are very useful, but at the same time you may not notice until it is gone. One of those is the Press and Hold behavior that is very common across many interfaces. Holding a volume button down, or a scrollbar’s arrows, are just some of the more notable examples.

This behavior can be described as when a user presses a button down, but holds it down for a period of time instead of lifting it back up. While the button is held, it repeats its standard Press functionality at a given interval.

This is fairly straightforward to do in Storyboard, it just requires a little set-up.

Let’s say you want a value to start incrementing after holding a button for 1 second. 
At a high level, the implementation looks like this:

On button Press, call into a Lua function. In this function:

  • Set a boolean to track the button’s pressed state. E.g. “is_pressed”. Set to true.
  • Trigger a timer with a 1 second interval.

On button Release, call into a separate Lua function which:

  • Sets the “is_pressed” flag to false
  • Clears the timer

Create a callback function for the interval timer which:

  • Checks the “is_pressed” flag to determine if the button is still being pressed. If it is, then increment the value.

Also make sure to repeat the Release behavior for the Outbound input.

With these core ideas, you can create any Press and Hold behavior you like. 
Here’s a code snippet from a sample app which has the Press and Hold behavior to scroll a menu up and down:

local idval = {}
local is_pressed = false
local scroll_event = ''

--- @param gre#context mapargs
function cb_button_press(mapargs)
 is_pressed = true
 scroll_event = gre.get_value(string.format('%s.cb_event', mapargs.context_control))
 idval = gre.timer_set_interval(scroll_table, 500)

--- @param gre#context mapargs
function cb_button_release(mapargs)
 is_pressed = false

function scroll_table()
 if (is_pressed == true) then

function clear_timer()
 idval = nil

In this example, the buttons have a variable bound to them that contains the name of an event callback. This name is then used to send out an event which scrolls the table in the appropriate direction.




Please sign in to leave a comment.

Didn't find what you were looking for?

New post