Handling user gestures

During the short planning session I decided that at first I should implement gestures handling in the front-end application. This feature will be developed with jQuery library.

There are a few strategies how to detect sequence of gestures. First one assumes that the application recognizes mouse movement and, basing on the time between each of the moves, is able to establish if a gesture drawing is completed. This solution has some limitations. The main one is a problem with splitting moves into separate ones. If a user moves a pointer to the top and backward, as preparation to the next gesture (due to e.g. screen resolution), then application won’t be able to recognize that the top-bottom move shouldn’t be treated as part of the password.

Second strategy bases on mouse buttons. Application recognizes the pointer movement as a gesture only when the button is pressed. Releasing button means the end of the gesture and then application could prepare for the next one. This strategy is nowhere near as hard to implement as the first one. As far as I know there are no limitations so let’s try to implement it.

I would like to remind you that all of the sources are available in my Github repository. Moreover, in the README file, you can find short project description with its main assumptions.

Detecting events

The key to solve handling user gestures is the jQuery API. It allows us to track mouse usage with “mouse events”. In the documentation I’ve found three basic events that will make gesture detecting possible. Those events are mousedown(), mouseup(), mousemove().

“The mousedown event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed.”

“The mouseup event is sent to an element when the mouse pointer is over the element, and the mouse button is released.”

“The mousemove event is sent to an element when the mouse pointer moves inside the element.”

At the beginning let’s detect each of those events.

As you can see this solution works but not in the way we want.

Move event is handled every time the pointer is moved in the grey area. Selected strategy assumes that application will store gestures made with mouse button pressed. It should be easy to force mentioned behavior by adding simple flag.

Now it works perfectly. Take a look:

Having a gesture detected we should consider how to not only split them into separate “objects” but also how to handle its storing.

As we know one gesture consists of sequence of events:

mousedown – (mousemove n times) – mouseup

By adding simple messages, we can visualize how easy this flow is.

Storing events

Storing procedure could be called in the mouseup handler but previously we need the data from each of mousemove events. For this purpose, simple array could be used.

As you can see I added simple Point class which represents a point. pointsArray stores all of the points that are part of one gesture.

Now it’s simple to write storage mechanism that will allow us to store sequence of gestures.

 

As you can see GestureHandler stores each of gestures properly. It is worth to say that it also saves the order of the objects. This simple feature covers one of the most critical aspects of authentication – order of the letters in a password matters.

In the next akcesi-releated post I’m going to cover the problem of combining gestures with characters typed on the keyboard.

I would like to remind you that all of the sources are available in my Github repository.

You may also like

Comments