App designer tab groups insert a fig

6 views (last 30 days)
Gary English
Gary English on 24 Jun 2022
Commented: Kevin Holly on 24 Jun 2022
I have built an app using App Designer. This App has 6 tabs. I need to create a figure window on a particular tab say tab2 and then plot onto that figure which is part of Tab2

Answers (2)

Kevin Holly
Kevin Holly on 24 Jun 2022
Please see that attached app. Also see the example here. Let me know if these answer your questions.
  3 Comments
Kevin Holly
Kevin Holly on 24 Jun 2022
First app I attached:
Layout:
Code:
classdef CreateFigureonTab < matlab.apps.AppBase
% Properties that correspond to app components
properties (Access = public)
UIFigure matlab.ui.Figure
GenerateFigureButton matlab.ui.control.Button
TabGroup matlab.ui.container.TabGroup
Tab matlab.ui.container.Tab
Tab2 matlab.ui.container.Tab
UIAxes matlab.ui.control.UIAxes
Tab3 matlab.ui.container.Tab
Tab4 matlab.ui.container.Tab
Tab5 matlab.ui.container.Tab
Tab6 matlab.ui.container.Tab
end
% Callbacks that handle component events
methods (Access = private)
% Button pushed function: GenerateFigureButton
function GenerateFigureButtonPushed(app, event)
app.UIAxes.Visible = 'on';
plot(app.UIAxes,rand(10,1),rand(10,1))
end
end
% Component initialization
methods (Access = private)
% Create UIFigure and components
function createComponents(app)
% Create UIFigure and hide until all components are created
app.UIFigure = uifigure('Visible', 'off');
app.UIFigure.Position = [100 100 640 480];
app.UIFigure.Name = 'MATLAB App';
% Create TabGroup
app.TabGroup = uitabgroup(app.UIFigure);
app.TabGroup.Position = [1 1 403 480];
% Create Tab
app.Tab = uitab(app.TabGroup);
app.Tab.Title = 'Tab';
% Create Tab2
app.Tab2 = uitab(app.TabGroup);
app.Tab2.Title = 'Tab2';
% Create UIAxes
app.UIAxes = uiaxes(app.Tab2);
app.UIAxes.XTick = [];
app.UIAxes.XTickLabel = '';
app.UIAxes.YTick = [];
app.UIAxes.Box = 'on';
app.UIAxes.Visible = 'off';
app.UIAxes.Position = [21 199 361 239];
% Create Tab3
app.Tab3 = uitab(app.TabGroup);
app.Tab3.Title = 'Tab3';
% Create Tab4
app.Tab4 = uitab(app.TabGroup);
app.Tab4.Title = 'Tab4';
% Create Tab5
app.Tab5 = uitab(app.TabGroup);
app.Tab5.Title = 'Tab5';
% Create Tab6
app.Tab6 = uitab(app.TabGroup);
app.Tab6.Title = 'Tab6';
% Create GenerateFigureButton
app.GenerateFigureButton = uibutton(app.UIFigure, 'push');
app.GenerateFigureButton.ButtonPushedFcn = createCallbackFcn(app, @GenerateFigureButtonPushed, true);
app.GenerateFigureButton.Position = [461 133 103 22];
app.GenerateFigureButton.Text = 'Generate Figure';
% Show the figure after all components are created
app.UIFigure.Visible = 'on';
end
end
% App creation and deletion
methods (Access = public)
% Construct app
function app = CreateFigureonTab
% Create UIFigure and components
createComponents(app)
% Register the app with App Designer
registerApp(app, app.UIFigure)
if nargout == 0
clear app
end
end
% Code that executes before app deletion
function delete(app)
% Delete UIFigure when app is deleted
delete(app.UIFigure)
end
end
end
Second app I attached:
Start of App:
After clicking "Plot Matrix" button
This was a 2-Panel App and then a panel component was placed on the right panel. You can convert to the 2-Panel App with the convert button under the Canvas tab within App Designer's toolstrip.
Code:
classdef GenerateSubplotsFromMatrix < matlab.apps.AppBase
% Properties that correspond to app components
properties (Access = public)
GenerateSubplotsfromRandomMatrixUIFigure matlab.ui.Figure
GridLayout matlab.ui.container.GridLayout
LeftPanel matlab.ui.container.Panel
RowsEditField matlab.ui.control.NumericEditField
RowsEditFieldLabel matlab.ui.control.Label
ColumnsEditField matlab.ui.control.NumericEditField
ColumnsEditFieldLabel matlab.ui.control.Label
PlotMatrixButton matlab.ui.control.Button
RightPanel matlab.ui.container.Panel
Panel matlab.ui.container.Panel
TabGroup matlab.ui.container.TabGroup
Set1Tab matlab.ui.container.Tab
end
% Properties that correspond to apps with auto-reflow
properties (Access = private)
onePanelWidth = 576;
end
% Callbacks that handle component events
methods (Access = private)
% Button pushed function: PlotMatrixButton
function PlotMatrixButtonPushed(app, event)
a = rand(app.RowsEditField.Value,app.ColumnsEditField.Value);
delete(app.TabGroup.Children(2:end))
delete(app.TabGroup.Children(1).Children)
for i = 4:3:size(a,2)
if ceil(i/3) > size(app.Panel.Children.Children)
uitab(app.TabGroup,'Title',['Set' num2str(ceil(i/3))])
end
end
for i = 1:3:size(a,2)
ax1 = axes(app.Panel.Children.Children(ceil(i/3)),"Position",[0.1300 0.7093 0.7750 0.2157]);
plot(ax1,a(:,i))
if i+1 <=size(a,2)
ax2 = axes(app.Panel.Children.Children(ceil(i/3)),"Position",[0.1300 0.4096 0.7750 0.2157]);
plot(ax2,a(:,i+1))
end
if i+2 <=size(a,2)
ax3 =axes(app.Panel.Children.Children(ceil(i/3)),"Position",[0.1300 0.1100 0.7750 0.2157]);
plot(ax3,a(:,i+2))
end
end
end
% Value changed function: RowsEditField
function RowsEditFieldValueChanged(app, event)
app.RowsEditField.Value = round(app.RowsEditField.Value);
end
% Value changed function: ColumnsEditField
function ColumnsEditFieldValueChanged(app, event)
app.ColumnsEditField.Value = round(app.ColumnsEditField.Value);
end
% Changes arrangement of the app based on UIFigure width
function updateAppLayout(app, event)
currentFigureWidth = app.GenerateSubplotsfromRandomMatrixUIFigure.Position(3);
if(currentFigureWidth <= app.onePanelWidth)
% Change to a 2x1 grid
app.GridLayout.RowHeight = {510, 510};
app.GridLayout.ColumnWidth = {'1x'};
app.RightPanel.Layout.Row = 2;
app.RightPanel.Layout.Column = 1;
else
% Change to a 1x2 grid
app.GridLayout.RowHeight = {'1x'};
app.GridLayout.ColumnWidth = {266, '1x'};
app.RightPanel.Layout.Row = 1;
app.RightPanel.Layout.Column = 2;
end
end
end
% Component initialization
methods (Access = private)
% Create UIFigure and components
function createComponents(app)
% Create GenerateSubplotsfromRandomMatrixUIFigure and hide until all components are created
app.GenerateSubplotsfromRandomMatrixUIFigure = uifigure('Visible', 'off');
app.GenerateSubplotsfromRandomMatrixUIFigure.AutoResizeChildren = 'off';
app.GenerateSubplotsfromRandomMatrixUIFigure.Position = [100 100 773 510];
app.GenerateSubplotsfromRandomMatrixUIFigure.Name = 'Generate Subplots from Random Matrix';
app.GenerateSubplotsfromRandomMatrixUIFigure.SizeChangedFcn = createCallbackFcn(app, @updateAppLayout, true);
% Create GridLayout
app.GridLayout = uigridlayout(app.GenerateSubplotsfromRandomMatrixUIFigure);
app.GridLayout.ColumnWidth = {266, '1x'};
app.GridLayout.RowHeight = {'1x'};
app.GridLayout.ColumnSpacing = 0;
app.GridLayout.RowSpacing = 0;
app.GridLayout.Padding = [0 0 0 0];
app.GridLayout.Scrollable = 'on';
% Create LeftPanel
app.LeftPanel = uipanel(app.GridLayout);
app.LeftPanel.Layout.Row = 1;
app.LeftPanel.Layout.Column = 1;
% Create PlotMatrixButton
app.PlotMatrixButton = uibutton(app.LeftPanel, 'push');
app.PlotMatrixButton.ButtonPushedFcn = createCallbackFcn(app, @PlotMatrixButtonPushed, true);
app.PlotMatrixButton.FontSize = 18;
app.PlotMatrixButton.Position = [59 126 101 30];
app.PlotMatrixButton.Text = 'Plot Matrix';
% Create ColumnsEditFieldLabel
app.ColumnsEditFieldLabel = uilabel(app.LeftPanel);
app.ColumnsEditFieldLabel.HorizontalAlignment = 'right';
app.ColumnsEditFieldLabel.FontSize = 18;
app.ColumnsEditFieldLabel.Position = [19 193 77 23];
app.ColumnsEditFieldLabel.Text = 'Columns';
% Create ColumnsEditField
app.ColumnsEditField = uieditfield(app.LeftPanel, 'numeric');
app.ColumnsEditField.ValueChangedFcn = createCallbackFcn(app, @ColumnsEditFieldValueChanged, true);
app.ColumnsEditField.HorizontalAlignment = 'center';
app.ColumnsEditField.FontSize = 18;
app.ColumnsEditField.Position = [111 192 100 24];
app.ColumnsEditField.Value = 9;
% Create RowsEditFieldLabel
app.RowsEditFieldLabel = uilabel(app.LeftPanel);
app.RowsEditFieldLabel.HorizontalAlignment = 'right';
app.RowsEditFieldLabel.FontSize = 18;
app.RowsEditFieldLabel.Position = [46 230 51 23];
app.RowsEditFieldLabel.Text = 'Rows';
% Create RowsEditField
app.RowsEditField = uieditfield(app.LeftPanel, 'numeric');
app.RowsEditField.ValueChangedFcn = createCallbackFcn(app, @RowsEditFieldValueChanged, true);
app.RowsEditField.HorizontalAlignment = 'center';
app.RowsEditField.FontSize = 18;
app.RowsEditField.Position = [112 229 100 24];
app.RowsEditField.Value = 34;
% Create RightPanel
app.RightPanel = uipanel(app.GridLayout);
app.RightPanel.Layout.Row = 1;
app.RightPanel.Layout.Column = 2;
% Create Panel
app.Panel = uipanel(app.RightPanel);
app.Panel.Title = 'Panel';
app.Panel.Position = [1 57 488 428];
% Create TabGroup
app.TabGroup = uitabgroup(app.Panel);
app.TabGroup.Position = [1 1 488 406];
% Create Set1Tab
app.Set1Tab = uitab(app.TabGroup);
app.Set1Tab.Title = 'Set1';
% Show the figure after all components are created
app.GenerateSubplotsfromRandomMatrixUIFigure.Visible = 'on';
end
end
% App creation and deletion
methods (Access = public)
% Construct app
function app = GenerateSubplotsFromMatrix
% Create UIFigure and components
createComponents(app)
% Register the app with App Designer
registerApp(app, app.GenerateSubplotsfromRandomMatrixUIFigure)
if nargout == 0
clear app
end
end
% Code that executes before app deletion
function delete(app)
% Delete UIFigure when app is deleted
delete(app.GenerateSubplotsfromRandomMatrixUIFigure)
end
end
end

Sign in to comment.


Gary English
Gary English on 24 Jun 2022
ok, my matlab is located on another network here. It is on a classified network so no physical connection to the low side which is vanacular for regular internet. There is no way to transfer the .mlapp from the low side to high side if i want to stay working. The plotting panel that you used did it come from Matlab's component library? could you take a snap shot of the code in the App properties so i can see if it is a component then i can holler at the IT fokes to get an updated Matlab. This will also show up in the Initilize Component section where the Tab you used. A snippet there would also work

Community Treasure Hunt

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

Start Hunting!