Using a HTML5 Canvas to capture a signature on the iPad from XPages

One of the nice things about the ipad is being able to use your finger or a stylus to ‘draw’ your signature in an app and then have it captured. There are some easy to use frameworks to do this in native apps but if you are building XPage application then you can’t use those frameworks unless you plan to create hybrid apps using PhoneGap or Titanium.

However the iPad and other touchscreen devices all use HTML5 compliant browsers and with HTML5 there is a new canvas tag that sets up a drawing area. Using the touch events you can figure out where the persons finger is and then draw on the canvas as they move it around. As the signature is being drawn you can also capture the X Y coordinates used by the canvas and store them in an input field so when the form is submitted you have all the information required to regenerate the signature.

Using these concepts I’ve build an XPages custom control that you can test out here. Once I’ve tidied it up a bit and tested it some more I’ll release it on OpenNTF. This control works on both touchscreen devies and on your desktop machine using your mouse to draw the signature. The large blocks of data you see in the view in the test application is the jsonified array of coordinates used to save the signature.


Tagged with: , ,
Posted in None
%d bloggers like this: