QC Signature Capture
What is the QuickCode Signature Capture?It’s a quick way to add signature capture to your FileMaker solution to be used on iPad, iPhone, Mac, and Windows. Version 2 is even simpler than Version 1!
Updates
DownloadVersion 2. Free or… Download either file, both are the same.
How does it work?Watch a short video below. Please note that the video is from an earlier release, but the concepts are exactly the same.
View the overview video on YouTube to view a higher quality version. |
More Information
The html source can be viewed in the ‘Signature Capture HTML’ tab. On the ‘Signature Capture’ layout a Webviewer that is based on the html source. It also references the Signature Width & Height fields for the Signature area and border. When the record loads, an OnRecordLoad triggers a script that waits until the signature has been submitted. On the form submission, the webviewer changes the url using JavaScript to temporarily that includes the values that we need to store in the fields.
The ‘Wait for Signature’ wait for expected text in the webviewer url and then extracts the signature from the url. It then goes back to ‘Signature List’ layout
Thanks to:
- John Sindelar for the idea and Todd Geist for the Twitter discussion about the method used in Version 1: http://thomasjbradley.ca/lab/signature-pad
- Andy Frazier for developing a method to convert the Version 1 signatures to images in containers.
- Remy Theriault for implementing the Version 2 method using Richard Garside’s method: http://www.nogginbox.co.uk/blog/canvas-and-multi-touch
- Peter Vinogradov suggested removing the height and width fields to use the webviewer’s size on the layout.
Questions and Answers
Q: I am getting an error on the iPad that states that I do not have the scriptmaster plugin installed. This solution still requires a Scriptmaster plugin to fully utilize the png, and plugins are not supported on the iPad. Even the demo direct to iPad from your site states that the Scriptmaster plugin is required for the "send to container" step.
A: That's correct. Since FileMaker Extensions do not work with FileMaker Go, you cannot convert the signature to an png on your iPad or iPhone at this time. However, since you can view the signature in the web viewer, the web viewer can be used to display the signature as needed. We added the convert to png as an example how to do so. If you need to convert it to a png on iPad or iPhone, you could create a script to do so on your FileMaker Server. The script would look for records that have a base64 signature with no png and then create the png for the found records.
Q: I'm receiving an error that says: [Your browser can not show this example.] This error comes up when I try to create a new signature within filemaker. Is there something I need to install?
A: I was able to confirm that, even after trying Windows 7 and Internet Explorer 9. This means that support for Windows is limited as the capturing of signatures does not work with Windows at this time. Signatures that were captured on iPad, iPhone, or Mac can be viewed on Windows.
Q: How would I place the signature on a document created in my filemaker database? If I created a quote on my Ipad or iphone, I would like the customer to sign the quote and then I would email it (the quote with signature) as a PDF to the customer and my office. Can this be done ?
A: Yes. You would have your customer sign and then place the web viewer that displays the signature on the form to be printed. Then you could print to a PDF and email to your customer.
Q: Can this work with Filemaker pro on a regular computer. I tried it and keep getting a message in the webviewer that tells me "your browser can not show this example."
A: We just found that it works on Mac, but not Windows. Support for Windows is limited as the capturing of signatures does not work with Windows at this time. Signatures that were captured on iPad, iPhone, or Mac can be viewed on Windows.
Q: I would like to implement the signature capture into an existing FileMaker database. I need to allow the person signing to see what they are signing (signature and document on same page). Is this possible and if so, how?
A: You can do this placing the document text on the same layout as the signature. Normally, the document text would be above the signature so it can be examined and the signed a the bottom.
Q: I am trying to implement the signature capture into my patients database for freestyle drawing. I managed to create the exact same elements within my database, and I get as far as pushing the "confirm" button, but then I get the "Thank you" message and it stops there, without going back to the signatures layout and displaying the signature...
A: You seem to be missing the OnTimer Script. Once you load the Signature Capture layout, you need to start the OnTimer Script so it can watch the URL of the web viewer. When the web viewer URL changes, it will run the Script to process the Signature stored as a Base64 string in the URL.
Q: I wonder if QC Signature Capture uses the biometric system. To compare two signatures from the same client. Thank you!
A: Comparing signatures isn't built in, but you could store each signature and compare the images separately.
Q: Do you have an implementation guide for using your solution in other filemaker databases? Thank you
A: While we don't have a step by step guide, we have explained each step of the process. If you need assistance with implementation we can help on a consulting basis.
Q: If I turn my iphone after having signed but before confirmation, I lose the signature.
A: Yes. At that point the signature is not stored in the database. When you confirm the data is written to the database record. The solution is to confirm after signing as confirming is the only way it knows when the signature is complete.
Q: Great implementation, far better than the built in solution. I am trying to make the web viewer's background transparent, so that I can put an image in a container behind it and give the illusion of drawing on that image. I tried changing the colour in the signature capture html from to but this does not seem to work. Any advice on this one?
A: I don't believe that web viewers can be made transparent. You might be able to export the image to a temp folder and then place the image IN the web viewer under the signature area. I have not tested that, but that would be the next thing to try... Please let us know how it goes and please share your changes!
Pingback: FileMaker Go 1.2.1 Released with Printing, Signature Capture, and Charts | CampSoftware | FileMaker Certified Development in Orlando and Central Florida
Hi Hal,
Did you get this to work with Windows? If not, do you know what the issue is? I’m working on a solution for electronically signing waivers for a Ski School. The check-in stations are PCs. I’m also looking for signature pad recommendations.
Thanks,
Matt
Not at this time. I tried several methods using the Google Frame. Problem is that FileMaker uses Internet Explorer for the Web Viewer on Windows and Safari on Mac. Since Internet Explorer doesn’t follow web standards, it fails. I wish that either Internet Explorer would update itself to use the new standards that the Web Viewer could use or FileMaker would let you choose to use either IE or Safari on Windows…