Disorganization of Application Components When Using Internal HTML Links Loaded in the HTML Component of MATLAB App Designer
29 visualizzazioni (ultimi 30 giorni)
Mostra commenti meno recenti
Hello everyone,
I am experiencing an issue with the HTML file that I am loading into the HTML component of my application in MATLAB App Designer. When I click on the summary links or the return links that navigate to sections within the same file, the other components on the screen become disorganized.
Could someone assist me in resolving this issue? Please find the HTML code and images attached below. The images show the correct screen before clicking the link and how the application screen looks after the link is clicked.
Thank you in advance for your help!
Best regards,
Airton Gaio Junior
HTML Code
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<title>Manual de Uso da Aplicação: Segmentação de Palmeiras</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f9;
overflow-x: hidden; /* Evita a rolagem horizontal */
}
header {
background-color: #4CAF50;
color: white;
padding: 1rem 0;
text-align: center;
}
.container {
width: 100%; /* Ajusta a largura ao container pai */
/*max-width: none; /* Remove o limite de largura */
max-width: 900px;
margin: 20px auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1, h2, h3 {
color: #333;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
padding: 5px 0;
}
ul li a {
text-decoration: none;
color: #4CAF50;
}
ul li a:hover {
text-decoration: underline;
}
.center {
text-align: center;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
}
p {
color: #555;
}
.btn-back {
display: inline-block;
margin: 20px 0;
padding: 10px 15px;
background-color: #4CAF50;
color: white;
text-decoration: none;
border-radius: 5px;
}
.btn-back:hover {
background-color: #45a049;
}
.important {
background-color: #ffcccc;
border-left: 6px solid #ff0000;
padding: 10px;
margin: 20px 0;
border-radius: 4px;
}
</style>
</head>
<body>
<header>
<h2>Manual de Uso da Aplicação: Segmentação de Palmeiras</h2>
</header>
<div class="container">
<h2 id="sumario">Sumário</h2>
<ul>
<li><a href="#introducao">Introdução</a></li>
<li><a href="#prerequisitos">Pré-requisitos</a></li>
<li><a href="#instalacao">Instalação no Windows</a></li>
<li><a href="#iniciar">Iniciar a Aplicação</a></li>
<li><a href="#carregar">Carregar Imagem</a></li>
<li><a href="#processar">Processar Segmentação</a></li>
<li><a href="#histograma">Gerar Histograma</a></li>
<li><a href="#exportar">Exportar Segmentação</a></li>
<li><a href="#resolucao-problemas">Resolução de Problemas</a></li>
<li><a href="#faq">Perguntas Frequentes (FAQ)</a></li>
<li><a href="#atualizacoes">Atualizações e Manutenção</a></li>
<li><a href="#seguranca-backup">Segurança e Backup</a></li>
<li><a href="#glossario">Glossário</a></li>
<li>Copyright e Contato do Suporte
<ul>
<li><a href="#copyright">Copyright</a></li>
<li><a href="#licenca">Licença de Uso</a></li>
<li><a href="#consideracoes">Considerações Finais</a></li>
<li><a href="#autores">Autor(es)</a></li>
</ul>
</li>
</ul>
<h2 id="introducao">Introdução</h2>
<p>Esta aplicação MATLAB foi desenvolvida para segmentar espécies de palmeiras em imagens georreferenciadas. O objetivo principal
é fornecer uma ferramenta fácil de usar para pesquisadores e especialistas em meio ambiente para analisar imagens de VANT
(Veículo Aéreo Não Tripulado) e obter informações sobre a distribuição de diferentes espécies de palmeiras.</p>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
<h2 id="prerequisitos">Pré-requisitos</h2>
<p>Para utilizar esta aplicação, é necessário:</p>
<ul>
<li>MATLAB R2021a ou superior</li>
<li>Toolbox de Processamento de Imagem do MATLAB</li>
<li>Bibliotecas adicionais: [Listar bibliotecas]</li>
</ul>
<p>Recomenda-se um computador com as seguintes especificações:</p>
<ul>
<li>Processador Intel Core i5 ou superior</li>
<li>8GB de RAM (16GB recomendado)</li>
<li>Placa gráfica dedicada com suporte a CUDA (opcional, mas recomendado para processamento mais rápido)</li>
</ul>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
<h2 id="instalacao">Instalação no Windows</h2>
<p>[Instruções de instalação aqui]</p>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
<h2 id="iniciar">Iniciar a Aplicação</h2>
<p>Abra a aplicação MATLAB e execute o script da aplicação para abrir a janela principal.</p>
<img src="img_doc/image002.png" alt="Tela Principal da aplicação">
<p class="center">Figura 1 – Tela Principal da aplicação.</p>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
<h2 id="carregar">Carregar Imagem</h2>
<p>1. Clique no botão 'Carregar Imagem...'.</p>
<p>2. Na janela de diálogo, selecione uma imagem no formato TIF.</p>
<p>3. Aguarde a imagem ser carregada e exibida na aba IMAGEM. As informações da imagem serão preenchidas no painel esquerdo.</p>
<img src="img_doc/image004.png" alt="Imagem carregada na aba “IMAGEM”">
<p class="center">Figura 2 – Imagem carregada na aba “IMAGEM”.</p>
<p>A rede neural convolucional deste projeto foi treinada com imagens capturadas por um VANT (Veículo Aéreo Não Tripulado) a uma
altura fixa de 120 metros acima do dossel, alcançando uma resolução espacial de 4,3 cm/<i>pixel</i>. As imagens foram coletadas
em uma área de floresta tropical com palmeiras. O resultado da aplicação é uma imagem classificada em sete classes, definidas
da seguinte maneira: 1) Açaí (<span style="background: yellow;">Euterpe oleracea</span>); 2) Cocão
(<i><span style="background: yellow;">Maximiliana maripa</span></i>); 3) Jaci
(<i><span style="background: yellow;">Attalea maripa</span></i>); 4) Paxiuba (<span
style="background: yellow;"><i>Socratea</i></span><i><span style="background: yellow;"> exorrhiza</span></i>);
5) Tucumã (<span style="background: yellow;"><i>Astrocaryum</i></span><i><span
style="background: yellow;"> aculeatum</span></i>); 6) Floresta sem Palmeiras
(<i>background</i>); e 7) Sem dados (<i>no-data</i>).</p>
<p>Para obter os melhores resultados, recomenda-se que a imagem de entrada tenha características semelhantes às descritas. No
entanto, a aplicação pode lidar com imagens que variem ligeiramente em resolução espacial, tipo de floresta e espécies presentes.</p>
<p>A aplicação aceita imagens de entrada com apenas três bandas. Se o usuário carregar uma imagem com mais de três bandas,
a aplicação considerará automaticamente apenas as três primeiras.</p>
<p class="important"><strong>IMPORTANTE:</strong> Recomendamos não utilizar imagens muito grandes, pois limitações
de hardware, como falta de memória RAM, espaço em disco, processadores mais lentos e a ausência de uma GPU dedicada,
podem impactar o desempenho da aplicação, resultando em tempos de processamento mais longos ou até mesmo no travamento do
sistema. Para áreas muito grandes, sugere-se dividir a imagem em partes menores para facilitar o processamento. A imagem de
entrada deve ter um tamanho mínimo de 2048<i>x</i>2048 <i>pixels</i>, conforme definido para o processamento em bloco.</p>
<p>A aba "IMAGEM" oferece diversos recursos ao usuário após o carregamento de uma imagem.</p>
<img src="img_doc/image006.png" alt="Menu de opções para a imagem carregada" style="width: 25%;">
<p class="center">Figura 3 – Menu de opções para a imagem carregada.</p>
<p>Ao passar o mouse sobre a imagem carregada, um menu de opções localizado no canto superior direito da imagem (Figura XX) será exibido. Este menu permite as seguintes ações: <img src="img_doc/image007.png" alt="Salvar uma captura da visualização atual da imagem" style="width: 4%; display: inline;"> Salvar uma captura da visualização atual da imagem; <img src="img_doc/image008.png" alt="Coletar informações da imagem" style="width: 4%; display: inline;"> Coletar informações da imagem; <img src="img_doc/image009.png" alt="Percorrer a imagem movendo-se com o cursor" style="width: 4%; display: inline;"> Percorrer a imagem movendo-se com o cursor; <img src="img_doc/image010.png" alt="Aumentar o Zoom" style="width: 4%; display: inline;"> Aumentar o Zoom; <img src="img_doc/image011.png" alt="Diminuir o Zoom" style="width: 4%; display: inline;"> Diminuir o Zoom; <img src="img_doc/image012.png" alt="Restaurar a visualização" style="width: 4%; display: inline;"> Restaurar a visualização.</p>
<p>Para utilizar uma dessas opções, basta clicar no ícone correspondente, que mudará de cor para azul, e aplicar o recurso desejado à
imagem.</p>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
<h2 id="processar">Processar Segmentação</h2>
<p>1. Após carregar a imagem, clique no botão 'Processar Segmentação'.</p>
<p>2. A segmentação será processada e os resultados serão exibidos na aba IMAGEM.</p>
<p>3. A sobreposição da imagem original com os resultados da segmentação será mostrada.</p>
<img src="img_doc/image014.png" alt="Demonstração do resultado de um processamento com o tipo de segmentação ‘Espécies’" style="width: 95%;">
<p class="center">Figura 4 – Demonstração do resultado de um processamento com o tipo de segmentação ‘Espécies’.</p>
<p>Neste momento, é importante aguardar até que o processamento termine. Se a imagem for muito grande, ela será dividida em
blocos de 2048<i>x</i>2048 <i>pixels</i>, e essa informação será exibida em uma pequena janela de progresso (Figura 5).</p>
<img src="img_doc/image016.png" alt="Janela de processamento em bloco" style="width: 95%;">
<p class="center">Figura 5 – Janela de processamento em bloco.</p>
<p>Após o processamento, uma janela de progresso (Figura 6) aparecerá enquanto o resultado é aplicado na aba "IMAGEM".</p>
<img src="img_doc/image018.png" alt="Janela de progresso" style="width: 95%;">
<p class="center">Figura 6 – Janela de progresso.</p>
<p>O resultado inicial apresentará uma segmentação simples, sem distinção entre as espécies de palmeiras, classificando a
imagem em apenas três classes: 1) Palmeiras; 2) Floresta sem Palmeiras (<i>background</i>); 3) Sem dados (no-data).</p>
<img src="img_doc/image020.png" alt="Demonstração do resultado de um processamento com o tipo de segmentação ‘Simples’" style="width: 95%;">
<p class="center">Figura 7 – Demonstração do resultado de um processamento com o tipo de segmentação ‘Simples’.</p>
<p>Após a conclusão do processamento e a exibição do resultado, a caixa de opções "Tipo de Segmentação" ficará habilitada.
Isso permitirá que o usuário alterne entre a segmentação simples e a segmentação por espécies, aplicando o novo resultado
imediatamente na aba "IMAGEM".</p>
<p class="important"><strong>IMPORTANTE:</strong> Embora a aplicação tenha uma rotina interna de limpeza de memória para permitir processamentos
repetidos, recomendamos fortemente que, para cada nova imagem a ser processada, a aplicação seja fechada e reaberta. Isso
garante a liberação completa da memória utilizada no processamento anterior, evitando possíveis erros futuros e assegurando
um desempenho otimizado.</p>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
<h2 id="histograma">Gerar Histograma</h2>
<p>1. Com a segmentação processada, clique no botão 'Histograma'.</p>
<p>2. O histograma da distribuição das espécies será exibido na aba HISTOGRAMA.</p>
<img src="img_doc/image022.png" alt="Demonstração de um histograma com o tipo de segmentação ‘Espécies’" style="width: 95%;">
<p class="center">Figura 8 – Demonstração de um histograma com o tipo de segmentação ‘Espécies’.</p>
<p>A função do histograma só estará disponível após o término do processamento. O histograma é apresentado na aba "HISTOGRAMA"
assim que o processamento é concluído. Uma janela de progresso indicará o fim do processamento e a aplicação mudará
automaticamente o foco para a aba "HISTOGRAMA".</p>
<img src="img_doc/image024.png" alt="Demonstração de um histograma com o tipo de segmentação ‘Simples’" style="width: 95%;">
<p class="center">Figura 9 – Demonstração de um histograma com o tipo de segmentação ‘Simples’.</p>
<p>Para alterar o histograma, utilize as opções de ‘Tipo de Segmentação’ na parte inferior esquerda da aplicação. O histograma
é configurado como um gráfico de barras, onde o eixo X representa as classes e o eixo Y indica o número de pixels
classificados. O usuário pode obter informações detalhadas sobre a frequência absoluta de pixels posicionando o mouse
sobre o gráfico.</p>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
<h2 id="exportar">Exportar Segmentação</h2>
<p>1. Para exportar os resultados da segmentação, clique no botão 'Exportar Segmentação'.</p>
<p>2. Os resultados serão salvos no diretório <b>‘export</b>’ no formato GeoTIFF.</p>
<p>Durante o processamento, uma janela de progresso aparecerá enquanto a exportação está sendo realizada. Ao término da
exportação, um alerta indicará o sucesso da operação (Figura 10).</p>
<img src="img_doc/image026.png" alt="Alerta do fim de exportação" style="width: 95%;">
<p class="center">Figura 10 – Alerta do fim de exportação.</p>
<p class="important"><strong>IMPORTANTE:</strong> O arquivo exportado será salvo no diretório denominado ‘<strong>export</strong>’, localizado no
mesmo local da instalação da aplicação. O nome do arquivo será o <strong>mesmo nome do arquivo fornecido como
entrada</strong> acrescentado de um sufixo ‘<strong>_Simples</strong>’ e/ou ‘<strong>_Especies</strong>’
seguido da extensão ‘<strong>TIF</strong>’. O resultado da exportação dependerá da seleção na caixa de opções "Tipo de
Segmentação".</p>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
<h2 id="resolucao-problemas">Resolução de Problemas</h2>
<p>Aqui estão algumas soluções para problemas comuns que você pode encontrar:</p>
<ul>
<li><strong>Erro na instalação:</strong> Verifique se todas as dependências estão instaladas e se a versão do MATLAB é compatível.</li>
<li><strong>Aplicação não inicia:</strong> Certifique-se de que o MATLAB está corretamente configurado no PATH do sistema.</li>
<li><strong>Imagem não carrega:</strong> Verifique o formato da imagem e se ela atende aos requisitos de tamanho.</li>
<li><strong>Processamento lento:</strong> Considere utilizar um computador com melhor capacidade de hardware ou dividir a imagem em partes menores.</li>
</ul>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
<h2 id="faq">Perguntas Frequentes (FAQ)</h2>
<p>Aqui estão algumas perguntas frequentes sobre a aplicação:</p>
<ul>
<li><strong>Posso usar imagens em formatos diferentes de TIF?</strong> Atualmente, a aplicação só suporta o formato TIF.</li>
<li><strong>Como faço para atualizar a aplicação?</strong> Verifique a seção de atualizações e manutenção para obter instruções.</li>
<li><strong>O que devo fazer se a aplicação travar?</strong> Reinicie a aplicação e tente novamente. Se o problema persistir, consulte a seção de resolução de problemas.</li>
</ul>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
<h2 id="atualizacoes">Atualizações e Manutenção</h2>
<p>Para atualizar a aplicação, siga os passos abaixo:</p>
<ul>
<li>Verifique o site oficial para novas versões.</li>
<li>Baixe a nova versão e substitua os arquivos antigos.</li>
<li>Reinstale as dependências, se necessário.</li>
</ul>
<p>Para manutenção preventiva:</p>
<ul>
<li>Verifique regularmente por atualizações.</li>
<li>Faça backups periódicos dos seus dados.</li>
</ul>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
<h2 id="seguranca-backup">Segurança e Backup</h2>
<p>Para garantir a segurança dos seus dados:</p>
<ul>
<li>Mantenha o software e dependências atualizados.</li>
<li>Faça backups regulares dos resultados da segmentação.</li>
<li>Armazene os backups em locais seguros e redundantes.</li>
</ul>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
<h2 id="glossario">Glossário</h2>
<p>Aqui estão alguns termos técnicos utilizados nesta documentação:</p>
<ul>
<li><strong>VANT:</strong> Veículo Aéreo Não Tripulado, também conhecido como drone.</li>
<li><strong>GeoTIFF:</strong> Formato de arquivo raster georreferenciado.</li>
<li><strong>Segmentação:</strong> Processo de dividir uma imagem em partes significativas.</li>
</ul>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
<h2 id="copyright">Copyright e Contato do Suporte</h2>
<h3 id="copyright">Copyright</h3>
<p>Todos os direitos autorais da aplicação são reservados ao(s) autor(es) e à Universidade do Estado de Santa Catarina
(UDESC-FAED). Qualquer redistribuição ou reprodução de parte ou de todo o conteúdo da aplicação em qualquer formato é
proibida, exceto nas seguintes condições:</p>
<p>1. <b>Uso Pessoal e Acadêmico</b>: A aplicação pode ser usada para fins pessoais e de pesquisa acadêmica, desde que seja
citada adequadamente a fonte e o(s) autor(es) originais da aplicação.</p>
<p>2. <strong>Proibição de Uso Comercial</strong>: É expressamente proibido o uso da aplicação para fins comerciais sem a
permissão explícita do(s) autor(es) e da UDESC-FAED.</p>
<p>3. <strong>Distribuição Limitada</strong>: A aplicação pode ser compartilhada com colegas de pesquisa, desde que este termo
de copyright e licença seja incluído na redistribuição e que não seja alterado ou removido.</p>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
<h3 id="licenca">Licença de Uso</h3>
<p>Esta aplicação foi desenvolvida utilizando o Matlab Compiler sob a Licença da Universidade do Estado de Santa Catarina -
Faculdade de Educação (UDESC-FAED). A licença de uso está descrita da seguinte forma:</p>
<p>1. <b>Uso Restrito à Pesquisa</b>: A aplicação deve ser utilizada exclusivamente para fins de pesquisa e desenvolvimento
acadêmico, conforme os objetivos estabelecidos na pesquisa de doutorado.</p>
<p>2. <strong>Reprodução e Modificação</strong>: A modificação da aplicação é permitida apenas para fins de adaptação às
necessidades específicas da pesquisa de doutorado, desde que as modificações não violem os termos de uso do Matlab
Compiler.</p>
<p>3. <strong>Distribuição de Modificações</strong>: Quaisquer modificações na aplicação devem ser compartilhadas sob a mesma
licença, garantindo que as alterações sejam acessíveis à comunidade acadêmica e respeitem os direitos autorais originais.</p>
<p>4. <strong>Limitações de Responsabilidade</strong>: A UDESC-FAED e o(s) autor(es) não se responsabilizam por quaisquer
danos diretos ou indiretos que possam resultar do uso da aplicação, incluindo, mas não se limitando a, perda de dados,
interrupção de negócios ou lucros cessantes.</p>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
<h3 id="consideracoes">Considerações Finais</h3>
<p>Ao utilizar esta aplicação, você concorda com os termos e condições aqui estabelecidos. O não cumprimento de qualquer parte
deste acordo pode resultar em ações legais apropriadas, de acordo com as leis de direitos autorais aplicáveis.</p>
<p>Para mais informações ou para obter permissão para usos além dos especificados nesta licença, entre em contato com a
Universidade do Estado de Santa Catarina - Faculdade de Educação (UDESC-FAED).</p>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
<h3 id="autores">Autor(es):</h3>
<p>Airton Gaio Jr.<br>
airton.gaio@edu.udesc.br<br>
</p>
<p>Rodrigo Pinheiro Ribas<br>
rodrigo.ribas@udesc.br
</p>
<p>Julho de 2025.</p>
<p class="center"><a href="#sumario" class="btn-back">Voltar ao Sumário</a></p>
</div>
</body>
</html>
- Images: Correct Screen Before Clicking the Link
![](https://www.mathworks.com/matlabcentral/answers/uploaded_files/1741641/image.png)
- Images: Application Screen After Clicking the Link
![](https://www.mathworks.com/matlabcentral/answers/uploaded_files/1741646/image.png)
1 Commento
Risposte (1)
Divyam
il 7 Ago 2024 alle 7:43
Hi @Airton Gaio Junior, there is a bug report issued for a similar issue on the official MathWorks support website where the layout of multi-panel app shifts after running the app, here's the link for the report: https://www.mathworks.com/support/bugreports/details/2795585
To solve this issue, ensure that none of the panels and other components are overflowing your UIFigure as that can cause changes in the position of the components due to the scroll down happening when you are clicking the HTML link.
If the issue persists, use the Grid Layout component for arranging the components. To add a Grid Layout, right click on UIFigure component and then select "Apply Grid Layout". A configurable grid layout manager will be added between the UIFigure and the Tab Group/HTML component. This will prevent auto-resizing and change in the positions of other components of your app upon clicking HTML links.
0 Commenti
Vedere anche
Categorie
Scopri di più su Develop uifigure-Based Apps in Help Center e File Exchange
Community Treasure Hunt
Find the treasures in MATLAB Central and discover how the community can help you!
Start Hunting!