Writing Simple Graphical User Interface for Image Processing

Basic Form

To learn image processing in Delphi by directly coding the algorithm, first we need to make our GUI (graphical user interface) to load an image, view, process, and show the result.

1. Create a new project (File->New->Application in Delphi 7 or File->New->VCL Form Application in Turbo Delphi Explorer).
2. Set the FormStyle property of the form to fsMDIForm.
3. Change the form name from Form1 to MainForm.
4. Add a main menu component (from Standard component pallet) on the form, double click it and set a menu item File, with Open, Save, Close, and Exit sub menus.
5. Add an OpenPictureDialog (from Dialogs component pallet) and SavePictureDialog (from dialog component pallet) components on the form.
6. Set the Option.ofOverwritePrompt property of SavePictureDialog to true.
   
7. Add a status bar (from Win32 component pallet) on the form to ease the window resizing.
8. Resize the window as shown in figure 1.
9. Save the form (File->Save As), type MainUnit in the file name edit box.
10. Create a new form to display the the picture as a child window on the main form using menu File->New->Form.
11. Set the FormStyle property of the form to fsMDIChild.
12. Change the form name to ImageForm.
13. Resize the form as shown in the figure 2.
    
14. Add an Image component (from Additional component pallet).
15. Set the Align property of the Image component to alClient.
16. Set the Stretch property of the Image component to "true".
17. Set the Proportional property of the Image component to "true".
18. Save the form using menu File->Save as, and name it as ImageUnit.
19. Save the project using menu File->Save project as , name it with ImageProcessor, so this will be our executable file name if we compile it.

Figure 1. MainForm

Figure 2. ImageForm

After this steps, if we compile and run the executable, the child form will be shown because Delphi will auto-create it. This child form should be displayed only after executing a file operation, so we need to exclude the child form in auto-create: go to Project->Options->Form, point to ImageForm to select, and press the > button, so the ImageForm will move to Available forms box, then press OK.

Writing From Closing Event Handler for Image Form
When the image form is closed, we have to free the resources used by the form, view the ImageForm (Shift+F12 and select the ImageForm and press OK), then click Events tab on the object inspector, double click the OnClose edit box, you'll be directed to the event handler, and change the Action variable to caFree between begin and end.

procedure TImageForm.FormClose(Sender: TObject; var Action: TCloseAction);
begin
 Action:=caFree;
end;

Loading Image File
Here some steps to load an image from a file:

1. To load and display an image file, we will use ImageForm defined in ImageUnit, so click on MainForm and click menu File->Use Unit, and select ImageUnit then press OK. Make sure that uses ImageUnit is automatically added below the keyword implementation.

implementation

uses ImageUnit;

{$R *.dfm}

2. Add ActiveX in the uses , this trick is needed to resolve TOpenPictureDiaolog bug (showing access violation error, I find this bug on Delphi 7 running on Windows XP SP2). Now the uses section will look like this:

implementation

uses ActiveX, ImageUnit;

{$R *.dfm}

As an integrated part of the trick, add an initialization and finalization just before the end of the file (before end.) like shown below:

initialization
OleInitialize(nil);
finalization
OleUninitialize
end.

3. Make an event handler of MainMenu1->File->Open, by double clicking the MainMenu1 component, and double click the Open menu. you will be directed to the script editor.

procedure TMainForm.Open1Click(Sender: TObject);
begin

end;

Edit that script as shown below:

procedure TMainForm.Open1Click(Sender: TObject);
var
formatInfo:string;
begin
if OpenPictureDialog1.Execute then
begin
Application.CreateForm(TImageForm, ImageForm);
ImageForm.Image1.Picture.LoadFromFile(
OpenPictureDialog1.FileName);
ImageForm.ClientHeight:=
  ImageForm.Image1.Picture.Height;
ImageForm.ClientWidth:=
  ImageForm.Image1.Picture.Width;
case (ImageForm.Image1.Picture.Bitmap.PixelFormat) of
  pf1bit : formatInfo:='Binary';
  pf8bit : formatInfo:='Gray scale';
  pf24bit: formatInfo:='True color';
end;
StatusBar1.SimpleText:= OpenPictureDialog1.FileName +' '+
  IntToStr(ImageForm.Image1.Picture.Width) + 'x'+
    IntToStr(ImageForm.Image1.Picture.Height) + ' '+
      formatInfo;
end;
end;

Saving The Image to A File
Although we haven't implemented the image processing code, we can implement file saving function right now. To write File->Save event handler, follow this steps:

1. Double click the MainMenu1 component, and double click the Save item, you'll be directed to the event handler sript:

procedure TMainForm.Save1Click(Sender: TObject);
begin

end;

2. Edit that script as shown below:

procedure TMainForm.Save1Click(Sender: TObject);
begin
try
begin
 if SavePictureDialog1.Execute then
     TImageForm(ActiveMDIChild).Image1.Picture.SaveToFile(
 SavePictureDialog1.FileName);
end
except
     ShowMessage('Operation is not complete');
end;
end;

Figure 3. The Executable

Writing File->Close Event Handler

1. Double click the MainMenu1 component, and double click the Close item, you'll be directed to the event handler sript:

procedure TMainForm.Close1Click(Sender: TObject);
begin

end;

2. Edit that script as shown below:

procedure TMainForm.CLose1Click(Sender: TObject);
begin
   try
     ActiveMDIChild.Close;
   except
     ShowMessage('Operation is not completed');
   end;
end;

Writing File->Exit Event Handler

To write File-Exit event handler, double click the MainMenu1 component, and double click the Close item, you'll be directed to the event handler sript, and add close; inside the begin-end:

procedure TMainForm.Exit1Click(Sender: TObject);
begin
 Close;
end;

Now you can compile and run the executable. Figure 3 show the executable viewing an image. You can download the source code of this GUI for Delphi 7 here, and for Turbo Delphi Explorer here.