JQuery trendy gestures

Turn on the recognition of complex gestures with the mouse (gestures can describe letters, symbols of other alphabets and other symbols, including your own characters) on your site!

Opportunities

1. You can create your own gestures;
2. You can have many areas on the page that will be able to recognize gestures;
3. There is a visual feedback;
4. Performance in all major browsers.

Acknowledgments

This script is initiated from Didier Brun's mouse gesture recognition script .

Demonstration

Start the mouse gesture recognition demonstration
')

JQuery Fashion Signs Screenshot

Requirements

1. jQuery
2. Walter Zorn's VectorGraphics Library

Introduction

Create a new html file with the following code. The function returns the data, that is, the recognized character or name:

< div id ="sample" style ="border:1px solid black;position:relative;height:150px;width:150px;" ></ div >

< script type ="text/javascript" src ="wz_jsgraphics.js" ></ script >
<script type= "text/javascript" src= "jquery.js" ></script>
<script type= "text/javascript" src= "jquery.fancygestures.js" ></script>

<script>

$( document ).ready( function () {
$( '#sample' ).fancygestures( function (data) {
alert(data);
});
});

</ script >

* This source code was highlighted with Source Code Highlighter .

Customization

Please use the key below to generate a string of numbers for your character: for example. L will look like a sequence of movements 2 and 0. The following characters are already displayed in the script:


Suppose you want to add the symbol “CIRCLE” (circle) with the sequence of movements “432107654”; to do this, edit jquery.fancygestures.js, adding the following after line 7:

gestures[ "CIRCLE" ] = "432107654" ;

* This source code was highlighted with Source Code Highlighter .

The above code will return the “CIRCLE” from the function when you draw a circle. However, make sure that you do not have such sets of movements, as in this case you will get unpredictable results, for example, the presence of the same gesture for zero and the O symbol.

Download

Download Fancy Gestures

License

Fancy Gestures are licensed under the MIT license. Please email me if you have found an interesting use for this script.

Comments / Suggestions?

Let me know how we can improve this code or write about any new features that you would like to add to this script.