Sencha Touch iPad Signature JavaScript

We'll be extending an Ext.Panel object from Sencha Touch to create an iPad signature pad. When you click submit it will tie in to the server-side PHP script in this post. It works pretty well, though there are many ways that it could be enhanced.

We are using the Sencha Touch MVC style approach outlined here:
http://www.slideshare.net/senchainc/structuring-your-sencha-touch-application
http://www.sencha.com/learn/Tutorial:A_Sencha_Touch_MVC_application_with_PhoneGap

	(function() {
	var clicked, canvas, ctx, coords, offsetX, offsetY, oldX, oldY;
	app.views.Signature = Ext.extend(Ext.Panel, {
	layout: {
	type: 'vbox',
	pack: "center",
	align: "center"
	},
	items: [{
	scroll: false,
	html: "<canvas width='500' id='canvas' height='100'/>"
	}, {
	xtype: 'button',
	text: 'Submit',
	handler: function(b, e) {
	var img = canvas.toDataURL();
	Ext.Ajax.request({
	url: 'img.php',
	method: 'POST',
	params: {
	img: img
	}
	});
	}
	}],
	scroll: false,
	listeners: {
	activate: function() {
	setupCanvas();
	canvas.ontouchmove = handleMove;
	canvas.onmousemove = handleMouseMove;
	}
	}
	});
	window.onmousedown = function() {
	clicked = true;
	}
	window.onmouseup = function() {
	oldX = oldY = clicked = false;
	}
	window.ontouchend = function() {
	oldX = oldY = clicked = false;
	}
	function handleMouseMove(e) {
	var x = e.offsetX,
	y = e.offsetY;
	if (clicked) drawCircle(x, y);
	}
	function handleMove(e) {
	var x, y, i;
	for (i = 0; i < e.targetTouches.length; i++) {
	x = e.targetTouches[i].clientX - offsetX;
	y = e.targetTouches[i].clientY - offsetY;
	drawCircle(x, y);
	}
	}
	function setupCanvas() {
	canvas = document.getElementById('canvas');
	ctx = canvas.getContext("2d");
	coords = getCumulativeOffset(canvas);
	offsetX = coords.x;
	offsetY = coords.y;
	drawBg(ctx);
	}
	function drawBg() {
	ctx.beginPath();
	ctx.moveTo(0, 75);
	ctx.lineTo(500, 75);
	ctx.stroke();
	ctx.font = "36pt Arial";
	ctx.fillStyle = "rgb(180,33,33)";
	ctx.fillText("X", 10, 75);
	}
	function drawCircle(x, y) {
	ctx.strokeStyle = "rgb(55,55,255)";
	ctx.beginPath();
	if (oldX && oldY) {
	ctx.moveTo(oldX, oldY);
	ctx.lineTo(x, y);
	ctx.stroke();
	ctx.closePath();
	}
	oldX = x;
	oldY = y;
	}
	// see: http://stackoverflow.com/questions/160144/find-x-y-of-an-html-element-with-javascript
	function getCumulativeOffset(obj) {
	var left, top;
	left = top = 0;
	if (obj.offsetParent) {
	do {
	left += obj.offsetLeft;
	top += obj.offsetTop;
	} while (obj = obj.offsetParent);
	}
	return {
	x : left,
	y : top
	};
	};
	})();

view raw sencha-touch-signature.js hosted with ❤ by GitHub

Go ahead and try it out here (iPad/Safari/Chrome/Webkit only): http://www.jamund.com/signature

Save a Base64 Encoded Canvas image to a png file using PHP

This and the next post will demonstrate how to draw on a canvas and then save the file on a server using PHP. Here is the very simple server side code:

	<?php
	// requires php5
	define('UPLOAD_DIR', 'images/');
	$img = $_POST['img'];
	$img = str_replace('data:image/png;base64,', '', $img);
	$img = str_replace(' ', '+', $img);
	$data = base64_decode($img);
	$file = UPLOAD_DIR . uniqid() . '.png';
	$success = file_put_contents($file, $data);
	print $success ? $file : 'Unable to save the file.';
	?>

view raw canvas-upload.php hosted with ❤ by GitHub

