JQuery Signature Panel Plugin

0 votes

I've been trying to get a signature panel to work in grails. on the client side everything looks like it works, but I have been struggling on how to get the signature saved to the database record.

I've tried a couple different versions, the last one I ended up with came closest to describing how to use ImageMagic or the like using php, ruby, or python. However trying to do this in groovy left me lost because I'm still a little green on how to code. Also I'm not sure about using a 3rd party utility when this is going to be running on cloud foundry.

The plugin in called SignaturePanel, looks just like the other ones really... jes-sherborne/jquery-signature-panel-plugin

Here is the code from my files.

First, create.gsp contains the Javascript code.

<title><g:message code="default.create.label" args="[entityName]" /></title>
        <!--  jQuery signature element code begins here -->
        <!--[if lt IE 9]><script type="text/javascript" src="${resource(dir: 'js', file: 'excanvas.compiled.js')}"></script><![endif]-->
    <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.4.4.min.js')}"></script>
    <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery.signature-panel.js')}"></script>

    <link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery.signature-panel.css')}" type="text/css"/>


    <script type="text/javascript">

        function signatureOK(signatureData) {
            // Send the signature to the server and generate an image file.
            $.ajax({
                url:"processSignature",
                type:"POST",
                data:JSON.stringify(signatureData),
                contentType:"application/json; charset=utf-8",
                dataType:"text",
                success: function(data, textStatus, jqXHR){
                    $("#latest-signature").attr("src", data);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus);
                    console.log(errorThrown);
                }
            });
            $("#sig-panel").signaturePanel("clear");
        }

        function signatureCancel() {
            alert("Cancelled.");
        }

        $(document).ready(function() {
            $("#sig-panel").signaturePanel({
                okCallback: signatureOK,
                cancelCallback: signatureCancel
            });
        });

    </script>

_form.gsp

<!-- Signature Panel Begins Here -->

    <label for="sig"><g:message code="salesOrder.sig.label" default="Customer Signature" /></label>
    <div class="fieldcontain" ${hasErrors(bean: salesOrderInstance, field: 'sig','error')} id="sig-panel" style="width: 500px; height: 150px; border: 0px none"></div>
    <canvas id="latest-signature" style="width: 500px; height: 150px; border: 0px none"></canvas>

<!-- End of Signature Panel -->

Controller

// Capture Customer Signature JSON Data, Processes to Image, and Stream to Database
    @Secured(['ROLE_ADMIN','ROLE_SALES'])
    def processSignature() {
        flash.message = message(code: 'default.created.message', args: [message(code: 'salesOrder.label', default: 'Signature'), ])
        // groovy code here 
        // We need to read the JSON POST data
         InputStream body = request.getInputStream();
         log.info(body) // nothing happens here
    }

Here is one of the Ruby examples I'm trying to figure out how to do in groovy.*(or if there is a better way... on the client side one can just right click and save the image. not really sure why this is so difficult for me)

### Generating image files on the server using Ruby

The Ruby library uses ImageMagick to generate a `Magick::Image` object, which you can use to write image files or stream the data in a variety of formats (PNG, JPEG, etc.). By default, the function will generate an image with the same pixel measurements as were originally captured on the client. You can also specify the size of the generated image, and SignaturePanel will scale the signature appropriately to fit within these bounds.

To generate the image, you will write code like this:

```ruby
require 'signature-panel.rb'
...

post '/process-signature' do
    image = SignaturePanel::GenerateImage(request.body.read)
    filename = 'latest-signature.png'

    image.write(filename)

    # If you want to stream your PNG directly to a database instead of saving a file,
    # you can get a binary stream like this:
    # image.to_blob {self.format = "PNG"}

    content_type :text

    # Send the name of the newly-generated file to the client
    body filename
end
```

So my question once again is, how does one save the signature along with all the rest of the form data in to the database using groovy?

Also from my domain class I should mention

byte[] sig

sig nullable: true, maxSize: 1048567

Once we get this challenge solved, we can put this puppy to bed ; )

Aug 24 in Web Development by gaurav
• 18,960 points
18 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
1 answer

How to place images using jQuery masonry plugin to start

You were just missing a css class that adjusts ...READ MORE

answered Jun 22 in Web Development by rajatha
• 7,440 points
30 views
0 votes
0 answers

jQuery Facebox plugin: Focus the popup appearance

I have an HTML page with facebox ...READ MORE

Jul 20 in Web Development by gaurav
• 18,960 points
34 views
0 votes
1 answer
0 votes
1 answer

Jquery vegas plugin image resize within <div> elements

Actually vegas plugin is meant for body ...READ MORE

answered Aug 4 in Web Development by rajatha
• 7,440 points
19 views
0 votes
0 answers

Using jquery-store-locator-plugin (v2) with Multiple Forms

I'm trying to get version 2 of ...READ MORE

Aug 8 in Web Development by gaurav
• 18,960 points
22 views
0 votes
0 answers

jQuery Validate plugin not validating an element that's not a form input

I need to validate with jQuery Validation ...READ MORE

Aug 18 in Web Development by gaurav
• 18,960 points
90 views
0 votes
1 answer

Print the line if it contains a specific string by using groovy.

You can try the code written below: ...READ MORE

answered Apr 27, 2018 in Jenkins by shubham
• 7,320 points
21,698 views
+4 votes
4 answers

perform Git checkout using Groovy script

To do git commit: def getGitCommit() { ...READ MORE

answered Dec 6, 2018 in DevOps Tools by Vaidya
25,120 views
0 votes
1 answer

How to use jquery with asp.net ajax?

If you weren't aware, Microsoft is planning ...READ MORE

answered Oct 15, 2018 in IoT (Internet of Things) by Annie97
• 2,160 points
202 views
0 votes
1 answer

Is 'sparkline' a method?

I suggest you to check 2 things That jquery.sparkline.js is actually ...READ MORE

answered Nov 9, 2018 in Apache Spark by Frankie
• 9,830 points
624 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP