Add a signature pad using NPM

Ask us anything How do I?
1

First of all a big shout out for the NPM plugin. Now the non-programmers can use NPM resources :slight_smile:

Having said that I installed signature_pad from NPM and called the instance name ‘signature_pad’.

But now what?

How can one use the signature pad? And create it first on the page. I have looked through the documentation on NPM and watched the video.

To a programmer this might be a stupid question, but I am a total novice at this. Is anyone successfully using signature pad with weweb or are there instructions somewhere on how to used NPM download?

Thanks

1 Like
2

Hello,

I don’t know with NPM, but I can explain to you how to integrate this type of signature: https://codepen.io/yguo/pen/OyYGxQ

Tell me if you want explication how to add it to WeWeb :slight_smile:

3

Wow, Mael, yes, that would be very much appreciated :slight_smile:

4

Firstly, you will need to use our HTML element

In the HTML element you will paste this code

<canvas id="sig-canvas" width="620" height="160">Hello world</canvas>

<style>#sig-canvas {  border: 2px dotted #CCCCCC;  border-radius: 15px;  cursor: crosshair;}</style>

<script>!function(){window.requestAnimFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimaitonFrame||function(t){window.setTimeout(t,1e3/60)};var t=document.getElementById("sig-canvas"),e=t.getContext("2d");e.strokeStyle="#222222",e.lineWidth=4;var n=!1,i={x:0,y:0},o=i;function u(t,e){var n=t.getBoundingClientRect();return{x:e.clientX-n.left,y:e.clientY-n.top}}function c(){t.width=t.width}t.addEventListener("mousedown",function(e){n=!0,o=u(t,e)},!1),t.addEventListener("mouseup",function(t){n=!1},!1),t.addEventListener("mousemove",function(e){i=u(t,e)},!1),t.addEventListener("touchstart",function(t){},!1),t.addEventListener("touchmove",function(e){var n=e.touches[0],i=new MouseEvent("mousemove",{clientX:n.clientX,clientY:n.clientY});t.dispatchEvent(i)},!1),t.addEventListener("touchstart",function(e){i=(n=t,o=e,u=n.getBoundingClientRect(),{x:o.touches[0].clientX-u.left,y:o.touches[0].clientY-u.top});var n,o,u,c=e.touches[0],a=new MouseEvent("mousedown",{clientX:c.clientX,clientY:c.clientY});t.dispatchEvent(a)},!1),t.addEventListener("touchend",function(e){var n=new MouseEvent("mouseup",{});t.dispatchEvent(n)},!1),document.body.addEventListener("touchstart",function(e){e.target==t&&e.preventDefault()},!1),document.body.addEventListener("touchend",function(e){e.target==t&&e.preventDefault()},!1),document.body.addEventListener("touchmove",function(e){e.target==t&&e.preventDefault()},!1),function t(){requestAnimFrame(t),n&&(e.moveTo(o.x,o.y),e.lineTo(i.x,i.y),e.stroke(),o=i)}()}();</script>

It’s the same code as the link I sent you, but to use it in WeWeb, you need to minify it

On your button to generate the image, you need to add a workflow with a custom javascript action and this code:

return wwLib.getFrontDocument().getElementById('sig-canvas').toDataURL()

On your button to clear, you need to add a workflow with a custom javascript action and this code:

return wwLib.getFrontDocument().getElementById('sig-canvas').width = wwLib.getFrontDocument().getElementById('sig-canvas').width
1 Like
5

Mael,

you make it so easy. It works like a charm. Thank you so much for sharing. I am totally blow away :)))))

Thank you and best regards

Jörg

1 Like
6

Thank for this. Got a signature pad setup and the image saving to Xano.

The only issue is the page scrolls when using the pad. Would implementing this fix it?

7

I can’t answer your question, but I integrated the NPM signature_pad, and it is a very polished signature solution, and does not have the scroll problem.

8

Thanks, I tried the js to stop the scroll and it didn’t work.

What is the instance name I would need to enter to use the NPM signature_pad? I’ll give it a try.

9

It is “SignaturePad” :slight_smile:

1 Like
10

Anyone know how to get the Base64 file uploaded to supabase?

11

Yea, this is the function i’m using to convert it to a blob.
And after this I’m using the upload to supabase workflow action.

// Access the signaturePad object
const signaturePad = variables['a11d502f-4fef-44ce-84f4-74e73b5cb23e'];

// Get the data URL of the image from the canvas
const dataUrl = signaturePad.toDataURL("image/jpeg");


// Convert DataURL to Blob to be used in FormData
const convertDataURLToBlob = (dataurl) => {
    let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

// Create a blob from the data URL
const blob = convertDataURLToBlob(dataUrl);
blob.name = "signature.jpg";
// Create a new FormData instance
const formData = new Array(blob);


return formData;
1 Like
12

Can you say which signature pad you implemented it and how you implemented it, please?

13

Would be nice if there will be a default editor element for a signature pad.

14

Hey @Aulbourn
I’ve created a video tutorial on that subject if that can help you :slight_smile:

1 Like