Click here to Skip to main content
15,867,835 members
Articles / Programming Languages / Visual Basic
Article

VB.NET Knob Control

Rate me:
Please Sign up or sign in to vote.
3.17/5 (7 votes)
13 Dec 20043 min read 70.5K   1.3K   22   11
A usable knob control.

Introduction

Hello this is my first article. I always wanted to make a knob control and finally I did it, so here I am going to share what I did.

This is my tutorial for making a custom knob control. I made the knob image in a 3D modeling program, then edited it in PhotoShop, removed everything but the knob itself and saved it as a .png image. I even went a little farther and made another image of a pillow bevel which sits under the knob image to make the knob look sunk in.

Now I had my graphics done. Now for the coding part, since I wanted transparency and I made a user control, I had to insert these lines:

VB
SetStyle(ControlStyles.SupportsTransparentBackColor, True)
Me.BackColor = Color.Transparent

If you do not know where to find the constructor then look under View - Object Browser. In the browser you will see the name of your project, double click it. Then it will expand and show you the same name again - double click it. Now it should expand and say usercontrol1, double click it. You will see a Sub called new, and under the InitializeComponent() is where you place those lines, since a user control by default cannot have transparency. Now we have the transparency issue taken care of.

Now for the images that we have got, in the Solution Explorer right click the name of your project and add existing items. Add the images for the knob. Then in the Solution Explorer right click one of the images and go to its properties. Change build action to embedded resource. Do the same for the other images. I like making my images embedded, so they are built into the .dll of the control.

Here is the function to read embedded resources. Make sure to import System.IO and System.Reflection:

VB
Protected Function GetEmbeddedResourceStream(ByVal ResourceName _
                As String) As Stream
    Return System.Reflection.Assembly.GetExecutingAssembly()._
                         GetManifestResourceStream(ResourceName)
End Function

Here is where the drawing takes place, it scales too:

VB
Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
    e.Graphics.ScaleTransform(scales, scales)
    knobbase = New Bitmap(GetEmbeddedResourceStream("knob.knobbase.png"))
    knob = New Bitmap(GetEmbeddedResourceStream("knob.knobtop.png"))
    Me.Height = knobbase.Height * scales
    Me.Width = knobbase.Width * scales
    e.Graphics.DrawImage(knobbase, 0, 0)
    e.Graphics.ResetTransform()
    e.Graphics.ScaleTransform(scales, scales)
    e.Graphics.TranslateTransform(knob.width/2, knob.width/2)
    e.Graphics.RotateTransform(angle)
    e.Graphics.DrawImage(knob, -knob.Width \ 2, -knob.Height \ 2)
End Sub

Now we need some way of rotating the knob, when the user clicks and holds the mouse button over the knob.

VB
Private Sub UserControl11_MouseDown(ByVal sender As Object, _
                            ByVal e As System.Windows.Forms.MouseEventArgs) _
                                                         Handles Me.MouseDown
    Dim centerofknobx As Integer = Me.Width / 2
    Dim centerofknoby As Integer = Me.Height / 2
    If knob1ismoving = False Then
    knobstartangle = Me.cur_ang
    mouseangle = Int(Math.Atan2((e.Y - centerofknoby), _
                        (e.X - centerofknobx)) * (180 / Math.PI)) + 180
    knob1ismoving = True
    End If
    If melocked = True Then knob1ismoving = False
End Sub

What was done here is that the MouseDown procedure will calculate the angle of the mouse to the center of the knob, and make the variable knob1ismoving = True unless the knob is locked.

Now while the mouse button is down and the mouse moves, we need a subroutine to track the angle's difference and apply it to the knob.

VB
Private Sub UserControl11_MouseMove(ByVal sender As Object, _
                            ByVal e As System.Windows.Forms.MouseEventArgs) _
                                                         Handles Me.MouseMove
    If knob1ismoving = True Then
        Dim centerofknobx As Integer = Me.Width / 2
        Dim centerofknoby As Integer = Me.Height / 2
        Dim curmouseangle As Integer = Int(Math.Atan2((e.Y - centerofknoby), 
                              (e.X - centerofknobx)) * (180 / Math.PI)) + 180
        Dim difference As Integer = curmouseangle - mouseangle
        Dim knobangle As Integer = knobstartangle + difference
        angle = knobangle + (revolutions * 360)
        If locked = True Then
            If angle > maxangle Then angle = maxangle
            If angle < minangle Then angle = minangle
        End If
        If oldmouseangle > 300 And curmouseangle < 60 Then
            revolutions = revolutions + 1
            oldmouseangle = curmouseangle
        End If
        If oldmouseangle < 60 And curmouseangle > 300 Then
            revolutions = revolutions - 1
            oldmouseangle = curmouseangle
        End If
        oldmouseangle = curmouseangle
    End If
End Sub

This sub is mostly math. I made this function to know if the knob was turned more than once in either direction, because I need the knob to track multiple turns. It figures out the angle difference from the original angle then adds (revolutions + 360) to it for the final angle.

Finally, we need a subroutine to stop the knob from moving when the mouse button is released.

VB
Private Sub UserControl11_MouseUp(ByVal sender As Object, _
                          ByVal e As System.Windows.Forms.MouseEventArgs) _
                                                         Handles Me.MouseUp
    knob1ismoving = False
End Sub

Conclusion

A knob control consists of your knob image. You track mouse movements and figure out the angle difference as the mouse moves and apply it to your knob.

I made limits on my knob....Say I wanted to control the minutes on a clock. I could limit it to 590 degrees max, then divide the current angle by 10 to get the minute. This knob makes a great slider replacement. I'm sure more features could be added such as a 'snap' feature so that it moves a certain amount of degrees at a time.

Hope you enjoyed my article. The source will run on VB.NET 2005. It shouldn't be hard to port it to 2003.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer ASR Graphics
United States United States
Your typical bored programmer.

Comments and Discussions

 
BugDoesn't work for me Pin
Gregory3831-Aug-16 16:22
Gregory3831-Aug-16 16:22 
QuestionNice Pin
slaviboy26-Sep-12 10:43
slaviboy26-Sep-12 10:43 
QuestionHow do I use this control Pin
jimvb21124-Apr-11 8:00
jimvb21124-Apr-11 8:00 
GeneralGreat Job... Pin
yeahtuna7-Dec-09 13:11
yeahtuna7-Dec-09 13:11 
QuestionHow to use the dll Pin
kenobe14-Jul-09 22:05
kenobe14-Jul-09 22:05 
QuestionBackColor Transparent Not Working? Pin
positivebalance2-Apr-08 18:04
positivebalance2-Apr-08 18:04 
GeneralRe: BackColor Transparent Not Working? Pin
matjazso16-Jun-09 0:34
matjazso16-Jun-09 0:34 
GeneralThank you Pin
Goldfishrock17-Aug-05 2:50
Goldfishrock17-Aug-05 2:50 
GeneralRe: Thank you Pin
ultra029-Apr-06 15:39
ultra029-Apr-06 15:39 
GeneralRe: Thank you Pin
Goldfishrock1-May-06 21:17
Goldfishrock1-May-06 21:17 
GeneralRe: Thank you Pin
Andrew S Richardson26-Dec-06 11:44
Andrew S Richardson26-Dec-06 11:44 
Sorry For the long delay, I have been busy for a while. Anyway if you are still wondering the problem, email me me your version of the knob .png image and I will study it and compare it to my original and study my source, it has been a while since I made this.


You can email me at goodlifeasr@aol.com. My other email gets so much spam I ignore 99% of it.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.