How can I make an image comparison slider in Matlab?

I'd like to create an image comparison slider in Martlab similar to this (https://www.w3schools.com/howto/howto_js_image_comparison.asp) however I have no idea how can I implement that. The slider show display two images interactively by sliding the slider over the image. I'd greatly appreaciate if somone can help me with this. Thanks in advance.

Answer 1

[Ameer Hamza]

I patched together this example using a figure callback function. You can try it and modify according to your requirement

im_left = im2double(imread('pears.png')); % opening two example images
im_right = im2double(imread('peacock.jpg'));
im_right = imresize(im_right, size(im_left, [1 2])); % making the dimensions equal

f = figure();
ax = axes('Units', 'pixels');
imshow(im_left);
hold(ax);
im_handle = imshow(im_right);
im_handle.AlphaData = zeros(size(im_left, [1 2]));
axes_pos = cumsum(ax.Position([1 3]));
f.WindowButtonMotionFcn = {@cb,  size(im_left,2), im_handle, axes_pos};

function cb(obj, ~, im_width, im_handle, axes_pos)
    x_pos = obj.CurrentPoint(1);
    if x_pos > axes_pos(1) && x_pos < axes_pos(2)
        left_cols = floor(floor(x_pos - axes_pos(1))/diff(axes_pos) * im_width);
        im_handle.AlphaData(:, 1:left_cols) = 0;
        im_handle.AlphaData(:, left_cols+1:end) = 1;
    end
end

[Muhammad Abir]

Thank you so much. Much appreciated

Answer 2

[Muhammad Abir]

Again thanks for your answer. However, I'd like to select the circle inside the center of the slider and then slide left or right. It seems the selection is always selected by default. Is there a way to select only the blue circle as shown in the link I provided and then move left-right?

[Ameer Hamza]

MATLAB does not natively support the callback for dragging mouse action. Following code shows a workaround. Adapt it according to your requirement.

im_left = im2double(imread('pears.png')); % opening two example images
im_right = im2double(imread('peacock.jpg'));
im_right = imresize(im_right, size(im_left, [1 2])); % making the dimensions equal

global isBtnPressed
isBtnPressed = false;

cir_radius = 50;
cir_angles = linspace(0,2*pi,50);
[cir_x, cir_y] = pol2cart(cir_angles, cir_radius);
cir_y = cir_y + size(im_left,1)/2;

f = figure();
ax = axes('Units', 'pixels');
imshow(im_left);
hold(ax);
im_handle = imshow(im_right);
im_handle.AlphaData = zeros(size(im_left, [1 2]));
patch_handle = patch(cir_x, cir_y, 'r', ...
    'EdgeColor', 'none', ...
    'FaceAlpha', 0.3);

axes_pos = cumsum(ax.Position([1 3]));
f.WindowButtonMotionFcn = {@cb_motion,  size(im_left,2), im_handle, cir_x, patch_handle, axes_pos};
f.WindowButtonDownFcn = @cb_btnPressed;
f.WindowButtonUpFcn = @cb_btnReleased;

function cb_motion(obj, ~, im_width, im_handle, cir_x, patch_handle, axes_pos)
    global isBtnPressed
    if isBtnPressed
        x_pos = obj.CurrentPoint(1);
        if x_pos > axes_pos(1) && x_pos < axes_pos(2)
            left_cols = floor(floor(x_pos - axes_pos(1))/diff(axes_pos) * im_width);
            im_handle.AlphaData(:, 1:left_cols) = 0;
            im_handle.AlphaData(:, left_cols+1:end) = 1;
            patch_handle.Vertices(:,1) = cir_x' + left_cols;
        end
    end
end

function cb_btnPressed(~,~)
    global isBtnPressed
    isBtnPressed = true;
end

function cb_btnReleased(~,~)
    global isBtnPressed
    isBtnPressed = false;
end