The next post will be the slightly more complicated front-end code. This was particularly designed for a Sencha Touch iPad app that will allow people to sign with their finger. It has some flaws, but the basics are pretty reusable and good!

Your result may look something like this:

Timing the EcmaScript 5 Date.now() function

While looking at this awesome list of browser support for EcmaScript 5 features. I decided to time the difference between using Date.now(), a static method to access the current timestamp, and new Date().getTime(), the previous way to get a current timestamp in JavasScript.

The results are this: As expected, the static method wins!

The testing code can be found here:
http://jsbin.com/eheyi3/2 (I have no idea how long this will stay up):

Or here:
http://jamund.com/tests/date.html

Here are the results running in Chrome 9:

Testing Date.now() 10000000 times
0.908s
Testing new Date().getTime() 10000000 times
1.241s

Here are the results running in FireFox 3.6:

Testing Date.now() 10000000 times
7.144s
Testing new Date().getTime() 10000000 times
12.016s


Here are the reuslts running in FireFox 4:

Testing Date.now() 10000000 times
1.73s
Testing new Date().getTime() 10000000 times
3.677s

Here are the results running in Safari 5:

Testing 'Date.now()' 10,000,000 times
0.74s
Testing 'new Date().getTime()' 10,000,000 times
2.817s

Drawing in the lines

So I'm working on this really sweet HTML5 monster game, where you get to draw your own 8-bit style monsters and fight them against one another. So far I've only got a tiny bit of the monster creation part up and running. Don't worry I'll throw the whole thing up on on github when I'm done.

Anyway, one of the problems I ran into with the canvas was how to keep people's drawings within the predefined lines. The canvas is 500px wide and it's a 20x20 square of 25px blocks.

To create the lines it's very simple.

 ctx = document.getElementById('monster').getContext('2d');


 ctx.fillStyle = "black";
 for (i = 25; i < 500; i = i + 25) {
    ctx.fillRect (i, 0, 1, 500);
    ctx.fillRect (0, i, 500, 1);
 }

       That will draw some simple lines every 25px. Now how about keeping between the lines. It's simple. We just need to round our x, y to the nearest 25px, like so, that way it will always start inside one of our blocks. Then we'll actually be drawing 24px blocks to fit inside the lines completely.

I thought it was pretty neat!

        var draw = false;

 window.onmousedown(function() {
  draw = true;
 });

 window.onmouseup(function() {
  draw = false;
 });

 document.getElementById('monster').onmousemove(function(e) {
  var x = e.clientX - offsetX,
   y = e.clientY - offsetY;
   x = Math.round(x / 25) * 25 + 1;
   y = Math.round(y / 25) * 25 + 1;
  if (draw) ctx.fillRect(x, y, 24, 24); // keep things in the lines
 });

p.s. follow the progress over at http://www.jamund.com/monsters

iScroll 3.0 Select Box Hacks

iScroll is pretty neat. It was created by cubiq as an attempt to create a workaround for position: fixed on iOS. Sencha Touch has a much more complete solution, but as a simple solution iScroll works fairly well. 

This could be a great time to rant about how mobile safari is the new IE6, and how having to use JavaScript to fix issues that have already been fixed on the web for a long time is ridiculous. (Seriously, just let position: fixed work as long as the viewport and zoom-levels are set properly.) 

Check out the code here:
http://code.google.com/p/iscroll-js/

Anyway, look no further than iScroll.....unless you want to use a select box in the scroller.

I followed this thread about the problem here:
http://code.google.com/p/iscroll-js/issues/detail?id=14

And finally found a solution here:
http://groups.google.com/group/iscroll/browse_thread/thread/5b2fbad6aa667907

Here is my select box:

    Option 1    Option 2    Option 3

And it all seems pretty good with one additional problem. It seems that the screen gets nudged down just a little bit when you select things, so I had to add this one bit of JavaScript to bring it back to the top after the we choose our item from the select box.

document.getElementById("showing").addEventListener("change", scrollToTop);

function scrollToTop() {

  window.scrollTo(0,1);

}


The result looks something like this (everything under the sort by stuff scrolls):