Results 1 to 24 of 24

Thread: image map in vb.net?

  1. #1

    Thread Starter
    Lively Member
    Join Date
    Apr 2009
    Posts
    69

    image map in vb.net?

    Hello, I have a small app I'm working on in VB.NET. On a form I have an image of Ohm's Law Wheel, which I attached. I want the user to be able to click any one of these formulas and then that calculation can be performed. So, is there a way to do an imagemap type control like in html? Or do I need to split this image up and do it that way? Any help would appreciated...

    http://www.vbforums.com/attachment.p...1&d=1283193100
    Attached Images Attached Images  

  2. #2
    Master Of Orion ForumAccount's Avatar
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    2,802

    Re: image map in vb.net?

    The short answer is yes. However, it depends how complex you want this. You could pretty easily take some basic coordinate data and hit test against it on a click. The complexity comes in if you are wanting colors to change when a person highlights over the formula etc... In that case you would have to draw that whole image yourself.

  3. #3

    Thread Starter
    Lively Member
    Join Date
    Apr 2009
    Posts
    69

    Re: image map in vb.net?

    Ok, changing the colors is not really necessary... I will have labels and textbox controls near by that will react to the click so it will definitely be apparent when a different formula has been clicked. But how do I do coordinates? Can you point me in the right direction?

    Ok, I figured out how to display coordinates of the mouse pointer while it's over the image, that wasn't so bad.. but I guess now I have to hover over each area of the wheel and write down the coordinates of the shape containing each formula... would I then have to do like a case select type logic to say if the click was within these coordinates, do this, etc?
    Last edited by CanaanP; Aug 30th, 2010 at 02:36 PM.

  4. #4
    Master Of Orion ForumAccount's Avatar
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    2,802

    Re: image map in vb.net?

    Take a look at this sample project...
    Attached Files Attached Files

  5. #5

    Thread Starter
    Lively Member
    Join Date
    Apr 2009
    Posts
    69

    Re: image map in vb.net?

    Wow, there's a lot in there that is above my head. But it does appear to be exactly what I want. One thing though, is it possible for this to be done invisibly? I don't want the blue lines to show at all. But I will try to digest all of this and see what I can learn from it. Thanks.

  6. #6
    Master Of Orion ForumAccount's Avatar
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    2,802

    Re: image map in vb.net?

    Yeah, just comment or remove the code out. You will see it in the Paint event handler of the PictureBox.

  7. #7

    Thread Starter
    Lively Member
    Join Date
    Apr 2009
    Posts
    69

    Re: image map in vb.net?

    I am having trouble figuring out how to define the next polygon... I thought that if I copied your subs that mention polygonf and pointf and just use something else like polygon1 and point1 I should be ok, but I'm doing something wrong... can you give me a hint on how to establish a new polygon? I already have the coordinates I want to use, I just don't know how to write the code. Thanks

  8. #8
    Master Of Orion ForumAccount's Avatar
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    2,802

    Re: image map in vb.net?

    The only part you would have to change is this part:


    vb.net Code:
    1. '//...code
    2.  
    3.     '//constructors
    4.     Public Sub New()
    5.  
    6.         Dim pts As New List(Of PointF)()
    7.  
    8.         pts.Add(New PointF(70, 160))
    9.         pts.Add(New PointF(215, 244))
    10.         pts.Add(New PointF(242, 217))
    11.         pts.Add(New PointF(159, 71))
    12.         pts.Add(New PointF(70, 160))
    13.  
    14.         Me.formulas.Add(New Formula(New PolygonF(pts.ToArray()), "P=RI^2"))
    15.  
    16.         Me.InitializeComponent()
    17.  
    18.         Me.PictureBox1.Image = My.Resources.OhmsLawWheel
    19.  
    20.     End Sub
    21.  
    22.     '//...code

    This is where I create an object to store the coordinate data. So if you have the coordinate data for the next polygon you would make it look like this:

    vb.net Code:
    1. '//...code
    2.  
    3.     '//constructors
    4.     Public Sub New()
    5.  
    6.         Dim pts As New List(Of PointF)()
    7.  
    8.         pts.Add(New PointF(70, 160))
    9.         pts.Add(New PointF(215, 244))
    10.         pts.Add(New PointF(242, 217))
    11.         pts.Add(New PointF(159, 71))
    12.         pts.Add(New PointF(70, 160))
    13.  
    14.         Me.formulas.Add(New Formula(New PolygonF(pts.ToArray()), "P=RI^2"))
    15.  
    16.         '//create next polygon
    17.         pts = New List(Of PointF)()
    18.         pts.Add(New PointF(X, Y))
    19.         pts.Add(New PointF(X2, Y2))
    20.         '//etc...
    21.         pts.Add(New PointF(X, Y))
    22.         Me.formulas.Add(New Formula(New PolygonF(pts.ToArray()), _
    23.                                                  "Formula XYZ"))
    24.  
    25.         Me.InitializeComponent()
    26.  
    27.         Me.PictureBox1.Image = My.Resources.OhmsLawWheel
    28.  
    29.     End Sub
    30.  
    31.     '//...code

    The project I posted is a very rough draft but you can adapt its concepts to suit your needs.

  9. #9

    Thread Starter
    Lively Member
    Join Date
    Apr 2009
    Posts
    69

    Re: image map in vb.net?

    Got it, thank you very much... this is awesome.

  10. #10
    Member kamakaki's Avatar
    Join Date
    Jul 2011
    Location
    Greece
    Posts
    59

    Re: image map in vb.net?

    Nice code.

    If someone can help for this.

    I have this two List of points

    Code:
    ublic Sub New()
    
            Dim pts As New List(Of PointF)()
    
            pts.Add(New PointF(70, 160))
            pts.Add(New PointF(215, 244))
            pts.Add(New PointF(242, 217))
            pts.Add(New PointF(159, 71))
            pts.Add(New PointF(70, 160))
    
            Me.formulas.Add(New Formula(New PolygonF(pts.ToArray()), "P=RI^2"))
    
            pts = New List(Of PointF)()
            pts.Add(New PointF(278, 42))
            pts.Add(New PointF(278, 203))
            pts.Add(New PointF(243, 218))
            pts.Add(New PointF(160, 72))
    
            Me.formulas.Add(New Formula(New PolygonF(pts.ToArray()), "E^2/R"))
    
            Me.InitializeComponent()
    
            Me.PictureBox1.Image = My.Resources.OhmsLawWheel
    How to change this code (or what ever)
    Code:
    Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
    
            For Each f In Me.formulas
                Using p As New Pen(Color.Blue, 4)
                    e.Graphics.DrawPolygon(p, f.Polygon.Points)
                End Using
            Next
    
        End Sub
    How to show blue line in only one list of points, where the mouse is clicking or mouse is over???
    what - how -where - when - who ...(like all newbies )

  11. #11
    New Member
    Join Date
    Apr 2015
    Posts
    8

    Re: image map in vb.net?

    This is really excellent code, ForumAccount - thanks for sharing. I am having great fun using this, but have two questions:

    1/ How would it be possible to adapt the code so that it causes an event with mouse hover and mouse leave? I am trying to turn on an image when passing over a certain polygon, and turn it off again when the mouse moves away from that polygon. I thought that it would be the same as mouse_click, but I am told that e.Location is not a member of System.EventArgs.

    2/ Imagine a form with 2 PictureBoxes. I am trying to have 2 different image-maps on my form: one for each of the picture boxes, but can't seem to get 2 instances of the code running on the same page. Can you, or anyone else, give me a clue as to how to do this, please?

    Thanks in advance for your help.

  12. #12
    Sinecure devotee
    Join Date
    Aug 2013
    Location
    Southern Tier NY
    Posts
    6,582

    Re: image map in vb.net?

    For mouse hover and leave, you are going to probably have to emulate those yourself, using the MouseMove event of the picturebox to set what polygon is currently active, and a variable for a countdown to determine if you've paused long enough for a "hover event", and a flag to enable the hover event detection when transiting polygons (the hover event only occurs once after entry into a control, not every time the mouse is paused, i.e. to get a second hover event you have to leave the control and then reenter the control and pause moving the mouse).
    Perhaps you don't really need the hover event, but rather an enter and leave event, which again have to be emulated by code in the MouseMove event of the picturebox (unless you wanted to create your own shaped controls to overlay the various polygon areas).

    I haven't looked at the code so can't comment on question 2.

    <edit>
    I just took a quick look at the code from the .rar file, and did a simple change to only show the blue lines when you are in one of the polygons, and only that one. That means if you are not in any of them, no blue line will be showing.

    Something along these lines may be all you need for question 1.

    Only including some excerpts of the original code with the new lines added so you can start with the original example for comparison. The new lines are at a different indention level (I use 2, the default is 4), so that may help identifying the new lines below in addition to the added comments.

    A synopsis of the changes.
    1. Add a variable to keep track of the "formula" the mouse is currently in
    2. Add a MouseMove event handler to update that variable and notice when it changes (to another formula or nothing)
    3. Change the PictureBox1_Paint to only paint the blue lines in the current formula (the one the mouse is in, if any)
    Code:
    Public Class Form1
    
        '//fields
        Private formulas As New List(Of Formula)()
      Private MouseIn As Formula     'track which Formula polygon the mouse is in
    
      Private Sub PictureBox1_MouseMove(sender As Object, e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove
        Static lastMouseIn As Formula = Nothing      'keep track of what forumula we are in, so can note when we transition from one to another (or outside of any)
    
        MouseIn = Me.formulas.FirstOrDefault(Function(f) f.Polygon.Contains(e.Location))    'See if we are in one of the formula polygons
        If MouseIn IsNot lastMouseIn Then                                                   'If we are not in the same formula as last time (in, or out, or between)
          lastMouseIn = MouseIn                                                             '  Save the current state (in a new one or in none of them)
          PictureBox1.Invalidate()                                                          '  Invalidate the picturebox so it will redraw based on the current active formula (or none)                                                                            
        End If
      End Sub
    
        Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
    
            '//so you can visually see whats happening, you can comment/remove this
        For Each f In Me.formulas
          If f Is MouseIn Then                               'If the formula is the current one the mouse is in (draw the lines)
            Using p As New Pen(Color.Blue, 4)
              e.Graphics.DrawPolygon(p, f.Polygon.Points)
            End Using
          End If                                             'could add Exit For before this line to short circuit the loop once we found a match
        Next
    
        End Sub
    <edit 2> As for the second question, I think you would want to create another class to encapsulate the formula list and mouse processing subroutines for the picturebox, create two instances (or more) of that class and call the active one's methods to process mouse inputs and matching etc.

    If you're going to use individual pictureboxes, then you could pass the picturebox object to the class when you instantiate it, and have it assign event handlers for the mouse and paint events within that class.
    Unfortunately, I don't have the time to put together a quick example at the moment, but perhaps some number of hours from now I'll have some free time.

    <edit 3> Decided since it should be pretty quick, before heading home I would go ahead and add the new class (TouchMap), move the Formula list and active Formula variable and picturebox even handlers into it.
    I added a second picturebox to the form, but for convenience just use the same image and formula initialization. So, even though both images are the same and do exactly the same thing, the interactivity is handled by different instantiations of the TouchMap class, so are independent. You can add your own image and set of polygons to the second picturebox to have completly different interactive images.

    I changed the initialization to occur in the Form_Load event, rather than the Form's constructor. Don't know if there is a reason to favor modifying the constructor over using the Form_Load event, but I'm more accustomed to doing initialization in the Form_Load.

    Not a lot to it, just moved the form level class code into the TouchMap class code, changing a few names, and that was it.
    I'm working in VS 2010 pro, so the project was updated from VS 2008 (probably still targets the 3.5 framework, as I didn't think about changing it after the auto solution upgrade from 2008 to 2010).
    Attached Files Attached Files
    Last edited by passel; Jun 7th, 2015 at 01:01 PM. Reason: Added example

  13. #13
    New Member
    Join Date
    Apr 2015
    Posts
    8

    Red face Re: image map in vb.net?

    Wow - thank you VERY MUCH for doing that. I just had a quick look to see that its working, and will now study your code to see exactly how you did it. I really must take my Visual Basic to the next level - I get confused by code such as
    Code:
      Public ReadOnly Property Points() As PointF()
        Get
          Return Me._points
        End Get
      End Property
    
      '//constructors
      Public Sub New(ByVal points As PointF())
        Me._points = points
      End Sub
    and don't really understand what its doing, but I will now endeavor to find out!!

  14. #14
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    25,464

    Re: image map in vb.net?

    Sub New is the constructor for the Class. When you create a new Class you have to pass in an array of PointF which is assigned to the ReadOnly Property Points...

  15. #15
    New Member
    Join Date
    Apr 2020
    Posts
    4

    Re: image map in vb.net?

    Thank you for posting your code, I found it was extremely helpful, and is working as described.

    I have an application where I want to change the Image loaded into the Picture box, and load in a different set of shapes (or formulas) at various times while the program is running. While I was partially successful, and managed to load in a new image and new image map shapes easily (which did work), I was not able to remove any previous shapes (aka formulas). The result was a mess, containing all of the polygons for several different images and image maps. The only way I have been able to clear them is to stop and restart the program, which is obviously not a good solution.

    I have been trying to create a method or function that allows me to clear out all the polygons and (formula) names, before loading in the new ones, but after many hours of trial and error, I am still missing something. This is an older thread, but any suggestions would be appreciated. Thank You.

  16. #16
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    25,464

    Re: image map in vb.net?

    Is it a fixed set of images you’re using? How do you swap the image? It could be very easy if the images are a fixed set and you use a ComboBox to change images...

  17. #17
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    25,464

    Re: image map in vb.net?

    If it’s a fixed set of images, each with a fixed list(of point), use a dictionary(of Integer, List(of Point).

    Then instead of a List such as pts, you use dictionaryname(0) to reference the points list for image 0

  18. #18
    New Member
    Join Date
    Apr 2020
    Posts
    4

    Re: image map in vb.net?

    Thanks for the quick response. The image files in my program are selected with a pair of drop-down combo boxes (one for general category, the second for specific image), then loaded from a directory. I have a database with tables containing the filenames of the image files, as well as fields for ShapeID, ShapeName, the polygon shape points stored in a string (for now), and a bunch of other info that is useful to me, but shouldn't really matter for this solution. That works well, and as the mouse hovers over each shape, it is highlighted correctly (thanks to your previous code example).

    What I seem to be missing is how to clear out the image map polygons correctly between each image. If I load the first image with 20 image map polygons, and then change to a second image (using the same picturebox, and replacing the image in it) and load in 18 image map polygons for that one, I unintentionally end up with a total of 38 polygons. I have a lot of images, and along with not working as intended (ie- showing shapes that should not be there any more), this could eventually waste a lot of memory, and effect performance. If you could demonstrate how to modify your code to add a method or function that clears out the Polygon points and Shape Name, I can adapt it for what I am doing. Many objects and classes that are part of VB have enough online information that I can usually figure out things eventually, but I'm a bit rusty at this. The customized classes you put together work great, but are slightly beyond my skill set. I spent about 4 hours reading up on classes, and came up with a really ugly hack that kind of does what I need (and may be creating memory leaks), but I would really like to understand the right way to do this.

    If I am understanding correctly, the dictionary solution would involve loading all of the polygons for every image into memory, and while faster, I think I would rather load each set of polygons as needed. I also recalculate the polygons to scale and offset them if the image is resized/zoomed in or out, scrolled, etc. so they always overlay the correct areas of the image.

    Thanks again for taking the time to respond.

  19. #19
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    25,464

    Re: image map in vb.net?

    Use the List Clear method before loading the new points

    https://docs.microsoft.com/en-us/dot...tframework-4.8

  20. #20
    New Member
    Join Date
    Apr 2020
    Posts
    4

    Re: image map in vb.net?

    Thank You. That did not seem to work for me. Doesn't seem possible, but the polygons still came up when the mouse hovered over them. I was able to iterate through each polygon pointset and set x and y to nothing with some success (worked, but was a total hack just for testing, I exposed private members as public variables etc.) After further testing, it seems that if the polygons are not all cleared to nothing BEFORE a new image is loaded, they seem to get stuck. By that I mean they keep working, but wont ever clear unless the program is restarted, which is a problem when you load a different image.

  21. #21
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    25,464

    Re: image map in vb.net?

    Can you show me the code where you change to a new image, where you’re loading the polygons?

  22. #22
    Sinecure devotee
    Join Date
    Aug 2013
    Location
    Southern Tier NY
    Posts
    6,582

    Re: image map in vb.net?

    It seems to me you would want to add another method to the TouchMap Class to clear the formulas list when you switch images, which is what .paul. was getting at.

    In that class you have the following method
    Code:
      Public Sub AddFormula(f As Formula)
        formulas.Add(f)
      End Sub
    I would just add another method before or after it that would clear the list.
    Code:
      Public Sub ClearFormulaList()
        formulas.Clear()
      End Sub
    You would Call ClearFormulaList, change the image in the picturebox, and reload the ForumlaList with the new polygons (using the AddFormula method as you currently do).

    Hopefully, you are not creating New TouchMaps as part of the process, otherwise you'll likely have multiple picturebox handlers for the same picturebox active, which will keep the multiple sets of TouchMaps active, and they all will be processing their set of polygons.



    p.s. Since I was looking at the code (which I hadn't since 2015), I realize that since the code uses the Extension "FirstOrDefault" to find if the mouse is in an array of points in the polygon, and "MouseIn" is set as a reference to that polygon, there is no need in the Paint event to loop through the list of polygons to find a matching reference to the polygons, instead just use the reference you have.
    (The loop was part of ForumAccount's original code, and when I added the "MouseIn" search, it should have dawned on me then that I could remove the loop in the paint event).

    So, the current Paint event handler in the TouchMap class, can be changed,
    From this:
    Code:
      Private Sub _pb_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles _pb.Paint
    
        '//so you can visually see whats happening, you can comment/remove this
        For Each f In Me.formulas
          If f Is MouseIn Then                               'If the formula is the current one the mouse is in (draw the lines)
            Using p As New Pen(Color.Blue, 4)
              e.Graphics.DrawPolygon(p, f.Polygon.Points)
            End Using
          End If                                             'could add Exit For before this line to short circuit the loop once we found a match
        Next
      End Sub
    To this:
    Code:
      Private Sub _pb_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles _pb.Paint
    
        '//so you can visually see whats happening, you can comment/remove this
        If MouseIn IsNot Nothing Then                         'If the Mouse is in a polygon
          Using p As New Pen(Color.Blue, 4)
            e.Graphics.DrawPolygon(p, MouseIn.Polygon.Points) '  Outline the polygon
          End Using
        End If
    
      End Sub
    Last edited by passel; Apr 10th, 2020 at 03:11 PM.
    "Anyone can do any amount of work, provided it isn't the work he is supposed to be doing at that moment" Robert Benchley, 1930

  23. #23
    New Member
    Join Date
    Apr 2020
    Posts
    4

    Re: image map in vb.net?

    Thanks again to everyone who offered suggestions.

    When Passel said "Hopefully, you are not creating New TouchMaps as part of the process, otherwise you'll likely have multiple picturebox handlers for the same picturebox active, which will keep the multiple sets of TouchMaps active, and they all will be processing their set of polygons.", that is exactly what I did wrong. It is currently working exactly as I wanted it to.

    I didn't quite understand what the original code was doing, and had made quite a few changes. For some reason I was thinking that whenever a new image was loaded into the picturebox, I had to set the variable to this class. When I did that, I kept getting an error if I didn't include NEW, so I added it. Turns out I only needed to call it once, and it didn't matter that I loaded a new image.

    I now understand that I had several different events triggering the creation of an entirely new instance. As a result, clearing the "formulas" list did not work (as expected). This explains why the formulas clearlist method I originally tried to create myself failed, and also explains why I was having issues getting anything reliable from formulas.count (I was debug.printing the count from within the class as I added polygons, and it was incrementing as expected, but from the main program it was always reporting a total count of 0.) I am embarrassed for making such a beginner's mistake, but hopefully admitting to it will help someone else.

  24. #24
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    25,464

    Re: image map in vb.net?

    @Vb2010User...

    That’s still a fairly complex program for a beginner, so you’re not doing bad

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