JavaScript Motion Gesture

Overview

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

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.

Examples

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.

• Page Turner

  Use flip gestures to transition the content on a page.

  This is an alternative to scrolling using your finger. The user gestures to move between content, without needing to touch the screen. Ideal if you're reading from the screen in front of an audience.

• Feed Rewind

  Use flick gestures to rewind a feed.

  If you have a live feed appearing on your page it can be frustrating to see an item which you want to read but not click on it before it disappears. With a simple flick of the device you can trigger the page to rewind and display the previous item(s).

• Map Zoom

  Use flick gestures to zoom a map.

  Tilting a mobile device to pan a map has been a standard feature of web mapping for some time. Now you can also zoom the map using a gesture too.

• 10 Pin

  Recognise actions for JavaScript games.

  More complex gestures can be used to activate different actions within a web game. This simple example shows how different gestures can be used to generate a different result in a 10-pin bowling game.