[New Plugin Updates] Drawing & Painting Canvas

Showcase
181

Thanks @alex4 - the demo canvas isn’t very mobile responsive. Is that something in the element itself or something we would be able to influence ourselves in our own apps?

182

Hey @equibodyapp – you’re right, I haven’t gotten the time to make the demo itself fully responsive (although I just spent 30min in the Bubble page editor making it a bit more responsive – it’s not perfect yet but you can check the demo again now). The plugin itself is responsive (you can set up a fixed aspect ratio (number), fixed width (yes/no), min/max width (like any standard Bubble element), and scale the elements inside of the canvas (workflow action with scale number).

@hacker

Ohh think this can be faster (to load and to develop), right?

I’m not sure what you mean by this, can you please clarify?

Can the Selectable option in Add Image to Canvas be changeable? For example, when a user want to upload an image that wants to move around (Selectable = yes), resize and reposition the image, and then lock it (Selectable = no), and have the option to unlock the image again (Selectable = yes).

I have this on my backlog but don’t have it planned yet! Let me know if there is an urgent/pressing need for this!

What are the steps when I want to autosave the Canvas?
I´ve tried When Canvas has been modified save as serialization, then When serialization has been generated and there I make changes, but it deletes all.

That workflow setup is how you would create an “autosave” feature. If it’s not working properly based on your implementation, please send me a link to your editor and I cant take a look.

183

Ohh, that is it better to have the current picker or a native picker (I suppose this is a lighter element)?

Great, it´s a little bit urgent

Thanks, I´ll send you a private message

184

Hmm… I’m a bit lost here. What do you mean by “native picker”? If there are relevant links to describe what you’re talking about, please send me those.

185

Ohh, no worries, I think (maybe I am wrong), that using for example the native iOS / Android / etc… date picker, is lighter (thus faster), than using a javascript date picker.

1 Like
186

Hey, @alex4,

I noticed that when I Load a Serialized Canvas and the Serialized Canvas´text is empty, the Canvas freezes with the Clear Canvas color. I´ve sent you a PM with a video

187

Hi @hacker – thanks for letting me know about this.

I’ve added an update in v1.40.1 that makes it so that if you pass an empty value through the “Load a Serialized Canvas” workflow action, it loads an empty canvas.

Take a look and let me know how that works out for you!
Alex

188

Hey, @alex4,

It is still frozen with the Clear Canvas color when the Serialized Canvas is empty

189

Hi @hacker – my apologies, I may have misunderstood your request.

There is no workflow action called “Clear Canvas color” – what are you referring to here? If you could DM me standalone editor page with nothing else other than a demo of the bug it would be helpful as I understand your request and pinpoint your issue.

Best,
Alex

190

Hi @alex4 I just ran in to this plugin of yours and wanted to know if, the canvas can be used to create customized dashboards along with your Simple charts plugin. I’m trying to emulate Tableau like features where users can have personalized dashboards.

1 Like
191

Hello Alex
I am Charlotte from France, bought your plugin I just find it very usefull!

I have just one problem, maybe I am misusing it I am not sure and need your support. When my users are connected to the background image of your plugin I want the image to be set so that they can draw on it.

  • Right now when I try to add an image when my page "is load "(that’s working) but when I use the undo to erase the last line I draw on my image on my preview it completely deletes the picture and the drawing.

  • I also tried changing the background directly on the canvas/painting plugin but when I look at the preview of the app I only see the Lion image which I find weird. I do not know how to fix that issue. Could you help me out with this and tell me what I could do for it not to happen again as I am struggling a little on my own to find the solution.

192

Hi Charlotte, I am just a user of the plugin, but you might want to use a normal image element for the background image and then simply put the canvas on top of it with a see-through background. This is what I’ve done to make video annotations in my app.
image

2 Likes
193

Thanks so much for jumping in here @christo1 – @charlotte.augiat, those recommendations from Christo should work if you don’t want to add the image directly to the canvas.

If you do, however, here are a couple of recommendations:

I also tried changing the background directly on the canvas/painting plugin but when I look at the preview of the app I only see the Lion image which I find weird. I do not know how to fix that issue. Could you help me out with this and tell me what I could do for it not to happen again as I am struggling a little on my own to find the solution.

What plugin version are you using? There was a bug that has been fixed in v1.40.4 and greater – once you upgrade, the default background image issue should be fixed!

Right now when I try to add an image when my page "is load "(that’s working) but when I use the undo to erase the last line I draw on my image on my preview it completely deletes the picture and the drawing.

Thanks for pointing this issue out. The reason for this is that the undo action will undo all the way until the beginning of the Canvas’s history on your page (even when it was blank just before you added the image). I just pushed an update in v1.40.8 with a new workflow action called “Reset Undo/Redo” that you should add to your page in the same page load event (right after you add the image to the Canvas) that should set the “original Canvas” of the undo history as the canvas with your image. Let me know if you try this out and let me know how it goes!

Alex

1 Like
194

Thank you Alex!!!
It’s working now!
I am really happy, good job.

195

@charlotte.augiat – that’s great to hear! Let me know if you have any other questions or requests!

196

Hey, @alex4,

I am just very confused on how this works, I tried having a look at the demo, but the Scale All Elements action is not used. I also found this.

Do you have any easy formula or something?

197

By the way is that possible to get the option to not clear my background image when I do "element action " > clear canvas a canvas - main
When I create a new think what I want to do it s save my image as a PNG and reset all my inputs and clear my draw witch is on the canvas after saving everything in my database.

198

Hi @hacker here is a demo of the scale all alements workflow action. Using the workflow action, you can scale all the elements within the canvas by that number. Try drawing a few shapes on the canvas before clicking “scale”

Please let me know if something is still unclear.

1 Like
199

Nice I will do that I think it s the better option! Thank you to share this! It s very simple and intelligent.

1 Like
200

But what I have to do after it’s save the PNG in the database with all the content, image and draw.

1 Like