[New Plugin Updates] Drawing & Painting Canvas

alex4 · 2020-11-11T20:45:42.593Z

Hey @cmarchan – thanks for the feedback!

I have thought about building a flow diagram plugin as well. Will keep you posted if I start that.

Cheers!
Alex
TechBlocks

cmarchan · 2020-11-11T21:45:33.062Z

Alex @alex4, … I will be your first customer!

The project I am working on will definitely benefit from that functionality. Even bare bones!

Hope you decide to work on it and thanks for considering so.

alex4 · 2020-11-11T23:30:06.772Z

@cmarchan – absolutely, I will keep you in mind!

dev.admin · 2020-11-12T02:05:43.997Z

I think a flow diagram/drag and drop builder would be very much in demand.

balle.emil · 2020-11-24T14:01:51.013Z

Hi There @alex4 I am missing a feature to make the background an image instead! Also missing a possibility to limit the size of the added texts and images. Is there something i cant find or is it not possible?

alex4 · 2020-11-26T19:01:05.188Z

Hi @balle.emil – let’s continue this thread on the other thread here: Fabric.js Help!

Best,
Alex

alex_m · 2020-12-18T22:55:11.326Z

Hi @alex4, cool and useful plugin. There is a workflow to “add shape to drawing/paintingcanvas” I would like to make use of but it doesn’t look to be quite functional? it seems to always put the shape off the edge of the top left corner?

Agree with above a flow diagram plugin from you would be good to see.

alex4 · 2020-12-20T17:10:17.489Z

Hi @alex_m - thanks for reaching out. I’ll take a look at the issue you’re reporting and keep you posted. Have a great rest of your weekend!

Alex

alex_m · 2020-12-21T05:22:20.255Z

@alex4 Found that it can work by saving and reloading the drawing serialization straight after in the same workflow, not ideal but perfectly usable, cheers

alex4 · 2020-12-21T15:15:32.272Z

@alex_m thanks for the heads up. I’ll take a look at the issue anyway to fix it to work as expected.

Have a great week!

frankclaeys13 · 2020-12-27T15:39:31.212Z

Hi Alex, i’m looking for something like this. https://www.trainingcenter.be/online-tekentool

testpass227 · 2021-01-02T04:35:33.547Z

Hi @alex4, does this tool allow multiple people to collaborate on one board at the same time?

alex4 · 2021-01-07T23:12:25.334Z

Hi @testpass227 thanks for reaching out and apologies for the slower reply.

You should be able to set it up with Bubble workflows to enable collaboration, although I haven’t done it myself, this is how I’d approach it:

When the canvas is modified, generate a serialized canvas (it’s a workflow action under the plugin element)
Once the serialized canvas has been generated (it’s an event on your workflow tab), save it to the database somewhere (the field type of where this is saved should be text)
Create an event using Bubble’s Database change trigger on the workflow tab. Under this event, load the serialized canvas (from step 2) onto the canvas. You might need to set up some conditions so that if Page A made the change, you don’t reload the canvas on Page A, only Page B or Page C, which are listening for changes.

Let me know if I can help in any other way!
Alex

testpass227 · 2021-01-11T07:50:26.821Z

Thanks for your advice, @alex4.
Sorry, I can’t understand this way

alex4:

Under this event(revice: backend workflow), load the serialized canvas (from step 2) onto the canvas.

I don’t think it is possible to access this canvus in the backend workflow.
I’ve tried it in various ways, but can’t figure it out. I would be very grateful if you describe in more detail how to do it.

Regards

alex4 · 2021-01-13T21:02:54.453Z

Hi @testpass227 – thanks for the follow up. Apologies for the slower response.

Hmm I was not aware that the database change trigger is only available as a backend workflow. Another approach could be to check for a “changed by” (type: list of users) field using a “do every 0.5 seconds” event on the workflow tab. If the user on the page isn’t the user in the “changed by” list, you can update the canvas. Again, you will need to set it up with some conditions so that if Page A made the change, you don’t reload the canvas on Page A, only Page B or Page C, which are listening for changes.

runningman · 2021-01-25T21:48:48.714Z

Thank You Alex for the update. The plugin works amazing now. I would like to ask again about the possibility to delete elements (the selection work perfectly, but also would be amazing to be able to delete what is in plus). Is there a new update, maybe I have the old version. Also, I am searching to add on my website the possibility to create custom picture frames (just as an idea to make my product more customer oriented). Will there be such a possibility, or could someone suggest me how could I solve this?

alex4 · 2021-01-26T14:37:16.019Z

Hi @runningman, thanks for reaching out and happy to hear you enjoy using the plugin!

Could you elaborate on the request to delete elements? Currently, you can already do so. There is a workflow action that allows you to delete selected elements. (You can always update the plugin version by going to the plugin tab in the Bubble editor, navigate to the plugin, and select the latest version. You’ll need to refresh your page for some of the new features to come up on your Bubble editor).
You should be able to create something like the custom picture frames example. To do so, you’d add an image or shape to create the picture frame border and use a workflow action to add the image inside of it.

Hope that’s helpful and looking forward to your response!
Alex

zeta1119 · 2021-02-18T13:50:14.266Z

Hi Alex!

I just installed the plugin because it sounds really great for what we want to do!
However, I can’t get it to work - is it possible that some things got mixed up with the last updates?
Could you please explain the set-up process with screenshots?

I’m trying to follow these steps, but when I open the links they are empty, and when I try to copy the group with the workflows, it only copies some of the workflows but not all … i’m confused.

image637×581 53.9 KB

Thx!

itzmoodmail · 2021-02-18T16:06:33.603Z

Hello, I’m building a platform to create Moobdboards using your plugin (https://itzmood.com/version-test/moodboard?debug_mode=true).

While it has a lot of really useful features for my needs what I’m missing the most which is essential for me is the ability to get the selected image and use it in a workflow.

In particular I would need to implement two features.

#1 - When I add a product to the canvas I add it to a list of products that you can see below the canvas itself. Whenever I remove one of those products from the canvas (by deleting the image) I would need to remove it from the list aswell. The problem is the plugin has functions to start a workflow on the selected image but not to simply get the image itself.

#2 - I’ve created a Workflow that, using API, gets an image as input and returns the same image but without the background as output. I would need to be able to call this workflow on the selected image inside the Canvas so that I could then replace the image with the one without background.

Basically, being able to recognize and get the selected image would solve both my issues. Is there any way I can do this? Even using some sort of work-around maybe.

Besides from this two more questions:

Whenever I download a Canvas as PNG it gets downloaded without extension (e.g. “download”). If I then rename the file to add the extension manually (e.g. “download.jpeg”) I can see the image correctly. Is there any way to fix this?
Is there any way to flip an image (either horizontally or vertically) that is already on the canvas? Is it a feature on the roadmap maybe?

alex4 · 2021-02-18T18:18:36.982Z

Hi @zeta1119 — thanks for reaching out!

The instructions may be out of date. I’ll take a look and get back to you by the end of the week.

Cheers,
Alex