Recently I was asked to come up with a way to let people sign into an event using tablets, so a perfect opportunity to pull it out. It was a breeze to add it to the sign-in portion, we display a page on a mobile device and the user can sign in on the canvas. That was the "Wow" part of my initial presentation and his work let it go off not only without a hitch, but with next to no work on my part.
The next phase to come up is to capture the signatures as images so they can be exported and stored. Declan's control saves the co-ordinates in a text field. Here I discovered that the HTML5 canvas (which is what the control uses) has a method, toDataURL, that translates into a base64 string that can then be converted to an image. PNG is the default, but JPG also seems an option (I left it as PNG). I have put that in a CSJS button that calls a RPC that has a function that takes the string and converts it to an image, attaching that image to the document.
A few notes:
- I'm "cheating" on using CSJS to get the element in my sample. It's a simple page so the element is always generating the same ID. You will probably want to change that so you can use it anywhere.
- The returned string starts with "data:image/png;base64," so my SSJS function strips that out.
- My PRC returns an alert that it is done, you can easily comment that out.
Here is a link to a document with the full XPage and the function I call.