Hello,
I purchased Image Annotation Plugin in order to make the following but i am not sure what i need to do and if it’s possible:
I have an image
i want to let my users to add 2 types of pins:
Include(green pin) and exclude (red pin)
The user will be able to add few pins on top of the image
and i will have in my db the two lists save like
under include field: 0:500,20;330,200:40
under exclude field: 44:44, 200:5
Is it possible?
image attached for example
Hi!!
Evrything is working good beside the icons, i can’t see the icon correctly - this is what i see, i have tried to change the icon url but still same thing. what can be the issue?
@Stephan
Hello @amityoushemla,
Thanks for reaching out to us.
Yes, you can create a workflow that adds two types of pins. You simply need to configure the images for them separately when you create them.
However, they should be in the same table, as set in the Image Annotation element.
Regarding your other inquiry, to ensure they display correctly, could you please first make sure that you are using a separate table for the markers’ Data Type you use in the element[image], and that you have set all the fields such as “ID,” “Text,” “Top,” and “Left” where you will put them[image].
And after creating a new pin with the action, please save it in the table as well. As an example, please check our demo page editor and try reproducing how it is set up there.
Could you please try that and let me know if everything is clear or if you have any other questions?
Thanks, and we look forward to your reply.
Best regards,
Stefan
Thank you so much!! sent you PM with a very short loom video
One critical question:
I saw your demo app but not sure i understand, i did the same like in the demo app and used a data types for the markers.
The thing is, that if i am creating a workflow one the user clicks on the image>create a new marker - then i am seeing the marker, so i am not sure i understand why i need to use also the workflow of “create pin img_annot_canvas_A”
What actually the “create pin img_annot_canvas_A” doing? also - when i do use this - i have this blue box icon and then it’s changed to the icon i set… anyway to fix it?
THANK YOU LIKE ALWAYS
Hello @amityoushemla,
Thank you for your question!
I’ve reviewed your request, and the “create pin” action is intended for creating and showing a pin on the image without saving it to the database.
If you’d like your workflow to automatically save and display the pins, you can use only the Bubble’s “Create a new thing” action and save it under markers. This will ensure the blue background doesn’t appear, and the pins will be displayed correctly.
Feel free to give it a try, and let me know if everything works smoothly for you.
Thanks, and I look forward to hearing from you!
Best regards,
Stefan
Thank you so much
Now i understand 
one very small but important to my client
is there any way to get the X and Y as soon as the user clicks? because there is a delay between the mouse click until capture the X and Y
If i am moving the mouse during this delay it will not be accurate
sent you 10 sec loom video:
Hello @amityoushemla,
Thank you for your message and for sharing the video.
I have checked your concern, and indeed the states you are using can modify slightly until you create a new marker in the data.
For your use-case, you can create two new states that, upon clicking on the image, will save the value from the element’s states “mouse_x_percent” there. Then, when you create the new marker, you will use the newly created state’s value instead of the one from the element. This workaround can be seen on the demo page as well for you to check out.
Could you please try this workaround and let me know how it works for you?
Thanks again, and I look forward to your reply.
Best regards,
Stefan
Thanks like always,
This is what i did:
When user clicks on the image, i save in custome state the X position, then in a different custom state the Y position, then creating the locaiton using those x and y, but still if the user clicks on the pin and move in this 1-2 seconds the pin location is wrong
see:
Hello @amityoushemla,
Thanks for your message.
I have looked into it and noticed the small delay as well, but only if someone does it quickly and intentionally. In any case, this small delay is caused by the Bubble workflow itself, as the event is triggered after you click on the Image Annotation element and the X/Y values are always changing.
For your use case, you might try setting the Create New Marker action first without any prior changes, and also remove the Only When condition from the event. This will give more time for the event to trigger.
Thanks for understanding. If you have any other questions, please let me know.
Have a great weekend ahead!
Best regards,
Stefan
