|
Tutorial 7. Working with the TZThumbNavigator component Next | Previous
|
|
This tutorial shows examples of how to create preview-like applications using the TZThumbNavigator component.
|
|
Image preview application without writing code
|
|
The simplest preview application can be created without any lines of code. We need only drop a few components and set their properties in the Object Inspector. This application will be able to visualize the following:
- a set of disk-based images
- all images with file names satisfying some mask
- all frames of a set of AVI files with file names satisfying to some mask
- any combination of the above cases.
First we drop a TZBitmapLink onto the form and set its properties:
|
|
|
|
Then we drop the following components and set their Align properties:
|
TZThumbNavigator, Align = alLeft
TSplitter, Align = alLeft
TZImageBox, Align = alClient
|
|
The ZThumbNavigator1 object will be used for thumbnail preview of images. ZImageBox1 will visualize a selected image in the actual size. We connect these objects by the Lens property:
|
|
|
|
In the ZThumbNavigator1.Images collection we add a new element by double-clicking in the Object Inspector window and pressing the Add button in the collection editor. A new TZBLCollectionItem element appears in the Object Inspector, where we set its BitmapLink property to ZBitmapLink1. We can add several TZBLCollectionItem elements and connect them to all TZBitmapLink components that we have on the form. In this case ZThumbNavigator1 will visualize in its window all images and AVI files from all TZBitmapLink components.
Now you can select your images or AVI files in ZBitmapLink1. For example:
|
|
FileName = ‘c:\speedis.avi’ or FileName = ‘c:\*.avi’ or FileName = ‘c:\*.bmp’
Sequence = false Sequence = true Sequence = true
|
|
Now run the application.
|
|
Preview of image processing results
|
|
TZThumbNavigator is very convenient for visualizing intermediate image processing results. If you have many internal images of different data types in your program and want to look at them for debugging purposes, then TZThumbNavigator with TZImageBox or TZImageViewer are exactly what you need.
We demonstrate how to use TZThumbNavigator in the following example. Let us assume that our application produces many transformations with an input image and we want to visualize them all. We have the procedure Effect(EffectNumber:integer; InIm, OutIm:TZDataBitmap) which transforms an input image according to code of transformation (see source code for this tutorial).
First we implement initialization and finalization steps:
|
var Im:array[0..11] of TZDataBitmap; // declare all images
// Im[0] is used as an input image
// Im[1]...Im[11] are results of transformations
// Names of transformations; they are used as file names and as captions in ZThumbNavigator1
const EffectName:array[1..11] of string = (
'Concavity','Convexity','Explosion','Madness','Hor.Wave','Vert.Wave',
'FishEye','Ripples','Mosaic','Twirl','Star');
// Names of transformations as a single string; it is used as a file name in ZBitmapLink1
AllEffects:string =
'Concavity;Convexity;Explosion;Madness;
Hor.Wave;Vert.Wave;FishEye;Ripples;Mosaic;Twirl;Star';
procedure TForm1.FormCreate(Sender: TObject); // create all images
var i:integer;
begin
for i:=0 to 11 do Im[i]:=TZDataBitmap.Create;
end;
procedure TForm1.FormDestroy(Sender: TObject); // destroy all images
var i:integer;
begin
for i:=0 to 11 do FreeAndNil(Im[i]);
end;
|
|
Then we drop the standard TMainMenu component onto the form, add a File/Image processing menu item and implement the OnImageprocessing1 event handler:
|
procedure TForm1.Imageprocessing1Click(Sender: TObject);
var i:integer;
begin
//Open BMP file
with TOpenPictureDialog.Create(nil) do
begin
Filter:='BMP | *.bmp';
if Execute then
begin
//Close all previous images
for i:=0 to 11 do Im[i].Close;
//Open selected image
Im[0].Open(mmDisk,FileName);
if Im[0].DataType in [dt8BitImage, dt24BitImage, dt32BitImage] then
//procedure Effect can work only with these data types
begin
for i:=1 to 11 do //transform the image in 11 different ways
begin
with Im[0] do //create a new image identical to the input one
Im[i].NewImage(mmMemory,EffectName[i],DimX,DimY,Depth,DataType);
Im[i].Fill(0);
Effect(i,Im[0],Im[i]); //apply current effect
end;
// Visualize all transformed images in ZThumbNavigator1 using ZBitmapLink1
ZBitmapLink1.MappingMode:=mmMemory;
ZBitmapLink1.FileName:=AllEffects;
ZBitmapLink1.Active:=true;
end;
end;
Free; //destroy TOpenPictureDialog
end;
end;
|
|
Now we can run the application, open a color or grayscale image and watch all transformation results:
|
|
Adding external viewer
|
|
Using the OnSelecting and OnSelect events of the TZThumbnavigator component, we can implement any specific action when the user selects an image using the mouse. In this example we will pass the selected image to the Advanced Image Viewer. This technique is very convenient for debugging purposes.
First we drop the TZImageViewer component onto the form and set its VNum property to 1 (Advanced Image Viewer). Then we implement the event handlers:
|
procedure TForm1.ZThumbNavigator1Select(Sender: TObject);
// occurs when a new image is selected
begin
with ZThumbNavigator1 do
if (ImageIndex>=0) and ZImageViewer1.Visible then
// pass a new image to the viewer
ZImageViewer1.Viewer.Bitmap:=ImageBoxes[ImageIndex].Bitmap;
end;
procedure TForm1.ZThumbNavigator1Selecting(Sender: TObject);
// occurs when the previous image is unselected
begin
if ZImageViewer1.Visible then
ZImageViewer1.Viewer.Bitmap:=nil; // clear viewer
end;
|
|
To turn on/off the external viewer we add a View/Ext.Viewer item to the main menu and implement its OnClick event handler:
|
procedure TForm1.Extviewer1Click(Sender: TObject);
begin
Extviewer1.Checked:=not Extviewer1.Checked; // toggle state
ZThumbNavigator1Selecting(Self); // clear viewer
ZImageViewer1.Visible:=Extviewer1.Checked; // show/hide the viewer
ZThumbNavigator1Select(Self); // show selected image
end;
|
