Paint & Signature Pad

✅

Link to the plugin page: https://zeroqode.com/plugin/paint--signature-pad-plugin-for-bubble--1527080158066x421238979880812540

Demo to preview the plugin:

✅

Live Demo: https://zeroqode-demo-06.bubbleapps.io/paint___signature_pad

✅

Bubble Editor: https://bubble.io/page?version=live&id=zeroqode-demo-06&name=paint___signature_pad&tab=Design&type=page

Introduction

Our no-code plugin allows your users to draw their own pictures directly within a Bubble application. Use it to create your own graphics or sign a document. Setting it up is simple.

In order to set the plugin up, just place it on a page, enable the necessary functions, and let your users take care of the rest.

Users can upload existing images from their desktop or add them by dragging from any page. As a result, the plugin returns an image that can be saved into a database or downloaded by the user.

Note: The plugin may not function correctly on iOS devices running versions up to 12.

To receive special offers and important updates please visit:

https://zeroqo.de/updates

How to setup

Add the Element to Your Bubble Page

In the Design tab of the Bubble editor, drag and drop the "Paint & Signature Pad" element onto your page.

Adjust the size and settings of the element as needed.

Configure the Workflow.

The plugin provides several actions to interact with the drawing pad. Here are some practical examples:

Example 1: Set Pen Size and Color

Add a button named "Set Pen Style" to your page.

In the Workflows tab, create a new workflow event: "When Button Set Pen Style is clicked".

Click "Add an Action" → "Plugins" → "Set Pen Size A Paint & Signature Pad".

Select the Paint & Signature Pad element and set the pen size (e.g., 5 for a medium stroke).

Workflow action → Paint & Signature Pad.

Add another action "Set Pen Colour A Paint & Signature Pad" and define a color (e.g., #0000FF for blue).

Workflow action → Set Pen Colour A Paint & Signature Pad.

Example 2: Save a Signature or Drawing

Add a button named "Save Drawing".

In the Workflows tab, create a new workflow event: "When Button Save Drawing is clicked".

Add the action "Get Image A Paint & Signature Pad".

Save the resulting image to the database (e.g., in an image-type field inside the User table).

Display the saved image in an Image Element on the page.

Workflow action → Get Image A Paint & Signature Pad.

Example 3: Clear the Canvas

Add a button named "Clear".

In the Workflows tab, create a new workflow event: "When Button Clear is clicked".

Add the action "Clear Pad Data A Paint & Signature Pad" to erase all drawings and signatures from the pad.

Workflow action → Clear Pad Data A Paint & Signature Pad.

Additional Features

Undo and Redo: Add buttons for "Undo" and "Redo", then create workflows using the respective actions to let users revert or redo a drawing.

Load an Image: Add a button named "Load Image", and in the workflow, use the "Load Image A Paint & Signature Pad" action to upload an image onto the pad as a background.

Animate the Drawing Process: Add a button named "Animate Drawing", then use the "Animate A Paint & Signature Pad" action to replay the drawing process.

Plugin Element Properties