"Next Button" and "command window" in App Designer

I am very new to Matlab App designer and have two questions. I appreciate any help.

1. I have a series of images located in a folder. I would like to show them one at a time and then go to the next one by pressing the "Next" button. How can I program the "Next" button?
2. I would like to see the values of variables in AppDesigner code. I know it's doable via debug mode and placing a break point at the line in which that variable is. But I don't see the values by hovering the mouse (although this feature is active in normal Matlab mode). Also, I don't really know where is the command window for App designer mode? I think it's not the same as Matlab command window because when I put variable's name there, it's undefined.

Thank you for any help

[Mohammad Sami]

In debug mode, you should be able to access the variables in the "function workspace" from the command window as any other code in debug mode.

[WhiteFlower]

Thank you for your response. This is what I expected but I get an error: "Undefined function or variable". Is there any other command window for App mode?

[Vaishnavi]

I have recently started learning app designer.

I have similar question.

I want to design an app. I has 3 buttons load next and previous.

Load button will load 1st image from folder which contains many images and next and previous button will load next or previous image to image which is already in image component.

[Mohammad Sami]

You can adapt the below code. Add a new function load previous as follows. You can then link it to your button callbacks.

function load_previous_image(app)
    idx = app.currentidx - 1;
    if idx == 0
        idx = 1;
    end
    app.load_image_at_index(idx);
end

Answer 1

[Mohammad Sami]

Make an app and add two properties. Filelist and currentidx and a placeholder for image in the app.

Make a function called load next image. Set it as the callback for your next button.

On startup load the filelist and display the first image.

properties (Access = private)
    currentidx = 1; %set to 1 initially
    Filelist = {};
end

function load_next_image(app)
    idx = mod(app.currentidx + 1,length(app.Filelist));
    if idx == 0
        idx = 1;
    end
    app.load_image_at_index(idx);
end

function load_image_at_index(app,j)
    app.currentidx = j;
    impath = app.Filelist{j};
    app.Image.ImageSource = impath;
end

% add a startup function by clicking AppInputArguments button in code view
function startupFcn(app,varargin)
    % app.Filelist = {'C:\test\test.png'}; % assign your list
    app.load_image_at_index(1);
end

[WhiteFlower]

I put the first part as a callback for the "next" button, but got the following error. Can you please let me know where I am doing wrong?

And is the second part callback for "start" button? I don't know what is "AppInputArguments" button.

[Tommy]

This first bit:

properties (Access = private)
    currentidx = 1; %set to 1 initially
    Filelist = {};
end

should not be within any other function. There should already be a section labeled 'properties' in your code, near the top, underneath the classdef, similar to this:

classdef app1 < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure  matlab.ui.Figure
    end

Add the first bit underneath this section:

classdef app1 < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure  matlab.ui.Figure
    end
    
    properties (Access = private)
        currentidx = 1; %set to 1 initially
        Filelist = {};
    end

Now app, an instance of your app, contains the properties currentidx and Filelist, and you can access them anywhere that you can access app by using app.currentidx or app.Filelist.

The second bit:

function load_next_image(app)
    idx = mod(app.currentidx + 1,length(app.Filelist));
    if idx == 0
        idx = 1;
    end
    app.load_image_at_index(idx);
end

should replace your NextButtonPushed function. Rename it to NextButtonPushed if you want.

The fourth bit:

function startupFcn(app,varargin)
    % app.Filelist = {'C:\test\test.png'}; % assign your list
    app.load_image_at_index(1);
end

is just a function that gets called whenever the app starts. The above code will automatically load the first image. For instructions on how to add the startupFcn, see here.

[WhiteFlower]

Thanks a lot Tommy for detailed explanation. It was very helpful.

I replaced code pieces as you said, however, still I am getting another error because of the load function. I add a screenshot here. I appreciate any hint.

[Tommy]

Ah, the code Mohammad provided is assuming you have create a uiimage called app.Image. In Design View, in the Component Library, find an 'Image' and drag it onto your app:

Then in Code View, verify that the image you added is called app.Image:

[Mohammad Sami]

Thanks Tommy for adding detailed explanation.

[WhiteFlower]

Thanks a lot Tommy for all additional explanations. I am now much more clear. Just can you please let me know which version of Matlab are you using? I don't see Image in common components and I think I need to creat it programmatically.

[Mohammad Sami]

uiimage component was added in R2019a

[WhiteFlower]

Thanks Mohammad!