The Image Annotation plugin provides an interactive way to annotate images within your Bubble app. It allows users to add markers with text to images, enabling detailed visual feedback and enhanced interactivity. The plugin also supports background image zooming, dragging, and coordinate reading, making it ideal for applications requiring detailed image manipulation and annotation.
Usage Features:

- Allows the addition of dynamic images as backgrounds that cover the full width and height of the visual element on the page.
- Supports zooming in and out on the background image.
- Enables dragging functionality when zoomed in, optimized for touch screens.
- Reads and displays coordinates (X and Y) in both pixels and percentages during mouse movements over the visual element, available as exposed states.
- Provides the ability to read coordinate data from the Bubble app and place markers on the visual element canvas.
- Clicking a marker on the canvas triggers the 'marker_is_clicked' event and retrieves the associated data from the Bubble database.
- Clicking the background on the canvas triggers the 'background_is_clicked' event, which can be used to initiate Bubble workflow actions.

 



Feedback



FAQ

- How do I set up the background image for annotation?  
Simply add the image to the plugin’s background settings. The image will automatically stretch to fit the full width and height of the visual element, allowing for easy annotation.

- Can I make the background image draggable?  
Yes, the plugin allows users to drag the background image, especially when zoomed in. This makes it easier to annotate specific areas of the image, even on touchscreens.

- Is there a way to get the coordinates of the mouse over the image?  
Yes, you can access the X and Y coordinates of the mouse when hovering over the image. The plugin provides both pixel-based and percentage-based coordinates, available as exposed states.

- What happens when I click on a marker?  
Clicking on a marker triggers an event, and you can use it to initiate actions in your Bubble app, such as displaying additional information or triggering workflows based on the marker’s data.

- Can I use the plugin with dynamic data from my Bubble app?  
Yes, the plugin allows you to use dynamic data, placing markers on the image based on that data. It enables dynamic, context-sensitive annotation.

 





Other plugins from Zeroqode

- Pricing Map Like Airbnb Plugin for Bubble
- Heatmap on Image Click plugin for Bubble
- Image Map Generator Plugin for Bubble




Support

If you still have questions or unresolved issues, you can contact us.


Risk-free Trial

The most risk-free way to try out this plugin is to subscribe to it. If you unsubscribe a few days later you will be charged on pro-rata basis, so for example if the plugin monthly price is $5 then you’d pay only 17¢ per day ($5/30 days)!