How did I impelement Signature Pad in ZereOne?

In what projects I used it

Delivery…

You are developing software for a shipping company?

You must keep the customer’s confirmation of receipt of delivery or you want to confirm the customer’s information when you submit the order.

This is the situation you can use this js library “signature_pad”

In bank projects

When applying for an online loan, you will have a hard time confirming a person’s identity! Because nowadays the network is full of scammers.
By obtaining a signature you will be sure that it is not a robot and it is not a scammer.

How to install it?

You can add it directly to your page using <script> tag.

You can select a different version at https://www.jsdelivr.com/package/npm/signature_pad.

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

How implement it in ZeroOne?

Plugin Widgets

The difference between ZeroOne and others nocode platform is using custom code.

In Plugin Widgets you should add cdn link in Third-party scripts

There you also can add style js libraries
You should add in html canvas tag

For it you can use this function

function appendHtml(el, str) {
   var div = document.createElement("div");
   div.innerHTML = str;
   while (div.children.length > 0) {
  el.appendChild(div.children[0]);
  }
}

  const element = `<div class="signature-pad--body">
    <canvas id="signature-pad-canvas"></canvas>
  </div>
  <div class="signature-pad--footer">
    <div class="signature-pad--actions">
      <div class="btns">
        <button type="button" id="save" data- 
         action="change-color">Save</button>
      </div>
  </div>`;

All of these actions should implemented in Mount Part

In update part you should create SignaturePad like that

const canvas = document.getElementById("signature-pad-canvas");
const signaturePad = new SignaturePad(canvas, {
  backgroundColor: "rgb(255, 255, 255)",
});

More informations https://github.com/szimek/signature_pad.

After that You should get a panel like this

For Resizing window we use this function

function redraw() {
  const context = canvas.getContext("2d");
  context.strokeStyle = "blue";
  context.lineWidth = "5";
  context.strokeRect(0, 0, window.innerWidth, window.innerHeight);
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  redraw();
}

window.onresize = resizeCanvas;
resizeCanvas();

What format will the file be in?

DataUrl

Using Signature js library we can get image in format dataUrl!

 const dataURL = signaturePad.toDataURL("image/jpeg");

To Blob?

To upload this image file we using function DataUrlToBlob

function dataURLToBlob(dataURL) {
  var parts = dataURL.split(";base64,");
  var contentType = parts[0].split(":")[1];
  var raw = window.atob(parts[1]);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);

  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  return new Blob([uInt8Array], { type: contentType });
}

Formdata

We also can upload this image in Formdata format

    const formData = new FormData();
    formData.append("image", dataURLToBlob(dataURL));

How to upload file to Storage?

You can use for uploading axios

We should connect axios, for that we use Third Party

We also should create backend Workflow

To trigger frontend workflow

To trigger frontend workflow we can use Plugin Events.

Next, in page workflows, create an element trigger and an element with your plugin widget. In the event specify upload_file

//To trigger workflow 
context.trigger("change_route");

Possible errors

ERROR: Cannot read properties of undefined (reading ‘id’)

To fix this error , we must specify the binary property as image