Build Image Comparison Tool

This example shows how to make a GUI that displays two images side by side in scroll panels that are synchronized in location and magnification.

First, define a function that builds the app. This example uses a function called my_image_compare_tool, which is attached at the end of the example.

After you define the function that builds the app, test the app. Get two images.

I = imread('flamingos.jpg');
L = rgb2lightness(I);
Iedge = edge(L,'Canny');

Display the images in the app. When you move the detail rectangle in the Overview tool or change the magnification in one image, both images respond.

my_image_compare_tool(I,Iedge);

App Creation Function

The my_image_compare_tool function accepts two images as input arguments and displays the images in scroll panels. The custom tool also includes an Overview tool and a Magnification box. Note that the function suppresses the toolbar and menu bar in the figure window because scrollable navigation is incompatible with standard MATLAB™ figure window navigation tools.

To synchronize the scroll panels, the function makes the connections between tools using callbacks and the Scroll Panel API functions. The function specifies a callback function that executes every time the magnification changes. The function specified is the setMagnification API function of the other scroll panel. Thus, whenever the magnification changes in one of the scroll panels, the other scroll panel changes its magnification to match. The tool sets up a similar connection for position changes.

function my_image_compare_tool(left_image,right_image)

% Create the figure
hFig = figure('Toolbar','none',...
              'Menubar','none',...
              'Name','My Image Compare Tool',...
              'NumberTitle','off',...
              'IntegerHandle','off');
          
% Display left image              
subplot(121)  
hImL = imshow(left_image);

% Display right image
subplot(122)
hImR = imshow(right_image);

% Create a scroll panel for left image
hSpL = imscrollpanel(hFig,hImL);
set(hSpL,'Units','normalized',...
    'Position',[0 0.1 .5 0.9])

% Create scroll panel for right image
hSpR = imscrollpanel(hFig,hImR);
set(hSpR,'Units','normalized',...
    'Position',[0.5 0.1 .5 0.9])

% Add a Magnification box 
hMagBox = immagbox(hFig,hImL);
pos = get(hMagBox,'Position');
set(hMagBox,'Position',[0 0 pos(3) pos(4)])

%% Add an Overview tool
imoverview(hImL) 

%% Get APIs from the scroll panels 
apiL = iptgetapi(hSpL);
apiR = iptgetapi(hSpR);

%% Synchronize the left and right scroll panels
apiL.setMagnification(apiR.getMagnification())
apiL.setVisibleLocation(apiR.getVisibleLocation())

% When the magnification changes on the left scroll panel, 
% tell the right scroll panel
apiL.addNewMagnificationCallback(apiR.setMagnification);

% When the magnification changes on the right scroll panel, 
% notify the left scroll panel
apiR.addNewMagnificationCallback(apiL.setMagnification);

% When the location changes on the left scroll panel, 
% notify the right scroll panel
apiL.addNewLocationCallback(apiR.setVisibleLocation);

% When the location changes on the right scroll panel, 
% notify the left scroll panel
apiR.addNewLocationCallback(apiL.setVisibleLocation);

end