Forum Academy Marketplace Showcase Pricing Features

Signature pad example

Showcase
#1

Hi everyone, sharing a Bubble integration of Szymon Nowak’s javascript signature pad. :slight_smile:

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

28 Likes
Signature Field Options
Drawing on bubble
Create an image in bubble?
Real time tracking with maps
Any way to auto-update auto-bound dropdown on page load?
[SOLVED] How to upload an image using POST API
Script SRC Within an HTML Element
Turn an input element (filled by the user) into an image and save to current user
Circular Profile Pictures Possible?
"JSON Dictionary"
#2

After coming up with a solution, I looked further on the forum, and found @Lenex had also used Szymon’s signature pad.

His method of sending the URI of the signature to the database is having the javascript make a POST API call to an endpoint in the Bubble app.

I think our methods are different enough to have both as alternatives.

2 Likes
#3

This is awesome! Thank you so much Misha!

#4

You’re welcome : )

I notice @Lenex has a simpler way of displaying the signature, with the downside of showing an empty image if it has not yet been added:

Edit: can substitute an empty image in the search result, with an image from the database or just an url:

Hard to read, but it is taking the search result with newest first, getting a list of the image sources, :plus another source (url to a jpg), :first item.

#5

Good work @mishav :slight_smile:
In regards to using custom HTML elements I notice they are a nightmare to let them be responsive and auto resize etc. Got any tips for that?

#6

I’ve updated the example to show the easier way to display the signature on a separate page.

#7

Thanks @gurun. Yes getting the HTML responsive was annoying, it looked great until I added another group further down the page. I ended up enclosing it in a group to get the margins and widths right. As right as I’ve been able to test so far.

#8

Did you manage to get it to resize inside group? It just overflows.

My solution was to inject html to a native bubble element. Grouping an empty div with ID inside and traversing up to parent DOM node with JS, then doing what is required there. Not perfect tho.

Maybe we should feature request that custom html elements should be responsive ? or a way to append correct CSS.

#9

It seemed to resize okay eventually, I set min width to fit on small mobiles, and max width 100%, no margins on left and right to its parent group.

The parent also has the same min and max width, centered in its margins BUT I set it to collapse margins when container <= 1500 … since min and max are constrained, Bubble puts margins in anyway. I’m uncertain if this is what made it work or something else.

Haha great hack workaround!

Maybe yes, I think some clear examples of how it doesn’t work would help it to be fixed.

Enable a user to "sign" with their finger?
#10

Thanks. Will experiment a bit myself as well.

#11

Hi @mishav,

Thanks for the post! I’ve been reading all of the threads you’ve referenced trying to absorb it all as I’m trying to implement a signature pad on my site. I’m trying to better understand a couple of things on your editor…

I notice on the index page the src references CLOUDFLARE. Do I need to create an account for them? I’m trying to make a business website so it seems the rate is about $200/mo which is a high cost for the signature feature for my current needs! Can you clarify this a bit more please! Are there any alternatives? (Why did you do this?)

You also reference CLOUDFRONT on the image. Again, Why? I checked it out and it appears to be connected with aws. I’m a bit of a noob with this stuff so not sure If I need to set up an account with them either… or if anyone can just use this link…?

I actually copied your editor page groups and stuff into my site - Is that alright with you?!? and got the signature pad to load, but it doesn’t do anything when the mouse “signs” it. What would be your recommendation on how to implement all of this great info you shared and put it into my site? What would I need to change from your editor to make it work for me?

Thank you very much, if you can help out that’d be greatly appreciated.

Jason

#12

Hi @jasondiehl07,

Good you’re giving it a go, integrating javascript is a challenging area.

The cloudflare reference is an image (free sample), used as a placeholder for an empty image. It can be replaced with any image, or with none at all which doesn’t look as good.

Yes it’s fine to copy all the bits, they’re there to help get it set up. The javascript library and some styling (including a background image) is loaded on the page header, if you look at the bottom of the page properties it will show.

Part of your customisation is deciding where to store the signature, and which pages to display it.

I’d be happy to help further if needed, can PM me an app link.

#13

This is a great idea! Could you add the option to change the pencil size and color?

#14

Interesting idea, do you mean for the person signing to have the option?

Field to sign with autograph
#15

Yes! Something like this http://www.signpack.info/ but web base. The possibility would be endless.

#16

In my opinion, collecting a signature should have as few distractions as possible, but it’s a fun challenge. If you design the form I’ll help connect the buttons to the javascript :slight_smile:

#17

@mishav - the editor link at the top of this post keeps redirecting me to the bubble dashboard page. Perhaps a settings issue or you changed it to private? I’d enjoy taking a closer look if that’s still OK.

#18

@dan1 thanks, fixed now :smiley:

#19

As this seems to be the number one signature thread, I post it here (can start a separate topic for this if OP prefers).

What is your password storage policy? Do you use it to attach a signature to a document, then delete the signature and just keep the signed document? For some reason it feels wrong to store those signatures in a signature data object.

I might add a step to the workflow that deletes the signature once it has been printed. What are your thoughts?

#20

@vincent56 that’s a good topic.

It can be stored in a text field on any thing, so yes it can be closely associated with the particular agreement being signed. You’re correct, it would be inappropriate to use it in any other context.

The downside of deleting it is losing the ability to re-print.

I think at the minimum, privacy rules should be put in, allowing only the appropriate users to retrieve it.

1 Like