Interesting Questions
Popular Discussions
From the Blogs
![](https://www.mathworks.com/matlabcentral/discussions/uploaded_files/31166/image.png)
![](https://www.mathworks.com/matlabcentral/discussions/uploaded_files/31171/image.png)
Interesting Questions
Popular Discussions
From the Blogs
![](https://www.mathworks.com/matlabcentral/discussions/uploaded_files/33376/image.png)
![](https://www.mathworks.com/matlabcentral/discussions/uploaded_files/33196/image.png)
- Dark mode / theme support - Change the colors of the desktop by selecting a dark theme.
- Updated layout - Quickly access tools and change your layout using the sidebar.
- Expanded search capabilities - Easily find actions, settings, and resources using the new universal search box.
- Figure toolstrip - Use the new figure toolstrip to easily modify annotations, text, and line styles, and view generated code.
- Keyboard and screen reader accessibility support - Use a screen reader to interact with the Command Window, Editor and desktop tools.
- Enhanced MATLAB Projects workflows - Collaborate using an improved user interface, manage multiple repositories using the Branch Manager, and investigate project hierarchies using the new Dependency Analyzer view.
![MATLAB Dark Mode](https://www.mathworks.com/matlabcentral/discussions/uploaded_files/17825/MATLAB%20Dark%20Mode.png)
Interesting Questions
Popular Discussions
From File Exchange
From the Blogs
![](https://www.mathworks.com/matlabcentral/discussions/uploaded_files/31956/image.png)
![](https://www.mathworks.com/matlabcentral/discussions/uploaded_files/31961/image.png)
![](/matlabcentral/discussions/uploaded_files/1021/demoApp.gif)
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.
![](/matlabcentral/discussions/uploaded_files/1022/ButtonSettings.gif)
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.
![](/matlabcentral/discussions/uploaded_files/1025/svgDemo.png)
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 .
![](/matlabcentral/discussions/uploaded_files/1024/truecolordemo.gif)
% 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
![](https://www.mathworks.com/matlabcentral/discussions/uploaded_files/32256/image.png)