Criação de Interface Grafica - GUIDE

MATLAB – CRIAÇÃO
DE INTERFACES
GRÁFICAS
INSTRUTOR:
ENG. ANDRÉ JUÁREZ JAIME DUARTE

andrejuarez@ig.com.br
CRONOGRAMA PREVISTO
Parte 01: Introdução ao GUIDE no MATLAB e o conceito de GUI.
Parte 02: Uso de caixas de diálogo padrões no MATLAB.
Parte 03:Elementos principais para criação de uma GUI:

componentes, eventos e chamadas de retorno.
Parte 04: Roteiro para construção de uma GUI.
Parte 05: Exemplo de aplicação: desenvolvimento de uma

interface gráfica para conversão de temperatura. Configuração e
uso de botões, caixas de edição de texto, campos de texto e
menus dinâmicos, menus-padrão. Entendendo a chamada de
retorno das subfunções. Uso das funções GET e SET.
Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009
PARTE 01
INTRODUÇÃO AO
GUIDE

INTRODUÇÃO AO GUIDE - MATLAB
INTERFACE NO MATLAB  GUIDE
O Matlab possui uma ferramenta que permite construir

interfaces gráficas de interação com o utilizador.
GUI (Graphical User Interface)  torna os programas

mais fáceis de usar, pois fornecem uma aparência
consistente e com controles intuitivos (botões, réguas,
caixas de listagem, menus, etc).
GUI  um aplicativo em GUI deverá ser previsível e

compreensível, para que o usuário saiba o que esperar
ao executar uma ação.
INTERFACE NO MATLAB  GUIDE
Para iniciar a criação de uma nova interface, basta digitar

GUIDE (GUI Design Environment) no ambiente de
trabalho e de imediato se abre uma janela para a edição
do aspecto que irá ter a interface a ser construída.
Para construir uma interface gráfica convém ter uma

idéia muito bem definida do que se pretende.

PARTE 02
CAIXAS DE DIÁLOGO
NO MATLAB

CAIXAS DE DIÁLOGO DE SAÍDA:
errordlg('texto de erro','titulo')
warndlg('texto de erro','titulo')
helpdlg('texto de erro','titulo')

ButtonName=questdlg('Voce entende isso?', 'Sim','Naoooo','Sei la!','Sim')
Botão 2 Default
Botão 1 Botão 3
ButtonName=msgbox(‘Olá!! Td blz?’, ’MATLAB - GUIDE’ )

PARTE 03
ELEMENTOS
PRINCIPAIS DE UMA
GUI

EXECUTANDO O GUIDE  DIGITAR “guide” NO PROMPT DO
MATLAB

GUIDE  ÁREA DE TRABALHO
ÁREA DE
PROJETO

ELEMENTOS PRINCIPAIS  CRIAÇÃO DE UMA GUI
1) COMPONENTES: botões, rótulos, marcadores, etc.

1.1) Controles Gráficos: listas, réguas, botões.
1.2) Elementos Estáticos: quadros e cadeia de caracteres
de texto.
1.3) Menus e Eixos.
2) FIGURAS: janela criada pelo próprio GUIDE, quando um
aplicativo criado pelo usuário é executado.
3) CHAMADAS DE RETORNO: é o código executado em
resposta a uma evento  deve existir uma chamada de
retorno para implementar a função de cada componente
gráfico da GUI.
GUIDE  COMPONENTES PARA CONSTRUÇÃO DE UMA GUI

PARTE 04
ROTEIRO PARA
CONSTRUÇÃO DE UMA
GUI

GUIDE  ETAPAS PARA CRIAÇÃO DE UMA GUI
1°) Desenhar os componentes que se pretende que façam parte

da interface  Nesta fase devemo-nos preocupar
essencialmente com o aspecto que se pretende obter, tal
como cores, alinhamento dos componentes etc.
2°) Edição das Propriedades dos Componentes  através de um
duplo clique sobre o objeto que deseja alterar as propriedades
 Janela Property Inspector.
