Friday, June 5th, 2009
Moousture: mouse gesture library
Category: JavaScript, Library
, MooTools
Zohaib Sibt-e-Hassan has created a Mootools based mouse gesture library Moousture that is based on simplicity:
- A probe, which probes the pointing device. Currently there
is a Moousture.MouseProbe (P.S. I am planning to test it on iPhone and
build any seprate probe for that). - A monitor, which tests the stability of probed
device on given intervals and accordingly notifies Moousture events
(onStable, onUnstable, onMove). - A Moousture recorder class that records the mouse
movements and invoke the guesture object passed to it.
You can easily work with gestures:
JAVASCRIPT:
-
-
// Create a guesture matcher, currently there are only two gesture objects Moousture.LevenMatcher, and Moousture.ReducedLevenMatcher.
-
-
gstr = new Moousture.ReducedLevenMatcher();
-
-
// Add gesture vectors to matcher object, (see details below in Create your own gestures).
-
-
gstr.addGesture([3,2,1,0,7,6,5,4], ccwCircle);
-
-
// Guesture callback function takes one parameter error recieved from matching algorithm. Threshold that value (if required) to make your gestures more sleek.
-
-
function ccwCircle(error) {
-
if(error>= 0.6) return;
-
...
-
}
-
-
// Create a probe object that will probe the pointing device. Currently there is a mouse probe that take the $(element) to probe for. So passing a div id will cause the probe to trigger events only when they occur on the passed DOM element.
-
probe = new Moousture.MouseProbe($(document));
-
-
// Create a recoder object to record the movement , maxSteps and minSteps in options object will specify the maximum and minimum number of steps to be recorded, and macher is required matcher object to trigger the appropriate gesture.
-
recorder = new Moousture.Recorder({maxSteps: 20, minSteps: 8, matcher: gstr});
-
-
// Create a monitor specifying the interval to poll and the amount of error allowed for gesture in pixels.
-
monitor = new Moousture.Monitor(30, 2);
-
-
// Finally start the monitor.
-
monitor.start(probe, recorder);
-
-
// You can stop the gesture triggering any time by calling .stop() of monitor object.
-
monitor.stop();
-
Related Content:
4 rating from 25 votes
Interesting stuff, but why not call it Mousture? Doesn’t have the connotation of a cow or mootools.
@thnkfstr – It uses mootools.
Fabulous work!
That is really well done, with a simple way of creating gestures.
It took me a bit to figure it out, because I kept circling the cursor but never saw the menu appear (until I stopped the gesture). I was waiting for some sort of indication that I was gestured correctly.
Great work!
Aww server down, I was looking forward to trying it out and digging through the source.
Not bad, but I find mouse gestures intrusive.
Being able to create them on demand is as bad as being able to resize the browser window and remove toolbars. :/
@dark – on the other hand, maybe we can remove that tab button so users won’t be able to tab outside the window… :P
On the third hand gestures can be quite handy for touchscreen mobile browsers.
It requires more experiments to define a good gesture. I have built a library to track user clicking positions instead of mouse movements, so I understand it is hard to determine “the end” of a gesture. That is, the next gesture usually mess up with previous one. However I found that the library gives bad results for short gestures. Or may be I have used bad tuning parameters?
I would suggest to add a parameter to clear recorded gestures after certain period of time.
Cool!
Shouldn’t be that hard to port this to jQuery.