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
2 Likes
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:
- For Clear Button (Ký lại):
- For Done Button (Xong):
So my questions are:
- 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?
- Any way to save such file/image to a field in the database so that I can retrieve it later?
- What the action 2 above (Remove Signature From Element a SigPadNoButtons) mean? How it works?
Best regards,
P.N.Quang
fixes are live
https://jaredgibb.bubbleapps.io/version-test/signaturepad?debug_mode=true
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.
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
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.
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
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!
Hello;
I have been using this plug-in for a while now with no problems.
Yesterday one of my users reported this error it is throwing up. (see photo)
I am on V6.0
Any ideas how to fix this anyone?
Thanks
Sorry, not sure what that is. I haven’t made any changes and my demo is still working as expected. Have you added a new plugin to your app recently?
1 Like
I have not touched this app since mid December actually.
It appears to be related to when I clear the pad upon first opening it.
I found if I don’t clear it, the pad’s image can persist when opening a group.
I have now added a conditional to only clear the pad when the pad’s png is not empty.
That seems to have stopped the error. So if you clear the pad when it is ALREADY empty, error.
And it was occurring only in this one spot.
Not sure why, but this behavior was new for me.
1 Like
I did some further testing and am able to recreate this error.
What I am trying to do is to clear the signature pad before opening a group/pop-up containing the pad, on which a user needs to sign.
This way if the user had previously signed on the same pad for an earlier use in the same session, the pad does not have their previous signature.
But now if I put the workflow “Clear the Signature Pad” before opening the group or popup, it throws this error. It actually then works fine and clears it all, but only after I hit ok on the error.
If I do not try to clear the pad first, it all works but the previous signature from the session persists until one hits clear.
Make sense? Maybe I should make a video?
@jared.gibb Great Plugin!
1 Like
