Drawing / creating graphics in Bubble?

Hi!

Is there any way (or something planned) to make it possible for our app users to create graphics or draw inside the app?
They should be able to sketch the floorplan of the building…
(If Bubble is built on bubble then by logic it should be possible… :slight_smile: )

Thanks!
Laur

Could you iFrame something like draw.io ?

Not really. I need the parts of the sketch to be actionable and connectable to certain things… Thus it needs to be native.
Or then correct me if I’m wrong.

My two cents: drawing/creating graphics is not Bubble’s strong suit (nor does it need to be). There are so many hyper-sophisticated (either in their complexity or their simplicity) graphic design applications out there that to try to create one natively here that would meet even the most basic of customer expectations would be very, very difficult.

Now, if Bubble were to develop some magical native integration with such an application (something like Sketch 3, for example), then I think you could be in business …

1 Like

True, that would do the trick

I create drawings in Confluence using various plugins, so it isn’t that far from reality.

Hmm. Sounds cool.
I wonder what the ETA would be for such a feature… (@emmanuel - could you comment?)

Not sure we know enough about the feature to comment here… Generally speaking though, Bubble’s primary goal isn’t drawing elements, so we can look into it, but there is probably quite some work.

If you can provide a bit more details (including which plugin could be added to Bubble, not sure i see how it would work with Sketch), we can tell a bit more. That’s the kind of things that users would usually sponsor, given how specific it is.

@NigelG - Which plugins does Confluence use for drawing?

Draw.io
Gliffy
Lucidchart
Creately

No doubt others.

Some of these would have facility to embed on a page, and you can pass parameters into the html from bubble.

Guess it depends on what you are trying to do.

If you want to have ownership to the core data you need to step into some more advanced development. I can see a way of doing this by appending custom javascript to your application and storing/fetching the (JSON) data into your bubble datastore or an external one (with unique reference in bubble). The drawing frontend would then initialize and bind to this data.

You could use:
-Draw2d (supports touch) http://draw2d.org/draw2d_touch/jsdoc_5/#!/example
-HTML5 CANVAS (unsure how to efficently store data with this one)
-Sketch.js
-D3.js (http://dciarletta.github.io/d3-floorplan/)
-Openfloorplan (JS)
-GoJS with floorplan extension (http://gojs.net/latest/extensions/FloorPlanEditor.html)
-MapsAlive (COMMERCIAL service) http://www.mapsalive.com/Buy/Plans.aspx

This is quite technical but doable as per my opinion.

Some of the risks here are interference with existing JS code in bubble but thats something that one should be able to overcome.

The simplest implementation (non-optimal) of this would be to create a simple webapp that utilizes a unique LONG identifier such as “http://yourfloorplanwebapp.com/dawiojdawa8a7423-4-23f32-23f32f23fs-sfe” and then initialize a iframe with this url inside your web app. The risks are that this would be accessible for anyone who manages to get hold of the unique URL (You connecting to a public network wifi is all it takes for someone to sniff the url you are browsing).

3 Likes

Hmm. Thanks, there’s an idea. I’ll have to speak with our dev-guy who knows about json.

any updates on this?

Hi all,

I’m currently playing with Draw.io and I got some trouble to integrate it properly with my bubble app.Maybe some of you can help me on this?

I found this html that worked pretty well : https://github.com/jgraph/drawio-html5/blob/master/localstorage.html

Basially, it contains a base 64 image that you can also replace with a bubble thing and when you double click on it, it opens draw.io in a new tab and you can edit your image. When you save in the draw.io editor, it takes you back to your bubble app and you can see you new edited image.

My question now, is how I can bring back the edited image in bubble DB ? In other words, how I can “listen” an html and call back the image data into bubble?

@gurun @NigelG Reading your posts here, you may have some advices on this…? :slight_smile:
Thanks a lot!

:up: :disappointed_relieved:

Hey @mattmazzega Been some busy months so sorry for not seeing this earlier.

just use the JS toolbox plugin by @mishav , run the javascript below and save the result using a workflow.

document.getElementById('image').getAttribute('src');

Thereafter use @levon 's base64 decoder plugin to store as a file.

Good luck!

1 Like

Hi @gurun
Thanks for your help. Just to well understand : I put the javascript directly in the HTML. And then how do I got the base64 image back in bubble? I’m not completely familiar with the JS toolbox yet…
Tahnks again!

Sorry, let me clarify.

First you need a button that will run a workflow.

In the workflow editor for the workflow mentioned above, Run the JS using the plugin “toolbox”, inside of it you can paste the Javascript to run, then in the next step of the workflow, you can use the plugin I mentioned above called file converter.

As a source for base64 in the file converter event you should reference “Result from step 1, js toolbox”.

On the next step in the workflow you can save the image to wherever you want.

Maybe this plugin is a solution?

1 Like

For anyone looking for a modern drawing canvas that can be synced with your database in 2022 …

And for more exclusive features …

1 Like