progress bar in app design (GUI)
207 views (last 30 days)
Show older comments
Veronica Taurino
on 19 Feb 2021
Commented: Mohammed Azharuddin
on 15 Aug 2023
Hi!
I need to create a progress bar like the following bar with the APP DESIGN:
![](https://www.mathworks.com/matlabcentral/answers/uploaded_files/524909/image.png)
% 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
Accepted Answer
Adam Danz
on 19 Feb 2021
Edited: Adam Danz
on 15 Aug 2023
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. (note: Code in step 3 was updated on Feb-11-2022 to improve efficiency).
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);
RGB = app.processDataButtonHandle.Icon;
RGB(2:end-1, 2:currentProg+1, 1) = 0.25391; % (royalblue)
RGB(2:end-1, 2:currentProg+1, 2) = 0.41016;
RGB(2:end-1, 2:currentProg+1, 3) = 0.87891;
app.processDataButtonHandle.Icon = RGB;
% 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.
14 Comments
Adam Danz
on 15 Aug 2023
What the value for app.ProgressButton.BackgroundColor before you make any changes in startup?
Mohammed Azharuddin
on 15 Aug 2023
@Adam Danz Didnt assign any, however, a work around, was I used your idea of patch function and instead of i/n, I just used i in x values to update it, I added for loop in various sections of my startup function, so I know which position it is! Thanks Adam, your comments and replies are really useful.
More Answers (0)
See Also
Categories
Find more on Dialog Boxes in Help Center and File Exchange
Community Treasure Hunt
Find the treasures in MATLAB Central and discover how the community can help you!
Start Hunting!