Disorganization of other components when adding the HTML component in MATLAB APP DESIGNER
11 次查看(过去 30 天)
显示 更早的评论
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:
![](https://www.mathworks.com/matlabcentral/answers/uploaded_files/1732408/image.png)
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.
![](https://www.mathworks.com/matlabcentral/answers/uploaded_files/1732413/image.png)
Below, the figures demonstrate the disorganization of the components in the IMAGE and HISTOGRAM TABS.
![](https://www.mathworks.com/matlabcentral/answers/uploaded_files/1732418/image.png)
![](https://www.mathworks.com/matlabcentral/answers/uploaded_files/1732423/image.png)
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.
2 个评论
Mario Malic
2024-7-12
Hi Airton, please try to add Grid Layout component and check how your app behaves.
采纳的回答
Rahul
2024-7-12
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:
![](https://www.mathworks.com/matlabcentral/answers/uploaded_files/1733153/image.png)
![](https://www.mathworks.com/matlabcentral/answers/uploaded_files/1733158/image.png)
![](https://www.mathworks.com/matlabcentral/answers/uploaded_files/1733163/image.png)
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!
更多回答(2 个)
Mario Malic
2024-7-12
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.
0 个评论
另请参阅
Community Treasure Hunt
Find the treasures in MATLAB Central and discover how the community can help you!
Start Hunting!