Templates Plugins Courses

🖼 Image Annotation - New Plugin from Zeroqode

Image Annotation Plugin
This plugin enables image annotation (adding markers with text interactively). Here are full features:

  • Adding a dynamic image as a background covering full width and full height of the visual element added on the page.

  • Zooming in/out on the background image

  • Dragging allowed if zoomed in (touch screen ready)

  • Reading coordinates X and Y (both px and percentage) on mouse movements over the Visual element (exposed states)

  • Reading coordinates data from Bubble App Type as markers on Visual Element “Canvas”.

  • Clicking a marker on Visual Element “Canvas” triggers an event “marker_is_clicked” and reading Current Data Cell (Marker) from Bubble database.

  • Clicking a background a on Visual Element “Canvas” triggers an event “background_is_clicked” with the ability to initiate some bubble actions on that event.
    annotations

Levon Terteryan

Founder @ Zeroqode

zeroqode-for-web-160x120

Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

Hello Levon,
I was trying out the image annotation plugin demo and the markers briefly show up, then disappear:

2018-11-20_08-16-30

I tried both Safari and Chrome. Am I missing something?

Thanks!

@malife we have fixed this issue, please upgrade to the plugin’s latest version, refresh the browser and try again
thanks!

@levon Would it be possible to add a feature to “store” the zoom level and position?

The idea is that I can zoom in on an image, make an annotation and store that “view” such that the next time I show this particular image, I can restore the zoom level and position. For example, let’s say that I zoom as follows:

And the next time I load this image, instead of loading the full zoomed out view, I load it as shown above.

This would be incredibly useful for apps that require to build reports (using for instance the Bubble Page to PDF plugin) to have the user configure the zoom on the detail he wants to show on the report, and persist this for report generation.

Thanks,
Mariano

Hi Mariano,
unfortunately we are overloaded with work right now and consider feature requests, maybe some time later

Hello Levon, No worries, I understand. Thank you for your prompt response.

1 Like

|45x45

gnelson

1h

Hello,

I’m finding that this works on my pc, my iPhone, but not on my iPad using both safari and chrome.

Any other reports of this issue? What can be done to resolve this?

Thanks,
George

Hello @gnelson

We received the inquiry also from the bubble forum - https://forum.bubble.io/t/image-annotation-new-plugin-from-zeroqode/39827/3
We’ll be back to you with an update on the matter asap.
thanks for understanding.

Hey zeroqode-team,
I purchased this plugin to show different markers on different image annotation elements within page. However both elements return the same annotation marker, regardless of how I set them up.
After looking into the plugin, it turns out that there is an issue with the ids of image annotation canvasses. When you add more than one canvas onto a page, they have the same id (see attached screenshot). ids should be random numbers, not the same value.

Can you fix this issue with the plugin?

Thanks!

Hello @max, thank you for reaching out!

Yes sure, we will fix that issue. Our team will develop an update of the plugin with bug fixes including the issue reported by you. When the update will be available I will let you know.

Best Regards,
Alex

Awesome, thanks a lot. Looking forward to the update :slightly_smiling_face:

1 Like

Hello,

@max

The updated version of the plugin is published. The last update allows showing different markers on different image annotation elements within the page.

@gnelson, the issue with flickering was also fixed

Please update the plugin to the latest version to have it working properly.

Best Regards,
Alex

Hi @alex.grimacovschi

Great, thanks for the fast delivery on this. However, it unfortunately still doesn’t solve the issue I was looking for:
Please see the attached picture for the problem scenario.
09
Thanks!

Hello @max,

Could you please provide a little more details regarding what exactly is needed to be in the plugin. I just want to make sure I understood your request correctly. The idea is to have different images of markers on different elements?

Looking forward to hearing from you.

Best Regards,
Alex

Hi @alex.grimacovschi

Yes, correct! Different elements with different markers.

Thanks!

@max

Ok, thank you for confirming. Our developers will update the plugin accordingly. I will let you know when the updated version will be available.

Best Regards,
Alex

Hello @max,

Our team started to work on update but unfortunately during the work was found that this functionality will not be possible to implement. I am afraid the current structure of the plugin does not allow having different markers on different objects.

I am sorry for any inconvenience this may have caused.

Best Regards,
Alex

Hey @alex.grimacovschi, I saw that you updated the plugin. In the Update description the functionality I was looking for is mentioned. Does it work now?
Thanks and stay safe!

Hello @max

Yes, we restructured the plugin and added new functionality to it, you can give it a try now. With the latest version, it is possible to add multiple elements on the same page and have unique markers for each element. In order to have the last functionalities available on your part please update the plugin to the latest version.

Best Regards,
Alex

Hello! I am currently developing a bubble app and this plugin is exactly what I need. Just one question, I tried the demo and when I create a new marker after dragging other markers, the markers I dragged returned to their original position. Is there a way to save and correct the new position?

Thanks!