How to properly position multiple plots within app-designer

95 views (last 30 days)
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
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
Edited: 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
  3 Comments
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 (2)

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

Lea Corbova
Lea Corbova on 17 Oct 2020
  3 Comments
Lea Corbova
Lea Corbova on 17 Oct 2020
Yes, but without a change. Maybe I added it to wrong place?
pbaspect(axes(ii),'auto'); I added it after plot
elseif T<=20
app.TabGroup.SelectedTab = app.Tab2;
app.Tab2.Scrollable = 'on';
[row,col] = find(app.arrayik==1);
L=length(row);
app.GridLayout=uigridlayout(app.Panel,[(ceil(L/3)) 3]);
A = 120*ones(1,(ceil(L/3)));
app.GridLayout.RowHeight=A;
app.GridLayout.ColumnWidth={'1x','1x','1x'};
for ii=1:L
axes(ii) = uiaxes(app.GridLayout, 'HandleVisibility','on');
set(app.GridLayout,'Scrollable', 'on');
signal=app.record(row(ii),:);
fvz=app.infopoint.samples(row(ii));
NN=length(signal);
cas=((1:NN)/(fvz));
h=plot(axes(ii),cas,signal, 'Color',rand(1,3));
pbaspect(axes(ii),'auto');
title(axes(ii),app.nazvy(row(ii)),'Rotation',0,'FontWeight','bold','Color',h.Color);
end
app.GridLayout.Scrollable = 'on';
Lea Corbova
Lea Corbova on 18 Oct 2020
Edited: Lea Corbova on 18 Oct 2020
I already solved this, the problem was with ticks on y axes. I rotate them and the problem was solved. I used:ytickangle(axes(ii),90)

Sign in to comment.

Categories

Find more on App Building in Help Center and File Exchange

Products


Release

R2019b

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!