Mobile HCI (H): Tilt-Flick Grid-Based Input

Dulapah Vibulsanti - 2920990v

Source code: https://github.com/dulapahv/tiltflick-input

  1. Start: Click the "Start" button and grant sensor permissions
  2. Navigate: Tilt-flick device left/right/outward/inward to move grid selection
  3. Interact:
  4. Exit: Click "Stop/Reset" when finished

The stats section below shows your current position, activated buttons, and sensor readings.

How To Use: Step-by-Step Guide with Animations

Step 1: Activate the Grid

Display Selection Grid
Shake your device once to show the navigation grid

Step 2: Navigate the Grid

Move Left
Tilt-flick your device to the left
Move Right
Tilt-flick your device to the right
Move Up
Tilt-flick the top of your device outward/forward
Move Down
Tilt-flick the top of your device inward/backward

Step 3: Select a Button

Activate Selected Button
Once positioned over desired button, shake once to select it

Step 4: Precision Selection (Optional)

Activate Magnified View
Shake twice to open the precision subgrid for more accurate selection

Step 5: Exit Current Mode (Optional)

Return to Normal View
Shake three times to exit grid or magnified view

Grid Navigation

Base Grid Position: 0,0

Last Activated Position: none

Last Activated Button: none

Current Tilt

Forward/Back (β): 0°

Left/Right (γ): 0°

Tilt-Flick Detection

Last Direction: none

Acceleration

X: 0

Y: 0

Z: 0

Shake Detection

Sequence: none