Forum Academy Marketplace Showcase Pricing Features

[New Plugin] Signature and Sketch Pad

Hey bubblers! I have put together this simple signature pad to help my personal needs, then expanded it slightly and wanted to share.

I had a need for a signature on a line along with a date that can be drawn on screen.

The use is super simple.
Draw an image
Click save (or add buttons and assign the equivalent element actions)
Display image by retrieving from the elements ‘output image’
or
use the returned image URL from the event ‘png URL has been created’

BAM!

This is my first public facing plugin and I would love any and all feedback!
Signature Pad Plugin Page
Sketch Pad
Signature Pad with Buttons
Signature Pad without Buttons

Hello @jared.gibb. Thank your very much for your great plugin.
However there remain some points that I could not understand enough:

  • After install your plugin, I noticed that there are 3 visual elements added to my design tab. I drawed all 3 elements on my design page for better understanding the differences among them as below image:
  • When I previewed the page, I see some things weird like in followed image:

As you can see on the image:
#1: Element 3 (SignaturePad) and Element 4 (SketchPad) seem not work?
#2: What is the red circle 1? Can I take it out of the Pad or not?
#3: Red ellipse 2 has 2 dates overlaped one on the other. How can I fix it? Can I hide the date?

Thanks again and hope to have your help on this plugin.
P.N.Quang

Hey! It’s been a little while since I worked on this. Sorry you’re having those issues let me look into it.

The X is just something for style. You know it’s like an American saying to sign on the X. So I included the x in my signature pad.

I don’t believe creating an option to hide the date should be a problem. Let me work on that one also

What it looks like, for now, is that the signature pad with no buttons is not refreshing the image or is refreshing it before it should. You could try clearing the signature pad for now as a workaround. I will try and fix that sometime today

Thank you a lot for your reply, @jared.gibb.
I found the reasons for my posted issues: your plugin seems not allow to use more than 1 element at the same time on a page. I tried to put one element each time and that worked!
By the way, I kindly ask you some more questions:
I created 2 buttons for your SigPadNoButtons element like this:


And workflows for these 2 buttons as follows:

  1. I selected action 1 (i.e Save Signature…) but did not know where to retrieve that file/image? In other word, where is such file/image saved?
  2. Any way to save such file/image to a field in the database so that I can retrieve it later?
  3. What the action 2 above (Remove Signature From Element a SigPadNoButtons) mean? How it works?
    Best regards,
    P.N.Quang

fixes are live

update the plugin. will address everything else later this week!

Nice catch with the upload.

so by default, for starters, the image will download and upload. lets start with turning off download.
Screen Shot 2021-02-26 at 8.45.08 AM

you can either same the image that is outputted to the element state signature image

OR use a workflow that returns a URL to the uploaded PNG after the image is uploaded to the server and save either. this way you can share the URL with the user, it could be their digital signature or sent or done whatever with. i was playing when i made this and exploring options for output.

I can download the image
use the image in is temporary state
save the image to a user object
or save the URL

Many thanks @jared.gibb

1 Like

Hi there, can we have the option to remove the X and a better scale of the date?

also option to remove the stroke color in sketchpad. thanks

glad you find it helpful @ngocquanghn

@shu.teopengco you can change the font size already.
Screen Shot 2021-03-08 at 2.28.35 PM

also, you can now add your own background image. so if you dont want the X you can upload your own signing line.

here is the image code


data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV4AAABkCAYAAADOvVhlAAADS0lEQVR4Xu3UQQ3AIBBFQRCBqprCeRsulfAuzBr4yWTz5nAECBAgkArMdM0YAQIECAzh9QQECBCIBYQ3BjdHgAAB4fUDBAgQiAWENwY3R4AAAeH1AwQIEIgFhDcGN0eAAAHh9QMECBCIBYQ3BjdHgAAB4fUDBAgQiAWENwY3R4AAAeH1AwQIEIgFhDcGN0eAAAHh9QMECBCIBYQ3BjdHgAAB4fUDBAgQiAWENwY3R4AAAeH1AwQIEIgFhDcGN0eAAAHh9QMECBCIBYQ3BjdHgAAB4fUDBAgQiAWENwY3R4AAAeH1AwQIEIgFhDcGN0eAAAHh9QMECBCIBYQ3BjdHgAAB4fUDBAgQiAWENwY3R4AAAeH1AwQIEIgFhDcGN0eAAAHh9QMECBCIBYQ3BjdHgAAB4fUDBAgQiAWENwY3R4AAAeH1AwQIEIgFhDcGN0eAAAHh9QMECBCIBYQ3BjdHgAAB4fUDBAgQiAWENwY3R4AAAeH1AwQIEIgFhDcGN0eAAAHh9QMECBCIBYQ3BjdHgAAB4fUDBAgQiAWENwY3R4AAAeH1AwQIEIgFhDcGN0eAAAHh9QMECBCIBYQ3BjdHgAAB4fUDBAgQiAWENwY3R4AAAeH1AwQIEIgFhDcGN0eAAAHh9QMECBCIBYQ3BjdHgAAB4fUDBAgQiAWENwY3R4AAAeH1AwQIEIgFhDcGN0eAAAHh9QMECBCIBYQ3BjdHgAAB4fUDBAgQiAWENwY3R4AAAeH1AwQIEIgFhDcGN0eAAAHh9QMECBCIBYQ3BjdHgAAB4fUDBAgQiAWENwY3R4AAAeH1AwQIEIgFhDcGN0eAAAHh9QMECBCIBYQ3BjdHgAAB4fUDBAgQiAWENwY3R4AAAeH1AwQIEIgFhDcGN0eAAAHh9QMECBCIBYQ3BjdHgAAB4fUDBAgQiAWENwY3R4AAAeH1AwQIEIgFhDcGN0eAAAHh9QMECBCIBYQ3BjdHgAAB4fUDBAgQiAWENwY3R4AAAeH1AwQIEIgFhDcGN0eAAAHh9QMECBCIBYQ3BjdHgACBE96NgQABAgQ6gRPet5uzRIAAAQLC6wcIECAQCwhvDG6OAAECwusHCBAgEAv84X3WiqfNESBA4E6BD7pqBlXieP2XAAAAAElFTkSuQmCC

Screen Shot 2021-03-08 at 2.30.51 PM
sketchpad work is next

Possibility of adding to own AWS S3?

Happy to see this being used! Support this project!

[UPDATE]

A request came via DM recently to add the ability to toggle pen stroke width.
^^this was pushed out into a new update today along with the ability to control pen color!