[New Plugin Updates] Drawing & Painting Canvas

Hi Alex, amazing plugin. I’m having a few troubles. One of them is when I save as a PNG.

My canvas is 800x450, and when I save the PNG with no dimensions it’s fine.
But if I put any dimensions in there, (exact dimensions, or larger with same aspect ratio), it spits out an image that’s got the image squished into one side, and then blank white on the other half as shown below:

The actual canvas:

The saved image with dimensions set the same as the canvas size (800x450)

You can see it t the saved URL: https://s3.amazonaws.com/appforest_uf/f1657395913163x953004428711638100/myimage.png

Any ideas?
Thanks
Oli

@zeta1119 – thanks for reaching back out! The issue you’re seeing is due to Bubble’s new responsive engine. I’ve updated the plugin to be compatible with Bubble’s new responsive engine, which is unfortunately not completely compatible with the old responsive engine. If you upgrade your Bubble page to the new responsive engine, this should work properly. Please let me know if you notice otherwise!


@oli1 thanks for reaching out! Which workflow action are you using?

1 Like

I’m using new responsive.

Using Save (as PNG to URL):

Then “when has generated a saved image URL” I grab the URL.

image

Thanks Alex, we updated the reusable element to the new responsive engine and now it works fine!

1 Like

@zeta1119 – great to hear. Let me know if you have any other questions!

Do you know what’s happening, Alex?

I’d really like some help with this and the other open issue I have emailed you about a week ago without reply. I’m excited to use this, but it’s frustrating to pay $95 and not get support.

Hi @alex4
Is there a chance of adding a Zoom in - Zoom out feature?

Can you provide a sense of when you’ll respond with some help, Alex?

@qaz.wscuther – thanks for reaching out! Currently, this is not possible but I’d be able to add this to my backlog!


@oli1 apologies for the slower reply (last weekend was a holiday weekend for me). I’ll take a look into the issue and get back to you today (PST)

1 Like

Hi @oli1 I just pushed an update in v1.53.10 that should hopefully fix the issue causing the images to be skewed. Please upgrade to that version and let me know if you’re still experiencing the issue!

Hi Alex,
Is there a way to determine if the canvas is blank? I want to be able to let someone clear the canvas (which is easy), but want to be able to conditionally de-highlight the icon that launches the canvas editor if it’s empty.
Lemme know if there’s a way. I tried checking the serialization etc but of course that is empty until you use it.
Cheers
Oli

It appears if the canvas is hidden after being visible and then made visible again conditionally, the height of the canvas becomes 1 or 0. Here is the old engine, I have placed a border around the Canvas to demonstrate. When I click a button it hides conditionally and when I click again to show it the border is just a single line and the canvas is not visible to the user. Screen Recording 2022-08-16.... Prior to v1.53.4 it works as expected, but not after that version.

I’m getting this error message when trying to save a canvas. Anyone have any ideas what I need to do to fix this? I followed the instructions for the workflows, so am not sure what the issue is.

1 Like

Hey @tony10 thanks for reaching out!

The is the Image you’re using on the Canvas uploaded via the picture uploader in Bubble? It looks like the image isn’t CORS compatible which is causing the issue.

No, I was using Simple Mobile Camera Input Plugin | Bubble to upload the photo. The real goal was to be able to take a photo inside of the app, and then be able to annotate that photo without having to select one that is on the photo roll. I’m trying to create a more seamless experience.

1 Like

@tony10 I see. If you PM me a link to your editor I am happy to jump in and take a look and see if we can fix this CORS issue!

Hey Alex, do you have an ETA on completing the support documentation re: the image annotation use case? I can see great potential with the plugin, but am absolutely spinning my wheels trying to get it to function correctly.
I currently have a pop-up window that displays a photo (as selected from a repeating group), then a button in that popup to switch into edit mode which shows the plugin’s annotation buttons and the selected photo as a background. once i add a shape or text on top of the photo and hit save, i either consistently get:

  • error messages (the same error actually comes up on the plugin demo page when trying to save a marked image, see screenshot) - I’m also using the bubble picture uploader element if i want to set a new background image.
  • the newly modified canvas becomes the background image for all other images when they go into edit mode (but not in the standard popup view mode), or
  • i get a random bug - each time i open a new popup window / photo and switch into the edit mode, there’s a dot added to the image as though i’ve clicked on the image in freehand mode. The dots continue to add up each time i open a new image popup, so for the first image, there’s one dot, i open up the next random image, there’s two dots, third image - three dots etc… (?).
  • there also seems to be something going on with the plugin demo when i try to clear the background image (remove the lion), add a new image, then mark up - the lion reappears (?), so I’m not having much luck copying workflows from the demo.
    -apologies in advance if its an issue with my design / workflow, i just can’t seem to crack this one.
    Thanks!
1 Like

Hi @alex4 and followers of this thread, I’m considering using this for my app — sorry if I’ve missed it, but could someone please let me know if this plugin works for drawing with an Apple pencil or Samsung S pen on tablet touch screens? Thank you in advance.

Hi @alex4 , great looking plugin. Hope do I let my users make labels on a image? E.g. I have a feature lists. And I want to add labels on parts of an image the labels ( bullet list number) to highlight / annotate the feature. E.g. hotspots on an image. If the label is clickable or shows infotip, that will be a bonus.

Something like this. With each label one feature on my list.
image

Something from wordpress: