jQuery Gestures
jQuery-gestures demo.
I'm still working on the redesign, but from time to time I like to take a break and work on a one night project. Today's project was inspired by this article. Although I loved the idea, I found it lacked several things :
- Visual feedback : you have no idea of the mouse gesture you've just done;
- Customization : adding a gesture isn't obvious;
- Complex gestures : you can't have sequences, such as
Up, Left, Up, Right, Down
I rewrote the code, using jQuery, and added those missing features. In order to provide visual feedback, I use a canvas element which is displayed above the content (and can be enabled and disabled) and I simply draw lines on it.
The sequences of gestures are dealt with using a stack on which moves are pusheda, if two identical moves follow each other (such as Right, Right) only the first one is taken into account.
The last part is customization, complex gestures are recorded as simple strings containing the characters U,D,L,R, and each string is associated to a function.
You can play with the demo, download the plugin and look at the example below.
$.gestures.init({active:false,color:'#ff0000'});
// adds a new gesture : Down
$.gestures.register('D', function() {
alert('down !');
});
// a more complex gesture : Down, Left, Up, Right
$.gestures.register('DLUR', function() {
alert('this is a rectangle, no ?');
});
// you can log unknown gestures :
$.gestures.error(function(gesture) {
alert("oops, I don't understand what \""+gesture+"\" means");
});
// useful keyboard tricks :
$(window).keydown(function(e) {
if ($.gestures.active() && e.which==27) {
// disable capture when user presses ESC
$.gestures.disable();
} else if (!$.gestures.active() && e.which==17) {
// enable capture when CTRL is pressed
$.gestures.enable();
}
});
$(window).keyup(function(e) {
// disable capture when CTRL is not pressed
if ($.gestures.active() && e.which==17) {
$.gestures.disable();
}
});
I just have FF3 installed on this machine, so I haven't been able to test this on other browsers. I suppose it should work on Opera, Safari and Chrome, and not on IE (unsupported canvas). Anyway, if it doesn't, feel free to hack the code, or leave a comment
- A move is an atomic gesture, it can be
Up,Down,LeftorRight[↩]
18 comments
Hi there Adrian, thanks for the referral, nice example!
Very nice. What's the reason for not supporting IE? Just the Canvas? Does the gesture recognition depend on Canvas or is it just need for visualization?
Just the canvas.
The gesture recognition is just based on three events : mousedown/mouseup/mousemove. So I guess it could be ported to IE, maybe using vml, but as I don't can't test using IE, I'll leave that to someone else.
Using control as the modifier makes it useless on a mac. It does work, but control clicking brings up the contextual menu.
It's nice effects.
But it took me 5 min to figure out how it works.
I did not know what I am doing. I was pressing up, down, buttons and nothing happened. etc.
Most of normal internet users will not find out how to use it.
There should be intuitive way to introduce this.
@Michael :
You can try using ALT instead
@elvisparsley:
I must confess this is more a proof of concept targeted to developpers than something more mainstream, that's why I didn't introduce it more intuitively
This is amazing work! Thanks for sharing. I can't wait to try to integrate this into some upcoming work.
[...] Link: jQuery Gestures [...]
[...] jQuery Gestures [...]
[...] Con jQuery Gestures, esto es posible. Puedes especificar el movimiento que el usuario ha de efectuar con el ratón para que dicha acción sea lanzada. // Inicializamos y definimos el color del trazado $.gestures.init({active:false,color:'#ff0000'}); // Añadimos nuevo gesto (Abajo) $.gestures.register('D', function() { alert('down !'); }); [...]
[...] friggeri.net » blog » jquery gestures (tags: gestures) [...]
[...] 10. JQuery Gestures [...]
[...] jQuery Gestures [...]
[...] E conhecer mais sobre ele aqui. [...]
[...] 9. JQuery Gestures [...]
[...] jQuery Gestures [...]
[...] jQuery Gestures [...]
[...] jQuery Gestures [...]