Signature Pad

Pico Library This library has about 1.5 KBytes

A optimized javascript signature pad for LemonadeJS.

Documentation

Installation

npm install @lemonadejs/signature

Attributes

Attribute Description
name?: String
line?: Number
value?: Array
width?: Number
height?: Number
instructions?: String
onchange?: Function
onload?: Function


Methods

Attribute Description
get: function
getImage: function


Basic example

Basic example to show how to embed the LemonadeJS signature pad on your components.



Source code


CDN
NPM
<html>
<script src="https://lemonadejs.net/v2/lemonade.js"></script>
<script src="https://lemonadejs.net/v2/packages/signature/index.js"></script>
<div id='root'></div>
<script>
var Component = function() {
    var self = {
        width: 400,
        height: 200,
        value: []
    }

    var template = `
        <div class="signature">
            <Signature
                value="{{self.value}}"
                width="{{self.width}}"
                height="{{self.height}}"
                instructions="Please sign this document" />
        </div>`;

    return lemonade.element(template, self, { Signature });
}
lemonade.render(Component, document.getElementById('root'));
</script>
</html>

import lemonade from "lemonadejs";
import Signature from "@lemonadejs/signature";

export default function Component() {
    var self = {
        width: 400,
        height: 200,
        value: []
    }

    var template = `
        <div class="signature">
            <Signature
                value="{{self.value}}"
                width="{{self.width}}"
                height="{{self.height}}"
                instructions="Please sign this document" />
        </div>`;

    return lemonade.element(template, self, { Signature });
}


Programmatic changes

The following example implement some programmatic changes in the JavaScript signature component.



Source code

<html>
<script src="https://lemonadejs.net/v2/lemonade.js"></script>
<script src="https://lemonadejs.net/v2/packages/signature/index.js"></script>
<div id='root'></div>
<script>
var Component = function() {
    var self = {
        width: 500,
        height: 100,
        value: []
    }

    self.change = function() {
        console.log(JSON.stringify(self.value));
    }

    self.load = function() {
        self.value = [
            [139,41],[139,45],[139,51],[139,56],[138,61],[138,65],[137,67],[137,69],[137,70],
            [137,71],[138,71],[142,66],[154,56],[171,45],[194,32],[220,21],[247,15],[270,10],
            [282,10],[292,11],[297,14],[297,15],[297,18],[297,20],[297,24],[297,27],[297,30],
            [297,33],[297,34],[297,35],[298,35],[299,36],[300,37],[302,37],1
        ];
    }

    var template = `
        <>
            <div class="signature">
                <Signature value="{{self.value}}"
                           onchange="{{self.change}}"
                           width="{{self.width}}"
                           height="{{self.height}}"
                           instructions="Please sign in the box above" />
            </div><br>
            <input type="button" value="Update width" onclick="self.width = 800" />
            <input type="button" value="Update value" onclick="self.load()"  />
        </>`;

    return lemonade.element(template, self, { Signature });
}
lemonade.render(Component, document.getElementById('root'));
</script>
</html>


Methods

Exporting the signature as image base64.



Source code

<html>
<script src="https://lemonadejs.net/v2/lemonade.js"></script>
<script src="https://lemonadejs.net/v2/packages/signature/index.js"></script>
<div id='root'></div>
<script>
var Component = function() {
    var self = {
        width: 500,
        height: 100,
        value: []
    }

    self.onGetImage = function() {
        self.image.src = self.component.getImage();
    };

    var template = `<>
            <div class="signature">
                    <Signature @ref="self.component" value="{{self.value}}"
                        onchange="{{self.change}}"
                        width="{{self.width}}"
                        height="{{self.height}}"
                        instructions="Please sign in the box above" />
            </div><br>
            <input type="button" value="Reset" onclick="self.value = []" />
            <input type="button" value="Download as image" onclick="self.onGetImage()" />
            <div>
                <img @ref="self.image" class="image full-width"/>
            </div>
        `;

    return lemonade.element(template, self, { Signature });
}
lemonade.render(Component, document.getElementById('root'));
</script>
</html>


CSS for this section

.signature {
    border:1px dashed #ccc;
    display: inline-block;
    text-align: center;
    margin-bottom: 10px;
}