SVGs
To set this up start by adding the Toolbox plugin to your application (this allows you to connect JS code to your Bubble actions).
The next thing to set will be your SVG with an image inside. To do that just add an HTML element and copy in the code from the page above. The code will look something like below:
You can see that there is an SVG start and an SVG end. Then within the SVG, there is an image with a URL - you can make that static or dynamic, depending on your need. Then there is dynamic text, which represents the code of all of the shapes that will be added to the image.
Now let's create the flow to add a point to the image. To do that just add the button and run the following code on click:
let svg = document.querySelector('svg')
function clicked(event) {
let m = oMousePosSVG(event);
bubble_fn_x(m.x);
bubble_fn_y(m.y);
}
svg.addEventListener("click", clicked)
function oMousePosSVG(e) {
var p = svg.createSVGPoint();
p.x = e.clientX;
p.y = e.clientY;
var ctm = svg.getScreenCTM().inverse();
var p = p.matrixTransform(ctm);
return p;
}
Make sure to add 2 Javascript to Bubble elements and name them x and y. That way, the above code will trigger both of them when a click occurs.
Now add a new event that happens when the second Javascript to Bubble element fires per the flow above and, upon firing, have it open a popup where the user can enter something (like the name of the point).
When the user presses the action button in a popup, create a new object which will populate the shapes within the SVG. The code you should use to do that should look similar to this:
<circle cx="252" cy="126" r="10" stroke="black" stroke-width="2" fill="red" onclick="bubble_fn_select('1598481411247x698247649801011200')"/>
This code specifies what the shape should look like, where it should show up (populated from the Javascript to Bubble element values above), and what should happen when it's clicked.
Add a third Javascript to Bubble element that will fire when one of the items is clicked. You can have it do whatever is needed - open a popup, adjust the object in the db, or something else. The easiest way to pass data back and forth is to make sure that the SVG code above passes the unique ID of the relevant object into the Javascript to Bubble element.
Last modified 2yr ago