How to change images dynamically with radio buttons in app designer?

I have a question regarding radio buttons in Matlab app designer. I am also adding photo of the UI for clear understanding. First, I want to load two images from my local directory and show them on UIaxes when the corresponding radio button is chosen. However, let's say I load the first image by clicking Image 1 button and even Image 1 radio button is chosen the image isn't loaded on UIaxes immediately. However, If I change the radio button to the second one and then click the first one Image 1 is loaded on UIaxes. So in short, How can I make loading of image in UIaxes dynamically?

Here is so far what I attempted, I only added the lines of code that I wrote:

properties (Access = private)
        FirstImage
        SecondImage
end

 methods (Access = private)

        % Button pushed function: Image1Button
        function Image1ButtonPushed(app, event)

           [filename,filepath] = uigetfile({'*.jpg;*.tif;*.png;*.gif','All Image Files'});
           fullname = [filepath, filename];
           if isnumeric(filename); return; end   
           app.FirstImage = imread(fullname);
        end

        % Button pushed function: Image2Button
        function Image2ButtonPushed(app, event)
           
           [filename,filepath] = uigetfile({'*.jpg;*.tif;*.png;*.gif','All Image Files'});
           fullname = [filepath, filename];
           if isnumeric(filename); return; end
           app.SecondImage = imread(fullname);
end

 function ChangeimageButtonGroupSelectionChanged(app, event)
           
            if app.Image1.Value
                imshow(app.FirstImage, 'Parent', app.UIAxes);
            elseif app.Image2.Value
                imshow(app.SecondImage, 'Parent', app.UIAxes);
            end  
        end
 end

[TADA]

works for me... do you get an error?

[TADA]

I had to change the name of the radio buttons though from what you set, the default name app designer gave them was Image1Button_2 and Image2Button_2 (because Image1Button and Image2Button where taken already by the push buttons)

[Hamid Kilic]

I don't get an error my code works but when I choose an image from my local diractory, the image isn't shown immediatly. For the image to be shown, I have to click the second radio button and again I have to click the first button and then I see the image. My problem is I cannot see the image when It is loadded the first time. I know that I have to add something to fire the action but I don't knoe how to do it, so I think something is missing in my code. I hope I could explain.

Answer 1

[Cris LaPierre]

The radio buttion group callback is executed when the selection changes. That is why you have to select image 2 then image 1 to get image 1 to appear (i.e. you have to change the selection).

If you want image 1 to be loaded when the app opens, consider adding a startup callback function to load image 1 to the axes initially.

[Hamid Kilic]

Thanks for the reply. How can I do that If every time a different image is chosen? If I understood you correctly, I can't choose a default image because I don't what image will be chosen as Image 1.

[Cris LaPierre]

Your selection change function is a function. Call it after you load image 1 (untested code for image1 below).

function Image1ButtonPushed(app, event)
   [filename,filepath] = uigetfile({'*.jpg;*.tif;*.png;*.gif','All Image Files'});
   fullname = [filepath, filename];
   if isnumeric(filename); return; end   
   app.FirstImage = imread(fullname);
   
   ChangeimageButtonGroupSelectionChanged(app, app.ChangeimageButtonGroup)
end

[Hamid Kilic]

Thanlks, It works fine. Can you explain what app.ChangeimageButtonGroup means here and why is it necessary? I think, I also did something similar to this I added this line in Image1ButtonPushed() function.

   imshow(app.ImageFile375, 'Parent', app.UIAxes);

[Cris LaPierre]

That's just redundant code. You should do either my approach or yours, but not both.

My approach calls the ChangeimageButtonGroupSelectionChanged function. If you look in your function declaration line, this function expects two inputs: app and event. In that context, app.ChangeimageButtonGroup is your event input, meaning the invoking component. It is unused in your function, so really you could put anything for the 2nd input. If just needs to have two.