[New Plugin Updates] Drawing & Painting Canvas

[alex4]

@aileen_carbonell12 –

1. You can’t yet add filters to images but I’ll add this to the backlog
2. You can flip images and rotate them using the controls on the image
3. You can’t yet add a video to the canvas but I’ve been exploring the possibilities of this as well!

@cmarchan
Hmm… I’m still very confused – what do you mean by box? Is that a rectangle shape on the FabricJS plugin, a text box, or something else?

[cmarchan]

@alex4

Sorry about that. I meant the text box.

[alex4]

Hey @hacker thanks for reaching out!

1. The difference between “Save (as PNG to URL)” and “Save (as Serialization)” is that Saving as PNG saves an image file (you’ll get a URL path to a .png file that you can save to your database) VS saving as serialization saves a JSON with a representation of what elements are on the canvas (you’ll get something that’s type text that you can save to your database and load onto another canvas to continue editing the elements by adding/remove shapes, resizing stuff, etc). Does that make sense? Happy to explain further, I understand this part is a bit confusing.
2. You can change the default selector color – if that’s what your asking.
3. Thanks for reporting the console error. I’ve just pushed an update that removes that issue!

Hope that’s helpful!

[alex4]

Hey @SerPounce – The plugin is currently responsive like any standard Bubble element (i.e. it expands and contracts in width based on the page width). Let me know if you have any other questions!

@cmarchan – I think I’m starting to understand what you mean! I think this would require a few new features for the plugin:

1. A “unique ID” for each text element
2. A way to save/store the unique ID once new text element added to the canvas
3. A state on the canvas that exposes the selected element’s “unique ID”
4. A workflow action to select text elements on the canvas by their “unique ID”

That way, let’s say you have Text A already on the canvas and add Text B and Text C to your canvas. You want to associated B and C with A, in your Bubble database, you can make Text A associated with Text B and C’s unique ID’s and use a workflow action to select Text B and C on the canvas using their unique ID’s. How would that work for your use case?

[cmarchan]

@alex4

Right on the money!

But … all of what you mentioned across rg cells.

The use case is to be able to create/draw these text boxes on top of an rg image … say a group element where it’s background is set as an image …ñ and the text boxes can be added on top of that image to place comments.

Say an rg of 5 columns with each holding a group set to an image (an entire website image .thus the image will be rather high … say 500px) where one can place comments over it … and find similar comments (same category type comment) on the other columns.

It sounds very difficult to be achieved. What do you think Alex. Could this be possible?

[hacker]

Hey,

@alex4

saving as serialization saves a JSON with a representation of what elements are on the canvas (you’ll get something that’s type text that you can save to your database and load onto another canvas to continue editing the elements by adding/remove shapes, resizing stuff, etc).

All the elements are included in this text (saved as serialization) for example images? What happens if I save the canvas with some images and drawings as serialization and then delete the images from the database, are the images still accesible?

@alex4

You can change the default selector color – if that’s what your asking.

Where can I do this? I don´t see the option

@alex4

Thanks for reporting the console error. I’ve just pushed an update that removes that issue!

Perfect, thanks

Can I use the event “When Drawing/Painting Canvas Has Been Modified” like autobinding the canvas and save the canvas every time this happens?

Also, the number of undo and redo is strange.
https://drive.google.com/file/d/1vkJrsotzRnmD37pBT4MOBpQlIkvdyNJw/view?usp=sharing

Thanks again.

[aileen_carbonell12]

I see, thank you for the information. I will be trying this plugin soon

[maxmuller2199]

ow, this could be useful for vector graphics creation

[kongstrong996]

How so Max?

[alex4]

@cmarchan to clarify your use case here, you’d plan to put the canvas inside of a cell in a RepeatingGroup? If so, I’m not sure, I’d need to test it out to see if something like what you’re asking about would be possible.

@hacker

All the elements are included in this text (saved as serialization) for example images? What happens if I save the canvas with some images and drawings as serialization and then delete the images from the database, are the images still accessible?

1. Yes, all elements from the canvas are saved to the serialized text string. As long as the URL path to the image files are still active (which is true even if you delete a thing in your database that refers to an image), the image will appear if you use the “Load Serialized Canvas” workflow action.

Where can I do this? I don´t see the option

