MATLAB Answers

How can I make an image comparison slider in Matlab?

5 views (last 30 days)
Muhammad Abir
Muhammad Abir on 9 Apr 2020
Edited: Ameer Hamza on 10 Apr 2020
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.

  0 Comments

Sign in to comment.

Accepted Answer

Ameer Hamza
Ameer Hamza on 9 Apr 2020
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

More Answers (1)

Muhammad Abir
Muhammad Abir on 10 Apr 2020
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?

  1 Comment

Ameer Hamza
Ameer Hamza on 10 Apr 2020
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

Sign in to comment.

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!