Build 7.08 sees the inclusion of a new Form Field Type, called "Signature".
This (in concept) allows the user to enter a "free form" signature on a form, which is then stored in the database and displayed back to the user when they view the form later on.
Caveats
The basic field works well, but your mileage may vary depending on the input mechnism. For example, writing a signature with a mouse is quite hard, and writing it with a finger on a phone is very coarse.
On a "slow" phone it also pays to move your finger slowly, and (again on some phones) it sometimes pays to place the finger in the field, wait a bit, and then start drawing. the slower the phone, and the older the browser, the more likely there are to be issues. So I recommend testing on a specific device before assuming it'll work on that device.
I've also seen it not work at all with the Opera browser on one phone, but work with the built-in browser on the same phone, so again some caution and testing recommended.
Storage
The result is stored as a "string" of data. The length of the string can depend a lot on how long the signature is. In my testing, and example, I've used a MEMO(64000) to hold it. All the chars in the string are "text" not "binary", so it should be very compatible with whatever backend you use.
The received text is a string of co-ordinates which maps the signature picture, and it can be converted into a BMP if you desire. This might be useful if, for example, you want to use the signature on a report. The example uses CapeSoft DRAW to convert the string to an image, but you could use another tool to do this if you prefer. NetTalk has a "hook" into a conversion procedure, and an example conversion procedure is in the attached example.
(Called SigToImage, it relies on the Draw accessory.)
Global Settings
Globally - turn on the Signature Script in the WebServer procedure, NetTalk Extension, Scripts tab.
Local Settings Tab
Width, Height : The size of the box into which the signature will be draw & displayed.
Allow on Insert Only : Only allow signatures to be drawn when the form is in Insert mode. In other modes (Change / View) the signature will be visible (ie redrawn), but cannot be changed.
Include Clear Button : Includes a button "clear" which allows the signature field to be cleared, so the user can start again.
Include Guide Line: Includes a light grey line as the background for the user to sign onto.
Local Save Tab
Save Signatures as Image File : If on will call a procedure to convert the signature to an image. this is in addition to storing the image in the data field.
Save to file on Insert / Save to file on Change: Save the image when a record is created, and/or save it when the record is changed.
Procedure : the procedure in your app to do the conversion. (Typically SigToImage)
FileName : The name of the file to save the signature as. You could use the record ID as part of the name. For example;
'Sign-' & p_web.GSV('fil:id') & '.bmp'
Format
(This is included FYI, but you don't really need to care about this.)
The format of the string looks like this;
Z[{XxxYyyWwwHhh-XxxYyyWwwHhh-.....-XxxYyyWwwHhh}]
Each instance of xx, yy, ww and hh is a number.
Each group matches a call to draw a LINE(xx,yy,ww,hh)
The signature is formed from all of these "little lines"
SigToImage
The template allows you to "call" a procedure to convert the lines to an image, when the signature is submitted. the procedure can have any name, but the prototype must be (compatible with)
Procedure(String pSig,Long pWidth,Long pHeight,String pFileName)
as these are settings that come from the template.
An example sigToImage function is included in the attached example. This procedure uses the DRAW library to draw the lines, and save the image.
The source code for this example procedure is as follows;
SigToImage PROCEDURE (String pSig,Long pWidth,Long pHeight,String pFileName)
drw draw
Window WINDOW('Caption'),AT(,,200,60),GRAY
IMAGE,AT(0,0,200,60),USE(?Draw)
END
st stringTheory
liner stringTheory
ln long
x long
y long
w long
h long
a long
b long
CODE
open(window)
window{prop:pixels} = 1
window{prop:width} = pWidth
window{prop:height} = pHeight
?Draw{prop:width} = pWidth
?Draw{prop:height} = pHeight
drw.init(?Draw)
st.SetValue(pSig)
st.remove('Z[{{')
st.split('-')
drw.Blank(color:white)
drw.SetPenColor(color:black)
drw.SetPenWidth(1)
loop ln = 1 to st.records()
liner.setvalue(st.GetLine(ln))
x = liner.between('X','Y')
y = liner.between('Y','W')
w = liner.between('W','H') - x
h = liner.after('H') - y
drw.Line(x,y,w,h)
end
drw.display()
drw.WriteBMP(pFileName)
drw.kill()
close(window)
Topic: New Form Field Type: Signature (Read 10836 times)