Hi everyone, sharing a Bubble integration of Szymon Nowak’s javascript signature pad.
Run: https://signature-pad-example.bubbleapps.io/
Edit: https://bubble.io/page?version=test&type=page&name=index&id=signature-pad-example&tab=tabs-1
Some interesting features, for capturing the signature:
- Page HTML Header loads a minified CDN of Szymon Nowak’s javascript.
- It also loads some css, including a background image, mostly copied from Szymon’s example.
- HTML element containing the canvas, and javascript to initiate the signature pad, 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
<img src=""/>
- 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.
- HTML element with javascript to copy the URI onto the Image’s source.
- 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!
Regards,
Misha