Friday, June 5th, 2009

Moousture: mouse gesture library

Category: JavaScript, Library, MooTools

<p>

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
< view plain text >
  1. // Create a guesture matcher, currently there are only two gesture objects Moousture.LevenMatcher, and Moousture.ReducedLevenMatcher.
  2.  
  3. gstr = new Moousture.ReducedLevenMatcher();
  4.  
  5. // Add gesture vectors to matcher object, (see details below in Create your own gestures).
  6.  
  7. gstr.addGesture([3,2,1,0,7,6,5,4], ccwCircle);
  8.  
  9. // Guesture callback function takes one parameter error recieved from matching algorithm. Threshold that value (if required) to make your gestures more sleek.
  10.  
  11. function ccwCircle(error) {
  12.     if(error >= 0.6) return;
  13.     ...
  14. }
  15.  
  16. // 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.
  17. probe = new Moousture.MouseProbe($(document));
  18.  
  19. // 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.
  20. recorder = new Moousture.Recorder({maxSteps: 20, minSteps: 8, matcher: gstr});
  21.  
  22. // Create a monitor specifying the interval to poll and the amount of error allowed for gesture in pixels.
  23. monitor = new Moousture.Monitor(30, 2);
  24.  
  25. // Finally start the monitor.
  26. monitor.start(probe, recorder);
  27.  
  28. // You can stop the gesture triggering any time by calling .stop() of monitor object.
  29. monitor.stop();

Related Content:

Posted by Dion Almaer at 6:56 am
10 Comments

+++--
3.8 rating from 30 votes

10 Comments »

Comments feed TrackBack URI

Interesting stuff, but why not call it Mousture? Doesn’t have the connotation of a cow or mootools.

Comment by thnkfstr — June 5, 2009

@thnkfstr – It uses mootools.

Comment by JimNeath — June 5, 2009

Fabulous work!

Comment by sixtyseconds — June 5, 2009

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!

Comment by Liquidrums — June 5, 2009

Aww server down, I was looking forward to trying it out and digging through the source.

Comment by tj111 — June 5, 2009

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. :/

Comment by Darkimmortal — June 5, 2009

@dark – on the other hand, maybe we can remove that tab button so users won’t be able to tab outside the window… :P

Comment by sixtyseconds — June 6, 2009

On the third hand gestures can be quite handy for touchscreen mobile browsers.

Comment by Bundyo — June 7, 2009

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.

Comment by johnnymm — June 7, 2009

Cool!
Shouldn’t be that hard to port this to jQuery.

Comment by jerone — June 8, 2009

Leave a comment

You must be logged in to post a comment.