MATLAB Answers

How to properly position multiple plots within app-designer

19 views (last 30 days)
Leon
Leon on 22 Jan 2020
Answered: Leon on 4 Feb 2020 at 22:16
I use gridlayout to hold each of the plots, but they go wild quickly. In the attachment is a picture of what it looks like. Please pay attention to the two plots on the top right corner.
Why doesn't app-designer allows me to position the plots like I do with subplots within a figure?

  8 Comments

Show 5 older comments
Mohammad Sami
Mohammad Sami on 25 Jan 2020
In the Design view, drop a Panel in the position you want to place the tiledlayout.
You will have to create in code. Click code view. Click on AppInputArguments, type in varargin. It will create a startup function.
Click on Property and add a property called tiledlayout. (If you want to access it from workspace, make it public)
Inside the function you can create a tiledlayout, and initialise anything else.
function startupFcn(app, varargin)
app.tiledlayout = tiledlayout(app.Panel);
% do anything else you wish to intialise the app
end
Leon
Leon on 25 Jan 2020
Many thanks! I just followed your recommendations and now I have an app.tiledlayout variable stored.
Now, what should I do? Should I delete the current gridlayout from my current Tab (app.Tab1)? How about my plots? I have 2x4 = 8 plots on Tab1. Where should I put those plots next?
Do I have to use nexttile, or I can specify them like subplot(m,n,i)?
Mohammad Sami
Mohammad Sami on 26 Jan 2020
Yes if your gridlayout was only for the axes, you can replace it with a panel as above. If your gridlayout also contains other uielements, you will need to keep it. just place a panel in the gridlayout in the position where you want to put the tiledlayout.
During creation of the tiledlayout you can specify how many tiles you want.
app.tiledlayout = tiledlayout(app.Panel,m,n);
When you are plotting, use the nexttile to get the axes to plot on
tilenum = 1; % last tile = m*n
ax = nexttile(app.tiledlayout,tilenum); % the first argument specifies which layout to plot on
% you might have multiple tiledlayout on multiple tabs. etc.
% plot(ax,)

Sign in to comment.

Accepted Answer

Mohammad Sami
Mohammad Sami on 26 Jan 2020
In the Design view, drop a Panel in the position you want to place the tiledlayout.
You will have to create in code. Click code view. Click on AppInputArguments, type in varargin. It will create a startup function.
Click on Property and add a property called tiledlayout. (If you want to access it from workspace, make it public)
Inside the function you can create a tiledlayout, and initialise anything else.
If your gridlayout was only for the axes, you can replace it with a panel as above. If your gridlayout also contains other uielements, you will need to keep it. just place a panel in the gridlayout in the position where you want to put the tiledlayout.
During creation of the tiledlayout you can specify how many tiles you want.
When you are plotting use the nexttile function to get the axes to plot on.
function startupFcn(app, varargin)
m = 2;
n = 4;
app.tiledlayout = tiledlayout(app.Panel,m,n);
% do anything else you wish to intialise the app
tilenum = 1; % last tile = m*n
ax = nexttile(app.tiledlayout,tilenum); % the first argument specifies which layout to plot on
% you might have multiple tiledlayout on multiple tabs. etc.
% plot(ax,)
end

  2 Comments

Leon
Leon on 26 Jan 2020
Many thanks for the proposed script and sorry for the many questions!
When I used gridlayout, all the 2x4 plots are resting within the gridlayout. When I delete the gridlayout, all the 8 plots (for initialization purposes) are also deleted from the Design view.
The code you provide is for the actual plotting, and it does not touch the initializaiton of these plots. Is that right? Now I have an error complaining the axle handles do not exist. Is there a way I can park the 16 plots as part of the tiledlayout in the design view the same way as how gridlayout works?
Unrecognized property 'Plot11' for class 'Tool_tiledLayout'.
Here is the code for one of the plots:
T1 = tiledlayout(app.Tab1, 2,4);
app.Plot11 = nexttile(T1,1);
set(app.Plot11, 'Ydir', 'reverse', 'xAxisLocation', 'top', 'tickDir', 'out');
xlim(app.Plot11, [0 40]);
ylim(app.Plot11, [0 1000]);
xlabel(app.Plot11, 'CTDSAL');
ylabel(app.Plot11, 'Depth (m)');
Thank you very much!
Mohammad Sami
Mohammad Sami on 26 Jan 2020
Yes. you will need to create properties in the app designer first, before you can access them. Alternatively you can create one property called plotaxes and then use it as a cell array of axes.
% add a property called plotaxes
app.plotaxes = cell(8,1); %initialise it as cell array.
app.plotaxes{1} = nexttile(T1,1);
set(app.plotaxes{1}, 'Ydir', 'reverse', 'xAxisLocation', 'top', 'tickDir', 'out');
xlim(app.plotaxes{1}, [0 40]);
ylim(app.plotaxes{1}, [0 1000]);
xlabel(app.plotaxes{1}, 'CTDSAL');
ylabel(app.plotaxes{1}, 'Depth (m)');
app.plotaxes{2} = nexttile(T1,2);
% .....

Sign in to comment.

More Answers (1)

Leon
Leon on 4 Feb 2020 at 22:16
For future reference, I finally got this figured it out. All I need to do is to set the "PlotBoxAspectRatioMode" property to "auto".

  0 Comments

Sign in to comment.

Sign in to answer this question.

Products


Release

R2019b

Translated by