🖼 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