How draw at runtime in a web page (aspx), a shape over a picture

[eromeroma]

Hi everybody:

I need help to know how can I draw at runtime in a web page (aspx), a shape over a picture, just like tag somebody in Facebook.
¿Which are the tools I need to do this? I prefer VB .Net but any idea is welcome.
Thanks

[Mr.M]

Mmm I think you can first try to find a way to keep track of the mouse pointer first so that you will be able to draw square over a particular pixel.

Use this link http://www.social.technet.microsoft.com/wiki/contents/articles/19859.vb-net-how-to-make-an-oval-triangle-pentagon-hexagon-or-octagon-for-a-control-or-a-form.aspx to get idea of how the controls are drawn but remember you don't want the square control you drawn to be there even when the cursor has moved from an image so that means you will have to only draw it only when the mouse is over the image.

Keep in mind that the image may have let say 3 faces that you may like to tag so that is why I said you should find a way to keep track of mouse point and only draw square around that place where the cursor is.

Now if you would like to add something on a tagged image I think you can for now keep track of the pixel selected and the open another window on a new tab which will only be visible when you have clicked the control, this page should have a textbox that will allow a user to add something for track back purpose at the moment make that textbox have a small max text length and also handle the spaces because the user may type "John Smith" so you must handle the space by "-" so that it when the user come again and place a mouse over the same image he/should get a control that will display this.

Now coming to displaying back the tags this a bit complex and it slower down the process so I think you will find a better way to work around it, but I will prefer that you create a database or folder and when ever a user is tagging an image capture that tagged image and save it on either folder or database using the tag that the user typed as I said you should handle the spaces with - so that you can trace it easily.

Once you done that here it comes a complex part of submitting back the tag "meaning when the user point an image so that the tag will be displayed". Mmmm for displaying I think you should draw the label or find a better way to populate the popup or balloon message which will contains the name of the file which is a tag name like "John Smith" remember that at this time your tag maybe "John-Smith" so you should replace the - with a space for displaying purpose using regex.

To spot which image or to see which image a user has pointed and verify that it match any image in your database/folder where you kept your tagged images use this link to find out how it is done.
1) http://www.stackoverflow.com/questions/10899828/vb-net-check-if-image-existing-in-another-image
2) http://www.codeproject.com/Articles/617613/Fast-Pixel-Operations-in-NET-With-and-Without-unsa
3) http://www.vbforums.com/showthread.php?474786-capture-and-compare-images

Hope this will help give you idea and options on completing your project.

[Mr.M]

Ow forgot to mention that the created control should hide when the mouse move out of an image or pixel and also this create unintended tags so find a way maybe count each click and let say if the user click 2 times on an image that it can be tagged because someone may click image to view, and or save it so you don't want to create unintended tags when a user was only opening the image to view or save it.

[Mr.M]

Ow forgot to mention that the created control should hide when the mouse move out of an image or pixel and also this create unintended tags so find a way maybe count each click and let say if the user click 2 times on an image that it can be tagged because someone may click image to view, and or save it so you don't want to create unintended tags when a user was only opening the image to view or save it. Or you can use this to create the button when the mouse is over the image

Dim tTag As New Button
tTag.ID = "btnTag"

Me.Controls.Add(tTag)
tTag.Text = "Tag Me"
tTag.BackColor = Color.Aqua
tTag.ForColor = Color.White
tTag.BorderStyle = BorderStyle.Dotted

Well when I tried it out it required me to add it inside a form tag with runat=server

So I thing you will be able to write that because I'm running out of time at the moment but will follow up this post. Also you should hide the button because it apparently visible and it seems as if I didn't make it be created on runtime.