Kendo blocked Signature Pad

[Fanzy]

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.

[Richard]

A little late, but JSignature works great.

[John]

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.