Highlights
Follow


Adam Danz

New in R2020a: App button animation & truecolor images

Adam Danz on 28 Apr 2020 (Edited on 11 Feb 2022)
Latest activity Reply by Adam Danz on 23 May 2024 at 16:28

Starting in r2020a, AppDesigner buttons and TreeNodes can display animated GIFs, SVG, and truecolor image arrays.

Every component in the App above is either a Button or a TreeNode!

Prior to r2020a the icon property of buttons and TreeNodes in AppDesigner supported JPEG, PNG, or GIF image files specified by a character vector or string array but did not support animation.

Here's how to display an animated GIF, SVG, or truecolor image in an App button or TreeNode starting in r2020a. And for the record, "GIF" is pronounced with a hard-g .

Display an animated GIF

Select the button or TreeNode from within AppDesigner > Design View and navigate to Component Browser > Inspector > Button dropdown list of properties (shown below). Select an animated GIF file and set the text and icon alignment properties.

To set the icon property programmatically,

app.Button.Icon = 'launch.gif';  % or "launch.gif"

The filename can be an image file on the Matlab path (see addpath ) or a full path to an image file.

Display SVG

Use “scalable vector graphics” files for high-resolution images that are scaled to different sizes while preserving their shape and retaining their clarity. A quick and easy way to remember which plotting function is assigned to each button in an app is to assign an image of the plot to the button.

After creating the figure, expand the axes by setting the position or outerposition property to [0 0 1 1] in normalized units and save the figure using File > Save as and select svg format. Save the image to the folder containing your app. Then follow the same procedure as animated GIFs.

Display truecolor image

A truecolor image comes in the form of an [m x n x 3] array where each m x n pixel color is specified by an RGB triplet (read more) . This feature allows you to dynamically create a digital image or to upload an image from a mat file rather than an image file.

In this example, a progress bar is created within the uibutton callback function and it’s updated within a loop. For a complete demo of this feature see this comment .

% 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)
        % if mod(i,10)==0 % update every 10 cycles; improves efficiency
         currentProg = min(round((size(wbar,2)-2)*(i/n)),size(wbar,2)-2);
         RGB = app.ProcessDataButton.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.ProcessDataButton.Icon = RGB;
          % Pause to slow down animation
          pause(.3)
          % end
      end
      % remove waitbar
      app.ProcessDataButton.Icon = '';
      % Change button name
      app.ProcessDataButton.Text = 'Process Data';
  end

The for-loop above was improved on Feb-11-2022.

Credit for the black & teal GIF icons: lordicon.com

Gábor
Gábor on 23 May 2024 at 12:17
Hi Adam,
the idea is great, however I ran into refresh-issues: In Matlab 2020b and 2023b there is an ugly flickering effect during the execution of the following line within the for lop:
app.ProcessDataButton.Icon = RGB;
It seems that whenever the actual value assigned to the Icon property of the button changes, the previous icon is cleared, the text is rendered (for me at the center), then the new icon image is assigned and the whole button is re-rendered again (this time properly) delivering a really ugly user experience.
Is it a user-error on my side or is it the desired behaviour?
Cheers,
Gaben
Adam Danz
Adam Danz on 23 May 2024 at 16:28
Hi Gaben, the flickering you're experiencing is not a result of user-error. Thank you for reporting this issue.
Adam Danz
Adam Danz on 11 Feb 2022

Attached is a simple app demonstrating the embedded progress bar. See commented-lines within the button callback function for options to decrease the frequency of progress updates.

Adam Danz
Adam Danz on 19 Feb 2021 (Edited on 19 Feb 2021)

Step-by-step guide to creating the embedded progress bar

See this answer to follow 3 steps to add and control the button's progress bar from a function external to the App.