Signature Pad

Pico Library This library has less than 2 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/lemonade.js"></script>
<script src="https://lemonadejs.net/packages/signature/index.js"></script>
<div id='root'></div>
<script>
// Render component
function Component() {
    const self = this;
    self.width = 400;
    self.height = 200;
    self.value = [];
    return `<Signature
        value="{{self.value}}"
        width="{{self.width}}"
        height="{{self.height}}"
        instructions="Please sign this document" />`;
}
// Register signature component across the application
lemonade.setComponents({ Signature });
// Render element
lemonade.render(Component, document.getElementById('root'));
</script>
</html>

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

// Register signature component across the application
lemonade.setComponents({ Signature });

export default function Component() {
    const self = this;
    self.width = 400;
    self.height = 200;
    self.value = [];
    return `<Signature
        value="{{self.value}}"
        width="{{self.width}}"
        height="{{self.height}}"
        instructions="Please sign this document" />`;
}

Programmatic changes

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

Source code

<html>
<script src="https://lemonadejs.net/lemonade.js"></script>
<script src="https://lemonadejs.net/packages/signature/index.js"></script>
<div id='root'></div>
<script>
function Component() {
    const self = this;
    self.width = 500;
    self.height = 200;
    self.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
        ];
    }

    return `<>
        <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()"  />
    </>`;
}
// Register signature
lemonade.setComponents({ Signature }});
// Render components
lemonade.render(Component, document.getElementById('root'));
</script>
</html>

Methods

Exporting the signature as image base64.

Source code

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

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

    return `<>
        <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>
    </>`;
}
// Register signature
lemonade.setComponents({ Signature }});
// Render components
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;
}