ng-sign-here

AngularJS wrapper component for signature_pad.

Demo

The demo uses on-signature-update to set the background image of a div after each signature stroke.

Install

npm install ng-sign-here

Dependencies

The only dependency, other than AngularJS, is signature_pad. You can either link it, or install the latest release package with

npm install signature_pad

Getting Started

Include ngSignHere.min.js and signature_pad.

<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<script src="../dist/ngSignHere.min.js"></script>

Add ngSignaturePad as a module dependency.

angular.module('demoApp', ['ngSignHere']);

Add the sign-here component to your html.

<sign-here></sign-here>

Examples

Adding the component in html isn't very useful by itself. You can draw on the canvas, but that's about it. All bindings are optional, and one-way.

Size

To set the signature pad size, simply add a css class or inline style. The signature pad will size itself to fit.

<sign-here style="width: 600px; height: 300px;">
</sign-here>

Background Color

Set the background color using background-color. Supports hex, rgb/rgba, and color names. Defaults to transparent.

<!-- Sets background color to black -->
<sign-here background-color="#000000">
</sign-here>

Pen Color

Set the pen color using pen-color. Supports hex, rgb/rgba, and color names. Defaults to a dark blue.

<!-- Sets pen color to green -->
<sign-here pen-color="#6BD425">
</sign-here>

Image Format

Set the returned image format using image-format. Valid formats are png, jpg/jpeg, and svg. Defaults to png.

<!-- Sets image format to svg -->
<sign-here image-format="svg">
</sign-here>

Getting the Signature

Pass a function to on-signature-update. Internally, this is called on the signature_pad onEnd event, meaning at the end of each signature stroke.

// Controller signature update function.
ctrl.onSignatureUpdate = function (signatureData) {

    // Set a signatureData property on your controller.
    ctrl.signature = signatureData;
};

<sign-here on-signature-update="demo.onSignatureUpdate">
</sign-here>

Clearing the Signature

This component does NOT use two-way binding, so you need to register a handler with register-clear-handler, and then call that handler from your controller. On clear, the onSignatureUpdate event will fire with undefined.

// Your controller's clear handler.
let clearSignatureHandler = null;

// Register clear handler function.
ctrl.registerClearHandler = function (handler) {

    // Set the handler returned from the component.
    clearSignatureHandler = handler;
};

// Handle the clear button click.
ctrl.clearSignature = function () {

    // Check if a the clearSignatureHandler is registered.
    if (clearSignatureHandler) {

        clearSignatureHandler();
    }
};

<!-- Register your controller's clear handler -->
<sign-here demo.registerClearHandler(handler)>
</sign-here>

<!-- A clear button somewhere on your page -->
<button ng-click="demo.clearSignature()">
    CLEAR
</button>

Non Implemented

The following signature_pad options/features have been omitted because I didn't need them. I may or may not add these in the future, but you're certainly welcome to submit a pull request if you want to add them.

• dotSize
• minWidth
• maxWidth
• throttle
• minDistance
• velocityFilterWeight
• onBegin

Build from Source

Clone the repository.

git clone https://github.com/jerme404/ng-sign-here.git

Install npm packages.

npm install

Run gulp.

gulp