Results 1 to 34 of 34

Thread: Add Pushpin to JPG

  1. #1

    Thread Starter
    Junior Member
    Join Date
    Jun 2011
    Posts
    22

    Add Pushpin to JPG

    I've been asked if I can add a pushpin onto a jpg image sort of like a tooltip.
    The user wants to look at an image ( not street maps ) and put a pushpin on to a specific area in the jpg and add a comment.

    Is this possible ?

    Cheers

  2. #2
    PowerPoster Spoo's Avatar
    Join Date
    Nov 2008
    Location
    Right Coast
    Posts
    2,656

    Re: Add Pushpin to JPG

    Dave

    Sounds possible.
    In general terms, maybe something along these lines:
    • Load the image into a PictureBox or Image control
    • Add a MouseDown event to capture the x- and y-coords
    • At those coords (with appropriate offset), place your pushpin image
    • At those coords (with appropriate offset), place a textbox to hold the comment

    Spoo

  3. #3
    PowerPoster
    Join Date
    Jan 2008
    Posts
    11,074

    Re: Add Pushpin to JPG

    Seems like I have a VB project that does what Spoo suggested. There is no picture in the picturebox but this will demonstrate the same thing. Run the project as is and move your mouse over the picture box. Nothing happens. Now, hold down the left button and do it again. You will see a pushpin following the mouse. Let go of the left button you will see a text box appear.

    Another approach is to use a push-pin.ico as an icon for the mouse pointer whenever the mouse is hovering over the big image. Of course, you will still need a transparent gif of the same push-pin so as to leave it "pinned" once you do a mouse click.
    Attached Files Attached Files
    Last edited by jmsrickland; Jun 21st, 2011 at 02:22 PM.


    Anything I post is an example only and is not intended to be the only solution, the total solution nor the final solution to your request nor do I claim that it is. If you find it useful then it is entirely up to you to make whatever changes necessary you feel are adequate for your purposes.

  4. #4

    Thread Starter
    Junior Member
    Join Date
    Jun 2011
    Posts
    22

    Re: Add Pushpin to JPG

    That is just what I was after !! What a great reply to my request.

    Thank You :-)

  5. #5
    Lively Member Stupidiot's Avatar
    Join Date
    Apr 2011
    Location
    India
    Posts
    95

    Re: Add Pushpin to JPG

    I have changed jmsrickland's code slightly...see the attachment

    Add this code to cancel the pushpin:

    Private Sub Image1_DblClick()
    Image1.Visible = False
    Text1.Text=""
    Text1.Visible = False
    End Sub
    Attached Files Attached Files
    Last edited by Stupidiot; Jun 18th, 2011 at 04:55 AM.

  6. #6

    Thread Starter
    Junior Member
    Join Date
    Jun 2011
    Posts
    22

    Re: Add Pushpin to JPG

    Brilliant !!
    Thank you again.

  7. #7
    PowerPoster
    Join Date
    Jan 2008
    Posts
    11,074

    Re: Add Pushpin to JPG

    Quote Originally Posted by Stupidiot View Post
    I have changed jmsrickland's code slightly...see the attachment

    Add this code to cancel the pushpin:

    Private Sub Image1_DblClick()
    Image1.Visible = False
    Text1.Text=""
    Text1.Visible = False
    End Sub
    I had that same exact code in the project but took it out as it caused problems. You should use Image1_MouseDown and check for Right click then make the image and textbox invisible.

    Code:
    Private Sub Image1_MouseDown(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)
     If Button = vbLeftButton Then
       Image1(Index).ZOrder 0
     Else
       Image1(Index).Visible = False
       Text1(Index).Visible = False
     End If
    End Sub

    By the way: The pin image is in an Image control so you can make it smaller or larger if you wish.
    Last edited by jmsrickland; Jun 18th, 2011 at 12:27 PM.


    Anything I post is an example only and is not intended to be the only solution, the total solution nor the final solution to your request nor do I claim that it is. If you find it useful then it is entirely up to you to make whatever changes necessary you feel are adequate for your purposes.

  8. #8
    Lively Member Stupidiot's Avatar
    Join Date
    Apr 2011
    Location
    India
    Posts
    95

    Re: Add Pushpin to JPG

    jmsrickland,

    If you find my post as insult, it’s your fault and I don’t mind and I never claimed that my code is better than your “brilliant” code. Actually I have changed your code not slightly but completely….


    “I had that same exact code in the project but took it out as it caused problems. You should use Image1_MouseDown and check for Right click then make the image and textbox invisible.”

    “It doesn't work anymore. You are not using an array so you have only one pin and the same text box.”


    I think you should read the requirement of the user once more:

    I've been asked if I can add a pushpin onto a jpg image sort of like a tooltip.
    The user wants to look at an image (not street maps) and put a pushpin on to a specific area in the jpg and add a comment.


    You cannot insist/declare like that… You may have “brilliant” ideas…that you can utilize when coding…but the results must be matching with the user’s requirement… not yours
    Last edited by Stupidiot; Jun 18th, 2011 at 02:59 PM.

  9. #9
    Lively Member Stupidiot's Avatar
    Join Date
    Apr 2011
    Location
    India
    Posts
    95

    Re: Add Pushpin to JPG

    I had closed this topic…

    but it seems like you were researching on my post last few days and trying to give your reply / editing the reply, as per the research results, on daily basis…

    I want to clarify these points:

    Your instruction was: “You should use Image1_MouseDown and check for Right click then make the image and textbox invisible.”

    And your Declaration was: “It doesn't work anymore. You are not using an array so you have only one pin and the same text box.”

  10. #10
    Lively Member Stupidiot's Avatar
    Join Date
    Apr 2011
    Location
    India
    Posts
    95

    Re: Add Pushpin to JPG

    I mean i had stopped replying to your foolish thoughts and self justification dramas:

    Now your ego/complex/frustration came out with all its force. At least my post helped me to get a clear picture about you…

    I don't want to talk anymore...

  11. #11
    VB-aholic & Lovin' It LaVolpe's Avatar
    Join Date
    Oct 2007
    Location
    Beside Waldo
    Posts
    19,541

    Re: Add Pushpin to JPG

    Gentlemen/Ladies?
    These last few posts have nothing to do with the OP's thread or problem.
    Suggest you both address your issues with private messages.
    Insomnia is just a byproduct of, "It can't be done"

    Classics Enthusiast? Here's my 1969 Mustang Mach I Fastback. Her sister '67 Coupe has been adopted

    Newbie? Novice? Bored? Spend a few minutes browsing the FAQ section of the forum.
    Read the HitchHiker's Guide to Getting Help on the Forums.
    Here is the list of TAGs you can use to format your posts
    Here are VB6 Help Files online


    {Alpha Image Control} {Memory Leak FAQ} {Unicode Open/Save Dialog} {Resource Image Viewer/Extractor}
    {VB and DPI Tutorial} {Manifest Creator} {UserControl Button Template} {stdPicture Render Usage}

  12. #12

    Thread Starter
    Junior Member
    Join Date
    Jun 2011
    Posts
    22

    Re: Add Pushpin to JPG

    Folks.

    I'm really grateful for all the assistance of my original posting. The examples and advise have helped me to get a better understanding of the project going forward. Both suggestions have served a purpose and invoked many thoughts for exploration. All examples on this post have helped me and would like to thank all contributors. It's nice to see the amount of interest and knowledge so freely available at such short notice. So, great work guy's and I am very grateful for all your expertise.

    Kind Regards

    Dave

  13. #13
    Lively Member Stupidiot's Avatar
    Join Date
    Apr 2011
    Location
    India
    Posts
    95

    Re: Add Pushpin to JPG

    Jmsrickland’s comments gone!!!

    I believe he removed his comments, not any moderator, if the moderator, then my comments won’t stay alive…He showed his brilliancy here also, amazing! If somebody read this thread…what they think?

    So I have a small code here to solve this: A screen shot of previous stage!


    Last edited by Stupidiot; Jun 20th, 2011 at 06:38 PM.

  14. #14
    PowerPoster
    Join Date
    Jan 2008
    Posts
    11,074

    Re: Add Pushpin to JPG

    I have made a few changes to the push-pin project. It allows the user the option of using only one pin or multiple pins. When the application closes the current pin(s) layouts are saved. When the app is restarted it restores the pin positions and text to where it was. User can drag pin from one position to another in which case the text remains intact or user can left mouse click on the large picture area and the pin will reposition itself however, in this case, the text is lost and must be re-entered. Right mouse click on any pin will remove the pin and the text.

    I was going to add a few more features to it like having more than one picture with push-pins that can be saved and reloaded or adding a Open/Save dialog so user can select which picture to load or Save As but I guess I'll leave that to someone else.
    Attached Files Attached Files


    Anything I post is an example only and is not intended to be the only solution, the total solution nor the final solution to your request nor do I claim that it is. If you find it useful then it is entirely up to you to make whatever changes necessary you feel are adequate for your purposes.

  15. #15

    Thread Starter
    Junior Member
    Join Date
    Jun 2011
    Posts
    22

    Re: Add Pushpin to JPG

    Hi
    This is really interesting and progressed to give many options ( thanks)..
    Can I just spur some thought as going forward.

    We deal with thousands of images per year and we have to send images to insurance engineers showing damage to accident inflicted vehicles.
    The idea of the pushpin is to mark area's of damage on a jpg, save the image(s) with the pushpin(s) and comment(s), then once saved the image can be emailed, archived etc.
    So the many examples above are really great and perhaps close to where I want to be.
    If you guy's can take another look and take the thoughts of overlaying the pushpin(s), Comment(s), the project will be really exiting to take forward.

    Great work by all once again.

    Regards

    Dave
    Attached Images Attached Images  

  16. #16
    PowerPoster
    Join Date
    Jan 2008
    Posts
    11,074

    Re: Add Pushpin to JPG

    I'm going to do some more work on this project. I want to make it so it is usable for you as well as anyone else who may have an interest. I am going to add features like load new picture, load existing pictures w/pins (already does that but will improve on it a bit), save pictures w/pins as a project, make pins smaller or larger (I ran into this when I was trying to push pins into a small area and the pins were too big for the area), and a few more features.

    Can you elaborate on what you mean by overlaying the pushpin(s), Comment(s). I don't quite understand that.


    Anything I post is an example only and is not intended to be the only solution, the total solution nor the final solution to your request nor do I claim that it is. If you find it useful then it is entirely up to you to make whatever changes necessary you feel are adequate for your purposes.

  17. #17

    Thread Starter
    Junior Member
    Join Date
    Jun 2011
    Posts
    22

    Re: Add Pushpin to JPG

    Hi

    Seems like you may cover everything here !!
    Elaborating on the overlay was meaning to save the image with pins and text intact, presuming the pins would need overlaying on the original image.

    To break down the process:

    Load image.
    Mark area(s) of damage with pushpins ( usually more than one area of damage )
    Save image.

    Send image to recipient who can see visually ( as the above post image ) all areas of damage.
    The image in the above posting is really what we would want our insurer partners to see. They would view the image and instantly see the area's requiring attention along with a comment.
    I hope this makes sense, if not please ask.

    Thanks again.

  18. #18
    PowerPoster
    Join Date
    Jan 2008
    Posts
    11,074

    Re: Add Pushpin to JPG

    Here is version 3. I have added some features but not all. I still have plans on adding more like a button to send the selected picture via email but for now it's not too bad.
    Attached Files Attached Files


    Anything I post is an example only and is not intended to be the only solution, the total solution nor the final solution to your request nor do I claim that it is. If you find it useful then it is entirely up to you to make whatever changes necessary you feel are adequate for your purposes.

  19. #19

    Thread Starter
    Junior Member
    Join Date
    Jun 2011
    Posts
    22

    Re: Add Pushpin to JPG

    Marvelous work.
    Thank you for this update.

    Regards

    Dave

  20. #20
    PowerPoster
    Join Date
    Jan 2008
    Posts
    11,074

    Re: Add Pushpin to JPG

    Your're welcome. I still plan on adding more features. If you have any question or suggestions please let us know.


    Anything I post is an example only and is not intended to be the only solution, the total solution nor the final solution to your request nor do I claim that it is. If you find it useful then it is entirely up to you to make whatever changes necessary you feel are adequate for your purposes.

  21. #21

    Thread Starter
    Junior Member
    Join Date
    Jun 2011
    Posts
    22

    Re: Add Pushpin to JPG

    Cheers

    I plan to look at it in more detail soon, just extremely busy at the moment.

    Kind Regards

  22. #22
    PowerPoster Spoo's Avatar
    Join Date
    Nov 2008
    Location
    Right Coast
    Posts
    2,656

    Re: Add Pushpin to JPG

    JMS

    I haven't looked at your zip, so forgive me if it does
    not apply, but a thought...

    Instead of textbox appearing next to the pushpin (per
    Dave's post #15), perhaps you could have a small
    textbox with just an ID number.

    Then have a listbox or flexgrid showing said numbers,
    with added columns for comments.

    The reasoning behind this thought is that if there are
    several adjacent pushpins, a "descriptive" textbox could
    get in the way.

    An "ID number" textbox would be less likely to do so.

    Spoo

  23. #23
    PowerPoster
    Join Date
    Jan 2008
    Posts
    11,074

    Re: Add Pushpin to JPG

    Quote Originally Posted by Spoo View Post
    JMS

    I haven't looked at your zip, so forgive me if it does
    not apply, but a thought...

    Instead of textbox appearing next to the pushpin (per
    Dave's post #15), perhaps you could have a small
    textbox with just an ID number.

    Then have a listbox or flexgrid showing said numbers,
    with added columns for comments.

    The reasoning behind this thought is that if there are
    several adjacent pushpins, a "descriptive" textbox could
    get in the way.

    An "ID number" textbox would be less likely to do so.

    Spoo
    Yes, I gave that a lot of thought but because of the way they need to handle this I decided to go ahead with the text notepad idea. The main reason for the textbox "notepad" is so for those interested they can see immediately upon mouse over what the description is. Also, they use this to take a snap shot of the area where the pin is and the notepad and send the snapshot on to some other company that has an interest. I realize that there is a possibility of over-crowding the pins but that is something they will have to deal with and keep the pins far enough apart so that the pins wont over crowd each other. The app allows the user to select which notes are to be visible and which are not to be visible. However, your idea could be implemented into the application and have it as an option rather than the only way to show information.


    Anything I post is an example only and is not intended to be the only solution, the total solution nor the final solution to your request nor do I claim that it is. If you find it useful then it is entirely up to you to make whatever changes necessary you feel are adequate for your purposes.

  24. #24
    PowerPoster Spoo's Avatar
    Join Date
    Nov 2008
    Location
    Right Coast
    Posts
    2,656

    Re: Add Pushpin to JPG

    JMS

    Ah, I did not realize that the textbox was "triggered" by a
    mouse over. That would lead to less initial (ahem) "collisions"
    of textboxes.

    Carry on !!

    Spoo

  25. #25

    Thread Starter
    Junior Member
    Join Date
    Jun 2011
    Posts
    22

    Re: Add Pushpin to JPG

    Hi
    I notice with the snapshot the textbox is closed and there is a form showing from behind.
    Ideally the text is open and shown as part of the image (jpg) for sending to the recipient.
    Attached Images Attached Images  

  26. #26
    PowerPoster
    Join Date
    Jan 2008
    Posts
    11,074

    Re: Add Pushpin to JPG

    Not sure I understand your statement.


    Anything I post is an example only and is not intended to be the only solution, the total solution nor the final solution to your request nor do I claim that it is. If you find it useful then it is entirely up to you to make whatever changes necessary you feel are adequate for your purposes.

  27. #27

    Thread Starter
    Junior Member
    Join Date
    Jun 2011
    Posts
    22

    Re: Add Pushpin to JPG

    Sorry I was a bit vague.
    The image above as in Post #15 is exactly how we would like to send to the recipient with the pushpin showing along with the text comment. The recipient doesn't need the archive or the pba file.
    Only the image is required.
    Currently when a snapshot is taken the image produced is as posted.
    Attached Images Attached Images  

  28. #28
    PowerPoster
    Join Date
    Jan 2008
    Posts
    11,074

    Re: Add Pushpin to JPG

    Are you having problems with taking a snapshot? Are you saying that when you take a snapshot the dialog box gets in the way?


    Anything I post is an example only and is not intended to be the only solution, the total solution nor the final solution to your request nor do I claim that it is. If you find it useful then it is entirely up to you to make whatever changes necessary you feel are adequate for your purposes.

  29. #29

    Thread Starter
    Junior Member
    Join Date
    Jun 2011
    Posts
    22

    Re: Add Pushpin to JPG

    Ok

    Ive just run the project, imported an image and just selected to take a snapshot. This is what is produced. Exactly as shown here. This is the very same image as produced by the snapshot showing the dialog on top of the image.

    If I run the project and load the archive ( USA.jpg ) I can move the pushpins or comment them etc.
    If I load a new image I cannot add any pushpins at all. All I can do is take a snapshot.
    Attached Images Attached Images  

  30. #30
    PowerPoster
    Join Date
    Jan 2008
    Posts
    11,074

    Re: Add Pushpin to JPG

    Ive just run the project, imported an image and just selected to take a snapshot. This is what is produced. Exactly as shown here. This is the very same image as produced by the snapshot showing the dialog on top of the image.

    If I run the project and load the archive ( USA.jpg ) I can move the pushpins or comment them etc.
    If I load a new image I cannot add any pushpins at all. All I can do is take a snapshot


    You have to load an archive (???.pba) to be able to work with it. If you load only a picture (???.jpg) that's all it is, just a picture. You cannot work with a loaded picture. Select 'New' and it will prompt you to select the background picture you want. Now you have a new archive and you can work with it. Look at the Titlebar; it says - [untitled]. You must save it as an archive to be able to reload it again. The Load Picture option was a thought I had but I never implemented it so just ignore 'Load Picture' option unless you just want to look at a picture but you cannot do anything with it. In a future version I will implement the 'Load Picture' to have some functionality, but it wasn't a major part of the project so I just left it as is.

    Now, the big problem. If you do not move the Save Dialog box it shouldn't appear in the snap shot, at least it doesn't on my computer. However, if you do move it, it will appear and I will have to figure out a way to prevent that. So, just don't move the dialog box. I will have it corrected in the next version V3.1

    Also, you have a button that if you push it you can drag a red box on any part of the picture and take a snap shot of the area inside the red box. This is called the 'Save Selected As Snapshot'. If you just use 'Save As Snapshot' option you get the entire picture but 'selected' gets you just a portion of the entire picture in case you only want to have that area saved.

    Notice the two buttons that shows a large pin and a small pin. Left mouse click on any pin. Now press one of the two buttons and the pin will change size to larger or smaller. Once you do this all pins from that point on will be the new size. If you want to return to the original size you will need to do another resize to the size you want.

    I am going to work on the dialog box showing in the snap shot today and hope I will be able to clean it up but for now just don't move the box and I believe it will not appear in your output picture.

    Remember, I still have more ideas; it's just getting to them.


    Anything I post is an example only and is not intended to be the only solution, the total solution nor the final solution to your request nor do I claim that it is. If you find it useful then it is entirely up to you to make whatever changes necessary you feel are adequate for your purposes.

  31. #31

    Thread Starter
    Junior Member
    Join Date
    Jun 2011
    Posts
    22

    Re: Add Pushpin to JPG

    Aaaahh I see !! Yes I'm getting a result now.
    Thanks for the instruction post..

    Regards

  32. #32
    PowerPoster
    Join Date
    Jan 2008
    Posts
    11,074

    Re: Add Pushpin to JPG

    Did you notice that you can right click on a pin or a text box and get an option? Also, right click on the picture area and you will be given an option to add a new pin. Right click on a pin and you get an option to remove it. Right click on a text pad and you get an option to keep it visible so it will appear in the snap shot.


    Anything I post is an example only and is not intended to be the only solution, the total solution nor the final solution to your request nor do I claim that it is. If you find it useful then it is entirely up to you to make whatever changes necessary you feel are adequate for your purposes.

  33. #33
    PowerPoster
    Join Date
    Jan 2008
    Posts
    11,074

    Re: Add Pushpin to JPG

    Dave,

    I think problem is resolved (at least I hope it is).

    Make the following changes marked in Red

    Code:
    Private Sub CaptureImage(FilePath As String)
     Dim SelectedImage As PictureBox
     
     Set SelectedImage = Me.Controls.Add("VB.PictureBox", "SelectedImage")
    
     SelectedImage.AutoRedraw = True
     SelectedImage.Visible = False
     SelectedImage.Appearance = 0
     SelectedImage.BorderStyle = 0
     SelectedImage.ScaleMode = vbPixels
     
     SelectedImage.Width = Abs(RubberBandRect.Width)
     SelectedImage.Height = Abs(RubberBandRect.Height)
     
     DoEvents
     
     BitBlt SelectedImage.hDC, 0, 0, RubberBandRect.Width, RubberBandRect.Height, picPinBoard.hDC, RubberBandRect.Left, RubberBandRect.Top, vbSrcCopy
    
     SaveJPG SelectedImage.Image, FilePath, 80
      
     Me.Controls.Remove SelectedImage
    End Sub


    Anything I post is an example only and is not intended to be the only solution, the total solution nor the final solution to your request nor do I claim that it is. If you find it useful then it is entirely up to you to make whatever changes necessary you feel are adequate for your purposes.

  34. #34

    Thread Starter
    Junior Member
    Join Date
    Jun 2011
    Posts
    22

    Thumbs up Re: Add Pushpin to JPG


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width