3°) Salvar a Figura (Janela) Criada  2 arquivos são criados com
o mesmo nome, mas com extensões distintas  Um arquivo
.fig e outro arquivo .m  Arquivo M contém o código para
executar a figura e os esqueletos de chamadas de retorno
para cada elemento da GUI.
GUIDE  ETAPAS PARA CRIAÇÃO DE UMA GUI
4°) Escrever o Código que Implementa o Comportamento

Associado a Cada Componente da GUI  através da funções
definidas no arquivo .m denominadas “CALLBACK”.
Para Acessar o Arquivo .m  localize na barra de ferramentas o

menu view  clique em m-file editor
Outra opção: através do ícone

PARTE 05
EXEMPLO DE
APLICAÇÃO:
CONVERSOR DE
TEMPERATURA

EXEMPLO DE APLICAÇÃO – GUIDE
CRIAÇÃO DE UMA GUI: CONVERSOR DE TEMPERATURA
 Requisitos da GUI:
1) Realizar a conversão de
temperatura entre as escalas
Celsius e Fahrenheit.
2) Fornecer ajuda para

utilização, bem como atalhos
rápidos para fechar o
programa.

 OUTRAS CARACTERÍSTICAS FUNCIONAIS DA GUI:
1) Cada vez que o botão for acionado, a conversão entre

temperaturas deverá ser realizada.
2) Deverá conter um menu dinâmico para fornecer as opções
de conversão de CELSIUS p/ FAHRENHEIT e vice-versa.
3) Deverá conter campos de texto que se modificam de acordo
com a opção de conversão escolhida.
4) Uma frase de ajuda deverá ser exibida quando o ponteiro do
mouse se situar sobre as caixas de edição (para inserção dos
valores de temperatura).
 LISTA DE COMPONENTES DA GUI:
1 BOTÃO 
6 CAMPOS DE TEXTO 
2 CAIXAS DE EDIÇÃO DE TEXTO 
1 MENU DINÂMICO 
1 QUADRO PARA COMPONENTES DE GUI 

AJUSTANDO A FORMA DA GUI:
CAMPOS DE TEXTO
MENU DINÂMICO
CAIXA DE EDIÇÃO
BOTÃO
ALÇA PARA
REDIMENSIONAR
A FIGURA

CONFIGURANDO A FIGURA DA GUI:
CONFIGURAÇÕES: clique simples na área de trabalho do GUIDE
e clque no botão Property Inspector ou Duplo clique na área
quadriculada do GUIDE.

CONFIGURANDO A FIGURA DA GUI:
 Duplo clique sobre a
área quadriculada da
figura.
 REQUISITOS:
1) Ausência de barra de
ferramentas padrão.
2) Janela no estilo
NORMAL.
3) Opção “RESIZE” on.

EXEMPLO 01 – GUIDE - MATLAB
CONFIGURANDO O BOTÃO DA GUI:
CONFIGURAÇÕES: podem ser ajustadas através do Property

Inspector  Duplo clique no botão a ser configurado.

CONFIGURANDO O BOTÃO DA GUI:
 STRING: contém o texto
a ser exibido.
 TAG: nome do objeto 

utilizado pelo MATLAB para
a chamada da função que
contém a tarefa a ser
executada.
 FONTSIZE: tamanho da
fonte.

CONFIGURANDO O MENU DINÂMICO DA GUI:
 STRING: é o campo que
conterá todas as opções de
escolha para o usuário 
conterá todas as opções de
conversão de temperatura.
Estas opções são cadeias

de caracteres que deverão
ser inseridas clicando-se
no ícone associado ao
campo string:
Opções:
Celsius para Fahrenheit

Fahrenheit para Celsius
CONFIGURANDO A CAIXA DE EDIÇÃO DA GUI:
 STRING: é o campo que
conterá o valor inicial das
temperaturas.
Será considerado o valor

inicial igual a 0 (zero) para
ambas as caixas de edição.
 TOOLTIPSTRING: campo
que contém uma frase de
ajuda exibida quando o
ponteiro do mouse se situar
Frase de ajuda : Entre sobre as caixas de edição.
com a temperatura a
ser convertida Propriedade comum a todo
componente do GUIDE.

CONFIGURANDO OS CAMPOS DE TEXTO DA GUI:
CONFIGURAÇÕES: podem ser ajustadas através do Property

