🖼 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

2 Likes

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

@levon, Issue appears to have been with my iPad. It had an update available and after that was installed this problem went away.

I do have a question though, is there a way to stop that horrible flickering every time a pin is added, sometimes it’s only a single flicker, often it’s a double flicker.

Thanks,
George

Hello there @gnelson, thank you for your report, our team will analyse it, meanwhile are you able so share with a screenshots of the issues, or a small video?

Thank you,
BR,
Nik.

1 Like

Hello @gnelson,

The updated version of the plugin with fixes of flickering was published. Please update the plugin to the latest version to have it working properly.

Best Regards,
Alex

Hi @levon and @ZeroqodeSupport,
I want to put the annotated images in a carousel with a repeating group and I have issues with the adjust height.
Some of the pictures are horizontal and others are vertical, and I don’t know how to make the vertical images to fit in the repeating group.
So far, when I click “yes”, the vertical pictures becomes too long compare to the horizontal ones, and when I click “no”, the vertical pictures are cropped.
Could it be possible to have an adjust width and do you have a way to share with us how to deal with it ?
Thanks !

Hi, @Bohemond!

Thanks for reaching out!

To help you better, could you please clarify here a bit by providing the screenshots with the result and screenshots of how it should work for you.

Currently, the plugin works so: whenever you upload an image, this image will be displayed as it is. It means, if it is vertical, then obviously it should be longer then horizontal one. Basically, the image display in the repeating group does not depend on the plugin itself.

Best,
Zeroqode Team

Hi @ZeroqodeSupport,

Thank you for your quick reply.
Please find below two screenshots of two carousels. Each time, the first one is made with images, the second one with the plugin. For the image, on the run-mode-rendering option, I selected “rescale”, there were also “stretch” and “adjust element height”.

For the first example, the second carousel is made with the adjusted height (adjust=“yes”). The vertical picture is too long compared to the other ones.

For the second example, the second is made without the adjusted height (adjust=“no”) but then the vertical picture is cropped and the vertical picture is not vertically aligned.

Capture d’écran 2020-11-06 à 17.52.49

Could you please add a “rescale image” feature to the plugin ? It would help to have the pictures vertically aligned too. Is there otherwise another way to solve this issue ?
Thank you in advance !

Hi, @Bohemond!

Apologies for the slow reply :pray:

We have taken into consideration the possibility to add a rescale feature. We need to see how feasible it is to implement. Once we have relevant info with regards to this, we’ll get in touch. Thanks for understanding :pray:

Best,
Zeroqode Team

1 Like

@levon @ZeroqodeSupport We got error messages on a configuration where nor the data, nor the bubble setup had changed (whereas we didn’t have these issues last week on friday). Can your team have a look at what’s going on here or let us know what we can do from our end? It seems like an issue with zeroqode’s cors service? (cors-anywhere-zq.herokuapp.com)

We are getting the exact same error today on our app. I have contacted support for assistance.

Just got a message from Igor & checked the error, this bug is fixed. Thanks @ZeroqodeSupport :heart_hands:

1 Like

Hi everyone,

Thank you for your patience. The Dev team has resolved the issue on the Heroku service side, and everything should be up and running now. Please check and let us know if the issue is resolved and if the plugins are functioning as expected. :folded_hands:

Wishing you a great Tuesday. Once again, we apologize for any inconvenience this may have caused. :sunflower:

Best regards,

Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

1 Like

Hello Guys, I have just treid to use your plugin within my app and received the following issue - I can’t figure out why, as I seems to have all of the fields and workflows properly assigned

Hi @oliver5,

Thank you for reaching out!

The error seems to be related to the MarkerId field not being set correctly in your Issue data type or the dynamic setup in the img_annot_canvas element.
Please check the following:

  1. Ensure the MarkerId is correctly assigned to each marker in your database.

  2. Double-check the dynamic setup of the img_annot_canvas element.

  1. Refer to the plugin documentation for setup guidance.

You can also check the plugin’s live demo page and demo editor to see how the plugin is configured there.

Let me know if you need further assistance or have more details to share.
Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

Hey, thank you for the response - I still think I have setup everything correct - also the assigning of the MarkerId - see image attached - I might schedule a call with zeroqode to get this fixed.

Hi @oliver5
Thanks for following up!

From your screenshot, it seems the MarkerId is being assigned correctly.
Since the setup looks fine but the issue persists, I recommend comparing your plugin configuration with our examples here one more time:

If you’re still running into trouble, you’re also welcome to request a Discovery Call with our team—we’d be happy to assist further.

Let me know if you need anything else!
Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

Hi @oliver5,

I hope you’re doing well!
I just wanted to follow up on my previous message and see if you were able to resolve the issue after reviewing the plugin information sources I’ve attached.

If you’re still encountering any problems, feel free to reach out again, and we can dive deeper into the issue.
You can also request a Discovery Call if you’d prefer more personalized assistance from our team.

Looking forward to hearing from you!

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3

Hello @ZeroqodeSupport , and thank you for reaching out again. I scheduled a Discovery Call for this week, which was replaced by you with an email correspondence with the support team. I did a screen recording session to explain the issue and got an answer that didn’t really help me to come further. I am quite sure, that the error is something easy on my side, but I don’t get any further with the recommendations I get as I always end up with the same recommendations. I could try to schedule a call again and hopefully don’t get redirected to mail again

Hi @oliver5,

I’ve responded to your inquiry regarding the Image Annotation Plugin via email.
After reviewing your Loom recording, I’ve provided some general suggestions that could help in resolving your issue.

To avoid any confusion, let’s continue our conversation on one channel.
Thank you for understanding.

Looking forward to hearing from you!

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble
Banner_Last3