?
Solved

How do I create shapes that I can click on (in vb.net)?

Posted on 2011-09-30
13
Medium Priority
?
330 Views
Last Modified: 2012-05-12
I am creating a touchscreen app, but the same appies for a mouse-clic I suppose.

I think I know the answer to this, but I don't like it, so I'm hoping for a solution.
I'm a bit math challenged, so I'm not sure even how to start to tackle this problem.

Let's say I wanted to have a honecomb pattern of buttons that are interlocked.
I know you can just put a square button behind a shape like a banana etc, but what if I want a honecomb shaped button exactly? It sounds like some complex math problem.
The only way I can think of doing this would be to create an table of X and Y positions I suppose of where each shape begins and ends horizontally and vertically like this:

Y axis table:

Pixel  Start     Pixel End       Zone Name
    5                    100                Beep


Then I would send the mouse coordinates to look up the X and Y axis of the click to find
the zone name.

Is this the best I can do, or does .NET 4.0 have some other way of doing this that is much easier?
0
Comment
Question by:harmono
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
13 Comments
 
LVL 86

Expert Comment

by:Mike Tomlinson
ID: 36894831
There are other ways of doing it...

You can modify a button (or panel) so that it is actually a honeycomb shape using its Region() property.  First create a GraphicsPath with the honeycomb shape and then pass that to a new Region.
0
 
LVL 1

Author Comment

by:harmono
ID: 36894846
Idle Mind,

Thanks.
I looked up region and graphicspath and found this article. Nice! It's C# but good enough, I might do this in C#, I'm just doing research and development and prototyping for now.

http://www.java2s.com/Code/CSharp/2D-Graphics/CreateaRegionwhoseboundaryistheGraphicsPath.htm
0
 
LVL 1

Author Comment

by:harmono
ID: 36894858
PS - The shapes don't have to be as complex as a honeycomb, but they are more complex than a rectangle or square, more like a parallelogram. For example, a picture of a banana with a parallelogram type shape (herringbone?) for each banana in a bunch. If you click on a banana, the shape is clicked, the user doesn't have to know they are clicking a herringbone shape, it just has to be able to fit like a bunch of bananas.
0
Containers & Docker to Create a Powerful Team

Containers are an incredibly powerful technology that can provide you and/or your engineering team with huge productivity gains. Using containers, you can deploy, back up, replicate, and move apps and their dependencies quickly and easily.

 
LVL 1

Author Comment

by:harmono
ID: 36894872
This article helps too, but I don't see much of an explanation of how the code works:

http://www.java2s.com/Tutorial/VB/0260__GUI/IrregularshapeofButton.htm
0
 
LVL 86

Accepted Solution

