image map in vb.net?-VBForums
Results 1 to 14 of 14

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
    6

    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
    Frenzied Member
    Join Date
    Aug 2013
    Location
    Southern Tier NY
    Posts
    1,972

    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
    6

    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
    vb Coda .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    20,132

    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...

Posting Permissions

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



Featured


Click Here to Expand Forum to Full Width