Signature pad example

Hi @chris7, oh “that plugin”, its nearly completed but gathering dust, it dropped off my priority queue somehow, with the excitement of other stuff.

To upload to Bubble as an image requires either an API call, or using a function in the plugin.

I notice you have two Save buttons, really you only need either the one in the HTML box, or the Bubble button. If it makes sense to have both, perhaps label them differently from each other?

Well done getting it to work!

Nah I haven´t got it to work, I wish i had!! :frowning: not quite sure how to use API calls, gonna keep investigating. PLEEEEAAASSSEEEE finish the plugin, prettttty pleaseeee? :wink:

@chris7 you are verry persuasive …

woah - I checked the code and there’s 15 TODO’s sitting there …!!! hahaha

LOL, no time like the present to get rid of some of those todo things :wink: If there´s anything I can do to ease the load just tell me :slight_smile:

It will need some testing …

Tests: varied devices, varied browsers, pen colour and style, effects of page resize, multiple pads on a page, pad in a popup, pad in repeating group.

Most of the TODOs can wait, some look like they’ve been done … how about I do a brief tidy, and publish a version to test with?

1 Like

Woohooo you´re the best!!! Defo I´ll help you test it however I can.

Its published, ready for testing …

##Version 1.0.0
Should be a lot easier to use than the javascript example. Improvements:

  • More compatible styling, so can be resized.
  • Should work with multiple pads on a page, and on popups.
  • Outputs a png image which gets uploaded to Bubble’s S3 storage.
  • Option to save to a private file in the database.
  • Pen and colour options.
  • Free pizza. I had to take this option out …
4 Likes

Trying to use it, when I attach it to a thing, what am I saving? Is it a link to an image or an image being uploaded?

1 Like

Do you mean the property under the “make this file private”? That requires (any) existing row in the database, and is only needed if you want the file to be “private”, similar to Bubble’s file/image uploader.

Silly example:

But where is it getting saved? not sure I get it, any chance you can make a quick example? Sorrrrry

1 Like

To expand on how to use private file uploads in general … what you want to happen is this sequence:

A record or “thing” is created to save the private upload onto.
The record is passed into the options, usually with a dynamic search.
The upload to S3 is triggered, in this case using the “save” action.
When the upload has finished, the “is saved” event triggers.
At this point, a URL to the upload in S3 is available.
The URL can now be stored in the database, it can be stored on a “file” or “image” type.

1 Like

MANAGEDDDDDDDDDDDD!! You are the best, seriously you just had this hanging in your secret chest and weren´t gonna publish it??

Haha no, always planned on publishing, I just had more urgent things to do.

For others, sample app highlighting the differences between private and public file saving:

link to app preview
link to app editor

Well done getting it hooked in : )

1 Like

##New Version 1.0.2

  • Fix to private upload, previously it was ignoring the setting.
  • Fix to background image, it was loading from a debug setting.
1 Like

This is awesome. Thank you for the plugin @mishav! Now my users can create beautiful art:

Very much appreciated. This will go to good use! (not all for art, but some)

1 Like

You da man! NICE essential work bro!

Ashley

OK, I’m lost. I’m looking to have a signature pad added to my PHP/JS Tablet/desktop app and store some form of its image into MySQL. I opened the example (https://signature-pad-example.bubbleapps.io/) and captured the “source code”. I loaded that into my Orange Pi Debian 8 server. I called it up on FireFox and the Signing takes place, but when I click Save, I get a message “Sorry , but we’ve encountered a temporary error,… please try again later” (or close to that). What did I miss capturing? The “after” source on your server is the same size, but about 15 lines actually changed.

I looked at the “Plug In”, but just what is the process of adding a plug in? I clicked the “See Plug in Code” button, but its not code to put some more links to links. Help, please? This is a volunteer project for a program that encourages and rewards Middle and High School students to became proficient in STEM!

PS: MySQL data type “Long Text” can handle text much bigger than any Browser’s URL entry field (;-

Hi @geneousproducts,

The example you chose is very old and was made before the plugins feature was opened.

Try the simpler example in the above post …

On your app editor, on the left side is a button for “Plugins”, go there and see if you can install the right one.

Bubble apps don’t work for hosting on an external server, what are you trying to do exactly?

Edit sorry I didn’t notice your first line …

To integrate into a PHP web app, try using the original source of the signature pad … GitHub - szimek/signature_pad: HTML5 canvas based smooth signature drawing

Thanks for answering szimek. I like the friendliness here.

I went to signature_pad/js/app.js at gh-pages · szimek/signature_pad · GitHub and copied the code there. Since it was just the JS code, I put it into a minimal amount of HTML as a function to be called by a pushButton control. Sadly nothing, not even an entry in /var/log/apache2/error.log! Then I added the library reference suggested on the github.com page. Still no response. See attachments for my code and “results”.

Any suggestions will be appreciated!

BubbleSuggestionDcode|275x499.
Gene

Thanks for the compliment, but I’m not szimek. : )

Try the browser console log first, and play with the browser debugger.

You’re likely missing the css needed.

FYI This forum is mostly for the Bubble platform, you’ll get more responses on a php or javascript based forum.