Disorganization of other components when adding the HTML component in MATLAB APP DESIGNER

Hello everyone,

I have a small application built in MATLAB APP DESIGNER. It is divided into a 2-PANEL APP (Left and Right). In the Right PANEL, there is a TABGROUP component that contains three TABS: IMAGE; HISTOGRAM; and HELP / SUPPORT, as shown in the figure below:

Inside each TAB, there is a PANEL component, and within each PANEL, I have AXES components for the IMAGE and HISTOGRAM TABS. Everything works fine until I add an HTML component inside the PANEL of the HELP / SUPPORT TAB, which will display a page with information about the application. When I do this, the other components become disorganized, as shown in the figure below.

Below, the figures demonstrate the disorganization of the components in the IMAGE and HISTOGRAM TABS.

Attached is the application code:

classdef segmentacao_palmeiras_tab_exported < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure            matlab.ui.Figure
        GridLayout          matlab.ui.container.GridLayout
        LeftPanel           matlab.ui.container.Panel
        panelInfo           matlab.ui.container.Panel
        btnTipoSegmentacao  matlab.ui.container.ButtonGroup
        optSimples          matlab.ui.control.RadioButton
        optEspecies         matlab.ui.control.RadioButton
        txt_InfoGeo         matlab.ui.control.Label
        lbl_InfoGeo         matlab.ui.control.Label
        txt_InfoDim         matlab.ui.control.Label
        lbl_InfoDim         matlab.ui.control.Label
        txt_InfoLocal       matlab.ui.control.Label
        lbl_InfoLocal       matlab.ui.control.Label
        lbl_InfoImagem      matlab.ui.control.Label
        logoINPA            matlab.ui.control.Image
        logoUDESC           matlab.ui.control.Image
        RightPanel          matlab.ui.container.Panel
        panelBotoes         matlab.ui.container.Panel
        btnExportar         matlab.ui.control.Button
        btnHistograma       matlab.ui.control.Button
        btnProcessar        matlab.ui.control.Button
        btnCarregarImg      matlab.ui.control.Button
        TabGroup            matlab.ui.container.TabGroup
        IMAGEMTab           matlab.ui.container.Tab
        panelImagem         matlab.ui.container.Panel
        plotImagem          matlab.ui.control.UIAxes
        HISTOGRAMATab       matlab.ui.container.Tab
        panelHistogram      matlab.ui.container.Panel
        plotHistograma      matlab.ui.control.UIAxes
        AJUDASUPORTETab     matlab.ui.container.Tab
        HTML                matlab.ui.control.HTML
    end

    % Properties that correspond to apps with auto-reflow
    properties (Access = private)
        onePanelWidth = 576;
    end

    properties (Access = private)
        ImageFile % Arquivo de imagem;
        ImageFile_pad % Arquivo de imagem ajustado
        C_Categorical % Resultado gerado em CATEGORICAL
        C_Categorical_Simples  % Resultado gerado em CATEGORICAL
        C_Uint8 % Resultado gerado em UINT8
        C_Uint8_Simples % Resultado gerado em UINT8
        B % Overlay da Imagem com o Resultado Espécies 
        B_Simples % Overlay da Imagem com o Resultado Simples
        H % Grafico do Histograma
        NetWork % Rede Neural
        ImageFile_x % Largura
        ImageFile_y % Altura
        ImageFile_dim % Nr. Bandas
        ImageFile_format % Formato do arquivo
        R % Referencia Espacial da Imagem
        S % Dados Geográficos geotiffinfo
        X % Dados Geográficos struct.geotiffinfo
    end
 
    methods (Access = private)
        
        % Tela de Progresso
        function d = myprogress(app)
            d = uiprogressdlg(app.UIFigure,'Title','Por favor aguarde...',...
                'Message','Abrindo a aplicação');
            pause(.5);

            d.Value = .33;
            d.Message = 'Carregando os dados necessários';
            pause(1);

            d.Value = .67;
            d.Message = 'Processando os dados';
            pause(1);

            d.Value = 1;
            d.Message = 'Finalizando';
            pause(1);

            % Fecha dialog box
            close(d);
        end

        function resetApp(app)
            
               % Limpar as variáveis
                clear;

                % Limpar todas as propriedades
                app.ImageFile = [];
                app.ImageFile_pad = [];
                app.C_Categorical = [];
                app.C_Categorical_Simples = [];
                app.C_Uint8 = [];
                app.C_Uint8_Simples = [];
                app.B = [];
                app.B_Simples = [];
                app.H = [];
                app.NetWork = [];
                app.ImageFile_x = [];
                app.ImageFile_y = [];
                app.ImageFile_dim = [];
                app.ImageFile_format = [];
                app.R = [];
                app.S = [];
                app.X = [];
                
                % Limpar componentes de UI
                %cla(app.plotImagem);
                %cla(app.plotHistograma);
        end
    end

    % Callbacks that handle component events
    methods (Access = private)

        % Code that executes after component creation
        function startupFcn(app)
            app.UIFigure.Position = [100 100 1100 630]; % [x y width height]
            app.UIFigure.Resize = 'off';
            
            % Especifica o diretório da exportacao
            diretorio = 'export';

            % Verifica se o diretório existe
            if ~isfolder(diretorio)
                % Se o diretório não existe, cria o diretório
                mkdir(diretorio);
            end
       
            % Desabilita/Habilita os botões
            app.btnCarregarImg.Enable = true;
            app.btnProcessar.Enable = false;
            app.btnHistograma.Enable = false;
            app.btnExportar.Enable = false;
           
            % Desabilita os tipos de segmentação
            app.btnTipoSegmentacao.Enable = true;
            app.optEspecies.Enable = false;
            app.optSimples.Enable = false;
            
            % Carregando a rede treinada
             try
                load('./net_cocao.mat','net_cocao');
                app.NetWork = net_cocao;
            catch ME
                report = getReport(ME);
                uialert(app.UIFigure,report,'Erro','Interpreter','html');
             end
        end

        % Button pushed function: btnCarregarImg
        function btnCarregarImgButtonPushed(app, event)
            
            % Limpa a variaveis, propriedades  e visualizadores.
             app.resetApp();

            % Desabilita/Habilita os botões
            app.btnProcessar.Enable = false;
            app.btnHistograma.Enable = false;
            app.btnExportar.Enable = false;
            
            % Desabilita os tipos de segmentação
            app.btnTipoSegmentacao.Enable = true;
            app.optSimples.Value = 0;       
            app.optEspecies.Enable = false;
            app.optSimples.Enable = false;
            
            % Chama a janela para carregar a imagem
            % Armazena os dados da imagem do usuario
            [filename,filepath] = uigetfile({'*.tif'}, 'Selecionar imagem');
            fullname = [filepath, filename];

            % Abre a imagem de entrada selecionada pelo usuário
            app.ImageFile = imread(fullname);
            app.myprogress;

            % Armazena informações sobre dimensões da imagem de entrada
            [app.ImageFile_x,app.ImageFile_y,app.ImageFile_dim] = size(app.ImageFile);

            % Armazena as informações geográficas da Imagem carregada
            [~, r] = readgeoraster(fullname);
            app.R = r;
            app.X = geotiffinfo(fullname);
            app.S = struct([app.X.GeoTIFFTags.GeoKeyDirectoryTag]);
            app.ImageFile_format = app.X.Format;

            % Verifica se o formato da imagem é TIF
            if (string(app.ImageFile_format) ~= 'tif')
                msg = {'ATENÇÃO!','O formato da imagem deve ser TIF.'};
                uialert(app.UIFigure,msg,'Warning','Icon','warning');
            end

            % Verifica se o numero de bandas estão
            % corretos para utilizar no programa.
            if (app.ImageFile_dim ~= 3) 
                % Para o caso da imagem I tenha mais de 3 bandas deve-se retirar deixando
                % somente 3 bandas
                % Isolar as bandas da imagem 
                B1 = app.ImageFile(:,:,1);
                B2 = app.ImageFile(:,:,2);
                B3 = app.ImageFile(:,:,3);
                % Junta as bandas isoladas
                app.ImageFile = cat(3, B1, B2, B3);
                msg = {'ATENÇÃO!','A imagem de entrada deve ter 3 bandas. A imagem carregada engloba mais de 3 bandas. Foram consideradas somente as 3 primeiras bandas para o processamento.'};
                uialert(app.UIFigure,msg,'Aviso','Icon','warning');
            end

            % Ajustar a escala da imgem para a segmentação conforme o
            % treinamento feito na CNN 512x512 pixels.
            PatchSize = [512, 512];
            app.ImageFile = imresize(app.ImageFile,'Scale', PatchSize ./ 512);
            
            % Apresenta a imagem no applicativo (Plot)
            imshow(app.ImageFile,'Parent',app.plotImagem);
            %imagesc(app.plotImagem, app.ImageFile);

            % Mostra as informaçções de tamanho e dimensão da imagem
            %informacoes = sprintf('Arquivo: %ssprintf('Arquivo: %s\n Tamanho (Bytes): %s\n Altura: %s\n Largula: %s\n Nr. Bandas: %s\n DATUM/Projeção: %s\n',app.X.Filename, app.X.FileSize, app.X.Height, app.X.Width, app.ImageFile_dim, app.X.PCS);\n Altura: %s\n Largula: %s\n Nr. Bandas: %s\n DATUM/Projeção: %s\n',app.X.Filename, app.X.FileSize, app.X.Height, app.X.Width, app.ImageFile_dim, app.X.PCS);
            %app.txt_InfoLocal.Text = string(informacoes);
            
            app.txt_InfoLocal.Text = string(app.X.Filename);
            altura = string("Altura: " + app.X.Height);
            largura = string("Largura: " + app.X.Width);
            nr_dim = string("Nr. Bandas: " + app.ImageFile_dim);
            tamanho = string("Tamanho (Bytes): " + app.X.FileSize);
            dimensoes = [altura, largura, nr_dim, tamanho];
            app.txt_InfoDim.Text = dimensoes;
            app.txt_InfoGeo.Text = string(app.X.PCS);

            % Desabilita/Habilita os botões
            app.btnProcessar.Enable = true;

            app.TabGroup.SelectedTab = app.IMAGEMTab;
        end

        % Button pushed function: btnProcessar
        function btnProcessarButtonPushed(app, event)

            % Desabilita o botão de Exportar/Carregar até o termino do processamento
            app.btnCarregarImg.Enable = false;
            app.btnExportar.Enable = false;
            app.btnHistograma.Enable = false;
            
            % Verifica se a GPU está disponível 
            useGPU = canUseGPU();
            if useGPU
                % Limpa a Memoria da GPU antes do processamento
                D = gpuDevice();
                reset(D);
            end

            % Cria a função para processar imagens de tamanho grandes por
            % blocos
            if useGPU
                fun_proc_semanticseg = @(bloco)semanticseg(bloco.data, app.NetWork,ExecutionEnvironment="gpu",MiniBatchSize=16,OutputType="uint8",Acceleration="auto");
            else
                fun_proc_semanticseg = @(bloco)semanticseg(bloco.data, app.NetWork,ExecutionEnvironment="auto",MiniBatchSize=16,OutputType="uint8",Acceleration="auto");
            end

            % Redefine o tamanho do bloco para 512
            tamanho_bloco = [512 512];

            % Armazena o tamanho da imagem I
            [height, width, ~] = size(app.ImageFile);
    
            % Calcula o pad image para obter a dimensão que seja multiplo de tamanho do bloco
            padSize(1) = tamanho_bloco(1) - mod(height, tamanho_bloco(1));
            padSize(2) = tamanho_bloco(2) - mod(width, tamanho_bloco(2));

            % Gera uma cópia da imagem com o tamanho adequado para o tamanho do Bloco.
            % o tamanho acrestado (PAD) a imagem é preenchido com valor 0
            app.ImageFile_pad = padarray(app.ImageFile, padSize, 0, 'post');

            % Processa a segmentação
            try
                % Redefine o tamanho do bloco para 2048
                tamanho_bloco = [2048 2048];
                C = blockproc(app.ImageFile_pad, tamanho_bloco, fun_proc_semanticseg);
                app.myprogress;

                % The output is nosy, apply a median filter to remove spurious pixels.
                C = medfilt2(C,[5 5]);
    
                % Retorna o resultado para o tamanho original
                C = C(1:height, 1:width);
                C = changem(C,7,0);
                
            catch ME
                report = getReport(ME);
                uialert(app.UIFigure,report,'Erro','Interpreter','html');
            end

            % Definição dos Valores e Nome das Classes (ESPECIES)
            labelIDs = [1 2 3 4 5 6 7];
            classes = ["Açai" "Cocão" "Jaci" "Paxiuba" "Tucuma" "Floresta" "no-data"]; 

             % Definição dos Valores e Nome das Classes (SIMPLES)
            labelIDs_Simples = [1 2 3];
            classes_Simples = ["Palmeiras" "Floresta" "no-data"]; 
            
            % Alterar a segmentacao de ESPECIES -> SIMPLES
            C_Simples = C;
            C_Simples = changem(C_Simples,3,0);
            C_Simples = changem(C_Simples,1,2);
            C_Simples = changem(C_Simples,1,3);
            C_Simples = changem(C_Simples,1,4);
            C_Simples = changem(C_Simples,1,5);
            C_Simples = changem(C_Simples,2,6);
            C_Simples = changem(C_Simples,3,7);

            % Converte a saida da segmentação de UINT8 para Categorical
            % possibilitando a exportação.
            app.C_Categorical = categorical(C, labelIDs, classes);
            app.C_Uint8 = C;
            app.C_Categorical_Simples = categorical(C_Simples,labelIDs_Simples,classes_Simples);
            app.C_Uint8_Simples = C_Simples;

             app.B = labeloverlay(app.ImageFile,C);
             app.B_Simples = labeloverlay(app.ImageFile,C_Simples);
             
            % Monta a sobreposição da Imagem com o resultado gerado da
            % segmentação
            if app.optSimples.Value ~= 1              
                % Apresenta o resultado da segmentação no applicativo (Plot)
                %imagesc(app.plotImagem, B);
                imshow(app.B_Simples,'Parent',app.plotImagem);
                %app.TabGroup.SelectedTab = app.IMAGEMTab;
            else  % Espécie          
                % Apresenta o resultado da segmentação no applicativo (Plot)
                %imagesc(app.plotImagem, B);
                imshow(app.B,'Parent',app.plotImagem);
                %app.TabGroup.SelectedTab = app.IMAGEMTab;
            end

            % Habilita o botão de Exportar/Carregar até o termino do processamento
            app.btnCarregarImg.Enable = true;
            app.btnHistograma.Enable = true;
            app.btnExportar.Enable = true;
            app.btnProcessar.Enable = false;

            % Habilita os tipos de segmentação
            app.btnTipoSegmentacao.Enable = true;
            app.optEspecies.Enable = true;
            app.optSimples.Enable = true;
        end

        % Button pushed function: btnExportar
        function btnExportarButtonPushed(app, event)

            % Habilita o botão de Exportar/Carregar até o termino do processamento
            app.btnCarregarImg.Enable = false;
            app.btnHistograma.Enable = false;
            app.btnProcessar.Enable = false;

            % Processa a exportação do resultado da segmentação
            try
                 if app.optSimples.Value ~= 1
                    geotiffwrite('./export/classImg.tif',app.C_Uint8_Simples,app.R,'GeoKeyDirectoryTag',app.S);
                    app.myprogress;
                 else
                     geotiffwrite('./export/classImg.tif',app.C_Uint8,app.R,'GeoKeyDirectoryTag',app.S);
                    app.myprogress;
                 end
                 message = ["Resultado Exportado!","Procure o arquivo classImg.tif na pasta export."];
                 uialert(app.UIFigure,message,"Sucesso", "Icon","success");
            catch ME
                report = getReport(ME);
                uialert(app.UIFigure,report,'Erro','Interpreter','html');
            end

            % Habilita o botão de Exportar/Carregar até o termino do processamento
            app.btnCarregarImg.Enable = true;
            app.btnHistograma.Enable = true;
            app.btnExportar.Enable = true;
            app.btnProcessar.Enable = false;
        end

        % Button pushed function: btnHistograma
        function btnHistogramaButtonPushed(app, event)
            % Processa o histograma do resultado da segmentação
            try
                % histograma.
                if app.optSimples.Value ~= 1              
                    app.H = histogram(app.plotHistograma,app.C_Categorical_Simples ...
                    ,"FaceColor",[1 0 0],"EdgeColor","none");
                else  % Espécie          
                    app.H = histogram(app.plotHistograma,app.C_Categorical ...
                    ,"FaceColor",[1 0 0],"EdgeColor","none");
                end  
            catch ME
                report = getReport(ME);
                uialert(app.UIFigure,report,'Erro','Interpreter','html');
            end
            app.TabGroup.SelectedTab = app.HISTOGRAMATab;
        end

        % Selection changed function: btnTipoSegmentacao
        function btnTipoSegmentacaoSelectionChanged(app, event)
            % Escolheu o Tipo Simples
            if app.optSimples.Value ~= 1
                imshow(app.B_Simples,'Parent',app.plotImagem);
                app.TabGroup.SelectedTab = app.IMAGEMTab;

               % Verifica se existe o histograma
                if isprop(app, 'H') && ~isempty(app.H)
                    app.H = histogram(app.plotHistograma, app.C_Categorical_Simples, ...
                        'FaceColor', [1 0 0], 'EdgeColor', 'none');
                end
            else  % Espécies
                imshow(app.B,'Parent',app.plotImagem);
                app.TabGroup.SelectedTab = app.IMAGEMTab;

                % Verifica se existe o histograma
                if isprop(app, 'H') && ~isempty(app.H)
                    app.H = histogram(app.plotHistograma, app.C_Categorical, ...
                        'FaceColor', [1 0 0], 'EdgeColor', 'none');
                end
            end   
        end

        % Changes arrangement of the app based on UIFigure width
        function updateAppLayout(app, event)
            currentFigureWidth = app.UIFigure.Position(3);
            if(currentFigureWidth <= app.onePanelWidth)
                % Change to a 2x1 grid
                app.GridLayout.RowHeight = {397, 397};
                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 = {212, '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)

            % Get the file path for locating images
            pathToMLAPP = fileparts(mfilename('fullpath'));

            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.AutoResizeChildren = 'off';
            app.UIFigure.Position = [100 100 698 397];
            app.UIFigure.Name = 'MATLAB App';
            app.UIFigure.Resize = 'off';
            app.UIFigure.SizeChangedFcn = createCallbackFcn(app, @updateAppLayout, true);

            % Create GridLayout
            app.GridLayout = uigridlayout(app.UIFigure);
            app.GridLayout.ColumnWidth = {212, '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 panelInfo
            app.panelInfo = uipanel(app.LeftPanel);
            app.panelInfo.BorderType = 'none';
            app.panelInfo.Position = [7 7 200 384];

            % Create logoUDESC
            app.logoUDESC = uiimage(app.panelInfo);
            app.logoUDESC.Position = [8 345 83 34];
            app.logoUDESC.ImageSource = fullfile(pathToMLAPP, 'udesc2_logo.png');

            % Create logoINPA
            app.logoINPA = uiimage(app.panelInfo);
            app.logoINPA.Position = [110 346 83 34];
            app.logoINPA.ImageSource = fullfile(pathToMLAPP, 'inpa-acre_logo.png');

            % Create lbl_InfoImagem
            app.lbl_InfoImagem = uilabel(app.panelInfo);
            app.lbl_InfoImagem.HorizontalAlignment = 'center';
            app.lbl_InfoImagem.FontSize = 14;
            app.lbl_InfoImagem.FontWeight = 'bold';
            app.lbl_InfoImagem.Position = [7 315 186 22];
            app.lbl_InfoImagem.Text = 'Informações da Entrada';

            % Create lbl_InfoLocal
            app.lbl_InfoLocal = uilabel(app.panelInfo);
            app.lbl_InfoLocal.FontWeight = 'bold';
            app.lbl_InfoLocal.Position = [7 287 186 22];
            app.lbl_InfoLocal.Text = 'Local:';

            % Create txt_InfoLocal
            app.txt_InfoLocal = uilabel(app.panelInfo);
            app.txt_InfoLocal.VerticalAlignment = 'top';
            app.txt_InfoLocal.WordWrap = 'on';
            app.txt_InfoLocal.FontSize = 9;
            app.txt_InfoLocal.Position = [7 246 186 34];
            app.txt_InfoLocal.Text = ' ';

            % Create lbl_InfoDim
            app.lbl_InfoDim = uilabel(app.panelInfo);
            app.lbl_InfoDim.FontWeight = 'bold';
            app.lbl_InfoDim.Position = [7 218 186 22];
            app.lbl_InfoDim.Text = 'Dimensão:';

            % Create txt_InfoDim
            app.txt_InfoDim = uilabel(app.panelInfo);
            app.txt_InfoDim.VerticalAlignment = 'top';
            app.txt_InfoDim.WordWrap = 'on';
            app.txt_InfoDim.FontSize = 9;
            app.txt_InfoDim.Position = [7 131 186 80];
            app.txt_InfoDim.Text = ' ';

            % Create lbl_InfoGeo
            app.lbl_InfoGeo = uilabel(app.panelInfo);
            app.lbl_InfoGeo.FontWeight = 'bold';
            app.lbl_InfoGeo.Position = [7 106 186 22];
            app.lbl_InfoGeo.Text = 'Dados Geográficos:';

            % Create txt_InfoGeo
            app.txt_InfoGeo = uilabel(app.panelInfo);
            app.txt_InfoGeo.VerticalAlignment = 'top';
            app.txt_InfoGeo.WordWrap = 'on';
            app.txt_InfoGeo.FontSize = 9;
            app.txt_InfoGeo.Position = [7 65 186 34];
            app.txt_InfoGeo.Text = ' ';

            % Create btnTipoSegmentacao
            app.btnTipoSegmentacao = uibuttongroup(app.panelInfo);
            app.btnTipoSegmentacao.SelectionChangedFcn = createCallbackFcn(app, @btnTipoSegmentacaoSelectionChanged, true);
            app.btnTipoSegmentacao.Title = 'Tipo de Segmentação:';
            app.btnTipoSegmentacao.Position = [6 10 186 49];

            % Create optEspecies
            app.optEspecies = uiradiobutton(app.btnTipoSegmentacao);
            app.optEspecies.Enable = 'off';
            app.optEspecies.Text = 'Simples';
            app.optEspecies.Position = [11 3 64 22];
            app.optEspecies.Value = true;

            % Create optSimples
            app.optSimples = uiradiobutton(app.btnTipoSegmentacao);
            app.optSimples.Enable = 'off';
            app.optSimples.Text = 'Espécies';
            app.optSimples.Position = [103 3 70 22];

            % Create RightPanel
            app.RightPanel = uipanel(app.GridLayout);
            app.RightPanel.Layout.Row = 1;
            app.RightPanel.Layout.Column = 2;

            % Create TabGroup
            app.TabGroup = uitabgroup(app.RightPanel);
            app.TabGroup.AutoResizeChildren = 'off';
            app.TabGroup.Position = [11 65 467 325];

            % Create IMAGEMTab
            app.IMAGEMTab = uitab(app.TabGroup);
            app.IMAGEMTab.AutoResizeChildren = 'off';
            app.IMAGEMTab.Title = 'IMAGEM';

            % Create panelImagem
            app.panelImagem = uipanel(app.IMAGEMTab);
            app.panelImagem.AutoResizeChildren = 'off';
            app.panelImagem.BorderType = 'none';
            app.panelImagem.Position = [8 8 452 284];

            % Create plotImagem
            app.plotImagem = uiaxes(app.panelImagem);
            app.plotImagem.XTick = [];
            app.plotImagem.YTick = [];
            app.plotImagem.ZTick = [];
            app.plotImagem.Color = [0.9412 0.9412 0.9412];
            app.plotImagem.Box = 'on';
            app.plotImagem.Position = [6 8 437 271];

            % Create HISTOGRAMATab
            app.HISTOGRAMATab = uitab(app.TabGroup);
            app.HISTOGRAMATab.AutoResizeChildren = 'off';
            app.HISTOGRAMATab.Title = 'HISTOGRAMA';

            % Create panelHistogram
            app.panelHistogram = uipanel(app.HISTOGRAMATab);
            app.panelHistogram.AutoResizeChildren = 'off';
            app.panelHistogram.BorderType = 'none';
            app.panelHistogram.Position = [8 8 452 284];

            % Create plotHistograma
            app.plotHistograma = uiaxes(app.panelHistogram);
            title(app.plotHistograma, 'Frequência por Espécies')
            xlabel(app.plotHistograma, 'Espécies de Palmeiras')
            ylabel(app.plotHistograma, 'Nr. Pixels')
            app.plotHistograma.Toolbar.Visible = 'off';
            app.plotHistograma.Box = 'on';
            app.plotHistograma.XGrid = 'on';
            app.plotHistograma.YGrid = 'on';
            app.plotHistograma.Position = [6 8 437 271];

            % Create AJUDASUPORTETab
            app.AJUDASUPORTETab = uitab(app.TabGroup);
            app.AJUDASUPORTETab.AutoResizeChildren = 'off';
            app.AJUDASUPORTETab.Title = 'AJUDA / SUPORTE';

            % Create HTML
            app.HTML = uihtml(app.AJUDASUPORTETab);
            app.HTML.HTMLSource = 'suporte.html';
            app.HTML.Position = [15 14 435 272];

            % Create panelBotoes
            app.panelBotoes = uipanel(app.RightPanel);
            app.panelBotoes.BorderType = 'none';
            app.panelBotoes.Position = [12 7 465 48];

            % Create btnCarregarImg
            app.btnCarregarImg = uibutton(app.panelBotoes, 'push');
            app.btnCarregarImg.ButtonPushedFcn = createCallbackFcn(app, @btnCarregarImgButtonPushed, true);
            app.btnCarregarImg.WordWrap = 'on';
            app.btnCarregarImg.Position = [21 8 91 35];
            app.btnCarregarImg.Text = 'Carregar Imagem...';

            % Create btnProcessar
            app.btnProcessar = uibutton(app.panelBotoes, 'push');
            app.btnProcessar.ButtonPushedFcn = createCallbackFcn(app, @btnProcessarButtonPushed, true);
            app.btnProcessar.WordWrap = 'on';
            app.btnProcessar.Enable = 'off';
            app.btnProcessar.Position = [132 8 91 35];
            app.btnProcessar.Text = 'Processar Segmentação';

            % Create btnHistograma
            app.btnHistograma = uibutton(app.panelBotoes, 'push');
            app.btnHistograma.ButtonPushedFcn = createCallbackFcn(app, @btnHistogramaButtonPushed, true);
            app.btnHistograma.WordWrap = 'on';
            app.btnHistograma.Enable = 'off';
            app.btnHistograma.Position = [243 8 91 35];
            app.btnHistograma.Text = 'Histograma';

            % Create btnExportar
            app.btnExportar = uibutton(app.panelBotoes, 'push');
            app.btnExportar.ButtonPushedFcn = createCallbackFcn(app, @btnExportarButtonPushed, true);
            app.btnExportar.WordWrap = 'on';
            app.btnExportar.Enable = 'off';
            app.btnExportar.Position = [354 8 91 35];
            app.btnExportar.Text = 'Exportar Segmentação';

            % 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 = segmentacao_palmeiras_tab_exported

            runningApp = getRunningApp(app);

            % Check for running singleton app
            if isempty(runningApp)

                % Create UIFigure and components
                createComponents(app)

                % Register the app with App Designer
                registerApp(app, app.UIFigure)

                % Execute the startup function
                runStartupFcn(app, @startupFcn)
            else

                % Focus the running singleton app
                figure(runningApp.UIFigure)

                app = runningApp;
            end

            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

Could someone please help me resolve this issue?

Best regards,

Airton Gaio Jr.

[Mario Malic]

Hi Airton, please try to add Grid Layout component and check how your app behaves.

[Airton Gaio Junior]

Obrigado Mario pela dica. Vou tentar!

Answer 1

[Rahul]

Hi Airton,

I was able to run the app on my end using the code that you have shared and reproduce the issue. I believe that the alignment of the IMAGE component and the HISTOGRAM component was getting altered when the HTML component inside the PANEL of the HELP / SUPPORT TA was being added to the app.

I have tried to change a couple of properties to fix this issue, like:

% On line 503, the 'autoresizechildren' property of tha IMAGE Tab is changed to 'on'
app.IMAGEMTab.AutoResizeChildren = 'on';

% On line 507, the 'autoresizechildren' property of tha IMAGE panel is changed to 'on'
app.panelImagem.AutoResizeChildren = 'on';

This will help fix the alignment of the IMAGE component.

% On line 520, the 'autoresizechildren' property of tha HISTOGRAM Tab is changed to 'on'
app.HISTOGRAMATab.AutoResizeChildren = 'on';

% On line 524, the 'autoresizechildren' property of tha HISTOGRAM panel is changed to 'on'
app.panelHistogram.AutoResizeChildren = 'on';

This will help fix the alignment of the HISTOGRAM component.

% On line 539, the 'autoresizechildren' property of tha HELP/SUPPORT Tab is changed to 'on'
app.AJUDASUPORTETab.AutoResizeChildren = 'on';

This will help fix the alignment of the HELP/SUPPORT component.

After making these changes, the App looks like this:

Note:

For HELP/SUPPORT component I created a 'suporte.html' file with lorem ipsum text. You can consider your own for your use case. For the IMAGE component, you can resize the 'uiaxes' of the IMAGE panel according to your own requirements.

Hope this solves the issue. Thanks!

[Airton Gaio Junior]

Prezado Rahul,

Obrigado pela rápida resposta! Fiz as alterações sugeridas e com a o acrescimo de um componente GRID consegui ajustar.

Grato,

Airton

Answer 2

[Mario Malic]

Hi Airton, please try to add Grid Layout component and check how your app behaves.

Posted this as an answer instead, please mark this as an answer.

Cheers.