Forum Academy Marketplace Showcase Pricing Features

[New Plugin Updates] Drawing & Painting Canvas

My method won’t work for that. I am sure the fix that alex4 created should do the trick.

Perfect, thank, @alex4.

So the Scale all alements is like zooming in the Canvas, right? Without moving things from their position.

Is it possible to make a completely responsive Canvas? Meaning that it Scales automatically based on the screen width

1 Like

That would be awesome!

@hacker and @gnelson a completely responsive Canvas (with a fixed aspect ratio) that scales the Canvas as well as the drawn elements inside should already be possible!

Check out the demo here (try drawing a few elements into the Canvas and resize the width of the page, it should scale proportionally):

All you need to do is calculate your desired aspect ratio (Canvas width divided by height), place it in the “Fixed Aspect Ratio?” field below, and it should scale the Canvas as well as elements inside. Let me know how it works out for you as you give it a go!

Alex

1 Like

Thank you for this tip. I’ll give it a try soon and let you know.

George

1 Like

Hey, @alex4,

Thanks for the demo. Now it works.

But I have 2 things:

  1. When I draw in a phone, and then open the same drawing on a computer, it sometimes makes the drawings smaller on computer
  2. When I have opened the Canvas at the same time on a phone and computer, then draw on the phone, it doesn´t updates the Canvas on the computer.
1 Like

Hi @alex4
I purchased and have implemented your plug in. BIG FAN!

Reaching out because I’m having trouble with getting serialized canvas to save?? Have modeled data structure and workflows just like your demo. Can’t seem to find where I’ve gone wrong?
Please help?
THANK YOU!
-Mike

@winslowmike – thanks for reaching out and for those kind words about the plugin! Can you DM me a link to your Bubble editor and point me to the workflow actions you’re trying? I’m happy to take a look!

@hacker

When I draw in a phone, and then open the same drawing on a computer, it sometimes makes the drawings smaller on computer

You’ll want to add a field to your database for the Canvas to store the width at which the canvas was drawn (on your phone). Then use the scale all elements workflow action based on the Canvas width on your current page. For example, it might have saved the canvas at 300px width for a phone, but you’re opening it at 600px, so you would scale by 600/300 = 2.

  • When I have opened the Canvas at the same time on a phone and computer, then draw on the phone, it doesn´t updates the Canvas on the computer.

The plugin currently does not support simultaneous editing of a Canvas with live updating out of the box

Hi Alex,

You have an awesome plugin! Really impressive. A quick question - do you have any plans to implement zoom in/out? Use case - I take a photo and then want to highlight something on the finer detail on it. So I zoom in to make sure I draw on the right place, do my markup, and then I zoom out to continue looking.

Another use case I may have is comments - imagine I draw two elements. Is there a way to know that I have created or selected those elements outside the plugin? For example, I would like to associate a comment to each element next to the canvas. So when an element is created, people can populate the comment. Or when an element or a comment is deleted, the corresponding part is also deleted (after a prompt).

Sorry if those are obvious answers, still exploring what can bubble do. Thanks!

You have an awesome plugin! Really impressive.

Thanks so much for the kind words! How has it been learning how to implement the plugin? I am thinking about how to invest in documentation/how-to. What would be helpful here?

A quick question - do you have any plans to implement zoom in/out? Use case - I take a photo and then want to highlight something on the finer detail on it. So I zoom in to make sure I draw on the right place, do my markup, and then I zoom out to continue looking.

That use case makes a lot of sense. Let me look into this and get back to you!

Another use case I may have is comments - imagine I draw two elements. Is there a way to know that I have created or selected those elements outside the plugin? For example, I would like to associate a comment to each element next to the canvas. So when an element is created, people can populate the comment. Or when an element or a comment is deleted, the corresponding part is also deleted (after a prompt).

Thanks for the recommendation here – will get back to you on this one as well!

Thanks, Alex! Tbh, I am still researching what’s available as a tech stack, so I haven’t yet tried anything. I can’t start investing time implementing before I know Bubble can work for what I’m having in mind. Those two use cases I highlighted, if possible, could open the door for a whole host of different business use cases.

A little clarification for the second use case - the best case would be if I place the mouse cursor on top of the comment to be able to see which annotation is connected to it - e.g. annotation changing color, or being highlighted in another way… This would be the perfect case for what I’m thinking about.

@martin101

Thanks, Alex! Tbh, I am still researching what’s available as a tech stack, so I haven’t yet tried anything. I can’t start investing time implementing before I know Bubble can work for what I’m having in mind. Those two use cases I highlighted, if possible, could open the door for a whole host of different business use cases.

I see, no worries! It looks like zooming is supported by the Fabric.js library (what the plugin is built on top of), so I’m adding this to my backlog.

A little clarification for the second use case - the best case would be if I place the mouse cursor on top of the comment to be able to see which annotation is connected to it - e.g. annotation changing color, or being highlighted in another way… This would be the perfect case for what I’m thinking about.

I’m not sure I fully understand this here. Could you elaborate?

For the second feature you’re requesting, I’d probably implement something like the following, where I’d add the ability to:

  1. Give Unique IDs to all elements (currently you can already do this for Image Elements on the Canvas)
  2. Access the Selected Element’s ID (in a state on the Canvas Element)
  3. Select elements by Unique ID

How would that work for your needs?

1 Like

For the first part - great! This would be an awesome addition.

For the second part - that’s exactly it. If I can draw let’s say a rectangular and then access the element ID from outside the canvas (as an element in a workflow or a state) and be able to change that element, that would work! Thanks for confirming.

@martin101 sounds great. These are now on my backlog! Will keep you posted when I work on them!

Alex

1 Like

Ohh, okay, thanks.

It would be an awesome feature.

Hey, @alex4,

What is the ETA, for this. I really need this.

Thanks in advance :slightly_smiling_face: :computer:

Hi @hacker I currently still don’t have this feature planned yet, but will PM you to discuss

1 Like

Hey, @alex4,

I didn´t understood very well the 1.42.0 and 1.43.0 new versions.
Can you please explain them?

Thanks in advance :slightly_smiling_face: :computer:

Hey, @alex4,

I didn´t understood very well the 1.42.0 and 1.43.0 new versions.
Can you please explain them?

Thanks in advance :slightly_smiling_face: :computer:

Hi @hacker thanks for reaching back out!

v1.42.0 “Turn off selector” workflow action updates:

Previously, there was a workflow action called “Turn off selector mode” to turn off “selection” mode for the Canvas (so you can’t click/drag any of the items inside of the canvas). I changed this workflow action to “Toggle Selector Mode” so you can turn on/off the ability to select items inside of the Canvas.

v1.43.0: Set Cursor Mode on Canvas:

Previously, the “Set Cursor Mode” workflow action on Canvas only had the ability to set the cursor mode to be “Draw”. Now, in that workflow action, you can set to Draw Shapes, Add Text, Select as well.

You can test these new actions out yourself by playing with the “Toggle Selector Mode” workflow action and the “Set Cursor Mode” workflow action!

Best,
Alex

1 Like