You can capture signatures in a web view using canvas, as has been demonstrated already, but did you know that you can do the same thing with Scalable Vector Graphics? You may be wondering what the point would be, other than novelty. I will not get into the debate between canvas and SVG in-general, but for this particular application, there are a few advantages to be had by going with SVG. Keep reading to find out why and how to add an SVG signature component to your MAF applications.
The major difference between the SVG and canvas is that canvas is a bitmap vs. a path in SVG. With that bitmap, you will store 4 bits for every pixel of the canvas, adding up to a static data size for your signature data, including all of that empty space. An SVG path is quite a bit smaller and is plain text. If you had to capture signatures for a delivery company and store them for several years, the size of the data stored would be significant. Since we have a path, we also have separate segments that could be analyzed for fraud or otherwise leveraged to provide business value. This data format makes it easy to deal with, it is small and simple, and storable in an attribute without any encoding needed. This enabled me to easily expose the data value so that you can bind it with an expression and treat the signature component as an input component.
I did not go through the pains of making a full-blown component that handles all the AMX events, so all the usual caveats apply to this free code. In production, I would use asymmetric encryption to ensure that signature data is safely transmitted and stored on corporate servers.
All the code for this sample can be found on GitHub, so I will just be focusing on the interesting parts.
First, in the sign.amx AMX Page there are three things to point out:
- Import the namespace
Notice that the part after the colon matches the part before the colon in #3
- Show the data in another component by using the same binding
This is for testing purposes only, you could use this in a managed bean or data control
- Add the component to the page
The value attribute is bound to EL, so this will serve as the model for this example
When the framework sees this avio:signature custom namespace and tag, it needs to know what to render into the document. In the sign.js file, everything is provided to render the appropriate DOM and handle events and data. This is a lot of code to paste in a blog entry, so I will just cover a few of the important parts.
On line 112, the handler for that avio:signature tag is registered. At this point you would get just an empty spot where you expect your signature block. The next line, 113 provides the code for the render implementation, we will cover that in more detail. The last line is to tell the framework which attribute is storing the value for this custom component.
If you are familiar with DOM and javascript, the renderer code will not be difficult to follow. Rather than examine each line, I’ll leave that code for you to explore, I’ll add in more comments to explain what is going on better. I did cut a few corners, hopefully I have time to go back and use the AMX events rather than the built-in DOM events.
The last ingredient is CSS styling for the signature block. Another advantage for SVG, you can style the signature block with CSS instead of writing code to set properties via javascript. If you take a look at sign.css, you will see it’s fairly simple, but can give you the exact look you want without touching the DOM. Pay no attention to those errors showing in JDEV, this will work. You can set the color of the signature block, any border styling you would like, and the color and width of the pen stroke.
When you run this app, you will see the signature block, with the clear button, and the data at the top of the screen will show what the actual signature data looks like, it is much smaller than the same signature in a bitmap. My penmanship is even worse than my javascript.
And here it is running on my Android phone
There it is, an easy way to capture signatures that is very efficient and easy to work with. I plan on exploring more with SVG and how it can be used to extend MAF applications, as well as other things that interest me. I hope you enjoyed this entry, let me know if you have any questions, or interesting ideas to explore.
References
http://mcc.id.au/2010/signature.html