handwriting plugin

aschippers

I just created a handwriting plugin, based on SignaturePad from Szimek

// Handwriting plugin code
// based on signaturePad
// https://github.com/szimek/signature_pad

(function ($, DataTable) {
 
    if ( ! DataTable.ext.editorFields ) {
        DataTable.ext.editorFields = {};
    }
 
    var Editor = DataTable.Editor;
    var _fieldTypes = DataTable.ext.editorFields;

    _fieldTypes.handwriting = {

        create: function ( conf ) {
            // console.log("Handwriting - CREATE");
            var that = this;
            conf._enabled = true;
            conf._input = $(
                '<canvas id="'+Editor.safeId( conf.id )+'" class="signature-pad" width=400 height=200>'+
                '</canvas>');

            // at this location, the event is created
            conf.handwriting = new SignaturePad( conf._input[0], {
                backgroundColor: 'rgba(255, 255, 255, 0)',
                penColor: 'rgb(0, 0, 0)',
                onEnd: function() {
                    // get png image, add it to the value field and trigger for a dependent response.
                    conf._input.val( conf.handwriting.toDataURL() ).trigger( 'change', {editor: true} );
                },
            });

            return conf._input;
        },
     
        get: function ( conf ) {
            // console.log("Handwriting - GET");
            return conf._input.val();
        },
     
        set: function ( conf, val ) {
            // console.log("Handwriting - SET");
            
            // const signaturePad =  new SignaturePad( conf._input[0], {
            //     backgroundColor: 'rgba(255, 255, 255, 0)',
            //     penColor: 'rgb(0, 0, 0)',
            //     onEnd: function() {
            //         // get png image, add it to the value field and trigger for a dependent response.
            //         conf._input.val( signaturePad.toDataURL() ).trigger( 'change', {editor: true} );
            //     },
            // });
            conf.handwriting.clear();
        },
     
        enable: function ( conf ) {
            // console.log("Handwriting - Enable");
            conf._enabled = true;
            $(conf._input).removeClass( 'disabled' );
        },
     
        disable: function ( conf ) {
            // console.log("Handwriting - Disable");
            conf._enabled = false;
            $(conf._input).addClass( 'disabled' );
        }
    };
 
})(jQuery, jQuery.fn.dataTable);

The editor field type is

type: 'handwriting'

allan

That is very cool indeed! Nice one and thank you for sharing it with the community!

Are you okay with me adding this to the Editor plug-ins list?

Also, this is a link to the signature pad library for anyone unfamiliar with it (like I was).

Thanks,
Allan

aschippers

It would be nice for sharing. That's the reason, I posted this script.

allan

Hi,

If anyone is interested in this, I've created a running example with the latest version of the Signature Pad library, which you can see here.

Allan

Gargiucn

EhEh...
As I said, you never know how to solve the problem!
Thank you Allan

Gargiucn

Syntax error...
As I said I would never be able to solve the problem!
Thank you Allan

allan

Thanks

For anyone else reading this, the latest iteration of this plug-in is now in this thread and will soon be on the Editor plug-ins page.

Allan