How to add a waitbar into an app created in App designer? Not in a separate figure.

I have done a lot of research on this and cannot seem to find a solution that is what I am looking for... maybe because what I am trying to do just isn't possible in Matlab, but I am sure there is a way.

I have an app that I am designing in App designer that is in the barebones stages right now... I want to implement a wait bar of some sort into the app along with the other components, i.e. not in a separate figure. Alot of what I have found has been using the waitbar function to open another figure with the waitbar, and I currently am using that right now, but want to get the waitbar inside my app.

I may not be able to use the matlab built in waitbar, and have already tried looking through the code but was not able to replicate the creation of it inside the app.

I know there are many options on the file exchange, but again, nothing that seems to be what I am looking for.

Does anyone know of a way, or can guide me in the right direction as to how I can approach this? Just imagine opening app designer, adding in a button or slider or whatever, and then adding in a waitbar to that same figure, that can update by pressing the button for example.

Hopefully someone has come up with a good solution for this by now and can help me out! Open to all suggestions.

Thank you very much,

Austin

Answer 1

[Adam Danz]

With AppDesigner you should be using uiprogressdlg() which displays a progress bar on top of your GUI within an external figure.

If you want progress bar functionality embedded within the app, you'll have to build it yourself. One way to do that is to create a long, rectangular axes that ranges from x=0:1. From within your code, you can set the size of a patch object (patch properties) that continually grows as you update its size and then vanishes after reaching 100%.

Also, learn how to embedd a progress bar within a UI Button!

Here's a functional demo that creates an embedded progress bar and updates the progress within a loop. It also shows the percent complete.

% Set up the progress bar axis
fh = clf();
ax = axes(fh,'Position',[.1 .4 .8 .05],'box','on','xtick',[],'ytick',[],...
    'color',[0.9375 0.9375 0.9375],'xlim',[0,1],'ylim',[0,1]); %gray94
title(ax,'Progress')

% Create empty patch that will be updated
ph = patch(ax,[0 0 0 0],[0 0 1 1],[0.67578 1 0.18359]); %greenyellow

% Create the percent-complete text that will be updated
th = text(ax,1,1,'0%','VerticalAlignment','bottom','HorizontalAlignment','right'); 

% Create processing loop that updates the progress bar
n = 100; 
for i = 1:n
    % update patch size and percentage text
    ph.XData = [0 i/n i/n 0]; 
    th.String = sprintf('%.0f%%',round(i/n*100)); 
    drawnow %update graphics
       
end

[Austin Adam]

Hi Adam,

Thank you very much for the response! This was a perfect solution and is very easy to implement. I appreciate your help!

[Adam Danz]

Thanks for the feedback!

[Andrés BELISARIO]

Thanks Adam by your contribution..!!

[Derrick Hasterok]

Nice link to a tutorial, but my brain hurts just watching it.

[Captain Karnage]

I want to add that, in case it wasn't clear in this answer or the MATLAB documentation (it wasn't to me) the following two points:

1. When you create the application, the first and only (I think) first-level child of your application is a figure, named app.UIFigure by default (you can, of course, rename it in App Designer).
2. If you use a handle to that figure as the first argument of uiprogressdlg(), then when you invoke uiprogressdlg() on that figure (instead of creating a new figure, like in the example), it will grey out and disable the interactive elements of your application and place the progress dialog in front of it. Once once you close the dialog box, it will restore your application to normal use - which is probably exactly what most people want.

Example:

%Runs your app, and stores a handle in variable thisApp, where myAppName is the name of your .mlapp file
thisApp = myAppName; 

%This creates a handle to the figure component of your app, stroed in variable thisFigure, assuming the default name of UIFigure in your app
thisFigure = thisApp.UIFigure;

%This command will grey out your application and put your progress bar in front of it 
thisProgress = uiprogressdlg( thisFigure, 'Title', 'This is My Progress Bar', 'Message', 'Loading Data for My Application', 'Value', 0);

%These commands update the message and progress shown in your progress bar...
thisProgress.Message = 'Half Way Through Loading...';
thisProgress.value = 0.5;

%This command closes the progress bar and restores normal function of your Application
close(thisProgress);

[Paul Dryburgh]

Exactly the solution I was looking for, thanks!

Answer 2

[balandong]

To add on @adam answer, the following update are to be made if one desire this to be used with app designer.

% Set up the progress bar axis
fig=app4;
    fig.Panel.AutoResizeChildren = 'off'; % To avoid using the whole uifigure space, advisable to place under the panel
    ax = subplot(1,1,1,'Parent',fig.Panel);
    
    ax.Position=[.1 .4 .8 .05]
    ax.Box='on'
    ax.XTick=[];
    ax.YTick=[];
    ax.Color=[0.9375 0.9375 0.9375];
    ax.XAxis.Limits=[0,1];
    ax.YAxis.Limits=[0,1];
title(ax,'Progress')
% Create empty patch that will be updated
ph = patch(ax,[0 0 0 0],[0 0 1 1],[0.67578 1 0.18359]); %greenyellow
% Create the percent-complete text that will be updated
th = text(ax,1,1,'0%','VerticalAlignment','bottom','HorizontalAlignment','right'); 

% Create processing loop that updates the progress bar
n = 100; 
for i = 1:n
    % update patch size and percentage text
    ph.XData = [0 i/n i/n 0]; 
    th.String = sprintf('%.0f%%',round(i/n*100)); 
    drawnow %update graphics
       
end

[Adam Danz]

Tip: you can store the handle to the patch object and the text as an app property so those objects can be accessed anywhere within the app. See these instructions to store variables as app properties.

[jflaidla]

Adam: I'm trying to use your script in App Designer but stuck with the first line (fig = app4;). Should I substitute the handle for the figure, which I think is app.<name of app>? I've tried gcf ...nothing works. Any suggestions?

[Adam Danz]

That's actually the first line of balandong's answer.

Yes, that should be the app handle.

I don't recommend creating a new variable. Instead of creating app4, just replace that variable with app.MyAppFigure, where MyAppFigure is the the handle to your app's figure. As you indicated, this is usually the name of your app.

[balandong]

I concur with adam statement above.

The main reason why I have the line

fig=app4;

is because, I would like to call the app4 from another m file.

[Oded]

Hello,

Thank you for sharing your code and tips.

What object do you use in order to set fig.Panel?

uiimage and uiaxes don't have a 'Panel' attribute...

What did you mean "the handle to your app's figure"?

Thank you,

Oded

[Henning]

@balandong Your solution works great. Can u tell me, how I can make the progress bar thicker?

[Voss]

Increase the 4th element of the axes Position:

ax.Position=[.1 .4 .8 .05] % change .05 to 0.1 or 0.2, etc.