Part 1

1. Uploading the Display Image

using uifigure a graphical user interface is created and assigned a grid layout. This grid contains UI elements required for the assignment, including buttons, images, graphs, and tables.

fig = uifigure('Name', 'CW-G3', 'Position', [10, 100, 1300, 700]);
grid = uigridlayout(fig, [4 5]);
grid.RowHeight = {'1x', '1x', '4x', '3x'};
grid.ColumnWidth = {'1x', '1x', '1x', '1x', '1x'};

The button and image element for task 1 are defined as followed:

% Task 1
% upload image button
btn1 = uibutton(grid, ...
    'Text', 'Upload Image', ...
    'ButtonPushedFcn', @uploadImage, ...
    'HorizontalAlignment', 'center', ...
    'VerticalAlignment','center');
btn1.Layout.Row = 1;
btn1.Layout.Column = 1;

% uploaded image
img1 = uiimage(grid, 'ScaleMethod','fit');
img1.Layout.Row = 3;
img1.Layout.Column = 1;
img1.HorizontalAlignment = 'center';
img1.VerticalAlignment = 'center';

When clicked, the button invokes the uploadImage function:

function uploadImage(btn, event)
    [fileName, path] = uigetfile({ ...
        '*.jpg;*.png;*.bmp;*.tif;*.jpeg', ...
        'Image Files (*.jpg,*.png,*.bmp,*.tif)'}, ...
        'Select an Image');

    % if user cancels end
    if isequal(fileName, 0)
        return;
    end

    % to handle path / \ for different os's
    fullPath = fullfile(path, fileName);
    img = imread(fullPath);
    % normalize to 0 and 1
    img = im2double(img);
    % set image
    img1.ImageSource = img;
end

1. The uigetfile function lets the user select supported image with the supported image file type.
2. Edge cases are handled through isequal(fileName, 0) and fullPath = fullfile(path, fileName);.
   • isequal(fileName, 0) returns the function if the user does not pick a file.
   • fullPath = fullfile(path, fileName); help with handeling paths across operating systems
3. Image is normalized to double, as image data may exist in double, uint8, or uint16 formats. Standardizing to a single type makes image processing operations easier in future tasks.
4. The normalized image is displayed in the img1 element.