Inspector  Duplo clique no texto a ser configurado.
Ajuste das Propriedades 

realizada de modo semelhante
ao botão da GUI.
1) STRING  Texto a ser exibido
2) TAG: nome do objeto  utilizado

pelo MATLAB para a chamada da
função que contém a tarefa a ser
executada.
3) FONTSIZE: tamanho da fonte.

CONFIGURANDO OS CAMPOS DE TEXTO DA GUI:
TÍTULO DA GUI LEGENDAS DE

TEMPERATURA
CAMPOS DE
TEXTO
ALTERÁVEIS DE
ACORDO COM
A OPÇÃO DE
CONVERSÃO
ESCOLHIDA

CRIANDO MENUS NO GUIDE:
 Um menu permite que o usuário selecione ações sem utilizar

componentes adicionais presentes na GUI.
 Existem 2 tipos de menus no MATLAB:
1) MENUS-PADRÃO: aparecem na barra de menus que se localiza

acima da figura.
2) MENUS DE CONTEXTO: aparecem sobre a figura quando
utilizamos o botão direito do mouse sobre um objeto gráfico.
 Os menus possuem propriedades semelhantes aos demais
componentes que podem ser utilizado no projeto de uma GUI.
 Criação de MENUS: através do ícone

 PARA O CONVERSOR DE TEMPERATURAS  Criação de 2

menus:
1) MENU “ARQUIVO” contendo a opção “Sair”, com o uso de
teclas de atalho.
2) MENU “HELP” contendo as opções: “Tópicos de Ajuda” e
“Sobre o Conversor de Temperaturas”.
 PARA CADA MENU: o MATLAB cria automaticamente uma função

de chamada de retorno associada  local onde será configurada via
programação as ações a serem efetuadas quando se clica sobre um
menu “arquivo”, por exemplo.

 Acessando o Editor de Menus: janela-padrão de configuração.

 ETAPAS DE CRIAÇÃO DO MENU “ARQUIVO”:
1) Crie uma nova estrutura de menus.

2) Clique sobre o menu criado e forneça a cada item de menu um
LABEL para exibir e um único valor de TAG. Neste caso, LABEL
será “Arquivo” e TAG será “Arq”.
3) Crie a cadeia de caracteres para a chamada de retorno  isto
é feito automaticamente clicando no botão VIEW  será aberto o
editor do matlab, onde será exibido o código do GUI projetado.
4) Insira o código que será executado quando um desses menus

for acessado  isto será feito posteriormente.

 ETAPAS DE CRIAÇÃO DO SUBMENU “SAIR”:
5) Crie agora um item de menu  submenu associado ao MENU

“ARQUIVO”.
6) Defina LABEL e TAG  LABEL será “Sair” e TAG será
“Close”.
7) Crie a cadeia de caracteres para a chamada de retorno Do
submenu “SAIR”.
 Repita os passos anteriores para criar o MENU “HELP”, que

deverá conter 2 submenus: “Tópicos de Ajuda” e “Sobre o
Conversor de Temperaturas”.
Para este MENU  defina o LABEL como “Help”

CONFIGURANDO E EXPLORANDO OS EVENTOS E AS
CHAMADAS DE RETORNO DA GUI:
Tais configurações são realizadas através do arquivo .m

gerado quando é criada a GUI projetada.
As chamadas de retorno deverão conter as equações e comandos

para execução da conversão e abertura/fechamento das janelas
do aplicativo:
1) Equações de conversão de temperatura de CELSIUS para

FAHRENHEIT e vice-versa.
2) Janelas de ajuda e informações gerais sobre o aplicativo.
3) Rotinas para configuração dos objetos da GUI (botão, menu
dinâmico, campos de texto e caixas de edição).

 ENTENDENDO O CÓDIGO GERADO PELO GUIDE DO MATLAB:

O MATLAB gera um código em arquivo .m que contém geralmente:
1) A função principal que leva o nome da GUI projetada;

2) Subfunções padrão que implementam as chamadas de retorno
para cada componente ativo da GUI.
Cada função de chamada de retorno cuida somente de

um ÚNICO COMPONENTE DA GUI.
Nome da chamada de retorno: “TAG” +
“_CALLBACK”
SINTAXE DE UMA FUNÇÃO MATLAB:

