Programming guides for beginner...
Any comments are welcomed....
I hope it helps!!! Thanks for drop by...

Thursday, March 22, 2012

Simple tutorial for color picker


     This tutorial is made for my previous post for simple color picker application. First, I will explain about the program flow. When shortcut key is pressed after setting, a print screen will be captured and will appeared as the top-most among all the windows. Then when mouse left-button is clicked, a panel will appear beside the mouse cursor. The panel will show the color where the mouse cursor is pointing at in RGB format.
This will be a simple tutorial. To start with this tutorial,
1) You need to have visual basic 2008 or equivalent.
(I assume from here, you should have at least simple knowledge of programming. )
2) Create a new project for visual basic windows application. Type in project name as you like.
3) Design your own interface.
  • You need to have setting for shortcut keys. (Must be at least a combination of ALT/CTRL/Shift with normal keys. Button is required to confirm/set/apply.)
  • A standby button which use to hide the application when you going to pick color.
  • Optional : A checkbox to copy code to clipboard.
You may follow my interface as following:
1
4) Now is coding time! In order to have keyboard hook so that the program will be called when you click the shortcut keys you set previously, you need to have a low level keyboard hook. I had been using an example from here(KBHook by Julien). To use this example, you need to add KBHook project into the solution. Make sure that you convert KBHook project to your visual studio/basic first.
Start using kbhook by the following coding:
  Private WithEvents m_Hook As New LowLevelKBhook

Private Sub m_HookKeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles m_Hook.KeyDown
               
‘**************************************You coding goes here*************************************************
’It is up to you to design how you going to check the shortcut keys. I will give a simple example here.
            If e.shift = true Then ‘If user press shift and hold it
                    If e.KeyCode.ToString = “F1” Then   'Here I hard-coded F1. If user hold shift and press F1 
                             StartColorPick()         ‘If both shift and F1 is pressed, a function called StartColorPick will trigger.
                     End If
           End If
End Sub


Before I explain about what “StartColorPick()” function does, there are some important coding needed for getting print screen(which I mention in the program flow).

Public m_ImgBitMap As Bitmap = New Bitmap(My.Computer.Screen.Bounds.Width, My.Computer.Screen.Bounds.Height, Imaging.PixelFormat.Format32bppArgb)
’m_ImgBitMap is a declaration name that I give for a new Bitmap object

Public m_gfx As Graphics = Graphics.FromImage(m_ImgBitMap)
‘m_gfx is a graphics type which get Image from Bitmap object (m_ImgBitMap)


Now we back to “StartColorPick()”. This function will call a form (I called it as MyScreen) to show.

Private Sub StartColorPick()
                   MyScreen.Show()
                   m_gfx.CopyFromScreen(My.Computer.Screen.Bounds.X, My.Computer.Screen.Bounds.Y, 0, 0, _
                                                                    Screen.PrimaryScreen.Bounds.Size, CopyPixelOperation.SourceCopy)
End Sub

Change the properties of the object(By default, properties window should be at right bottom corner when you click on the object. If you can’t find it, press F4 to launch the window.)
MyScreen will have the following properties:
  1. FormBorderStyle : None
  2. StartPosition : Manual
  3. ShowInTaskbar : False
  4. TopMost : True
and contain
  1. a picture box object.
  2. a hidden panel
Picture box object will have the following properties:
  1. Dock : Fill
Now we will focus on coding for MyScreen.
Screen Load.


Private Sub Screen_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load     
                  Me.PictureBox1.Image = ColorPicker.m_ImgBitMap                               
                  Me.Size = New Point(My.Computer.Screen.Bounds.Width,My.Computer.Screen.Bounds.Height)
End Sub


PictureBox click.

Private Sub PictureBox1_MouseClick(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseClick
            Dim TempBitmap As New Bitmap(PictureBox1.Image)
            Dim MyColor As Color
            MyColor = TempBitmap.GetPixel(e.X, e.Y)
            Panel1.BringToFront()
            Panel1.Location = New Point(CalPanelPos(e.X, e.Y))
            Label1.TextAlign = ContentAlignment.MiddleCenter
            Label1.BackColor = Color.White
            Label1.Text = MyColor.ToString
            Panel1.AutoSize = True
            Panel1.BackColor = MyColor
            Label1.Location = New Point(CalLabelPos(Label1.Width, Panel1.Width), Label1.Location.Y)
   End Sub


MouseMove on Picture Box

Private Sub PictureBox1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove
          Dim TempBitmap As New Bitmap(PictureBox1.Image)
          Dim MyColor As Color
          MyColor = TempBitmap.GetPixel(e.X, e.Y)
          Panel1.Location = New Point(CalPanelPos(e.X, e.Y))
          Label1.Location = New Point(CalLabelPos(Label1.Width, Panel1.Width), Label1.Location.Y)
          Label1.Text = MyColor.ToString
          Panel1.BackColor = MyColor
  End Sub


CalLabelPos & CalPanelPos function that I call on above.

Private Function CalLabelPos(ByVal labelwidth As Integer, ByVal Panelwidth As Integer) As Integer
         CalLabelPos = (Panelwidth - labelwidth) / 2
         Return CalLabelPos
End Function

Private Function CalPanelPos(ByVal mousex As Integer, ByVal mousey As Integer) As Point
         Dim int_ComWidth As Integer = My.Computer.Screen.WorkingArea.Width
         Dim int_ComHeight As Integer = My.Computer.Screen.WorkingArea.Height                                                   
         If mousex > (int_ComWidth - 220) Then
             CalPanelPos.X = mousex – 220
         Else
             CalPanelPos.X = mousex + 20
         End If
         If mousey > (int_ComHeight - 50) Then
             CalPanelPos.Y = mousey – 50
        Else
             CalPanelPos.Y = mousey + 20
        End If
        Return CalPanelPos
End Function


And finally KeyDown event

Private Sub MyScreen_PreviewKeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.PreviewKeyDownEventArgs) Handles Me.PreviewKeyDown     
       If e.KeyCode = Keys.Escape Then
             ColorPicker.TextBox1.Text = Me.Label1.Text
             Me.Close()
             ColorPicker.Show()     
       ElseIf e.KeyCode = Keys.Enter Then
        
                 If ColorPicker.CPClipboard.Checked Then
                         My.Computer.Clipboard.SetText(Me.Label1.Text)
                 End If
             ColorPicker.TextBox1.Text = Me.Label1.Text
             Me.Close()
             ColorPicker.Show()
      End If 
End Sub


For those who want to have full source code, please provide me your email and I will send it to you asap.