# CS349W Project3 jGestures

228pages on
this wiki

CS349W project 3 writeup

## Introduction Edit

We have developed jGestures, a jQuery plugin that enables mouse gestures in web applications. Mouse gestures have been available in traditional single-user applications, and even some browsers (e.g. Firefox), but only for browser commands (e.g. next/previous page, home, etc). jGestures lets web developers integrate mouse gestures into their web applications easily and efficiently. Its main features are:

• Runs completely on the client side, using JavaScript.
• Highly configurable: Developers specify their own gestures, can customize the way gestures are drawn, and can tweak the recognition algorithm.
• Fast, small code footprint (3.6KB minified).
• Easy to integrate as a jQuery plug-in.

With its default configuration, the user draws a gesture with the mouse by pressing and holding the left button. The gesture is displayed on the screen as the user draws it. To finish a gesture, the user releases the mouse button. jGestures then tries to recognize the gesture, and initiates its associated action if the gesture is successfully recognized. To provide visual feedback to the user, the gesture changes its color to green if it is recognized, or to red if it is not, and disappears 200ms after the user finishes it.

## Developer InterfaceEdit

### Specifying gesturesEdit

jGestures allows the web developer to specify a series of custom gestures to recognize in a flexible way, using the addGesture method:

$(this).addGesture(points, directionSensitivity, proportionSensitivity, startSensitivity, name, handler);  The points argument specifies the sequence of points that form the gesture as an array of x-y coordinates. It can be simple, like a left-to-right stroke ([[0,0],[1,0]]), or more complex like a rectangle or circle. The coordinates can be in any system (e.g. [[0.5,0.5],[1000.5,0.5]] would also specify a left-right stroke). The next three options specify the sensitivity of the gesture to different aspects: • directionSensitivity: Whether the direction in which the gesture is drawn matters • proportionSensitivity: Whether the proportions of the gesture matter • startSensitivity: Whether the starting point of the gesture matters (useful for closed gestures, e.g. boxes or circles) The name argument specifies a name for the gesture. Finally, handler is the event handler that will be called if the gesture is recognized. The handler function should take two arguments: the gesture detected, and the sequence of points captured. ### Integrating jGesturesEdit Integrating jGestures with your web application is very simple: 1. Include the jQuery and jGestures JavaScript files. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.gestures.js"></script> 2. Optionally, modify the default configuration.$(this).gesturesConfig().strokeWidth = 5;
var gHandler = function (gesture,points) {
$(this).addGesture( [[0,0], [0,1], [1,1], [1,0], [0,0]], false, false, false, "Box", gHandler );$(this).addGesture(