demo pageGithub

jrecog.js

javascript plugin - simple - easy to use

This plugin is JQuery or any javascript library independence. This plugin was developed for touch devices. You will not see how it works without trying it on touch devices.

With the future trend of using touch screen devices, more and more people using mobile and tablet devices. Unlike computer screen, touch devices have very limited space. The more space saved for main content usage, the better it is. This is the reason i came up with jrecog. Using your finger, draw something on the screen to make either the menu or popup shows up or any creative ways you come up with by executing a callback function.

Download Source v1.0

You can simply init jrecog with one line, the syntax is quite the same as JQuery:

jrecog({
	k:callbackk,
	a:callbacka,
	u:callbacku
})

Each of variable: k,a,u represents a gesture, you can choose to use all of 3 gestures or just one or just two of them. Each gesture is tied to one function. Currently Jrecog only supports 3 gestures. Read section "How it works" to know how to draw each of the gesture on the screen.

// jrecog is JQuery independence which means you don't need JQuery to run it.
// You can still use JQuery or any javascript library for other usuage.
// In this example i only use 1 gesture: k

$(function(){

	// jrecog is tied to the DOM, pass a function to gesture variable k
	jrecog({
		k:showMenu,
	});
	
	// This is the function you call to show up the menu
	function showMenu() {   
		$('.menu').show();
	}
});

Supported Browser

It should work for all of the versions of the browsers below:

Firefox is buggy and it only works when you are at the very top of the page

Android Browser Chrome Browser for IOS and Android Safari IOS Browser Firefox Browser for IOS and Android

How it works

There are totally 3 instructional images below. Make sure you go over them all before you try jrecog.

Step 1

Use your finger to touch the screen and keep for around 1 second until an alert box shows up saying "Start drawing"

In order to change the style (color,font..) for the alert box you can use css, the alert box is a div with id "jrecog".

#jrecog {
	width:
	height:
	color:
	background-color:
}

Step 2

Draw the gesture "k" as below. Make sure you draw consequently, and make sure you draw it horizontally as in the picture. The size does not matter.

Note: When you draw the line might not be as smooth as in the picture, but it does not matter jrecog will still recognize the gesture.

How to draw gestures: a,k,u

Each of the pic below corresponding to each of the way to draw each of the gesture: a,k,u.

Pay attention that the "Start Drawing" box is where you start, follow the arrows to draw consequently. Following the flow of the arrows is very important, you must follow exactly the direction of the arrows when you draw.

Step 3

Release your hand from the screen, at this point the alert box "Start drawing" will go away. Whatever function you pass to jrecog for one of the gesture variables as a parameter will be executed. In the pic as you can see it is a menu that will slide into the middle of the screen.

Note: In the pic, the menu is just an illustration. In reality, a description box should show up right under the pic below.

You must use touch-devices to test. Since jrecog is running on this page. By now, you should be able to test it yourself. Try drawing the gesture "k" on this page anywhere and a description box right under this notification box should show up. If the menu does not show up, it means the gesture was not recognized, and you should try drawing again.

Discussion

I will not discuss about the algorithm or method to achieve pattern recognition here. This discussion is purely about touch event.

Although i tried my best as i could, but you might eperience some buggy behaviors.Generally, in those cases just re-draw the gesture. This issue is due to a bug in android browser, or webkit engine. Since you have to preventDefault for either 'touchstart' or 'touchmove' event so that 'touchend' event can fire, preventDefault will prevent you from scrolling so what i did was i removeEventListeaner for 'touchmove' event.

Another issue i encountered is when you scroll, only 'touchstart' event is fired, this might due to the fact that i addEventListener for 'touchmove' event only if 'touchstart' is fired. At this point 'touchmove' already bind to the DOM, which means it would prevent you from scrolling. So what i did was when the 'touchstart' is fired i check to see if this is a scrolling or not; if not i removeEventListener for 'touchmove' event.

The final issue, also the one that i beat myself the most. Since i only fire the function bind to 'touchstart' after a specific time say 1s, i used setTimeout to achieve this. When 'touchstart' is fired and if 'touchend' is not fired, doesn't matter how long 'touchstart' is held (how long you keeo your finger on the screen at one place), the function inside setTimeout will fire anyway. So what i did was instead of addEventListener for 'touchend' event when 'touchstart' is fired, i addEventListener for 'touchend' right after the DOM starts.

Below is the code i described:

Init variables

// timer for setTimeout

var timer = null;	

// Get position of the scrollbar. We need 2 variables 
//because one is the first before touchstart is fired, one is after.

var vscroll = (document.all ? document.scrollTop : window.pageYOffset);
var vscroll_after = (document.all ? document.scrollTop : window.pageYOffset);

touchmove function

		
//touchmove function
var touchmovefunction = function(e){
	// this is needed for touchend to fire 
	//but it will disable scrolling	
	e.preventDefault();	
	
	// execute wanted function for touchmove event	
	execute_move();
	return false;
}

touchend function

//touchend function
var touchendfunction = function(e){
	// unbind touchmove so that users can scroll again	
	document.removeEventListener('touchmove',touchmovefunction,false);
	
	//clearTimeout	
	clearTimeout(timer);
	
	// execute wanted function for touchend event	
	execute_end();
	return false;
}

touchstart function

		
//touchstart function
var touchstartfunction = function(e){

//setTimeout, only execute after 1000 ms
timer = setTimeout(function(){

	//bind touchmove event	
	document.addEventListener("touchmove",touchmovefunction, false);
	
	//get scrollbar position after touchstart is fired
	vscroll_after = (document.all ? document.scrollTop : window.pageYOffset);
	
	//check if scrollbar position is changed compare to the first time
	if(vscroll !== vscroll_after) {
		
		//if it is different it means users scrolling unbind touchmove event
		document.removeEventListener('touchmove',touchmovefunction,false);
		
		//assign scrollbar position to vscroll
		vscroll = vscroll_after;
		return;
	}
	
	//execute wanted function for touchstart event
	execute_start();
	return false;
},1000);
return false;		
}

bind touchstart and touchend to DOM

	
//bind event to DOM
document.addEventListener("touchend",touchendfunction, false);	
document.addEventListener("touchstart",touchstartfunction,false);

Future Improvement

More browsers will be supported in the future.

Another thing that i am not sure about is, should i support more gestures for Jrecog instead of having just three right now. Some people think it would be better if Jrecog could allow developers execute different functions based on different gestures being drawn. Head to Github and let me know what you think.

Currently although jrecog does detect if the browser is supported or not if not it would not init. But i would recommend to use another third party library such as modernizr. Feel free to use any images or usage description from this page for your products.

Jrecog is authored and maintained by Tuyen Le. Head over to the jrecog GitHub project page for more info and downloads, or to the support if you find any issues or questions.

Copyright 2012-2013, Tuyen Le Released under the MIT License.