JavaScript Motion Gesture


The MotionGesture script allows you to detect specific gestures made by the user whilst holding their mobile device.

Take a pre-defined gesture from the library or record your own custom gesture using the recorder application. This gives you a definition string which you then embed into your web page along with the MotionGesture JavaScript file. When the gesture is repeated the MotionGesture software will trigger a JavaScript function on your page.

The technical persective.

Standard JavaScript functions allow you to monitor the motion of a hand-held device by taking readings of the accelaration in the x-y-z planes. The stream of numbers can be difficult to interpret beyond knowing that "the user is tilting the device".

The MotionGesture script listens to the devicemotion event and converts the continual stream of readings into distinct gesture events. It encapsulates the parsing of data and matching the correct sequence of readings to the gestures that are waiting to be recognised.

All you need to do is attach functions to each gesture, which get triggered when the gesture is made with the device.


Record gestures using the interactive accelerometer graphs.

Act out the gesture using your device and watch the motion be graphical represented on the 6 line graphs. The recording software then analyses the gesture and detects key control points which can be used to uniquely identify the gesture when it is repeated.

Four gestures can be recorded. You can export the gestures as JSON, save the definition and then load the gesture back in from the JSON string when you return to the recorder.

You can also test the recorded gestures against live motion. When the gesture is detected the tab on the top panel will flash to let you know the gesture has been recognised.

Access the recorder here.


These examples demonstrate how to embed the script into your HTML/JavaScript and give some ideas to how gestures can control features on a web page.