How to properly position multiple plots within app-designer

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?

[Ankit]

hows your code looks like?

[Mohammad Sami]

If you have the latest matlab r2019b, you can give tiledlayout a try.

[Leon]

Many thanks! What is the difference between gridlayout and tiledlayout?

[Mohammad Sami]

tiledlayout is specifically for axes. gridlayout can be used with many types of ui elements.

[Leon]

Many thanks, Mohammad!

I'm trying to use it within App Designer. For gridlayout, all I need to do is to drag the gridlayout icon to my panel, and add the plots there.

For the case of tiled layout, what should I do? There is no tiledlayout icon in the "Component library".

[Mohammad Sami]

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]

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]

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,)

Answer 1

[Mohammad Sami]

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

[Leon]

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]

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);
% .....

[Lea Corbova]

I have similar problem, can you help me please?

https://www.mathworks.com/matlabcentral/answers/616998-alignment-of-plots-with-gridlayout-in-app-designer-or-how-to-resize-plots-in-tiledlayout?s_tid=prof_contriblnk

Answer 2

[Leon]

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

Answer 3

[Lea Corbova]

I have similar problem, can you help me please?

https://www.mathworks.com/matlabcentral/answers/616998-alignment-of-plots-with-gridlayout-in-app-designer-or-how-to-resize-plots-in-tiledlayout?s_tid=prof_contriblnk

[Leon]

Did you try to set the "PlotBoxAspectRatioMode" property to "auto"?

[Lea Corbova]

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]

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)