function [varsaida1, argsaída2, …] = nome (varent1,varent2, …)
Lista de argumentos de
Determina o início entrada  serão inseridos
da função. pelo usuário no início da
execução da função.
Lista de argumentos de saída  serão
mostrados ao usuário ao final da
execução da função.
SINTAXE DE UMA SUBFUNÇÃO NO GUIDE:

function varargout = tag_Callback (h, eventdata, handles, varargin)
Chamada Contém todas as

Determina o
da figura chamadas de todos
início da função.
principal os componentes de
da GUI. GUI na figura
PARA CADA OBJETO NA GUI (botões, caixas de texto, etc.) 

EXISTE UMA CHAMADA DE RETORNO (CALLBACK).
PARA O CONVERSOR DE TEMPERATURA  FORAM CRIADAS 8

SUBFUNÇÕES DE CHAMADAS DE RETORNO  1 PARA CADA
OBJETO INSERIDO.
COMO AMARRAR TODAS AS AÇÕES REQUERIDAS PARA A GUI?
USO DAS FUNÇÕES GET e SET

SINTAXE DA FUNÇÃO GET:
value = get (handle, ‘PropertyName’)
Variável que armazena Nome da

Vetor de
o resultado do uso da propriedade a ser
propriedades
função GET. examinada.
de um objeto.
USOS MAIS COMUNS  VERIFICAR PROPRIEDADES DE GRÁFICOS

E DE CAMPOS DE TEXTO, COMO COR E TIPO DO TRAÇADO,
ESPESSURA DA LINHA, TAMANHO DA FONTE, ETC.
SINTAXE DA FUNÇÃO SET:
set (handle, ‘PropertyName’, value1, …)
Vetor de Nome da Novo valor a ser

propriedades propriedade a assumido pela
de um objeto. ser modificada propriedade
escolhida.
EXEMPLO 
SET (handles.titulo, ‘String’, ‘Novo Título’)
 CONFIGURANDO A CHAMADA DE RETORNO DO BOTÃO:

1) LOCALIZE A “CALLBACK” DO BOTÃO NO ARQUIVO .m 
DENTRO DESTA FUNÇÃO SERÁ ESCRITA TODAS AS AÇÕES
QUE SERÃO REALIZADAS QUANDO O USUÁRIO PRESSIONAR O
BOTÃO.
2) Nesta rotina deverá estar as fórmulas de conversão, que deverão
ser escolhidas de acordo com a opção do usuário:
9
F = C + 32
5
 F − 32 
C = 5* 
 9 
 CÓDIGO DA CHAMADA DE RETORNO DO BOTÃO:
str = get(handles.menu1,'String'); Função GET  leitura das

val = get(handles.menu1,'Value');
opções de conversão no menu
dinâmico.
switch str{val}
Início do código para conversão
case 'Celsius para Fahrenheit' CELSIUS p/ FAHRENHEIT.
set(handles.text6,'String','°C');
set(handles.text7,'String','°F'); Converte o valor
valor1 = inserido pelo usuário
get(handles.temperatura1,'String'); em número.
valor1_num = str2num(valor1);
Calcula e coloca o valor
tf = (32*valor1_num/5) + 9; convertido no 2° campo
tf2 = num2str(tf); de edição de texto.
set(handles.temperatura2,'String',tf2);
 CÓDIGO DA CHAMADA DE RETORNO DO BOTÃO:
case 'Fahrenheit para Celsius'

Início do código para conversão
FAHRENHEIT p/ CELSIUS
set(handles.text6,'String','°F');
set(handles.text7,'String','°C'); Converte o valor
valor2 = inserido pelo usuário
get(handles.temperatura1,'String'); em número.
valor2_num = str2num(valor2);
tc = 5*((valor2_num-9)/32); Calcula e coloca o valor

tc2 = num2str(tc); convertido no 2° campo
set(handles.temperatura2,'String',tc2); de edição de texto.
end

 CONFIGURANDO A CHAMADA DE RETORNO DO MENU

