Is there a workflow that would allow my clients to āreplaceā an image? Like could I get the size and coordinates of the selected image and match them to the image they add? This would be useful for them to edit the brochure layouts I give them. Otherwise they need to remove, add and resize.
You have to create a specific workflow for each image that you want to swap. I see 2 ways to do that:
-
you can save size and dimensions of your current image, and when your user activate the workflow you will automatically remove, add and resize
-
you can manipulate the serialized canvas, that you can access as a state of the Canvas element. You could find and replace the image URL with the new one, and then load the modified serialized canvas. This is not recommended IMHO for a couple of reasons.
We could discuss via PM if you want.
1 Like
How does the font selection work? I got some google fonts to work but not others.
Just following up on the fonts. Are all google fonts supposed to work, or do I need to install the fonts somewhere? On the demo page I can change the font to āRalewayā but I canāt change it to a Google font like, āDancing Scriptā
Hello @jeffmccutcheon , the plugin can access your Bubble appās fonts. Infact, you can set the canvas textbox font by changing the bubble elementās native field Font. If you need to add new fonts to your app, you can check out this link: Custom Fonts | Bubble Docs
Feel free to drop me a DM for further support.
Everything in the plugin was working well until I used the Export Image (create link) function. Everytime I try to capture the URL in the next workflow, the first instance never returns the URL, itās always the 2nd+ click that returns the URL. Iāve reviewed through all the logs, checked all possible causes and still canāt find the issue. Iām assuming thereās something to do with the plugin.
How to replicate:
- Export Image Function (just create link = yes)
- Create a new thing with data field =
Canvas Thumbnail Doodleās Exported image URL
It will always return empty first generated data record, 2nd data record will return the URL.
Hello @PhastCo ,
You should wait for the plugin to generate the image file and save that in your Bubble database.
That will take just a few seconds, but if you add some workflow actions right after the export the URL will not be ready.
Thatās why we provided an event, triggered by the plugin, named āFile URL generatedā. You can place your actions inside there.
Feel free to DM me for any further support! 
Thanks for the quick reponse! @Cosmic.Steve
It works great now!
I figured there was a delay so I added a pause function but even that didnāt work no matter how long the pause was for. And the most deceiving part was how all the workflow logs & step by step debug showed a returned file URL after that step even when in reality it wasnāt updated.
Thanks for the help!
For the fonts is it possible to trigger a rerender when we change the font? I changed it to a dropdown picker vs typing in (on your advanced example). But the font only changes once I change the text box size.
Also, I find I need to manually load the fonts into the header - Iām only using Google Fonts. Not sure why this is but seems to be the case across all of my font selecting.
Hello @kara ,
the font changes are rendered as soon as you call the action āset properties of an objectā. Iāll DM you a test app where you can check that.
About the Google fonts, Iām guessing that Bubble doesnāt load all Google fonts by default: thus, it doesnāt have a reference when you ask to render a specific font if you donāt load it yourself.
1 Like
@Cosmic.Steve
Hello, I am using air color picker to change the font color. I trigger it via air color color is changed like this:
But it doesnt update right away?? It will only get the color change after I do I color change again, but then its always the previous chosen color that is being applied.
I copied this workflow on your advance demo editor its same but I dont know what I am doing wroing?
Hi @rcdcanlas ,
I suggest you to inspect the workflow in the step-by-step mode and check what color your app is trying to apply.
Feel free to DM me for further assistance. If you like to share a link of your app Iāll be happy to check it out.
1 Like
@Cosmic.Steve Iāve sent you a DM of the link of the app regarding the choosing of color for the text:
Here is also a scree recording of the issue: https://www.berrycast.com/conversations/f050ff3c-7728-5ebb-bbe4-97a4fd733976
Iām working on a project using the Fabric.js plugin in Bubble, and I have a few questions regarding object positioning and referencing.
- Is it possible to draw a shape, like a rectangle, and have its position automatically saved to the database, including properties like X and Y coordinates, width, height, etc.?
- Also, would I be able to reference this shape from outside the editor? For instance, could I link an item, such as a label or text box outside the Fabric.js editor, to this specific shape? My goal is to create references that highlight terms in the image, allowing labels or descriptions to correspond to specific highlighted areas.
- In a given image, I want to highlight specific points or terms in the text and then reference these highlighted areas in other items outside the Fabric.js editor (for example, in Bubble as a label or text box). This would allow me to connect specific annotations in the image to corresponding descriptions or notes outside the editor. Is it possible to capture and store each shapeās position and reference these shapes dynamically in Bubble?|
- Additionally, instead of manually uploading images, is there a way to associate an image with a single click, so it automatically opens in Fabric.js, ready for modification? Ideally, Iād like to save the modified image directly to the database (without requiring a download) so that students can easily view any annotations or feedback I add to their assignments or exams.|
You should take a look at the serialized canvas state.
At any given time, it contains all the information about each element on the canvas, in a text form. You can access it by referring ācanvasās serialized canvasā state.
You can access a shapeās starting coordinates and size, as you asked.
You can save it inside a text field of a thing in your database without generating (and saving) an image. When you need it, you can use the action āload a serialized canvasā to load all the elements into a new canvas.
Unfortunately, you cannot know where a given word of a long text is going to appear, since you only know the starting coordinates of the text box and itās size.
Maybe you can compute the exact position, knowing the canvas font and its characters size, but Iām not sure whether that would be feasible.
To clarify my question, Iām going to send a video showing what I need to know if I can achieve with your plugin:
Yes, absolutely!
I misunderstood what you needed before, but I can confirm that the app in your video is 100% achievable with my plugin.
OK, thanks for your answer, but i have others questions:
-
Clickable Annotations with Comments: I want each highlight to be clickable, triggering a comment or annotation to appear in a sidebar or popup. Can FabricJS in Bubble support such clickable regions, and how could I link each highlight to a specific comment?
-
Saving and Loading Annotations: I need the highlights and their associated comments to be saved in Bubbleās database, so that when a user returns, their previous annotations are reloaded. What would be the best way to save positions, shapes, and comments with FabricJS in Bubble?
-
Interactivity and Conditional Formatting: Finally, I want to show different types of highlights (e.g., āProblemā or āPraiseā) with different colors or icons, and ideally have some hover effects. Is this level of interactivity achievable with the FabricJS plugin?
You need to use the plugin mode āshapeā in order to create rectangles and circles.
Every element is associated to an id, which you should link to an annotation. My suggestion is to create a thing called Annotation with a type, a text, and an id which is the plugin shape ID.
If each type of annotation has a colour, when the user creates the annotation you should change the plugin shape fill colour using the annotation type color. Use semitransparent colors to get the desired effect.
If a user clicks on a shape, the plugin changes itās state ālast selected IDā, which is the id of the last selected element. In this way you can highlight the selected annotation.
When you save your homework, save the plugin state āserialized canvasā. It is a text, and it contains all the information about each win the canvas.
Every time you need to show the annotations to a user, use the action āload serialized canvasā to load everything on the new canvas.
Please make sure you lock all the elements when the user doesnāt have the permission to edit them. To do so, use the action āset properties of an objectā and flag the ālockedā checkbox.
Unfortunately there is no āhoverā effect for the plugin elements, and you should take care of creating some text elements to show the annotation number everytime a shape is created or moved.
First of all thank you for your work the plugin is great. However, Iād like to save the userās drawing in the Bubble database. How can I do that? Thanks in advance