A gesture, or better, a mouse gesture, is a predefined sequence of mouse movements that can be interpreted by software. Once a gesture is identified the software can invoke a certain action. Gestures can be as simple as "The mouse moved to the left" or moderate, e.g. "The mouse drawed a clockwise circle" or very complicated.
To learn more about gestures, look at the examples below
The jGesture is written for the jQuery toolkit.
Nico Goeminne - nicogoeminne at gmail.com
Although gestures can be "on" all the time, most implementations identify a gesture by a start and stop event, for example a gesture could be recoreded when a mousebutton is pressed and could be finished when the mousebutton is released. The jGesture Plugin only supports single stroke gestures.
Lets try to make a gesture. Click and hold (keep the button pressed) the green circle below and follow the blue traject, until you reached the red circle.
A mouse can move in any direction (360 degrees), but this huge number of possibilities is way to much to achieve useful results, therefore jGuseture detects only eight basic movements.
Click and hold the mouse button on the green circle, then release the mouse in one of the eight squares.
Gestures need a minimum movement to be detected, which is configurable in jGesture. Click and hold on the green circle and drag to one of the numbers. Make sure you release outside the gray circle, else your gesture will not be recognized.
Gestures have no specific origin point. Make a "top left" (drag your mouse to ward the top left) gesture, starting anywhere in the gray box. The "green" start circle from previous examples was just a guide.
A more complex gesture consits out two or more mouse directions, for example the "L" gesture consit out a "bottom (6)" and a "right(4)" move. Make the "L" gesture in the area below. You can try making litle "L"s or big "L".
The next example features a image search page (Yahoo Image Search powered). By default the "search box" is not visible because we want to make best use out of our screen real esate. The search box is hidden at the top of the page and can be made visible by using the "down" gesture. (it looks like you are pulling the search box on to the top of the screen). The focus is set to the input field and you may enter a single search word there (+hitting enter), e.g. "nature". The result images are shown in batches of 50 images. To browse to the next batch, you can use the "right" gesture, and to go back to the previous set of images you can use the "left" gesture.
Selecting one of the images causes them to enlarge. In this setting, you can use the "right" and "left" gestures in continues mode to scale the picture (see Settings and Zoom Example). To dismiss the enlarged picture and return to the result set make a "bottomright example".
Navigating trough the image search example should feel natural. The example can be found here.
Any suggestions are welcome at nicogoeminne at gmail.com
Each basic movement has a number and a name:
and each complex gesture with two moves has a name starting with the "firstbasicgesture" underscore "secondbasicgesture", e.g. the "L" gesture is named "bottom_right". Gestures with more than two basic moves are nameless (except for some useful default gestures).
The jGesture plugin is ment to be used in conjunction with jQuery. If you are not familiar with this great toolkit you can find more information and tutorials here.
So lets get started. The code below adds a gesture handler to a gray div (box) called "info".
First of all you need to include the jQuery and jGesture libraries. Then you can add a gesture handler to each jQuery-selectable item, by supplying the gesture function with a handler method. If a gesture is recorded on the target element, the handler method will be invoked, and the gesture is passed along.
The gesture has a name (if it is one of the default gestures, "unknown" otherwhise.) and a string field called "moves" with all recorded mouse moves. The default gestures are:
The example can be found here
The next example binds the gesture handler to the html element, therefore the gestures will be recognized anywhere on the page. The handler uses the "close" gesture to hide the "info" div and the "open" gesture to show the div
The example can be found here
jGesture supports a number of settings. The defaults are shown in bold
The following example use subsequent (continues and repeated) "right" and "left" gestures to zoom the width of the zoom-div. You need to jgesture-1.0.1.js in your script tag. The zoom example can be found here
You'll notice that all examples using the "mousedown" as a start gesture work with both right, middle or left clicks. You'll often want to limit that behavior to only the middle or the right button. Therefore, as of version 1.0.3 you can set to which buttons the startgesture setting should listen, if of course the startgesture event supports button numbers, otherwhise the setting is ignored. For example use "0" for left mouse button, "01" for left and middle mouse button or "2" for right mouse button. Here is the zoom3 example, it will only react to right button clicks (the browser's context menu is also disabled, see below).
Often you'd want to bind the start and stop of a gesture to the right mouse button click, however this causes the browser's context menu to pop up. As of version 1.0.2 the context menu is disabled on elements bound to a gesture. Here is the zoom2 example with using version 1.0.2, you can now use the right button and it will not cause the context menu to appear in contrast to the previous zoom example.
The jGesture Plugin is licensed under Apache License Version 2.0