8 ms·

Smooth Online Signatures, Open Source

167 points by ezl 13y ago

brunoqc 13y ago
Is the signature supposed to match the one you use in real life? I don't sign with the same hand that I use the mouse so it doesn't look really good.
FrankenPC 13y ago
THIS is really impressive! The most accurate representation of my chicken scratch I've ever seen. Why is it little usability improvements like this take so damn long to incarnate?
pedromanacas 13y ago
genius, apart from the automatic smoothing correction that changes what my real signature would look like... oh wait..
chrisacky 13y ago
This is soo impressive. The signature looks exactly like my real life signature.. (which isn't a trivial one). I've forked. I plan to republish it as a tool that allows you to create arrows and save them to transparent PNG files to overlay as images. I find it really tiresome when I need a specific angled or specific sized arrow and I think this tool just performed perfectly... AAAS. (Arrows as a Service). :D
fallinghawks 13y ago
That's beautiful. I love the varying thickness; very fountain-pen-like. I've been using Bradley's code for a paint app in Android, but this is sweet.
anthonyyaco 13y ago
http://willowsystems.github.io/jSignature/#/demo/ http://willowsystems.github.io/jSignature/#/demo/
- digitalboss 13y ago
  ....and? Do you have some comparisons you wanted to share?
anonymousDan 13y ago
Have you thought about setting up a site for sending greeting/thank you cards that uses this? If you could get to the point where it was hard for someone receiving a card to figure out whether the card was actually signed by hand I think you could be on to a winner. There's just something a bit impersonal and lazy about sending a card that's not hand signed.
- eru 13y ago
  To make the effect perfect, you could display the electronic signature to a human who then uses a pen to sign the card in the same way. (Otherwise you could easily tell pen from print.) That would of course be highly questionable. Or you build a plotter instead of a pixel printer.
tjohns 13y ago
Very nice. One thing that's missing though: It doesn't work with the touch screen on my Pixel, and I suspect it has the same problem if I tried to use it on my tablet. It's a lot easier to get a good signature with a touchscreen than a trackpad. ;)
- sneak 13y ago
  It works -amazingly- on my iPad mini. Someone build a complete service around this, please!
  - tjohns 13y ago
    Okay, that's odd... it's working fine for me on my tablet, and also working fine for me on my Pixel now that I'm testing again. Must have just been some sort of temporary glitch.
- isaacwaller 13y ago
  Works really well for me on a Windows tablet.
erje 13y ago
I honestly feel like I'm missing something. Why not use a bitmap tracer?
lisper 13y ago
I hate to rain on the parade but this effort is badly misguided. The reason physical signatures work is not that a pen allows you to render subtle curves more easily than a mouse, but the fact that the laws of physics can be used to bind a physical signature to the thing being signed (because a physical signature can't easily be moved from one piece of paper to another). The reason electronic signatures are broken is not that the signature doesn't look right, but the fact that nothing binds the signature to the thing being signed. Once I have your electronic signature it is trivial for me to transfer that signature to any document I like, so the presence of an electronic signature proves nothing. Hence, electronic signatures are useless. And good-looking electronic signatures are worse then useless precisely because they look so much like physical signatures but without the actual benefit that physical signatures provide. Nice curves don't make an electronic signature useful any more than an image of a shiny padlock makes a web page secure. The ONLY way to sign documents electronically that has any actual utility in the face of disputes (which, if you think about it, is the only situation in which signatures matter) is with cryptographically secure digital signatures.
- delinka 13y ago
  You are correct on the technical aspects- it's certainly trivial to take the digital signature and apply it to something the signer didn't actually see. But we're all already signing on the POS pin pad with a pen on a touchscreen. It's going to take someone actually transporting a signature to another document and a resulting lawsuit to see the practical impact of accepting physical signatures with a digital medium.
  - lisper 13y ago
    > we're all already signing on the POS pin pad with a pen on a touchscreen That's a little different because the pin pad might have an audit trail built in to it that would allow the merchant to prove (or at least provide evidence for) the provenance of the signature. I don't know if pin pads actually do this, but it's possible. With a signature that comes in as a stream of bits over the internet from some unknown source this is not possible even in principle. And that is exactly the problem. People think it's the signature that matters because that is what they see. It isn't. What matters is that the signature provides some evidence about the intent of a particular person at a particular time. A physical signature on a physical document provides such evidence. An electronic signature does not and cannot. BTW, even physical signatures have pitfalls. They bind only to the single sheet of paper they are actually on. This is the reason that on documents that actually matter they make you initial every page. Because without those initials it's trivial to swap one page of the document for another and it is impossible to tell which version you actually signed.
el_shayan 13y ago
Did you just create a database of signature and IP addresses? :|
cbhl 13y ago
I'm curious, has the OP considered the HelloSign API? Is it too expensive for their use case, or is there a {technical, legal} reason that they can't use it?
- ezl 13y ago
  I did. I really wanted to use it and have emailed back and forth with them several times over the last 2 years (from before they even had a product called hellosign -- when it was integrated into hellofax). it required account creation for both signers through their site, which forces my users to leave the site to sign, and it wasn't a fit for the UX i wanted. Similar issue for signnow.com Benefits of using those though: transfering the responsibility of maintaining legally compliant signatures to a third party. Read more: http://www.hellosign.com/info/legal http://www.hellosign.com/info/legal For my specific use that's less important, so I opted for a solution I could embed without sending my users somewhere else. However I think the hellosign folks are awesome guys and i use hellofax for a lot of stuff personally.
Zoomla 13y ago
looks nothing like my signature if I use the same motion as with a pen....
deleted 13y ago
[deleted]
GhotiFish 13y ago
It doesn't interpolate between speed very effectively. So when I transition between a fast stroke and a slow stroke, there's this strange bump when the stroke changes width. I'd suggest... "Variable width signatures (this is implemented very crudely, and I didn't discuss it in this post. The first signature pad in the post uses it though)" never mind ,I think you and I are on the same page. Looks fantastic.
- ezl 13y ago
  the square blog post I referenced implements this better. they save tuples of (timestamp, location) and can therefore determine velocity (more or less). I used a really ghetto distance metric as a proxy for velocity and since the sampling rate varies on everyone's local machines it can produce really ugly signatures. close inspection of the implementation will not bode well for anyone's opinion of my programming abilities. my excuse is that this is a tiny bit of UI candy on top of my core business. if i were to spend much more time on it, I'd change a lot of things about it.
vonseel 13y ago
Did you happen to look at http://willowsystems.github.io/jSignature/ http://willowsystems.github.io/jSignature/ ? I'm wondering what oppositions you had to their plugin, if so. I looked at Thomas Bradley's plugin, tested it in a client app, but ended up going with jSignature as the base64 such could be posted as form data, converted as necessary, and placed in a LaTeX template that was converted to PDF. Note that my client was aware this was not a valid "e-signature", but they wanted a simple solution that appeared valid and large contracts would require paper signatures anyways.
- oijaf888 13y ago
  Why wouldn't that be a valid e-signature? Previous comments have said that a valid e-signature is (essentially) anything adopted by the person with intent to sign the record.
  - vonseel 13y ago
    It's been several months so I may be wrong, or perhaps I am thinking of a different regulation, but I was under the impression electronically signed documents required an audit trail, and that the signature could not be modified post creation of the document.
- ricardobeat 13y ago
  That also seems to use linear interpolation, giving signatures the 'wiggly' digital look.
- ezl 13y ago
  I did look at it. It was my second choice and I would have used that if I didn't used Thomas Bradley's. I emailed Thomas Bradley when I was exploring options and he responded within an hour. Also, that repository was active (TB was responding to bug reports and there had been commits on the day that I looked) and had more followers and forks. Since I'm a mediocre hacker, I generally optimize for paths where I can get the most support if I think I might need it. Thomas's is also very well documented with specific code examples and demos for the basic use cases. I considered a lot of different options, including signature as a service (https://www.signature.io/ https://www.signature.io/ -- these guys have a beautiful implementation), integration with other companies (hellosign and signnow are my favorites, docusign/echosign), but TB's was just the best fit for my needs at the time.
mafuyu 13y ago
Quick comparison between this, OneNote, and my actual signature: http://i.imgur.com/41eFyAd.png http://i.imgur.com/41eFyAd.png
exo_duz 13y ago
I've always hated signing off packages because it looks nothing like my signature on the hand held devices. Hopefully this will be used in the future to make signatures look more coherent rather than just some squiggly lines on the touch pad. It's a simple concept with font smoothing. Wonder why they never thought of implementing it on actual commercial devices.
gbraad 13y ago
Credits go where credits are due: http://thomasjbradley.ca/lab/signature-pad http://thomasjbradley.ca/lab/signature-pad "All the credit belongs to the incredible work by Thomas Bradley, who authored the original signature library and Square for the blog post that outlined the approach." Not so sure from the page why a fork was justified... I have been using this solution for quite a while on a project which needed signatures for fulfillment. More than happy with it...
- roryokane 13y ago
  In the paragraph above your quote, the author lists three problems that he said all existing solutions had. The problem he had with Signature Pad is probably the last one, “Didn't have the signature smoothing component”.
  - gbraad 13y ago
    my bad... but not something I would need, as I believe smoothing alters the signature (if only aesthetic). Hope it will be useful to others. Note: man, the smoothing becomes a horrible ink-blobby mess... especially with the mouse. Using a tablet (Wacom) gives better results, but this is more related to the accuracy of the digitizer... but still the results is a mess; as if something just dipped a fountainpen in a pot of ink
geuis 13y ago
Got to this late today. You have no idea how impressed I am. I was able to sign my signature with my finger in my phone and it actually looks like my signature. This is incredibly impressive. I'll read through the technical specs when I'm in a less tired state, but I've already forked this. Please, keep working on it and improving where possible.
deleted 13y ago
[deleted]
thomasbachem 13y ago
I'd love a fork that doesn't' depend on jQuery, as I use the Dojo Toolkit on my site. I'll try to create a library independent fork soon.
CalinBalauru 13y ago
zqd q qnn
CalinBalauru 13y ago
zqd q qnn

167 points by ezl 13y ago

Is the signature supposed to match the one you use in real life? I don't sign with the same hand that I use the mouse so it doesn't look really good.

FrankenPC 13y ago

THIS is really impressive! The most accurate representation of my chicken scratch I've ever seen. Why is it little usability improvements like this take so damn long to incarnate?

pedromanacas 13y ago

genius, apart from the automatic smoothing correction that changes what my real signature would look like... oh wait..

chrisacky 13y ago

This is soo impressive. The signature looks exactly like my real life signature.. (which isn't a trivial one). I've forked. I plan to republish it as a tool that allows you to create arrows and save them to transparent PNG files to overlay as images. I find it really tiresome when I need a specific angled or specific sized arrow and I think this tool just performed perfectly... AAAS. (Arrows as a Service). :D

fallinghawks 13y ago

That's beautiful. I love the varying thickness; very fountain-pen-like. I've been using Bradley's code for a paint app in Android, but this is sweet.

anthonyyaco 13y ago

http://willowsystems.github.io/jSignature/#/demo/ http://willowsystems.github.io/jSignature/#/demo/

digitalboss 13y ago
....and? Do you have some comparisons you wanted to share?

anonymousDan 13y ago

Have you thought about setting up a site for sending greeting/thank you cards that uses this? If you could get to the point where it was hard for someone receiving a card to figure out whether the card was actually signed by hand I think you could be on to a winner. There's just something a bit impersonal and lazy about sending a card that's not hand signed.

eru 13y ago
To make the effect perfect, you could display the electronic signature to a human who then uses a pen to sign the card in the same way. (Otherwise you could easily tell pen from print.) That would of course be highly questionable. Or you build a plotter instead of a pixel printer.

tjohns 13y ago

Very nice. One thing that's missing though: It doesn't work with the touch screen on my Pixel, and I suspect it has the same problem if I tried to use it on my tablet. It's a lot easier to get a good signature with a touchscreen than a trackpad. ;)

sneak 13y ago
It works -amazingly- on my iPad mini. Someone build a complete service around this, please!
- tjohns 13y ago
  Okay, that's odd... it's working fine for me on my tablet, and also working fine for me on my Pixel now that I'm testing again. Must have just been some sort of temporary glitch.
isaacwaller 13y ago
Works really well for me on a Windows tablet.

erje 13y ago

I honestly feel like I'm missing something. Why not use a bitmap tracer?

lisper 13y ago

I hate to rain on the parade but this effort is badly misguided. The reason physical signatures work is not that a pen allows you to render subtle curves more easily than a mouse, but the fact that the laws of physics can be used to bind a physical signature to the thing being signed (because a physical signature can't easily be moved from one piece of paper to another). The reason electronic signatures are broken is not that the signature doesn't look right, but the fact that nothing binds the signature to the thing being signed. Once I have your electronic signature it is trivial for me to transfer that signature to any document I like, so the presence of an electronic signature proves nothing. Hence, electronic signatures are useless. And good-looking electronic signatures are worse then useless precisely because they look so much like physical signatures but without the actual benefit that physical signatures provide. Nice curves don't make an electronic signature useful any more than an image of a shiny padlock makes a web page secure. The ONLY way to sign documents electronically that has any actual utility in the face of disputes (which, if you think about it, is the only situation in which signatures matter) is with cryptographically secure digital signatures.

delinka 13y ago
You are correct on the technical aspects- it's certainly trivial to take the digital signature and apply it to something the signer didn't actually see. But we're all already signing on the POS pin pad with a pen on a touchscreen. It's going to take someone actually transporting a signature to another document and a resulting lawsuit to see the practical impact of accepting physical signatures with a digital medium.
- lisper 13y ago
  > we're all already signing on the POS pin pad with a pen on a touchscreen That's a little different because the pin pad might have an audit trail built in to it that would allow the merchant to prove (or at least provide evidence for) the provenance of the signature. I don't know if pin pads actually do this, but it's possible. With a signature that comes in as a stream of bits over the internet from some unknown source this is not possible even in principle. And that is exactly the problem. People think it's the signature that matters because that is what they see. It isn't. What matters is that the signature provides some evidence about the intent of a particular person at a particular time. A physical signature on a physical document provides such evidence. An electronic signature does not and cannot. BTW, even physical signatures have pitfalls. They bind only to the single sheet of paper they are actually on. This is the reason that on documents that actually matter they make you initial every page. Because without those initials it's trivial to swap one page of the document for another and it is impossible to tell which version you actually signed.

el_shayan 13y ago

Did you just create a database of signature and IP addresses? :|

cbhl 13y ago

I'm curious, has the OP considered the HelloSign API? Is it too expensive for their use case, or is there a {technical, legal} reason that they can't use it?

ezl 13y ago
I did. I really wanted to use it and have emailed back and forth with them several times over the last 2 years (from before they even had a product called hellosign -- when it was integrated into hellofax). it required account creation for both signers through their site, which forces my users to leave the site to sign, and it wasn't a fit for the UX i wanted. Similar issue for signnow.com Benefits of using those though: transfering the responsibility of maintaining legally compliant signatures to a third party. Read more: http://www.hellosign.com/info/legal http://www.hellosign.com/info/legal For my specific use that's less important, so I opted for a solution I could embed without sending my users somewhere else. However I think the hellosign folks are awesome guys and i use hellofax for a lot of stuff personally.

Zoomla 13y ago

looks nothing like my signature if I use the same motion as with a pen....

deleted 13y ago

[deleted]

GhotiFish 13y ago

It doesn't interpolate between speed very effectively. So when I transition between a fast stroke and a slow stroke, there's this strange bump when the stroke changes width. I'd suggest... "Variable width signatures (this is implemented very crudely, and I didn't discuss it in this post. The first signature pad in the post uses it though)" never mind ,I think you and I are on the same page. Looks fantastic.

ezl 13y ago
the square blog post I referenced implements this better. they save tuples of (timestamp, location) and can therefore determine velocity (more or less). I used a really ghetto distance metric as a proxy for velocity and since the sampling rate varies on everyone's local machines it can produce really ugly signatures. close inspection of the implementation will not bode well for anyone's opinion of my programming abilities. my excuse is that this is a tiny bit of UI candy on top of my core business. if i were to spend much more time on it, I'd change a lot of things about it.

vonseel 13y ago

Did you happen to look at http://willowsystems.github.io/jSignature/ http://willowsystems.github.io/jSignature/ ? I'm wondering what oppositions you had to their plugin, if so. I looked at Thomas Bradley's plugin, tested it in a client app, but ended up going with jSignature as the base64 such could be posted as form data, converted as necessary, and placed in a LaTeX template that was converted to PDF. Note that my client was aware this was not a valid "e-signature", but they wanted a simple solution that appeared valid and large contracts would require paper signatures anyways.

oijaf888 13y ago
Why wouldn't that be a valid e-signature? Previous comments have said that a valid e-signature is (essentially) anything adopted by the person with intent to sign the record.
- vonseel 13y ago
  It's been several months so I may be wrong, or perhaps I am thinking of a different regulation, but I was under the impression electronically signed documents required an audit trail, and that the signature could not be modified post creation of the document.
ricardobeat 13y ago
That also seems to use linear interpolation, giving signatures the 'wiggly' digital look.
ezl 13y ago
I did look at it. It was my second choice and I would have used that if I didn't used Thomas Bradley's. I emailed Thomas Bradley when I was exploring options and he responded within an hour. Also, that repository was active (TB was responding to bug reports and there had been commits on the day that I looked) and had more followers and forks. Since I'm a mediocre hacker, I generally optimize for paths where I can get the most support if I think I might need it. Thomas's is also very well documented with specific code examples and demos for the basic use cases. I considered a lot of different options, including signature as a service (https://www.signature.io/ https://www.signature.io/ -- these guys have a beautiful implementation), integration with other companies (hellosign and signnow are my favorites, docusign/echosign), but TB's was just the best fit for my needs at the time.

mafuyu 13y ago

Quick comparison between this, OneNote, and my actual signature: http://i.imgur.com/41eFyAd.png http://i.imgur.com/41eFyAd.png

exo_duz 13y ago

I've always hated signing off packages because it looks nothing like my signature on the hand held devices. Hopefully this will be used in the future to make signatures look more coherent rather than just some squiggly lines on the touch pad. It's a simple concept with font smoothing. Wonder why they never thought of implementing it on actual commercial devices.

gbraad 13y ago

Credits go where credits are due: http://thomasjbradley.ca/lab/signature-pad http://thomasjbradley.ca/lab/signature-pad "All the credit belongs to the incredible work by Thomas Bradley, who authored the original signature library and Square for the blog post that outlined the approach." Not so sure from the page why a fork was justified... I have been using this solution for quite a while on a project which needed signatures for fulfillment. More than happy with it...

roryokane 13y ago
In the paragraph above your quote, the author lists three problems that he said all existing solutions had. The problem he had with Signature Pad is probably the last one, “Didn't have the signature smoothing component”.
- gbraad 13y ago
  my bad... but not something I would need, as I believe smoothing alters the signature (if only aesthetic). Hope it will be useful to others. Note: man, the smoothing becomes a horrible ink-blobby mess... especially with the mouse. Using a tablet (Wacom) gives better results, but this is more related to the accuracy of the digitizer... but still the results is a mess; as if something just dipped a fountainpen in a pot of ink

geuis 13y ago

Got to this late today. You have no idea how impressed I am. I was able to sign my signature with my finger in my phone and it actually looks like my signature. This is incredibly impressive. I'll read through the technical specs when I'm in a less tired state, but I've already forked this. Please, keep working on it and improving where possible.

deleted 13y ago

[deleted]

thomasbachem 13y ago

I'd love a fork that doesn't' depend on jQuery, as I use the Dojo Toolkit on my site. I'll try to create a library independent fork soon.

CalinBalauru 13y ago

zqd q qnn

CalinBalauru 13y ago

zqd q qnn