progress bar does not change color (Load)

Hi all,

so i wanna make a load progress bar for my app, (see joined picture). I found a code on matlab : https://www.mathworks.com/matlabcentral/discussions/highlights/132277-new-in-r2020a-app-button-animation-truecolor-images

Unfortunately, the blue color does not show. anyone can tell what i've done wrong please ? thank you

% Change button name to "Processing"
    app.ProgressButton.Text = 'Processing...';
    % Put text on top of icon
    app.ProgressButton.IconAlignment = 'left';
    % Create waitbar with same color as button
    wbar = permute(repmat(app.ProgressButton.BackgroundColor,150,1,2),[1,3,2]);
    % Black frame around waitbar
    wbar([1,end],:,:) = 0;
    wbar(:,[1,end],:) = 0;
    % Load the empty waitbar to the button
    app.ProgressButton.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.ProgressButton.Icon(2:end-1, 2:currentProg+1, 1) = 0.25391;
        app.ProgressButton.Icon(2:end-1, 2:currentProg+1, 2) = 0.41016;
        app.ProgressButton.Icon(2:end-1, 2:currentProg+1, 3) = 0.87891;
        % Pause to slow down animation
        pause(1)
    end
    % remove waitbar
    app.ProgressButton.Icon = '';
    % Change button name
    app.ProgressButton.Text = 'Done !';
    
    
    

[Adam Danz]

@Khalala Mamouri , what release of Matlab are you using?

The use of TrueColor to mimick a progress bar within a UI button requires Matlab r2020a or later. If you're using r2020a or later, I wonder what you're doing differently from the code shared in the link you provided.

[Khalala Mamouri]

Hi adam , after some changes i found what works fine, actualy in order to show the evolution of the loading, it is necessary to add a small delay, otherwise it just goes from 0% to 100 %. THis is what missing in my code.

this is the code :

app.ProgressButton.Text = 'Processing...';
    % Put text on top of icon
    app.ProgressButton.IconAlignment = 'center';
    % Create waitbar with same color as button
    wbar = permute(repmat(app.ProgressButton.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.ProgressButton.Icon = wbar;
    % Loop through something and update waitbar
    n = 2;
    ColorA =1;
    ColorB =1;
    ColorC =0;
    pos = 1;       % << First part equivalent to 30% loading 

        % Update image data (royalblue)
        app.ProgressButton.Text = 'Loading Main Data ...';
        currentProg = min(round((size(wbar,2)-2)*(pos/n)),size(wbar,2)-2);
        app.ProgressButton.Icon(2:end-1, 2:currentProg+1, 1) = ColorA;
        app.ProgressButton.Icon(2:end-1, 2:currentProg+1, 2) = ColorB;
        app.ProgressButton.Icon(2:end-1, 2:currentProg+1, 3) = ColorC;
        % Pause to slow down animation
       pause(0.1)
       
               % Update image data (royalblue)
               
                pos = 2; % << Second part 60 %
        app.ProgressButton.Text = '50 % ...';
        currentProg = min(round((size(wbar,2)-2)*(pos/n)),size(wbar,2)-2);
        app.ProgressButton.Icon(2:end-1, 2:currentProg+1, 1) = ColorA;
        app.ProgressButton.Icon(2:end-1, 2:currentProg+1, 2) = ColorB;
        app.ProgressButton.Icon(2:end-1, 2:currentProg+1, 3) = ColorC;
        % Pause to slow down animation
       pause(0.1)
       
                       pos = 3; % << third part 100%  
        app.ProgressButton.Text = '50 % ...';
        currentProg = min(round((size(wbar,2)-2)*(pos/n)),size(wbar,2)-2);
        app.ProgressButton.Icon(2:end-1, 2:currentProg+1, 1) = ColorA;
        app.ProgressButton.Icon(2:end-1, 2:currentProg+1, 2) = ColorB;
        app.ProgressButton.Icon(2:end-1, 2:currentProg+1, 3) = ColorC;
        % Pause to slow down animation
       pause(0.1)
       

[Adam Danz]

"... it is necessary to add a small delay..."

Yes, that's why the original demo you pointed to contains "pause(.3)" within the loop that updates the pseudo-progressbar. Sometimes the processes the user is waiting for much slower than 300ms so there's no need for a pause. However, you'll still likely need a drawnow so the image updates on each iteration.

You can probably replace those pause commands in your code with drawnow.

Answer 1

[Adam Danz]

To summarize the discussion in the comment section under the question, to use the pseudo-colorbar shown in this community highlight,

1. You must use Matlab r2020a or later
2. Be sure to execute drawnow or drawnow limitrate within the loop when the progress bar should update. pause is used in the demo only because there is no other process that consumes time in that demo. Otherwise, you could use pause(n) to slow down the progress bar if your process is very fast.