Signature Pad

[Paul_Ramcharitar]

Is there a way to interface profoundui's signature pad widget with an external signature pad, that is connected to the PC? If possible, what signature pad would be recommended?

I would like either of the 2 scenarios:

(1) When signing on the external signature pad, I would like the contents from it to be translated to the signature pad widget. So as I sign, the signature would be drawn on the widget.

(2) Get the data being sent from the external signature pad, and convert it to the format required by the signature pad widget.

Finally upload the signature to the IFS.

I have a Topaz Systems Signature Pad: http://www.topazsystems.com/products/siglitesl.asp

[Scott Klement]

The PUI Signature Pad Widget works by drawing lines with the HTML5 Canvas support. It does not have any knowledge of how to interface with a 3rd party signature pad device.

Unfortunately, code running in a browser cannot access the PC's hardware ports, since that would be considered a breach of security. (Imagine if any web page on the Internet was able to access any hardware connected to your computer... this would be a security nightmare.) So there's really no way to add support for an external signature pad to our widget.

What you could potentially do is write a Windows program that receives the signature from the signature pad, interprets it, and uploads it to a program on IBM i. That program could then insert it into the signature pad widget by creating the proper JSON code that gets put in the variable that's bound to the widget.

I'm not familiar with the specifics of the external signature pad widget, how it works, etc. I could provide you with details of the format of the data in the bound variable, however, if that helps?

[Paul_Ramcharitar]

Hi Scott,

Thanks a lot for the info.

The Topaz signature pad returns an ascii text representation of the signature. Right now I have it interfacing with IE, using ActiveX. However, it won't work on the other browsers, which don't have ActiveX (mainly because of the security threats as you mentioned).

Details of the format of data would be helpful. Thanks.

[Scott Klement]

The data in the bound variable is JSON representation of a 2 dimensional array. The outer array is a list of "strokes", and each stroke is a list of coordinates to draw to.

Here's an example:

Code: Select all

[
  [ 94,22,94,21,89,20,81,18,72,16,64,15,54,14,49,13,44,13,41,13,
    40,13,39,15,38,18,38,20,36,25,35,28,34,32,34,35,34,37,34,40,
    36,42,40,44,46,46,50,48,56,49,62,50,68,52,71,53,74,55,78,57,
    80,58,82,59,83,60,84,61,85,62,86,63,86,64,86,66,86,67,86,69,
    86,71,85,73,84,77,83,79,81,81,80,84,78,86,77,87,76,87,73,87,
    66,84,60,81,56,79,55,79,54,79,53,79 ],
  [ 102,11,103,12,103,14,103,17,103,20,104,25,104,30,104,37,105,
    46,106,54,107,64,107,72,109,78,110,82,110,84,111,86,112,85,
    113,83,114,82 ],
  [ 142,21,133,23,125,24,115,25,105,26,98,27,96,28,96,30,97,33,
    100,37,105,40,110,44,116,48,122,52,129,56,136,60,144,65,150,
    70,157,75,165,80,173,84,181,87,186,90,189,90,192,91,195,92,
    197,92,199,92,200,92,200,91 ]
]

In the actual bound variable, there are no linefeeds or spaces -- I added the linefeeds/spaces in the preceding example to make it easier to read.

This example has 3 strokes.

The numbers in each stroke are X,Y coordinates. The code that draws the signature reads two numbers at a time, and treats each pair of numbers as a "point." It draws a line from the previous point to the next point. So, in the first stroke, above, it starts at coordinates 94,22 and draws a line to 94,21, but it does not stop, it keeps drawing from where it left off (94,21) to 89,20, and then from that point to 81,18, etc. It never "lifts the pen" during this time, it just keeps drawing from each point to the next point in the array until it has finished the stroke.

Then it "lifts the pen" and moves to the first coordinates of the 2nd stroke. Once again, it draws from point to point in the stroke until it has drawn a line that connects all points in that 2nd stroke.

Then it moves to the 3rd stroke, and draws it the same way, etc. Until it has drawn all of the strokes. (Although there are only 3 in this example, in a more complex signature theere may be many others.)

The lines drawn are 5 pixels wide.

Hope that helps.

[Paul_Ramcharitar]

I got it. I will see what I can do from here.

Thanks Scott :)