Signature capture using javascript

Signature capture using javascript

  
Hi All,

I am trying to implmenent the javascript tool of signature capture (using http://willowsystems.github.com/jSignature/#/about/)

Does anyone have any experience with using jSignature in their system yet? 

Thanks

R.N

Hi Robbie,

No experience, but what's the problem you're having? Did you read the instructions on README.md? (within the jSignature's source code)
Hi Miguel,

I was able to get the the canvas of the signature working. Howver, I cannot figure out how to capture the encoded result into a screen variable, that will then be stored in a binary datanase field.

Please see the attached OML for more info on where I am at.

Any help would be appreciated.

Robbie
Hi Robbie,
to assign values from JavaScript to variables inside the screen you can use hidden input fields
assign the input field to the screen variable that you want and ste tha value of the input using JavaScript.
If you are able to put the signature into a input field then the variable associated with that input will have the same value.

Regards
Carlos Rocha
Hi Robbie,

Check the FakeNotifyWidget block in RichWidgets.
It avoids the hidden input workaround that Carlos suggested.

Regards,
João Rosado
Thanks Carlos and Joao.

I dont know how to implement the FakeNotifyWidget in this scenario. Could you please explain this to me?

Thanks

Robbie
Hi Guys,

I am still stuck with this issue. Can somebody take a look and see if they can figure out how to communicate with the JS to capture the output varibale data that is the signature.

Thanks

Robbie
Hi Robbie,

It depends on your implementation of the signature javascript / your page.
But the bottom line is, you follow the instructions in the FakeNotidyWidget description.

Then in your javascript code (or on a button onclick...will depend on your page and how you want the interaction) you call in javascript the OsNotifyWidget method.
I gave here a similar sugestion on how to do it on a button.

In the screen action that you associated with the FakeNotidyWidget in your eSpace you can then call NotifyWidgetGetMessage to get the value you passed to OsNotifyWidget.

Regards,
João Rosado
Thanks Joao,

Any chance for a sample?? I cant seem to get it working. 

Any help would be appreciated.

Thanks

Robbie
Not to worry. I got it working. Thank-you to all for their valid and constructive input.

Robbie
There are also a lot of other nice signature capture libs around ...
 
http://thomasjbradley.ca/lab/signature-pad/  = very nice extended, works on almost any browser/mobile
 
https://github.com/jes-sherborne/jquery-signature-panel-plugin
 
http://willowsystems.github.com/jSignature/#/about/ = extensive lib
 
http://mcc.id.au/2010/signature.html = fast and simple using SVG
How to remove the horizontal line in the canvas?
topher wrote: How to remove the horizontal line in the canvas?

 For which component Topher ??
 
I downloaded Robbie Nati's oml and that's what i'm looking for but there is a horizontal line in the canvas so I want it to be removed but idon't know how 'cause I don't know javascript.
This is really cool, guys! Any chance of sharing it as a component in Forge?
@Robbie: there isn't much documentation I could pick for that purpose, but I guess you are supposed to edit jSignature's settings in the code:

1. look for jSignature.js file in your code;

2. Search for the following code lines:



3. Change the setting ,'decor-color': '#eee' to ,'decor-color': '#fff' (watch out for the single-quotes and commas, please)

4. This will not remove the line, but at least make it the same color as the background :)

Good luck!

Hey guys.

I've downloaded the OML attached by Robbie onto a 7.0 platform (doing the required upgrade).

After publishing and opening it on the browser, I got the following error in firebug:

Error: We need jQuery for some of the functionality. jQuery is not detected. Failing to initialize...

Any idea how to fix this?

Thanks

Carlos Almeida

Not to worry, I got it working
My problem now is with the FakeNotifyWidget.

I don't know much about JavaScript, nor jQuery, so after I do the NotifyWidgetGetMessage, I don't know how to pass it into the RunJavaScript action that's suposed to give me the code for the image.

"<script>
var $sigdiv = $('#" + DivSignature.Id + "')
$sigdiv.jSignature() // inits the jSignature widget.

// Getting signature as SVG and rendering the SVG within the browser.
// (!!! inline SVG rendering from IMG element does not work in all browsers !!!)
// this export plugin returns an array of [mimetype, base64-encoded string of SVG of the signature strokes]
var datapair = $sigdiv.jSignature('getData', 'svgbase64')
var i = new Image()
i.src = 'data:' + datapair[0] + ',' + datapair[1]
$(i).appendTo($('#" + txtSignature.Id + "') // append the image (SVG) to DOM.
</script>"


This is all from the oml Robbie uploaded.
Anyone, please?
Carlos -

I don't understand the question, what do you mean by " I don't know how to pass it into the RunJavaScript action that's suposed to give me the code for the image."

What are you trying to pass into "RunJavaScript"?

J.Ja
Carlos,

If you want to obtain the signature, you can have a hidden input in your page and use the script you posted to place the contents of datapair[1] (which contains the base64 of the SVG code of the image) into that input. You can then submit the input to the server.

In order to do that, create the input in the page and give it a Name such as SignatureHolder and create a button for triggering the submission and call it SignatureSender. On both widgets, set the Extended Property style to "display:none".

Then modify the script you've posted to, right before the closing tag, do something like
$('#" + SignatureHolder + "').val(datapair[1]); // fill in the data
$('#" + SignatureSender + "').click(); // submit the form
Once the form is submitted, you can obtain the data on the Screen Action that is triggered by the SignatureSender button.
Please verify that the SignatureHolder input has a sufficiently large maximum length, otherwise the base64 of the signature may be truncated, which will cause invalid signature data to be collected.

Cheers,
Miguel
Thanks Miguel :)
Hi Guys,

Just published a component to help you do that.

Check it out: http://www.outsystems.com/forge/component/501/signature/

Cheers,

RG
Just tested this - fantastic!!
Hi,

This works fantastic on 8.0.

I'm trying to create it on 7.0, but got this error Uncaught TypeError: Property '$' of object [object Object] is not a function

Any solution?

Thanks,
Ricardo Brito
Hi Ricardo,

Just include the jQuery (it defines the $) on your app.
The jQuery Goodies component has a webblock that will help to do it (if I'm not wrong).

Let me know if you need further assistance.

Cheers,

RG

Hi all,

Finally I managed to implement the signature in version 7. The problem now is that I have to use the Outsystems mobile layout OutSystems and does not work somehow. But if I turn the screen is ok. 
Can anyone help? 

Thank you,

Ricardo Brito
Hi Ricardo,

Can you explain (or show us), what you mean by "does not work somehow"?
What's your device?

Cheers,

RG



I take some screenshots from my pc step by step.

1. 

2.

3. Bu if rotate the screen or "Restore Down" on browser...


4. Finnaly i can sign

Can you test this demo.
Let me know if it had the same behaviour.
All good with this demo, but I cannot use this component because it is flash and I'm gonna use the application in ios.

Thanks for your help.

RB
Ricardo,

It is only flash if the browser that you're using doesn't support HTML5 canvas ("Works in all mainstream browsers that support Canvas or Flash"), see docs here.
Hi,

is there a version of this for platform 7?

thanks
No. But it should be fairly easy to convert.

Let me know if you need anything.