Some interesting features, for capturing the signature:
- It also loads some css, including a background image, mostly copied from Szymon’s example.
- The save button writes the canvas as a URI encoded PNG to a Bubble Text Input, and tells Bubble it has changed.
- Workflow event looks for the Input changed, and saves the text URI to a database element.
The Text Input is tucked away out of sight behind the image of the stored signature.
For viewing the signature:
- HTML element with
- Embed a dynamic search for signature into the img src above.
Thanks to @Lenex for the idea for simpler method above. Previously I was messing around with this method:
[details=Clunkier method]* Bubble Image element preloaded with a placeholder image.
- Group to load the signature from the database.
- Text Input to hold the URI of the loaded signature.
- Another HTML element to initiate the copy of the URI, based on the modified date/time.[/details]
For reference, Szymon Nowak’s scripts are at: https://github.com/szimek/signature_pad/
His example is at: http://szimek.github.io/signature_pad/
There is a lot going on here. I’ll write up a tutorial to go with it, in the meantime any questions are welcome!