Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Signature Question Workaround

  • limeAJ
  • limeAJ's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 8 months ago - 6 years 8 months ago #156441 by limeAJ
Signature Question Workaround was created by limeAJ
Hello everyone,
I have been searching for a way to have a "signature" field(s) on a survey.

There are various threads on the forums, and various solutions to the problem.
One of the threads is this one: Signature pad for Health Questionnaire

Another such thread is this one: question type to accept a signature on mobile device .

User aaskoura also provides the functionality for Android in OfflineSurveys.com .

Because of my ignorance on how to do things, I have tried to implement a solution on my own.

I will try and detail the half-way solution I have at the moment, and see if feedback from you can help solve the remaining parts.
Basically, I am using the szimek signature_pad from github.
The jsfiddle example is relatively simple , and was what I used as a starting point.


Now, I have inserted the code below into one of the survey questions.
It does show the signature pad, and a user is able to "sign" on the pad... yet the output is a URI object.

My question: Any suggestions as to capturing this signature object into a png/jpg?
A way to 'capture' it into a file stored along with the server?

All help is greatly appreciated!

Thanks in advance!
Code:
<h2>Signature</h2>
 
<div class="wrapper"><canvas class="signature-pad" height="200" id="signature-pad" style="background:#E4E4E4;" width="600"></canvas></div>
 
<div><button id="save">Save Signature</button><button id="clear">Clear Signature</button></div>
<script type="text/javascript" src="/limesurvey/scripts/signature_pad.min.js"></script><script type="text/javascript" charset="utf-8">
 
   $(document).ready(function() {
    var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
    backgroundColor: 'rgba(255, 255, 255, 0)',
    penColor: 'rgb(0, 0, 0)'
    });
    var saveButton = document.getElementById('save');
    var cancelButton = document.getElementById('clear');
    saveButton.addEventListener('click', function (event) {
      //event.preventDefault()
          var data = signaturePad.toDataURL('image/png');
      // Send data to server instead...
      window.open(data);
    });
    cancelButton.addEventListener('click', function (event) {
      event.preventDefault()  
          signaturePad.clear();
    });
 
   });
</script><!-- https://github.com/szimek/signature_pad -->
Last edit: 6 years 8 months ago by limeAJ.
The topic has been locked.
  • gabrieljenik
  • gabrieljenik's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
6 years 8 months ago #156442 by gabrieljenik
Replied by gabrieljenik on topic Signature Question Workaround
Hi ,

I have developed a signature plugin that could be usefull to you.
Please contact me at gabriel@encuesta.biz and I will be able to send you more information about it.

Thanks!

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Checkout our Reporting Solutions and our plugin shop at www.encuesta.biz .

The following user(s) said Thank You: limeAJ
The topic has been locked.
More
6 years 8 months ago #156444 by Ben_V
Replied by Ben_V on topic Signature Question Workaround
Hi,

I think you can get some inspiration looking at Denis's pdfReport plugin implementing an additionnal upload question type question for a purpose somehow similar

framagit.org/SondagePro-LimeSurvey-plugin/pdfReport/

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
The following user(s) said Thank You: limeAJ
The topic has been locked.
  • limeAJ
  • limeAJ's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 8 months ago #156510 by limeAJ
Replied by limeAJ on topic Signature Question Workaround
I wanted to update.
This is not the final solution, yet... something moving along towards it.

What I am doing at the moment is saving the signature in the "local storage" for the browser.
I do that with:
Code:
localStorage.setItem("signature1", data);

Then later, when I want to "call" the signature (as for printing the webpage), I am using:
Code:
<script type="text/javascript" charset="utf-8">
   $(document).ready(function() {
      document.getElementById("imageSignature1").src = localStorage.getItem("signature1");
    });     
</script>

I will see if I can save the signature to the database via ... maybe dropping the base64 encoding of the png into a long-text answer.

Will update when I have something more to contribute!
=)
The following user(s) said Thank You: Ben_V
The topic has been locked.
More
6 years 8 months ago #156512 by SurveyDennis
Replied by SurveyDennis on topic Signature Question Workaround
I have a workaround where I save drawings back to a base64 textstring in an open text field.
At the bottom of the page called Draw Editor.
www.surveyfriendly.com/plugins.html
If you like this I can send you the code. The example is with uploading an image and then to draw on it. But you can also start drawing when you click the draw mode (step5 in the example).

Be careful with the local storage, I have had many issues on IOS with the Safari browsers not capturing local storage. If you want to do something with local storage give pouchdb a try.
It is a small JS Database in your browser.

Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
The following user(s) said Thank You: limeAJ
The topic has been locked.
More
6 years 8 months ago #156515 by SurveyDennis
Replied by SurveyDennis on topic Signature Question Workaround
I also have this workaround, maybe easier to use.
www.surveyfriendly.com/ls1/index.php/666593?newtest=Y&lang=en

Be SurveyFriendly too! Fight against boring surveys! www.SurveyFriendly.com
The following user(s) said Thank You: Ben_V, limeAJ
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose