progress bar in app design (GUI)

248 views (last 30 days)
Veronica Taurino
Veronica Taurino on 19 Feb 2021
Commented: Adam Danz on 7 May 2021
Hi!
I need to create a progress bar like the following bar with the APP DESIGN:
% Button pushed function: ProcessDataButton
function ProcessDataButtonPushed(app, event)
% Change button name to "Processing"
app.ProcessDataButton.Text = 'Processing...';
% Put text on top of icon
app.ProcessDataButton.IconAlignment = 'bottom';
% Create waitbar with same color as button
wbar = permute(repmat(app.ProcessDataButton.BackgroundColor,15,1,200),[1,3,2]);
% Black frame around waitbar
wbar([1,end],:,:) = 0;
wbar(:,[1,end],:) = 0;
% Load the empty waitbar to the button
app.ProcessDataButton.Icon = wbar;
% Loop through something and update waitbar
n = 10;
for i = 1:n
% Update image data (royalblue)
currentProg = min(round((size(wbar,2)-2)*(i/n)),size(wbar,2)-2);
app.ProcessDataButton.Icon(2:end-1, 2:currentProg+1, 1) = 0.25391;
app.ProcessDataButton.Icon(2:end-1, 2:currentProg+1, 2) = 0.41016;
app.ProcessDataButton.Icon(2:end-1, 2:currentProg+1, 3) = 0.87891;
% Pause to slow down animation
pause(.3)
end
% remove waitbar
app.ProcessDataButton.Icon = '';
% Change button name
app.ProcessDataButton.Text = 'Process Data';
end
I need the progress bar to update AFTER calling my function, so I changed it into something like that:
% Button pushed function: ProcessDataButton
function ProcessDataButtonPushed(app, event)
% Change button name to "Processing"
app.ProcessDataButton.Text = 'Processing...';
% Put text on top of icon
app.ProcessDataButton.IconAlignment = 'bottom';
% Create waitbar with same color as button
wbar = permute(repmat(app.ProcessDataButton.BackgroundColor,15,1,200),[1,3,2]);
% Black frame around waitbar
wbar([1,end],:,:) = 0;
wbar(:,[1,end],:) = 0;
% Load the empty waitbar to the button
app.ProcessDataButton.Icon = wbar;
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% Loop through something and update waitbar
my_function(do things...)
<events?>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% remove waitbar
app.ProcessDataButton.Icon = '';
% Change button name
app.ProcessDataButton.Text = 'Process Data';
end
My problem: I don't know how to keep trace of my updates. Do I need to create an event? I followed this guide: Define Custom Event Data - MATLAB & Simulink - MathWorks Italia, but I did not manage to solve my problem: I need intermediate output before the end of the function to trace my advancements (hope to explain myself, my technical language is poor in this field). Is my path ok or not?
Do you have suggestions? Thank you
  5 Comments
Adam Danz
Adam Danz on 7 May 2021
@GT see uiprogressbar which is not embedded in a button but otherwise the same thing as this.

Sign in to comment.

Accepted Answer

Adam Danz
Adam Danz on 19 Feb 2021
Edited: Adam Danz on 19 Feb 2021
Step 0: Set up the app button
Add a button to your app and add a ButtonPushed callback function. Importantly, the height of the button must be extended to have enough space for the progress bar.
Step 1: Send button handle to external function
Call the external function from within the ButtonPushed callback function and pass the button handle to the pseudo-progress-bar as an input to the external function. I call it a pseudo-progress-bar because it's not a typical waitbar or uiprogressdlg.
app.ProcessDataButton is the button handle.
function ProcessDataButtonPushed(app, event)
myFunction(___, app.ProcessDataButton)
end
Also, define the additional input within the external function.
function myFunction(___, processDataButtonHandle)
Step 2: Set up the progress bar within the external function
Obviously this needs set up prior to the loop that will update the progress bar. Some of this block of code differs from the original example. Thanks to onCleanup in the last line below, the button will return to its original state after the loop or if an error prematurely ends the function.
% Store original button text
originalButtonText = processDataButtonHandle.Text;
% When the function ends, return the original button state
cleanup = onCleanup(@()set(processDataButtonHandle,'Text',originalButtonText,'Icon',''));
% Change button name to "Processing"
processDataButtonHandle.Text = 'Processing...';
% Put text on top of icon
processDataButtonHandle.IconAlignment = 'bottom';
% Create waitbar with same color as button
wbar = permute(repmat(processDataButtonHandle.BackgroundColor,15,1,200),[1,3,2]);
% Black frame around waitbar
wbar([1,end],:,:) = 0;
wbar(:,[1,end],:) = 0;
% Load the empty waitbar to the button
processDataButtonHandle.Icon = wbar;
Step 3: Update the progress bar within a loop
Place the code within the for-loop at the beginning or end of the loop depending on whether you want the progress bar to update before or after your loop processes. This example updates the progress bar at the end of the loop.
This section uses variables:
  • n - the number of iterations
  • i - the loop variable
n = = 10;
for i = 1:n
% % % % % % % % % % % % % % % % % %
% % YOUR LOOP STUFF GOES HERE % %
% % % % % % % % % % % % % % % % % %
% Update progress bar
currentProg = min(round((size(wbar,2)-2)*(i/n)),size(wbar,2)-2);
processDataButtonHandle.Icon(2:end-1, 2:currentProg+1, 1) = 0.25391; % (royalblue)
processDataButtonHandle.Icon(2:end-1, 2:currentProg+1, 2) = 0.41016;
processDataButtonHandle.Icon(2:end-1, 2:currentProg+1, 3) = 0.87891;
% Pause to slow down animation (OPTIONAL)
% pause(.3)
end
To clear the psueo-progress-bar and return the button to normal you have two options
  • Do nothing. The bar will be cleared and the button will return to normal after the external funtion is complete.
  • Exectue clear('cleanup') at any point after the loop within the same function to return the button state.
  4 Comments
Adam Danz
Adam Danz on 23 Feb 2021
I see. It would help knowing what your loop is going. What would the be the event that triggers the progress update? Is it a variable value change? A graphics update? And does the app have access to that event?

Sign in to comment.

More Answers (0)

Community Treasure Hunt

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

Start Hunting!