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
Printable View
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
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
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.
That is just what I was after !! What a great reply to my request.
Thank You :-)
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
Brilliant !!
Thank you again.
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.Quote:
Originally Posted by Stupidiot
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.
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
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.”
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...
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.
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
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!
http://i55.tinypic.com/1zwjfcp.gif
http://i54.tinypic.com/rshgza.gif
http://i51.tinypic.com/rs4kld.gif
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.
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
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.
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.
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.
Marvelous work.
Thank you for this update.
Regards
Dave
Your're welcome. I still plan on adding more features. If you have any question or suggestions please let us know.
Cheers
I plan to look at it in more detail soon, just extremely busy at the moment.
Kind Regards
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.Quote:
Originally Posted by Spoo
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
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.
Not sure I understand your statement.
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.
Are you having problems with taking a snapshot? Are you saying that when you take a snapshot the dialog box gets in the way?
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.
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.
Aaaahh I see !! Yes I'm getting a result now.
Thanks for the instruction post..
Regards
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.
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