This is a migrated thread and some comments may be shown as answers.

Kendo blocked Signature Pad

2 Answers 285 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Fanzy
Top achievements
Rank 1
Fanzy asked on 09 Aug 2012, 09:39 AM
We really need some kind of signature plugin integrated with our product. And found Signature Pad http://thomasjbradley.ca/lab/signature-pad/ works well on desktop and iPhone, Android.

Once we deploy this plugin in Kendo, no longer working.

Please give some help with it.

2 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 06 Sep 2012, 01:19 PM
A little late, but JSignature works great.
0
John
Top achievements
Rank 1
answered on 14 Mar 2014, 04:53 PM
This is way late, however I wasn't able to get the flash-based signature apps to go, so I pulled a canvas-based implementation from another web project I had. It seems to be working in my Kendo Mobile app, the only snag being sometimes strange behavior on orientation shifting, which could probably be worked out.

JS for Sig Capture:

function SignatureCapture( canvasID ) {
    this.touchSupported = Modernizr.touch;
    this.canvasID = canvasID;
    this.canvas = $("#"+canvasID);
    this.context = this.canvas.get(0).getContext("2d");
    this.context.strokeStyle = "#000000";
    this.context.lineWidth = 2;
    this.lastMousePoint = {x:0, y:0};
      
    this.canvas[0].width = this.canvas.parent().innerWidth();
      
    if (this.touchSupported) {
        this.mouseDownEvent = "touchstart";
        this.mouseMoveEvent = "touchmove";
        this.mouseUpEvent = "touchend";
    }
    else {
        this.mouseDownEvent = "mousedown";
        this.mouseMoveEvent = "mousemove";
        this.mouseUpEvent = "mouseup";
    }
      
    this.canvas.bind( this.mouseDownEvent, this.onCanvasMouseDown() );
}
  
SignatureCapture.prototype.onCanvasMouseDown = function () {
    var self = this;
    return function(event) {
        self.mouseMoveHandler = self.onCanvasMouseMove()
        self.mouseUpHandler = self.onCanvasMouseUp()
  
        $(document).bind( self.mouseMoveEvent, self.mouseMoveHandler );
        $(document).bind( self.mouseUpEvent, self.mouseUpHandler );
          
        self.updateMousePosition( event );
        self.updateCanvas( event );
    }
}
  
SignatureCapture.prototype.onCanvasMouseMove = function () {
    var self = this;
    return function(event) {
  
        self.updateCanvas( event );
        event.preventDefault();
        return false;
    }
}
  
SignatureCapture.prototype.onCanvasMouseUp = function (event) {
    var self = this;
    return function(event) {
  
        $(document).unbind( self.mouseMoveEvent, self.mouseMoveHandler );
        $(document).unbind( self.mouseUpEvent, self.mouseUpHandler );
          
        self.mouseMoveHandler = null;
        self.mouseUpHandler = null;
    }
}
  
SignatureCapture.prototype.updateMousePosition = function (event) {
    var target;
    if (this.touchSupported) {
        target = event.originalEvent.touches[0]
    }
    else {
        target = event;
    }
  
    var offset = this.canvas.offset();
    this.lastMousePoint.x = target.pageX - offset.left;
    this.lastMousePoint.y = target.pageY - offset.top;
  
}
  
SignatureCapture.prototype.updateCanvas = function (event) {
  
    this.context.beginPath();
    this.context.moveTo( this.lastMousePoint.x, this.lastMousePoint.y );
    this.updateMousePosition( event );
    this.context.lineTo( this.lastMousePoint.x, this.lastMousePoint.y );
    this.context.stroke();
}
  
SignatureCapture.prototype.toString = function () {
  
    var dataString = this.canvas.get(0).toDataURL("image/png");
    var index = dataString.indexOf( "," )+1;
    dataString = dataString.substring( index );
      
    return dataString;
}
  
SignatureCapture.prototype.clear = function () {
  
    var c = this.canvas[0];
    this.context.clearRect( 0, 0, c.width, c.height );
}

To use, simply call on element at the bottom of the Kendo Mobile view holding the canvas (Note that the sigCapture variable was declared at the top of one of my JS files as "var SigCapture;" - not shown in code:

    <div class="details">
        <div id="canvasContainer">
 
            <p>I hereby acknowledge the satisfactory completion of work.</p>
            <h3>Sign Here</h3>
            <canvas id="cPaint" style="background-color: #E3E3E3;width:100%;" />
 
        </div>
        <a data-role="button" data-click="SaveSignature">Save</a>
        <a data-role="button" data-click="ClearSignature">Clear</a>
    </div>
    <script>
        sigCapture = new SignatureCapture("cPaint");
    </script>
</div>


Clearing and saving (base 64 string) are also pretty easy to work with:
//Return Base64 PNG Image
sigCapture.toString()
 
//Clear out signature box
   var canvas = document.getElementById("cPaint");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);

Hopefully this helps someone, first post on the site.
Tags
General Discussions
Asked by
Fanzy
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
John
Top achievements
Rank 1
Share this question
or