Add costume buttons to imagesc plot

Hello,

I wish to be able to run operation on an image from the image display. For example: I am presenting a binary image using imagesc, and I want to be able to reshape the data from the display GUI (with additional zero padding if needed). Another example: I want to have "two channels" to the dispaly, an image and a "mask", and I want to be able to present the mask over the image and remove it using a button in the display. Finally, I want to "wrap" all this as a function to which I will give the data ("image" and "mask" data), and that upon calling will generate this gui with the options I mentioned. What will be a good way to approach this?

[Umar]

Hi shahar,

To reshape the data of a binary image displayed using `imagesc` and add zero padding if needed, you can utilize MATLAB's built-in functions such as `imresize` for resizing the image and `padarray` for adding zero padding. These functions will allow you to manipulate the image data directly from the display GUI.

For more information on these functions, please refer to

https://www.mathworks.com/help/matlab/ref/imresize.html

https://www.mathworks.com/help/images/ref/padarray.html?searchHighlight=padarray&s_tid=srchtitle_support_results_1_padarray

For the scenario where you want to display two channels - an image and a mask - overlaid on top of each other with the ability to remove the mask using a button, you can use MATLAB's GUI development tools like `uifigure`, `imshow`, and `uicontrol` to create interactive elements in your display. By associating a callback function with the button, you can dynamically show or hide the mask layer as per user interaction.

For more information regarding uifigure,imshow, and uicontrol, please refer to

https://www.mathworks.com/help/matlab/ref/uifigure.html?searchHighlight=uifigure&s_tid=srchtitle_support_results_1_%2560uifigure%2560

https://www.mathworks.com/help/matlab/ref/imshow.html?searchHighlight=imshow&s_tid=srchtitle_support_results_1_imshow

https://www.mathworks.com/help/matlab/ref/uicontrol.html?searchHighlight=uicontrol&s_tid=srchtitle_support_results_1_uicontrol

To encapsulate this functionality into a reusable function that generates the GUI with the specified options, you can define a MATLAB function that takes the image and mask data as input arguments and constructs the display with the desired layout and interactive elements. This function can then be called whenever you need to visualize images with masks interactively.

Let me know if you need further assistance.

[Rik]

A GUI in Matlab is nothing special, it simply provides an interface between the user and the functions you write separately. For general advice and examples for how to create a GUI (and avoid using GUIDE), have look at this thread.

Answer 1

[Matlab Pro]

Hi @shahar stein

I have created a small GUI example

An init_GUI method creats the GUI which has an uiAxes and a checkbox pushbutton

Both the checkbox and the pushbuton 's callback call the updateGUI method

