Click here to Skip to main content
15,867,453 members
Articles / Programming Languages / Visual Basic
Tip/Trick

A PictureBox with Zoom, Grid and Rulers

Rate me:
Please Sign up or sign in to vote.
4.94/5 (30 votes)
6 Mar 2014CPOL2 min read 74.9K   7.9K   42   19
Add zoom capabilities, grid and rulers to the standard WinForms PictureBox control

Introduction

I develop front ends for Industrial Machine Vision applications.

The very first thing to do, when setting up a machine vision system, is to establish a relation between positions in the real world and pixels in the pictures that come from the cameras.

Every vision library has precise calibration and gauging tools, but I often need a simple tool to analyze the pictures in the early stages of system set up.

What I need is an extension of the standard System.Windows.Forms.PictureBox, with a ruler, a grid and -quite obviously- an easy way to zoom into details of the parts I am analyzing.

Image 1

This is a control which I've been using for many years (the very first one was written in VB5). Now I need to port it to WPF, so I started cleaning up the code to make the re-coding easier. It was full of reference to vision libraries, and full of strange properties and functions. This is not a good starting point for the porting process.

Features

  • Easy zooming and panning by keyboard (+/- and arrow keys) or mouse (dragging a rectangle, using the wheel or left and right button) .
  • Gauging tool: gives you the angle and length of a line dragged on the control.

    Image 2

  • Measure unit: you can set the ruler to micron, mm/10, mm, inches, meters.

    Image 3

  • Customizable pixel size. Defining the actual size of pixels (the 'real world' DPI) is the first operation to perform, for the rulers to display actual sizes (if you temporarily want to see the cursor position expressed in pixels, just keep the CTRL key pressed).

Using the Code

There is no advanced coding here; it's just a ready to use component which I hope will be useful to someone. There is a Test Application whose code is straightforward. There is also an additional user control that performs all the customization for you, if you don't want to do it programmatically.

Image 4

Consider that we are talking of a control inherited from the standard Windows.Forms.PictureBox. You have the standard properties of the base control, with some additions.

If you want to control its properties through your code, here are some examples.

  • Changing the measure unit:
    VB.NET
    LinkedPictureBox.UnitOfMeasure = MeasureSystem.enUniMis.dmm 
  • Switching between Zoom mode and gauging mode:
    VB.NET
    LinkedPictureBox.ClickAction = enClickAction.Zoom
  • Hiding or showing rulers, scroll bars, and grid:
    VB.NET
    btViewRulers.Checked = LinkedPictureBox.ShowRulers
    btViewScrollBars.Checked = LinkedPictureBox.ShowScrollbars
    btViewGrid.Checked = LinkedPictureBox.ShowGrid
    tbPixelSizeMic.Text = CStr(LinkedPictureBox.BackgroundImagePixelSize_Mic)  

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United Kingdom United Kingdom
Machine Vision, Robotics, full-stack development

Comments and Discussions

 
QuestionEdit code Pin
Member 140287068-Sep-22 11:13
Member 140287068-Sep-22 11:13 
AnswerRe: Edit code Pin
LucaDN19-Oct-22 2:32
LucaDN19-Oct-22 2:32 
Praisegreat Pin
Southmountain7-May-22 8:49
Southmountain7-May-22 8:49 
QuestionGreat job. How to restrict canvas to the Image? Pin
Member 125238465-May-18 8:11
Member 125238465-May-18 8:11 
GeneralMy vote of 5 Pin
Heriberto Lugo25-Sep-15 20:05
Heriberto Lugo25-Sep-15 20:05 
QuestionNice work Pin
kidphysics2-Mar-15 8:58
kidphysics2-Mar-15 8:58 
QuestionCan't open the full project Pin
Eurico Correia12-Jan-15 5:37
Eurico Correia12-Jan-15 5:37 
QuestionDevelop this file Pin
Mollaahmadi17-Aug-14 8:30
Mollaahmadi17-Aug-14 8:30 
QuestionZip problem ! Pin
marcus9222-Mar-14 3:17
marcus9222-Mar-14 3:17 
QuestionNice looking control Pin
JWhattam6-Mar-14 10:22
JWhattam6-Mar-14 10:22 
GeneralMy vote of 5 Pin
Marco Bertschi6-Mar-14 8:52
protectorMarco Bertschi6-Mar-14 8:52 
Questionvery thanks Pin
Member 414767423-Jan-14 9:29
Member 414767423-Jan-14 9:29 
can use fix ruler to resize start point or end points?
Generalthanks giving Pin
Hooman_Kh4-Nov-13 14:20
Hooman_Kh4-Nov-13 14:20 
QuestionVery Nice Pin
wlrice1-Nov-13 11:50
wlrice1-Nov-13 11:50 
QuestionGreat job Pin
N. Henrik Lauridsen1-Nov-13 10:46
N. Henrik Lauridsen1-Nov-13 10:46 
GeneralVery handy! Pin
dbolg3331-Oct-13 6:45
dbolg3331-Oct-13 6:45 
QuestionGreat job Pin
Tom Clement31-Oct-13 3:24
professionalTom Clement31-Oct-13 3:24 
AnswerRe: Great job Pin
LucaDN31-Oct-13 12:21
LucaDN31-Oct-13 12:21 
QuestionImage and source code missing PinPopular
Smitha Nishant31-Oct-13 1:47
protectorSmitha Nishant31-Oct-13 1:47 

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.