Getting Started

For starters, lets start by opening a text editor of your choice and creating a file called index.html

For this tutorial, you will need to download three javascript files: jQuery, Fancy Gestures, and Walter Zorn’s VectorGraphics Library

Include these files like so in the head section.

<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fancygestures.js"></script>

Create a Gesture

Good. Now that all the files are included, we can edit the script for Fancy Gestures. Don't worry, its well documented and easy to edit.

Open up the file called "jquery.fancygestures.js". In its current state, the script is designed to allow you to create letters with mouse gestures. But that is not our purpose, so lets delete all the current gestures.

Now let's add a new custom gesture. Here is a example of one I created:

gestures["Hello"] = "20";

Mouse Directions

The numbers you see may look like nonsense at first, but they stand for the direction of the mouse gesture. To understand better, please refer to this graphic:

The script reads the numbers as a sequence of mouse movement directions. Lets say I want to create a gesture for a line starting from the bottom going up. I would simply create a gesture like this:

gestures["Hello"] = "6";

As you can see, "6" is the direction going up on the graphic. If you wanted a line going from top to bottom, use the number "2".

Now lets say you want to create a more complex gesture. Lets create a "L" shape with mouse gestures. Referring to the graphic, a "L" shape would have to either go down then right, or left then up. But in order to be sure that the user can create the shape starting at either point, we need to create two gestures:

gestures["Hello"] = "46";
gestures["Hello"] = "20";

As you can see on the graphic, "46" is going left then up thereby forming a "L". But if someone were to start from the top then right, the gesture would be invalid. So we have to create another gesture going down then right, hence "20". For the purposes of this tutorial, lets stick with the "L" shape.

(Optional) If you want to change the color of the stroke, or the line you create when you draw a gesture, change this to a HEX color of your choice:

var color = "#3399CC";

Output the HTML

After you have created your gesture, edit the output to meet your needs. It can output HTML, so you can add the code for a register button, or even just a email address. Here is the format of a gesture:

gestures["RETURNDATA"] = "MOUSESEQUENCE";

For this tutorial, lets say I want to protect my email address, and in order to do so, I must hide it and only allow those who have completed the gesture to see it. We can simply use HTML as we normally would for a email address.

<a href="mailto:seandesignspasm [dot] net">seandesignspasm [dot] net</a>

So that is how I would normally write my email address in a HTML document. But we need to have the script output that, so lets move it over into the gestures javascript document.

gestures["<a href=\"mailto:seandesignspasm [dot] net\">seandesignspasm [dot] net</a>"] = "20";
gestures["<a href=\"mailto:seandesignspasm [dot] net\">seandesignspasm [dot] net</a>"] = "46";

Notice that I placed a "\" before and after the link. This is to ensure it renders the output correctly. The script will have trouble rendering HTML with quotes, so we have to neutralize it using "\". It will not work without this.

The HTML

Alright. Now that the script is ready, lets lay out the HTML. I created a container to house both the area where you can input a mouse gesture, as well as a place where the script can output the data.

<div class="container">
 
	<div id="input-box">
	<p>Draw Something</p>
	</div>
 
    <div style="margin-left: 150px;">
	<h3>Email Address</h3>
	<p>Gotta keep those spambots out.  For my email address, use your mouse to draw something in the box. <br /> <span class="note">(Just Click and Drag)</span></p>
		<div id="output-box">
		</div>
    </div>
 
</div>

The CSS

Now lets give it some style with CSS. This is just a simple style for it, but of course you can change it to meet your needs.

* {
	margin: 0;
	padding: 0;
}
body {
	font: Helvetica, sans-serif;
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	background: #EFEFEF;
}
 
a {
	color: #39F;
	text-decoration: none;
}
 
p {
	line-height: 20px;
	color: #333333;
	margin-bottom: 3px;
}
 
h2 {
	font-size: 26px;
	font-weight: 900;
	color: #3399FF;
	margin-bottom: 10px;
}
 
.container {
	width: 390px;
	height: 150px;
	border: 1px solid #CCCCCC;
	padding: 10px;
	background: #F9F9F9;
	float: left;
	margin-right: 10px;
	position: relative;
}
 
#input-box {
	width: 150px;
	height: 150px;
	background: #FFFFFF;
	border: 1px solid #3399FF;
	position: absolute;
	top: 10px;
	left: 10px;
}
 
#input-box p {
	text-align: center;
	background: #3399CC;
	width: 100% !important;
	border-bottom: 1px solid ##3399FF;
	padding-top: 3px;
	padding-bottom: 3px;
	color: #FFFFFF;
	font-size: 12px !important;
	margin-left: 0 !important;
	margin-bottom: 0px !important;
}
 
#output-box {
	width: 200px;
	background: #FFFFFF;
	border-bottom: 3px solid #3399FF;
	border-top: 3px solid #3399FF;
	height: 20px;
	float: left;
	padding: 6px;
	margin-left: 10px;
	overflow: hidden;
}
 
#output-box a {
	color: #3399FF;
	font-size: 22px;
	clear: both;
}
 
h3 {
	margin-left: 10px;
	float: left;
	width: 220px;
	margin-bottom: 3px;
	color: #444444;
}
 
.container p {
	float: left;
	margin-left: 10px;
	width: 220px;
	font-size: 13px;
	margin-bottom: 29px;
	line-height: normal !important;
}
span.note {
	color: #A0A0A0;
	font-size: 10px;
}

Add the Function

Now that everything is laid out and ready, lets activate Mouse Gestures. Place this script inside the head section.

<script type="text/javascript">
$(document).ready(function () {   
	$('#input-box').fancygestures(function (data) {
	});
});
</script>

The first part of this function activates fancy gestures on a div of your choice. Activating fancy gestures on a div means that you will be able to draw inside that div. We already created a div with the id "input-box", so lets activate it for that div.

Now we need to define a area to output the data for the correct gesture. I am choosing to script to output the data from the gesture into a div we created previously called "output-box".

<script type="text/javascript">
$(document).ready(function () {   
	$('#input-box').fancygestures(function (data) {
		document.getElementById('output-box').innerHTML += data;
	});
});
</script>

Finally, we need to make the box disappear once a gesture has been inputted. This prevents the user from doing multiple gestures. Lets just use the fadeOut effect from the jQuery library, since we have already included it in our document.

<script type="text/javascript">
$(document).ready(function () {   
	$('#input-box').fancygestures(function (data) {
		document.getElementById('output-box').innerHTML += data;
		$("#input-box").fadeOut("slow");
	});
});
</script>

Great! Now our document should be working. Open it in your browser and give it a shot.

Using it for Forms

Now, lets say you want to use this to protect your forms. What we can do is ensure that users must complete a gesture before the submit button appears. This is similar to using a captcha, except you do not have to submit in order for it to validate.

gestures["<input type=\"button\" value=\"Submit\" class=\"submit\" />"] = "04";
gestures["<input type=\"button\" value=\"Submit\" class=\"submit\" />"] = "40";

If you refer to the graphic, you will see that "0" and "4" are the left and right directions. Thereby creating a line.

This can be applied to almost anything. The possibilities are endless.

Why it works

How is this secure? When using it for emails, the script is outputting the email address only when the correct gesture is given. Spambots that crawl your web pages will not be able to find a email address and will not be able to complete the correct gesture. While this technique is still untested, it should in work in theory. In the end, it is just a fun and interactive way to protect your forms and other private information.