🎨 New plugin! Cosmic Canvas: Drawing & Painting

Hi! I wanted to ask if there is any way to have the canvas size be something big like 1080x1920, however have it in a smaller bubble group so that the user experience is better and not have them have to scroll a whole lot. So like the Canvas be 1080x1920 so the download can be HD but shown in bubble as 360x640 or something like that.

Hello @equipohubb , yes of course!
Just give the visual canvas element the size you need. After, in the canvas fields, set the desired image width and height in pixel and you are ready to go. :+1:

Does this support backend workflows?

In my use case I would love to create an image that is stored in the DB which I could then dynamically change using find and replace.

This would be a super powerful feature.

Hi @shaun , with the plugin you can save a serialized canvas on your db, which is a text representation of your canvas. You can manipulate it with find and replace as you wish.

You will only need a frontend app in order to generate the png/jpg file, since the plugin doesn’t support backend actions (yet).

Feel free to DM me for further instructions. :blush:
Steve

Hi @Cosmic.Steve , I wanted to know if there is a way to create a text from a workflow action, I haven’t been able to find it. Also if you have any type of document with all the actions available as well as any exposed states or features it would be greatly appreciated.

Hello @equipohubb , that is not (yet) available, you can find a list of the available actions in the plugin section of your app, at the bottom of the description.

Hi again, thanks for making a quick update with the requested eraser bug fix. I’m also facing an issue where when I try to load a serialized canvas directly from database or a state the following error (attached) appears. But once I click ok and retry loading the serialized canvas it works fine (as long as I don’t refresh the page I can load the serialized canvas from a button click workflow).

Hey @kanushk ,
That might be happening because the canvas in not yet visible on the page when calling the action. You can try to load the canvas in a “when condition is true” workflow using "canvas A is visible " as a condition.

Please contact me via DM for further assistance :+1:t2:

Hi @Cosmic.Steve do you have an estimate on when this feature will be released? We are currently working on a project that absolutely requires this. Any help would be greatly appreciated.

Hello! I’ve been working with the plugin but it just broke on me. You can’t do anything but draw on it. Is this a Bubble thing? I went into your Demos and the same thing.

@carcamp45, it’s almost certainly a Bubble thing right now.

2 Likes

Hi @equipohubb , this feature is on our development list but we have not scheduled it yet. I’ll let you know as soon as we are going to implement it.

Hello @carcamp45 , as Mike was pointing out it was a bug from Bubble that affected a lot of plugins (even Bubble’s native ones). It seems like the issue is solved right now :smiley:

Congratulations to the Bubble support team for addressing that so fast!

2 Likes

Hi, can you make the paint brush a circle that changes size based on the brush size setting? Right now its just a cross, and its hard to tell the brush size visually.

Hello @lkao ,
right now the draw tool is exactly a circle brush changing size with the field “Stroke width (draw)”: the circle size is the field value in pixels.

If you are having issues with the gradient brush, just write me a DM :+1:

Hey there! I’m having issues with the canvas width and height. Right now it’s dynamic based on two inputs. But the canvas size doesn’t change. Is there something I’m missing?
image

Well, I guess it is changing but the border doesn’t change with it. It seem like the border stays at whatever size the element is set to. I changed the background to red.


image

Hello @carcamp45 ,
“Canvas width” and “Canvas height” represent the exported image resolution. Dynamically changing those values will affect the size of the image you are working on.

You cannot change the size of the Bubble element with those 2 fields, simply because it follows Bubble’s layout rules, like any other visual element.

Feel free to DM me for any further info! :wink:

Oh I see, Thank you!

Hi,

I have a question. When i try to save the image to the database it won’t be stored.

I try this: export image from canvas

  • element canvas A
  • Format PNG
  • File name: test
  • Just create link: ‘yes’

Make-changes-design (thing)

  • Serialisation = canvas a’s Serialized canvas (works)
  • image = Canvas a’s exported image (does not work)

What am i doing wrong?

Hello @administratie1 ,
when exporting an image with the option “Just create link” you have to wait for the image to be generated before accessing the image url. The plugin will trigger an event as soon as it completes the image export.

Just create a new workflow triggered by the element event “File url generated” and put your actions inside there.

Feel free to DM me for further instructions.