The updateGUI method looks for the axes's handle, and checkbox handles, then re-creates the image based on the checkbox's value (if checked - another row is added to the image (like 'padding)

Of course - what I do is just a demo. You can put you own image -related axtions (masking/other maniulations) on this callback

Have fun

function small_Gui_example()
init_GUI();

%=======================================

function init_GUI()
hFig = uifigure('Name',mfilename);
hGr = uigridlayout('Parent',hFig);
hGr.ColumnWidth = {100,'1x',100};
hGr.RowHeight = {'1x',70};
hAx = uiaxes('Parent',hGr,'Tag','myAxes');
hAx.Layout.Row=1;
hAx.Layout.Column=2;
data = rand(10)>0.8;
imagesc(hAx,data)
axis(hAx,'image');
box(hAx,'on');

h1 = uicheckbox('Parent',hGr,'Text','Zero Padding','Tag','cb_ZeroPadding', ...
    'ValueChangedFcn',@updateGUI);
h1.Layout.Column=1;
h1.Layout.Row=2;

h1 = uibutton('Parent',hGr,'Text','Re-create', ...
    'ButtonPushedFcn',@updateGUI);
h1.Layout.Column=3;
h1.Layout.Row=2;


%===============================================

function updateGUI(hObject,eventData)
hFig = ancestor(hObject,'figure');
hAx = findall(hFig,'Tag','myAxes');
cb_ZeroPadding = findall(hFig,'Tag','cb_ZeroPadding');
addZeroPadding = cb_ZeroPadding.Value;
data  = hAx.Children.CData;

if addZeroPadding
    [r,c] = size(data);
    data = [data;false(1,c)];
end
imagesc(hAx,data)

[shahar stein]

Hi @Matlab Pro,

Thank you. I have tried your example with some small changes and I have some problems. I am using Matlab R2023b. This is my code (each function saved in a different .m file)

function init_GUI()

hFig = uifigure('Name','RandName');

hGr = uigridlayout('Parent',hFig);

hGr.ColumnWidth = {100,'1x',100};

hGr.RowHeight = {'1x',70};

hAx = uiaxes('Parent',hGr,'Tag','myAxes');

hAx.Layout.Row=1;

hAx.Layout.Column=2;

data = rand(10)>0.8;

imagesc(hAx,data)

axis(hAx,'image');

box(hAx,'on');

hReshapeSlide = uicontrol('Parent',hGr,'Style','slider');

hReshapeSlide.Position = [10 10 300 20];

hReshapeSlide.Min = -100;

hReshapeSlide.Max = 100;

hReshapeSlide.Value = 0;

hReshapeSlide.Callback=@ReshapeData;

end

function ReshapeData(hObject,eventData)

hFig = ancestor(hObject,'figure');

hAx = findall(hFig,'Tag','myAxes');

val = hReshapeSlide.Value;

data = hAx.Children.CData;

NewDim2 = size(data,2) +val;

NewDim1 = ceil(size(data,2)*size(data,1)/NewDim2);

PaddingLength = NewDim2*NewDim1 - length(data(:));

data = data';

NewData = reshape([data(:) ;zeros(PaddingLength,1)],NewDim2, NewDim1 )';

imagesc(hAx,NewData)

end

When I am calling init_GUI() I have several problems:

1. The axes and data are not showing on the figure created. If I run the function step by step the image is created but when I run it continously the figure is eamty (except for the silde bar and re-create button)
2. If I try to scroll the scroll bar I get the following error:

Unable to resolve the name 'hReshapeSlide.Value'.

Error in ReshapeData (line 4)

val = hReshapeSlide.Value;

Error using matlab.ui.internal.controller.uicontrol.UIControlController/triggerActionEvent

Error while evaluating UIControl Callback.

Answer 2

[Image Analyst]

I'd just use AppDesigner to create a GUI with an axes on it. Then use imshow() to display the image. Then have a button that says something like "Toggle Overlay". There are several ways you can do it. You can either use imoverlay to create an RGB image where the mask is a solid color burned into (on top of) the image, and then use use imshow to show either the original image or the RGB image. Or you can use labeloverlay to create a tinted, semi-transparent mask over the image. Lastly you can display the mask as an image in the alpha channel above the image, where you can also set the transparency/opacity.

In your toggle button, you can do something like (untested)

if app.overlayShowing
    % Turn off overlay and show the original image.
    cla;
    imshow(grayImage);
    app.overlayShowing = false;
    % Change the caption for the toggle button.
    app.ToggleOverlay.Text = 'Turn Off Mask';
else
    % Turn on overlay and show the original image with mask as opaque red over it.
    cla;
    rgbImage = imoverlay(grayImage, mask, 'Red');
    imshow(rgbImage);
    app.overlayShowing = true;
    % Change the caption for the toggle button.
    app.ToggleOverlay.Text = 'Turn On Mask';
end

Make sure that whenever you call imshow() with the original image, you set app.overlayShowing to false, or better yet put

app.overlayShowing = false;

in the startup code of your app so it's initialized. Obviously change the variable names to match those that you're using.

This might be a fraction of a second slower than using the alpha channel but I doubt it would be noticeably slower.

If you use labelOverlay, if you have multiple regions in your mask, it can show up each region simitransparent tinted with a different color, if that's what you want/need.