App Designer - Understanding the Basics

Hi

i am a student and i am starting to learn how to work with the app designer. i should also mention that i am using the matlab R2020a version.

i was looking on how to create a heatmap and i found this command:

h = heatmap(app.UIFigure,rand(10));

so just for the beginning to get the feel of how everything works, i created a simple app by doing this next steps:

1. i draged to the canvas an "axes" component and a button.
2. i created a callback function for the button
3. i wrote the command i mentioned h = heatmap(app.UIFigure,rand(10)); in the button's callback function

i guess you know what happend when i ran the app... at first i saw the button and the axes window. and when i pressed the button the axes window "turned" into the heatmap.

i did that because i thought that the UIAxes is a component that's like "in charge" of the graphs... and it doesn't matter if i plot a simple X-Y plot, a surface or a heatmap.

so for example when i wanted to to see in the GUI a heatmap and a X-Y plot together, i tried to run this next code in the button's callback:

x = 1:1:10;

y = x*2;

h = heatmap(app.UIFigure,rand(10));

plot(app.UIAxes,x,y);

and of course I got an error when trying to run the plot command.

then i realized (and please correct me if i'm wrong) that the heatmap is kind of an equivalent object to the UIAxes and they both are displayed on the UIFigure.

SO.... my questions are:

1. how does the app designer object hierarchy work? for example on what objects can i show a heatmap? or how can i show two different plots simultaneously? this questions are about plots and graphs, but i would like to understand the subject in general.
2. is it possible to add a heatmap to my gui thru the "design view"? i saw a lot of different app examples that use so many different objects. so i guess what i see in the "Component Library" is only the basics... or maybe is it possible to add more components to the library?
3. Is there a document that has all (or even only the basic) app designer components, their "fields" that could be changed, and maybe even a short example on how to use them?

thats all for know... sorry for the long question, and thank you very much in advance

Answer 1

[Adam Danz]

The problem, as the error message indicates, is that HeatmapChart objects cannot be a child of UIAxes. It's just not supported (yet?). Here are your options.

Option 1) copy the HeatmapChart to the App and replace the app UIAxes

HeatmapChart objects can be hosted by a uifigure (which is what App Designer uses). Follow this demo

% Create a fake app
app.UIFigure = uifigure(); 
app.UIAxes = uiaxes(app.UIFigure); 

% Create a heatmap in an external figure
tempFig = figure(); %  or  figure('Visible','Off')
hmo = heatmap(magic(20), 'Parent', tempFig); 

% Copy heatmapChart to app (it will be in the wrong position for now)
hmoCopy = copyobj(hmo, app.UIFigure); 

% Reposition the heatmapChart over your existing axes
set(hmoCopy, 'Units', app.UIAxes.Units, 'OuterPosition', app.UIAxes.OuterPosition)
%   or...                               'Position',      app.UIAxes.Position)

% Replace UIAxes handle with the heatmapChart handle and delete UIAxes
delete(app.UIAxes)
app.UIAxes = hmo;  

Option 2) use an alternative to heatmap

imagesc(), image(), histogram2(__,'DisplayStyle','tile') and other functions are similar to heatmap() and are supported by uiaxes so you can plot them directly on your app. Don't forget to provide the axis handle as an imput: imagesc(app.UIAxes, __)

Remaining Q&A

Great questions!

on what objects can i show a heatmap?

The heatmap function produces a HeatmapChart object that can be a child of a Figure, Panel, Tab, or TiledChartLayout object which is explained under the "Parent" section of heatmap page.

https://www.mathworks.com/help/matlab/ref/matlab.graphics.chart.heatmapchart-properties.html

how can i show two different plots simultaneously?

If you want to plot something on an axes that already contains graphics, you just need to execute "hold(axis_handle, 'on')" and then proceed with plotting. However, remember that a heatmapChart is not axes so you can't plot on it. Use one of the alternatives I mentioned in option 2 of my answer.

is it possible to add a heatmap to my gui thru the "design view"?

No. But option 1 above shows you how to add it programmatically.

i guess what i see in the "Component Library" is only the basics.

More or less. Just know that figures and uifigures are different creatures. Some objects and functions are supported by both while others are only supported by one.

Is there a document that has all (or even only the basic) app designer components their "fields" that could be changed, and maybe even a short example on how to use them?

Start here

• https://www.mathworks.com/products/matlab/app-designer/component-gallery.html
• https://www.mathworks.com/help/matlab/creating_guis/choose-components-for-your-app-designer-app.html

Go to the 2nd link. It contains links to the properties of each component. Choose one of them and scroll to the very bottom of the page to the "See Also" section. There's usually a link to the object there which contains examples .