Introduction:
This article describes an easy approach to building a simple image mapping utility that may be used to mark and store points as pixel based coordinates from an image file or directly from a web page. The application is capable of capturing a collection of points and it allows the user to name and save a point collection established using the tool into a text file.
The application could be used to do things such as to digitize an image by collecting points from key features in the image. For example, if one were to want to collect sizing and spacing information on an analog display for the purposes of defining a method for creating a digital version of that device, the application could be used in conjunction with a 1:1 scale image of the device to determine where to draw lines, add text and size text, etc. For web development, the application could be used as an aid to defining sizes and shapes of areas used in an image map.
Upon initialization of the application, the user may operate in either of two modes:
- By loading an image file directly into the application, or,
- Setting the application's opacity to allow the user to view objects beneath the application.
In either case, once an image is loaded or made visible through the application, the user may mouse around the edges of an object to view the coordinates at any given point. If the user wants to capture the points and save them into a file, they may right click on the application to expose a context menu. The menu contains options to start and stop recording. Once start recording is selected, the application will store the coordinates for each selected point and will continue to so until the user selects stop recording. Once stop recording is selected, the application will expose a save file dialog and will capture the user defined file name and path from that dialog, this information will be used to store the entire point collection saved up until that point.
![ImageMapper1.gif]()
Figure 1: Image Mapping Utility in Use
![ImageMapper2.gif]()
Figure 2: Text File Output of Application Stored Points
Getting Started:
In order to get started, unzip the attachment and load the solution into Visual Studio 2005. Examine the solution explorer and note the files contained in the project:
The contents of the solution show that it contains a single project entitled, "ImageMapper". This project contains a single form class called "frmMain". The frmMain.cs class contains is the only class contained in the project.
A quick check of the references will reveal that only the default class libraries are contained in the project.
The Code: The frmMain Class.
The frmMain class contains all of the code used within the application. This class imports System.Text and System.IO which are used for storing the point data into a text file.
The form itself contains a menu with these options:
- File
- Load Image File option
- Exit Application option
- Crosshairs
- Color option
- Visibility Option
- Opacity
The form also contains a context menu which is associated with a picture box control; its contents are:
- Start Recording
- Stop Recording
- Cancel
The window contains a picture box which has its dock property set to full. The class also has an open file dialog, save file dialog, a color dialog, and a tooltip.
Following the imports and class declaration, the first section of code in the application is a declarations region which includes the following variable declarations:
#region "Declarations"
private bool mCrosshairs;
private System.Drawing.Color mLineColor;
private bool mRecord;
private SortedList mPoints;
private int mPointCount;
#endregion
The crosshairs variable is used to determine whether or not to display the crosshairs at the current mouse position. If the variable is set to false, the crosshairs will not be shown and the user will see only a standard cross shaped cursor. With the variable set to true, the user will be shown full screen crosshairs centered on the present position of the mouse pointer. The crosshairs were intended to provide an aid to setting points along edges.
The line color variable is used to store a color used to draw the crosshairs.
The record variable is used to determine whether or not the application will store the user's left mouse clicks at points.
The points variable is a sorted list that is used to temporarily store the point collection as the user adds points to be saved.
The point count variable is used to keep track of the number of points saved in the sorted list.
Following the declarations, the next bit of code in the application is the form constructor; this block is used to set some of the variables upon initialization of the application. That code is as follows:
public frmMain()
{
// This call is required by the Windows Form Designer.
InitializeComponent();
mLineColor = Color.Crimson;
mPointCount = 0;
this.DoubleBuffered = true;
mCrosshairs = true;
}
The next bit of code is the load image file menu option's click event handler; that code is as follows:
private void LoadImageFileToolStripMenuItem_Click(System.Object sender, System.EventArgs e)
{
System.Windows.Forms.OpenFileDialog openFile = new System.Windows.Forms.OpenFileDialog();
openFile.DefaultExt = "bmp";
openFile.Filter = "Bitmap File (*.bmp)|*.bmp|Jpeg File (*.jpg)|*.jpg|Gif File (*.gif)|*.gif";
openFile.ShowDialog();
if (openFile.FileNames.Length > 0)
{
Bitmap img = new Bitmap(openFile.FileName.ToString());
PictureBox1.Image = img;
PictureBox1.Refresh();
}
}
This code is used to load an image into the application's picture box control. The code opens an open file dialog box that permits the user to select a common image file from the file system; once the file's name and path are defined based upon the user's selection, the application creates a new bitmap from the file and sets the picture box's image property to contain that image.
The next item in the file is the file menu's exit option; that code is simple enough:
private void ExitToolStripMenuItem_Click(System.Object sender, System.EventArgs e)
{
Application.Exit();
}
The next code block is the crosshair menu's color menu option click event handler, which code is as follows:
private void ColorToolStripMenuItem_Click(System.Object sender, System.EventArgs e)
{
ColorDialog1.AllowFullOpen = true;
ColorDialog1.AnyColor = true;
ColorDialog1.FullOpen = true;
if (ColorDialog1.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
mLineColor = ColorDialog1.Color;
}
}
This code block exposes a color dialog and allows the user to select a color; that color is subsequently used to set the color variable's value to contain the selected color. The application uses that stored color value to set the color of the crosshairs as they are drawn.
Next up is subroutine used to set all of the opacity menu's subordinate options check marks to unchecked; this subroutine is called whenever the user selects a new opacity option:
private void ClearOpacityChecks()
{
mnu100percent.Checked = false;
mnu90percent.Checked = false;
mnu80percent.Checked = false;
mnu70percent.Checked = false;
mnu60percent.Checked = false;
mnu50percent.Checked = false;
mnu40percent.Checked = false;
mnu30percent.Checked = false;
mnu20percent.Checked = false;
mnu10percent.Checked = false;
}
Next up are the menu options used to set the application's opacity; there are similar options for each of the opacity settings exposed in the menu:
private void mnu100percent_Click(System.Object sender, System.EventArgs e)
{
ClearOpacityChecks();
mnu100percent.Checked = true;
this.Opacity = 1;
}
After the opacity settings, the next block of code is the visibility menu item click event handler; this handler is used to set the crosshairs variable to true or false and to update the menu option's check mark. With the crosshairs variable set to false, the crosshairs will not be shown, with it set to true, the crosshairs will be drawn at the present position of the mouse pointer:
private void VisibilityToolStripMenuItem_Click(System.Object sender, System.EventArgs e)
{
if (VisibilityToolStripMenuItem.Checked == true)
{
VisibilityToolStripMenuItem.Checked = false;
mCrosshairs = false;
}
else
{
VisibilityToolStripMenuItem.Checked = true;
mCrosshairs = true;
}
}
The next subroutine in the application is used to handle the picture box control's mouse clicks:
private void PictureBox1_MouseClick(object sender, System.Windows.Forms.MouseEventArgs e)
{
if (mRecord == true)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
//record
mPoints.Add("Point " + mPointCount.ToString(), e.X + ", " + e.Y);
mPointCount++;
}
}
}
This subroutine first checks the record variable to determine whether or not to record the point, if the application is in record mode, the subroutine then checks to see if the user left clicked the picture box control, and then it adds a point to the point collection as a string containing the point's X and Y values. The sorted list's key property is set to contain the text "Point" coupled with the current point count; after the point is added, the point counter variable is incremented to the next integer value.
After this bit of code, the next item in the class is the picture box control's mouse move event handler:
private void PictureBox1_MouseMove(object sender, System.Windows.Forms.MouseEventArgs e)
{
PictureBox1.Refresh();
ToolTip1.SetToolTip(PictureBox1, e.X + ", " + e.Y);
Pen pPen = new Pen(mLineColor, 1);
try
{
if (mCrosshairs)
{
Graphics g;
g = PictureBox1.CreateGraphics();
g.DrawLine(pPen, e.X, PictureBox1.Top, e.X, PictureBox1.Height);
g.DrawLine(pPen, PictureBox1.Left, e.Y, PictureBox1.Width, e.Y);
}
}
catch (Exception ex)
{
MessageBox.Show(ex.Message.ToString(), "Error", MessageBoxButtons.OK, MessageBoxIcon.Exclamation);
}
}
This event handler is used to display the current mouse position in a tooltip associated with the picture box control. Further, if the crosshairs variable is set to true, the handler draws the crosshairs on the screen using the crosshairs color variable's color value.
The next subroutine is the context menu's start recording option click event handler:
private void StartRecordingToolStripMenuItem_Click(System.Object sender, System.EventArgs e)
{
if (mRecord == true)
{
MessageBox.Show("The application is already recording.", "Recording", MessageBoxButtons.OK,
MessageBoxIcon.Exclamation);
return;
}
mRecord = true;
mPoints = new SortedList();
mPoints.Clear();
mPointCount = 0;
}
This handler checks to see if the application is already in record mode; if it is, the user is notified and the subroutine is exited. If the application is not in record mode, the application is placed in record mode, a sorted list is instanced and cleared, and the point counter variable is set to zero.
The next subroutine is used to handle the context menu's stop recording option click event handler:
private void StopRecordingToolStripMenuItem_Click(System.Object sender, System.EventArgs e)
{
if (mRecord == false)
{
MessageBox.Show("Recording is not current enabled.", "Recording", MessageBoxButtons.OK,
MessageBoxIcon.Exclamation);
return;
}
mRecord = false;
string strPoints = "";
string fname = "";
SaveFileDialog1.Filter = "Text Files|*.txt|All Files|*.*";
SaveFileDialog1.DefaultExt = "txt";
if (SaveFileDialog1.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
fname = SaveFileDialog1.FileName;
}
try
{
DictionaryEntry de;
foreach (DictionaryEntry tempLoopVar_de in mPoints)
{
de = tempLoopVar_de;
strPoints = strPoints + de.Value.ToString() + Environment.NewLine;
}
StreamWriter SW;
FileStream FS;
FS = new FileStream(fname, FileMode.Create);
SW = new StreamWriter(FS);
SW.Write(strPoints);
SW.Close();
FS.Close();
MessageBox.Show("Point file saved as " + fname.ToString());
}
catch (Exception ex)
{
MessageBox.Show(ex.Message.ToString(), "Error", MessageBoxButtons.OK,
MessageBoxIcon.Exclamation);
}
}
This subroutine checks to see if the application is in record mode and if it is not, the user is notified and the subroutine is exited. If the application is recording, the recording is disabled, a string variable used to contain the entire list of points is declared, and a string variable used to hold the file name and path is declared.
The string is then populated by iterating through the sorted list and adding each point pair to its content.
Next, a save file dialog is exposed and used to capture the user defined path and file name. After the path and file name are defined, a stream writer and file stream are created and the points string is saved to the file.
The last subroutine in the application is used to cancel recording. This handler is used to dispose of any existing point collection and disable recording; that bit of code is as follows:
private void CancelToolStripMenuItem_Click(System.Object sender, System.EventArgs e)
{
this.mRecord = false;
this.mPoints.Clear();
}
Summary:
This example was intended to provide an example of a utility that might be used as a constructive add to mapping images for a variety of purposes. I have used similar applications for a variety of purposes to include mapping images for the purposes of rendering similar displays within an application, and to validate that a design is defined in accordance with a specification that provides an image catalog based upon pixel coordinates.
NOTE: THIS ARTICLE IS CONVERTED FROM VB.NET TO C# USING A CONVERSION TOOL. ORIGINAL ARTICLE CAN BE FOUND ON VB.NET Heaven (http://www.vbdotnetheaven.com/).