QC Signature Capture

• Tweet
• Email
• Sharebar

• Tweet
• Email

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! Go to the Signature List layout and tap the New button. Sign and Confirm. Back on the Signature List, the Signature will be visible in a webviewer, as Base64 Text, and with ScriptMaster, you can convert the Base 64 Text into a ‘png’ in the Container field. Updates Updated layouts to work better with iPhone. Now works on Mac, Windows, iPad, and iPhone. 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. Download Version 2. Free or… If you found this useful please consider donating something to cover the time spent to make this available. If you used this for a client, maybe ask then to donate what one hour of your time is worth? It’s up to you. Download either file, both are the same. FileMaker File Use when on iPhone or iPad Zip File Use when on Mac or Windows 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

1. Rating: +1

   

   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.

   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.

2. Rating: +0

   

   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?

   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.

3. Rating: -1

   

   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 ?

   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.

4. Rating: +0

   

   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."

   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.

5. Rating: +1

   

   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?

   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.

6. Rating: +1

   

   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...

   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.

7. Rating: +0

   

   I wonder if QC Signature Capture uses the biometric system. To compare two signatures from the same client. Thank you!

   Comparing signatures isn't built in, but you could store each signature and compare the images separately.

8. Rating: +0

   

   Do you have an implementation guide for using your solution in other filemaker databases? Thank you

   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.

9. Rating: +0

   

   If I turn my iphone after having signed but before confirmation, I lose the signature.

   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.

10. Rating: +0

    

    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?

    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!

Ask a Question

Rough Transcription of the Video

Hi my name is Hal Gumbert with CampSoftware and I’m extremely excited to show off our FileMaker Go signature capture version 2 this implementation is so much simpler now that we’re using Richard Garside’s at implementation you can read more about it at this URL he goes into the details and line by line of how all the code works inside the web viewer but first I’d like to thank everyone who participated in this there were so many people just with awesome ideas and feedback but specifically I thanks John and Todd Geist they were talking John Sindelar but based at both talked about how this might work on twitter and using him Thomas J. Bradley’s signature pad version that the version we use before it was much more complex than the one at him from Richard Garside Andy Fraser took the version 1 for the limitation of the signature captured and was able to get each strange on text version of the signature and get it converted to a container that was amazing then a couple days ago Remi Theriault I hope I didn’t mean too much sent me information about Richard Garside’s method and it’s just so clean 82 pages of printed text for the web you are just beautiful and just yesterday Peter Vinogradov suggested getting rid of the height and width fields that were on the table and just simply use the web viewer size and get object attribute really clean so I’ll go into a quick demo and then we’ll come back and just look at the pieces for a couple minutes so will jump over to the signature list here we have a signature authority here this is a web viewer that’s based directly off of this field this is the base 64 representation of the signature so this is an actual PNG encoded in base 64 and over to the right is a container and world sold out in just a few minutes so click new and that will bring up the please sign confirm coming here and write what I won’t say how and I’ll confirm and quickly you may seem as a thank you just a little message saying that it finished you could make them visible attribute like and here you can see it just popped in the image and show the viewer and I can simply click a 64 container and that took this text them in a PNG of eight users own scrim asters functions remasters a free plug-in through six 360 works but am only one negative side affects of us is that on it says requires a plug-in to convert the text to the image you can’t do this directly on the iPod were the absurdity iPod touch or iPhone or iPod him since it requires a plug-in only works on phone maker Pro for Mac or Windows on your desk so in addition excuse me come I can make a signature I can clear it up and sit with Peter’s suggestion I can go into layout mode and simply change the size of the web viewer go back into browse mode you use a larger size it didn’t use the entire screen because it was not tens to the size I do the now I can use the entire screen to capture signatures peters I see using it in a really unique situation he’s using it for drawings rather than for signatures he wanted to maximize the amount of space to work fully well for that and I can confirm this upcoming image connected with a 64 container a 64 to the content works great so far a little bit of the guts of it what you’re up on the layout mode here you can see this signature signature tax is simply a Web viewer is going truck into this field to whatever’s in this field is it shown in Web viewer on the layout over on the signature side a quick update to take me back so I can replace the signature of the layout mode this Web viewer is based on a global field called signatures signature capture HTML and is doing some substitutions of the text is taking any characters that may end up in the within the code and converting it into hexadecimal codes is also looking for some tags within HTML which will show you the moment that take these tags and replace them with the size of the area where the signature so we had to reduce the size little bit because the edges of the HTML output as it’s presented on screen so if we go back home on the other You can see the code that generates the signature that actually does the capture and send it back to oh go through all the bits of code you can go to the website where this came from we added a function for clearing the canvas and we add a background color for the page so that it appeared to be the same background color as our layout and here you can see the tag that’s where this little bit of text gets replaced as well as the other heights use it for places 1234 and all but replaced with whatever size the web viewer is minus a little bit for padding so that’s really it just a little bit of HTML and couple comic or layouts just really me a using stuff took any questions please let us know were going to the download on the webpage you CampSoftware got the on the available go to this go to our site and download a free copy of this fully unlocked and just let us know if any questions in the soap using it for any interesting uses please let us know thanks and that I