[New Plugin Updates] Drawing & Painting Canvas

Hi all, I just pushed another update for the Draw and Paint Canvas v1.28.1:

You can now:

  1. Provide a Unique ID for images added to the Canvas
  2. From the canvas, you can refer to a selected Images’ Unique ID (this is a list, in case there are multiple selected images on the canvas)

That way, if you’re trying to build a moodboard-type product, you can add images to the canvas and sync them with images in your database!

Enjoy,
Alex

I consistently get these errors on my pages where I have the Plugin whenever I run the clear action from my clear menu button:

I also get the following if I do a remove selected object from canvas (needed to clear the object I was currently busy drawing if right clicked on top of image):

and get this when I use the colour picker colour as default colour:

This is causing all sorts of issues on a page where I have a local Drawing Canvas as well as a reusable element with its own drawing canvas as well.

For instance if I draw on the local canvas and switch to the reusable element and right click the canvas on the reusable element, then the menu shows up correctly.
image

If I however hide, the reusable element and reopen it and then right click again, this happens:


I tried pushing the drawing canvas on the reusable element forward and hiding the local element, to no avail.
When I then click on the canvas to get out of the menu, the left mouse drawing action continues even though I am not clicking to draw and the mouse button is not pressed.

Here is a video showing the issue: Screen Recording 2021-03-04...

Hi @christo1 – thanks for reaching out!

I’ll take a look at those issues you’ve provided. Can you DM me a link to your Bubble editor if possible?

Best,
Alex

Thank you Alex,

The app contains some rather sensitive data. Is there another way I can supply you with what you need?

Hey @christo1 – understandable. For now, can you DM me screenshots of your page’s design tab and workflow tab? That might help as I troubleshoot.

Alex

Hi all, just pushed an update for v1.29.0 of the Drawing & Painting Canvas plugin

You can now customize the height and width of the PNG created when you use the workflow action “Save (as PNG to URL)” – hopefully this is helpful for those of you who need specific dimensions for the images created by the plugin!

Best,
Alex

Update in v1.29.1

You’ll see a new workflow action called “Deselect All Elements” – this will deselect any selected elements on your canvas. Helpful for when you add elements to your canvas via workflow action and you don’t want them to appear selected after adding them.

Best,
Alex

Update in v1.30.0

Added an event that fires when a shape is added to the canvas (whether via workflow action or drawn onto the canvas). This should hopefully help if you want the user to be able to select or resize a shape immediately after they draw it (by change the mode of the canvas to “Select”

Enjoy!
Alex

1 Like

Update in v1.31.0

Added another event that fires when a Text element is added to the canvas (whether via workflow action or drawn onto the canvas). The use case for this is similar to the Shape Added Event – it should help if you want the user to be able to select or resize a Text immediately after they draw it (by changing the mode of the canvas to “Select”)

1 Like

Is there a way to upload fonts or shapes for the end users to use in their designs?
Is the only available export .PNG? Or is there a way to get a vector graphic format?

Hi @david46, thanks for reaching out!

  1. You should be able to use any of the standard fonts that come with Bubble (i.e. the ones in the element properties dropdown menu)
  2. I can look into saving as SVG and get back to you

Best,
Alex
TechBlocks

Hi @alex4 any roadmap for a flowchart creation use case?.
I will be interested in creating a canvas for users to create flowchart diagrams (shapes connected with arrows) to document processes.
Another important thing will be of being able to click in a shape to trigger an action (like opening a popup with details for that shape (step in the process)). That means every shape should be added in the database.

Thank you to let me know if this is already possible with the plugin.

Hey @alex4 ,
How can I automatically set an image to the center of the Canvas (in a workflow or in the canvas)?
And is it possible to automatically fill the canvas with the foto?
Thank you!

Hey @alex4 , first of all, amazing plugin. Looking forward to working with it in more detail.

However, for now a few questions and feature requests:

  1. I keep getting an error on first loading the canvas. I stripped all functionality and literally the only thing it does is show the canvas and load an image on it. See below a screenshot of the workflow for adding the image and screenshot for the error I get from Bubble. Somehow if I click again it does load correctly.


  1. Would it be possible to expose a workflow action that would set the relationship between a shape and an image? I would like to be able to add an image to the canvas that is positioned directly inside an Ellipse shape with a somewhat transparent background. I can get this done currently with individual workflow steps but the problem is that if you want to move this around on the canvas they are 2 separate entities so you would have to select them both before resizing and dragging. It would be ideal if you could group them so that users don’t have to click both elements individually.

  2. It would be amazing if you could add a feature that would enable you to connect to an element on the canvas with a line (think of Miro functionality to draw connecting lines between 2 shapes and connect it to one of their sides (top, bottom, left or right). So that when you move the element the line will move with it. And be able to connect it to another element as well potentially (maybe this already possible and I can’t figure out how)

Hopefully, this makes sense.

Thanks,
Sjef

Hi @sjeftijssen – thanks for reaching out!

  1. Would you be able to DM me a link to your editor? I’m not able to reproduce that error.
  2. I have a feature on my backlog that is for “grouping” – i.e. creating groups of canvas elements together – would something like this work for your Ellipse/Image use case?
  3. I’ll add this to my backlog as well.

Best,
Alex

Hi @alex4 ,

  1. Will do.
  2. I think grouping should do the trick as long as that feature is exposed as an option in the workflow actions it should work.
  3. Perfect

Awesome plugin.

@sjeftijssen thanks! Let me know if you have any other feedback.

Hello. Apparently, my images are not saving. Please help.

Hi @orcaintelligence – thanks for reaching out!

I’ll need more information on how you’ve set up the plugin in your app to help you. Can you please share a link to your editor? Feel free to DM it to me.

Best,
Alex

Hi @alex4,

Is it possible to snap back to the origin for freehand drawing? I want to draw the outlines of objects and save them afterwards. Ideally the line should just autocomplete to the origin after I finished drawing.

Best,
Max