by:
Mike Tomlinson earned 500 total points
ID: 36894880
Here's something I was playing around with awhile ago... Idle-Mind-508447.flv
Public Class Form1

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Dim letters(,) As String = {{"I", "D", "L", "E"}, {"M", "I", "N", "D"}, {"W", "A", "S", ""}, {"H", "E", "R", "E"}}
        Dim lx, ly As Integer
        For y As Integer = 0 To letters.GetUpperBound(1)
            lx = 0
            ly = y * 100
            For x As Integer = 0 To letters.GetUpperBound(0)
                Dim hb As New Hexagon
                hb.Text = letters(x, y)
                hb.Location = New Point(lx, IIf(x Mod 2 = 0, ly, ly + 50))
                lx = lx + (hb.Width * (1 - hb.P))
                AddHandler hb.Click, AddressOf hb_Click
                Me.Controls.Add(hb)
            Next
        Next

        Dim hx2 As New Hexagon2
        hx2.Text = "Hexagon"
        hx2.BackColor = Color.Red
        hx2.Location = New Point(400, 25)
        Me.Controls.Add(hx2)
    End Sub

    Private Sub hb_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim hb As Hexagon = DirectCast(sender, Hexagon)
        hb.Enabled = False
    End Sub

    Public Class Hexagon2
        Inherits Button

        Public Sub New()
            Me.FlatStyle = Windows.Forms.FlatStyle.Flat
            Me.FlatAppearance.BorderSize = 0
            Me.Size = New Size(100, 100)
            Me.Font = New Font("Microsoft Sans Serif", 14)
            Me.TextAlign = ContentAlignment.MiddleCenter            

            Dim P As Single = 0.25
            Dim gp As New System.Drawing.Drawing2D.GraphicsPath
            Dim pts() As Point = {New Point(0, Me.Height / 2), New Point(Me.Width * P, 0), New Point(Me.Width * (1.0 - P)), New Point(Me.Width, Me.Height / 2), New Point(Me.Width * (1.0 - P), Me.Height), New Point(Me.Width * P, Me.Height)}
            gp.AddPolygon(pts)
            Me.Region = New Region(gp)
        End Sub

    End Class

    Public Class Hexagon
        Inherits Button

        Private _P As Single = 0.25
        Private gpA As New System.Drawing.Drawing2D.GraphicsPath
        Private gpB As New System.Drawing.Drawing2D.GraphicsPath

        Public ReadOnly Property P() As Single
            Get
                Return _P
            End Get
        End Property

        Public Sub New()
            Me.FlatStyle = Windows.Forms.FlatStyle.Flat
            Me.FlatAppearance.BorderSize = 0
            Me.Size = New Size(100, 100)
            Me.Font = New Font("Microsoft Sans Serif", 14)

            Dim gp As New System.Drawing.Drawing2D.GraphicsPath

            Dim pts() As Point = {New Point(0, Me.Height / 2), New Point(Me.Width * P, 0), New Point(Me.Width * (1.0 - P)), New Point(Me.Width, Me.Height / 2), New Point(Me.Width * (1.0 - P), Me.Height), New Point(Me.Width * P, Me.Height)}
            gp.AddPolygon(pts)
            Me.Region = New Region(gp)

            Dim ptA As Point
            Dim rf As RectangleF
            Dim M As New System.Drawing.Drawing2D.Matrix

            gpA = gp.Clone
            M.Scale(0.98, 0.98)
            gpA.Transform(M)
            rf = gpA.GetBounds
            ptA = New Point(Me.Width / 2 - rf.Width / 2, Me.Height / 2 - rf.Height / 2)
            M.Reset()
            M.Translate(ptA.X - rf.Left, ptA.Y - rf.Top)
            gpA.Transform(M)

            gpB = gp.Clone
            M.Scale(0.8, 0.8)
            gpB.Transform(M)
            rf = gpB.GetBounds
            ptA = New Point(Me.Width / 2 - rf.Width / 2, Me.Height / 2 - rf.Height / 2)
            M.Reset()
            M.Translate(ptA.X - rf.Left, ptA.Y - rf.Top)
            gpB.Transform(M)

            Me.BackColor = Color.Goldenrod
        End Sub

        Private Sub Hexagon_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
            e.Graphics.DrawPath(Pens.Black, gpA)
            e.Graphics.FillPath(IIf(Me.Enabled, Brushes.Yellow, Brushes.Red), gpB)
            e.Graphics.DrawPath(Pens.Black, gpB)
            Dim sz As SizeF = e.Graphics.MeasureString(Me.Text, Me.Font, Me.Width)
            e.Graphics.DrawString(Me.Text, Me.Font, Brushes.Black, Me.Width / 2 - sz.Width / 2, Me.Height / 2 - sz.Height / 2)
        End Sub

    End Class

End Class

Open in new window

0
 
LVL 1

Author Closing Comment

by:harmono
ID: 36894888
Wow! A solution that matched my question perfectly. I mentioned a honeycomb shaped grid of buttons, and voila!
0
 
LVL 1

Author Comment

by:harmono
ID: 36894892
The "W" needs to have the code added, it didn't respond to the MouseHover by the way. Very cool!
0
 
LVL 86

Expert Comment

by:Mike Tomlinson
ID: 36894904
Really?...I'll have to take a closer look at the code.  I haven't played with it since August 2009!
0
 
LVL 1

Author Comment

by:harmono
ID: 36894909
I tried it and the W works, so maybe you fixed it. When was this recorded?
0
 
LVL 86

Expert Comment

by:Mike Tomlinson
ID: 36894915
I just upgraded my old code to VS2010 and then used the EE screencast tool to record it in action.  The recorder probably wasn't fast enough to see the change?
0
 
LVL 1

Author Comment

by:harmono
ID: 36894923
That's strange since you hover over the W twice, and you were moving over just as fast as other buttons, and you even went over the W and turned as though you were trying to get it to work.
0
 
LVL 1

Author Comment

by:harmono
ID: 36894927
0
 
LVL 86

Expert Comment

by:Mike Tomlinson
ID: 36894928
Lemme know if you have any questions about the code.  I'll do my best to decipher my old scratch...  =)
0

Featured Post

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Fluent Interface Design Pattern You can use the Fluent Interface (http://en.wikipedia.org/wiki/Fluent_interface) design pattern to make your PHP code easier to read and maintain.  "Fluent Interface" is an object-oriented design pattern that r…
A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question