Serenity: Adding Signatures

[Arcktosh]

How would one go about adding a signature to a form. Client signing off on a delivered product. which will in turn generate a pdf with a signed delivery note.
I've found the js script from https://github.com/szimek/signature_pad
any advice on how to best implement this?

[hubeyb]

you can write your custom editor by inherit the image editor if the api gives image output, and then give this output to image editor.
If it gives another document, you can use this output by giving FileUploadEditor's input by write your override typescript code.

[Arcktosh]

would you recommend amending the following tutorial for this? https://serenity.is/docs/howto/how_to_use_a_third_party_plugin_with_serenity

[wezmag]

Very interesting topic.
I created a SignatureEditor for your reference.

1. Open a command prompt in the project folder, and run
   npm install --save signature_pad
2. In ScriptBundles.json, add
   "~/node_modules/signature_pad/dist/signature_pad.umd.js"
3. Create a TypeScript file called SignatureEditor.ts

namespace YourProjectName {

    @Serenity.Decorators.element('<div />')
    @Serenity.Decorators.registerEditor([Serenity.IGetEditValue, Serenity.ISetEditValue])
    export class SignatureEditor extends Serenity.Widget<SignatureEditorOptions>
        implements Serenity.IGetEditValue, Serenity.ISetEditValue
    {

        private signaturePad: any;

        constructor(div: JQuery, options: SignatureEditorOptions) {
            super(div, options);

            let canvas = $('<canvas />').attr('id', 'sign_' + this.uniqueName);
            this.element.append(canvas);

            this.signaturePad = new SignaturePad(canvas[0]);

            let clearButton = $('<button />').attr('id', 'clearsign_' + this.uniqueName).html('<i class="fa fa-eraser"></i>');
            clearButton.on('click', (e) => {
                e.preventDefault();
                this.signaturePad.clear();
            });
            this.element.append(clearButton);
        }

        public get value(): string {
            return this.get_value();
        }

        protected get_value(): string {
            return this.signaturePad.toDataURL();
        }

        public set value(value: string) {
            this.set_value(value);
        }

        protected set_value(value: string): void {
            this.signaturePad.fromDataURL(value);
        }

        setEditValue(source: any, property: Serenity.PropertyItem): void {
            this.value = source[property.name];
        }
        getEditValue(property: Serenity.PropertyItem, target: any): void {
            target[property.name] = this.value;
        }

    }

    export interface SignatureEditorOptions {
    }
}

BTW, Does any one know how to get rid of red tilde under SignaturePad? Please let me know. Thanks

1. run T4 template.

Usage

1. Add a column in table with data type NVARCHAR(MAX)
2. Add the column in your Row.cs file
3. Add the column in your Form.cs file as below (assume your column is called 'Signature')

[SignatureEditor]
public String Signature { get; set; }

That's all.

[JohnRanger]

@wezmag ,

this would make a great wiki entry. Will you make one out of this? :-)

With kind regards,

John

[wezmag]

Wiki added.
https://github.com/volkanceylan/Serenity/wiki/Signature-Editor-using-SignaturePad

[stixoffire]

I can not seem to install using npm - it puts the files into my solution folder but never my project folder - declares the file folder does not exist - even if I run the thing twice it still says the folder does not exist . Any hints as to how I can fix this ?

[JohnRanger]

Have categorized @wezmag 's wiki entry under editors.

New link is here: https://github.com/volkanceylan/Serenity/wiki/Editors:-Signature-Editor-using-SignaturePad

With kind regards,

John

[stixoffire]

@wezmag @JohnRanger

I have an error HTMLElement is not assignable to HTMLCanvasElement property Height is missing in HTMLElement. I do not know why I am seeing the error - unless the code sample is not correct - as I have done a copy paste and it is fighting me.

The error occurs here:

        this.signaturePad = new SignaturePad(canvas[0]);

My Code is

import SignaturePad from 'node_modules/@types/signature_pad/SignaturePad';

namespace PRJ.SPSYS{

    @Serenity.Decorators.element('<div />')
    @Serenity.Decorators.registerEditor([Serenity.IGetEditValue, Serenity.ISetEditValue])
    export class SignatureEditor extends Serenity.Widget<SignatureEditorOptions>
        implements Serenity.IGetEditValue, Serenity.ISetEditValue {

        private signaturePad: any;
        constructor(div: JQuery, options: SignatureEditorOptions) {
            super(div, options);

            let canvas = $('<canvas />').attr('id', 'sign_' + this.uniqueName);
            this.element.append(canvas);

            this.signaturePad = new SignaturePad(canvas[0]);

            let clearButton = $('<button />').attr('id', 'clearsign_' + this.uniqueName).html('<i class="fa fa-eraser"></i>');
            clearButton.on('click', (e) => {
                e.preventDefault();
                this.signaturePad.clear();
            });
            this.element.append(clearButton);
        }

        public get value(): string {
            return this.get_value();
        }
        protected get_value(): string {
            return this.signaturePad.toDataURL();
        }
        public set value(value: string) {
            this.set_value(value);
        }
        protected set_value(value: string): void {
            this.signaturePad.fromDataURL(value);
        }
        setEditValue(source: any, property: Serenity.PropertyItem): void {
            this.value = source[property.name];
        }
        getEditValue(property: Serenity.PropertyItem, target: any): void {
            target[property.name] = this.value;
        }
    }
    export interface SignatureEditorOptions {
    }
}

As an aside I am going to try this:

this.signaturePad = new SignaturePad(<HTMLCanvasElement>canvas[0]);

[volkanceylan]

Nice one, thanks for sharing.

[stixoffire]

Just for others looking - there is a PURE Typescript version available in the WIKI as well.

Purely TypeScript Implementation of SignaturePad - no Javascript dependency required.

Enjoy ..