2. In order to change the default color on the color picker, you can change the hex color color on the reusable element here (see the field “Data source”):
   
   

Can I use the event “When Drawing/Painting Canvas Has Been Modified” like autobinding the canvas and save the canvas every time this happens?

Yes, you should be able to do so!

Also, the number of undo and redo is strange.

I’ll be looking into this. Keep you posted on what I discover

[cmarchan]

@alex4

@cmarchan to clarify your use case here, you’d plan to put the canvas inside of a cell in a RepeatingGroup? If so, I’m not sure, I’d need to test it out to see if something like what you’re asking about would be possible.

Yeap! It would be of course very useful even if the rg function is not possible. It would be awesome if it can function inside a cell of an rg!

Please keep us posted on your findings.

[hacker]

@alex4

Yes, all elements from the canvas are saved to the serialized text string. As long as the URL path to the image files are still active (which is true even if you delete a thing in your database that refers to an image), the image will appear if you use the “Load Serialized Canvas” workflow action.

Ohh, okay, so if I “Delete an uploaded file” (an image that is in a saved serialized canvas), it won´t appear anymore, right?

@alex4

In order to change the default color on the color picker, you can change the hex color color on the reusable element here (see the field “Data source”):

I refer to the blue selection box.

@alex4

Yes, you should be able to do so!

@alex4

I’ll be looking into this. Keep you posted on what I discover

Great, thanks for your help

[alex4]

@maxmuller2199 thanks for reaching out! Could you elaborate on what you mean by it being a useful vector graphics creation?

@cmarchan will do, keep you posted on what I discover

@hacker

Ohh, okay, so if I “Delete an uploaded file” (an image that is in a saved serialized canvas), it won´t appear anymore, right?

Correct, it wouldn’t appear anymore

I refer to the blue selection box.

Ah, I see! That screenshot is immensely helpful. I will look into the ability to customize the color of that selection box

[aileen_carbonell12]

The plugin is great for my use so far, thank you and nice job!

[hacker]

Hey, @alex4,

I have a RE of the canvas. I need to “Save (as Serialization)” in another page of that canvas.

How can I select the RE for the “Save (as Serialization)” action?
Where can I select in what field does the “Save (as Serialization)” goes?

Thanks in advance

[alex4]

@aileen_carbonell12 thanks for the kind words. Let me know if there’s any other feedback you have!

@hacker hmm could you clarify what RE is? I’m not quite sure what you mean by that but assuming you want to know how to access the serialized canvas, here’s an answer: the “Save (as Serialization” updates the state on the Canvas element called “This Drawing/Painting Canvas’ Serilalized Canvas”. See the screenshot below:

[hacker]

@alex4

clarify what RE is?

It is reusable element, sorry.

@alex4

I’m not quite sure what you mean by that

I am just discovering the “Load serialized canvas” and all that.

When I need to save the canvas as “autobinding” to a text field, the workflow should be “Canvas-Drawing/PaintingCanvas A has been modified” and the first action should be save as serialization and next a “Make changes to thing” and the text field = This Canvas Serialized Canvas?

Am I missing something?

Also, I am getting this error, is it my error?:

Thanks again for your help

[alex4]

Hey @hacker thanks for clarifying what RE means!

When I need to save the canvas as “autobinding” to a text field, the workflow should be “Canvas-Drawing/PaintingCanvas A has been modified” and the first action should be save as serialization and next a “Make changes to thing” and the text field = This Canvas Serialized Canvas?

It takes the page a second or two to generate the serialization; for this reason, there’s an event that comes with the plugin called “A drawing/painting canvas serialization has been generated” – you should run the “Make changes to your thing” action when that event fires. Does that make sense?

Alex

[hacker]

I am very confused. So here is the thing, when I want to autobind the canvas, the steps are:

1. “When Canvas-Drawing/PaintingCanvas A has been modified” - save as serialization
2. “When Canvas-Drawing/PaintingCanvas A has generated a serialization” - make changes to the text field of the thing
3. Repeat

I did these steps and didn´t worked, the saved text changed to something like 50 characters long.

I disabled the “When Canvas-Drawing/PaintingCanvas A has been modified” - save as serialization workflow and all worked well.

What am I doing wrong?

Thanks in advance

[alex4]

Hmm, that workflow setup should work @hacker – can you DM me a link to your editor so I can take a look at what might be going on?