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
4 Comments
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.
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.