Menu

I built a two-zone gesture HUD on a raw canvas. here is the hit-test math
📰

I built a two-zone gesture HUD on a raw canvas. here is the hit-test math

DEV Community: mobile·hammi·2 days ago
#6zzRZEuZ
#devtomobile#devto#dev#gesture#zone
Reading 0:00
15s threshold

full disclosure first: i'm the developer of RKMovies , a 0.91 MB Android 4K media client. this is a build diary, not an ad.

most video players give you one gesture zone: drag anywhere, seek. that is simple to implement. i wanted the classic dual-zone layout instead: drag on the right half of the screen for volume, left half for brightness, double-tap to skip 10s. the catch nobody blogs about: the indicator has to appear on the opposite side of the screen from your thumb, or it hides behind your hand.

the hit-test

it is embarrassingly simple once you accept it:

zone = pointer.x < width / 2 ? BRIGHTNESS : VOLUME delta = (pointer.y - startY) / height // normalized, downward drag = decrease value += zone == VOLUME ? -delta * MAX_VOLUME : -delta * MAX_BRIGHTNESS

Enter fullscreen mode

Exit fullscreen mode

one idea per line. normalize by screen height, not pixels, so the gesture feels the same on a 6" phone and a tablet.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.