“ARQUIVO”
1) LOCALIZE A “CALLBACK” DO SUBMENU “SAIR”.
2) Insira uma caixa de diálogo perguntando se o usuário deseja
realmente sair do aplicativo  question dialog.

 CÓDIGO DA CHAMADA DE RETORNO DO SUBMENU “SAIR”:
usuario = questdlg('Deseja realmente Caixa de diálogo padrão

sair do aplicativo?','Conversor de  question dialog.
Temperaturas');
switch usuario
case 'No'
Ação a ser realizada de
case 'Yes' acordo com a opção do
usuário escolhida na caixa
de diálogo padrão.
close all hidden
end

 CONFIGURANDO A CHAMADA DE RETORNO DO MENU “HELP”
1) LOCALIZE A “CALLBACK” DO SUBMENU “SOBRE O

CONVERSOR DE TEMPERATURAS”.
2) Insira uma caixa de diálogo informando sobre a versão do
Conversor de Temperaturas  help dialog.
helpdlg('Conversor de Temperaturas - Versão 1.0','MATLAB - GUIDE');

 CONFIGURANDO A CHAMADA DE RETORNO DO MENU “HELP”
3) CRIE UMA NOVA FIGURA CONTENDO SOMENTE UM BREVE

TEXTO SOBRE COMO UTILIZAR O APLICATIVO. SALVE-O COM O
NOME “AJUDA” NA MESMA PASTA ONDE SE ENCONTRA SALVO
O APLICATIVO.
4) LOCALIZE A “CALLBACK” DO SUBMENU “AJUDA” E INSIRA O

SEGUINTE COMANDO:
open ajuda.fig

OBRIGADO!
andrejuarez@ig.com.br

Criação de Interface Grafica - GUIDE

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Criação de Interface Grafica - GUIDE

Uploaded by

Copyright:

Available Formats

MATLAB – CRIAÇÃO

ENG. ANDRÉ JUÁREZ JAIME DUARTE

Parte 02: Uso de caixas de diálogo padrões no MATLAB.

Parte 03:Elementos principais para criação de uma GUI:

Parte 04: Roteiro para construção de uma GUI.

Parte 05: Exemplo de aplicação: desenvolvimento de uma

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

O Matlab possui uma ferramenta que permite construir

GUI (Graphical User Interface)  torna os programas

GUI  um aplicativo em GUI deverá ser previsível e

Para iniciar a criação de uma nova interface, basta digitar

Para construir uma interface gráfica convém ter uma

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

ButtonName=questdlg('Voce entende isso?', 'Sim','Naoooo','Sei la!','Sim')

CAIXAS DE DIÁLOGO DE SAÍDA:

ButtonName=msgbox(‘Olá!! Td blz?’, ’MATLAB - GUIDE’ )

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

1) COMPONENTES: botões, rótulos, marcadores, etc.

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

1°) Desenhar os componentes que se pretende que façam parte

4°) Escrever o Código que Implementa o Comportamento

Para Acessar o Arquivo .m  localize na barra de ferramentas o

Outra opção: através do ícone

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

2) Fornecer ajuda para

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

 OUTRAS CARACTERÍSTICAS FUNCIONAIS DA GUI:

1) Cada vez que o botão for acionado, a conversão entre

 LISTA DE COMPONENTES DA GUI:

2 CAIXAS DE EDIÇÃO DE TEXTO 

1 QUADRO PARA COMPONENTES DE GUI 

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

3) Opção “RESIZE” on.

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

CONFIGURAÇÕES: podem ser ajustadas através do Property

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

 TAG: nome do objeto 

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

Estas opções são cadeias

Celsius para Fahrenheit

Será considerado o valor

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

CONFIGURAÇÕES: podem ser ajustadas através do Property

Ajuste das Propriedades 

2) TAG: nome do objeto  utilizado

3) FONTSIZE: tamanho da fonte.

TÍTULO DA GUI LEGENDAS DE

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

 Um menu permite que o usuário selecione ações sem utilizar

1) MENUS-PADRÃO: aparecem na barra de menus que se localiza

 Criação de MENUS: através do ícone

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

 PARA O CONVERSOR DE TEMPERATURAS  Criação de 2

 PARA CADA MENU: o MATLAB cria automaticamente uma função

Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009