Criação de Interface Grafica - GUIDE

MATLAB – CRIAÇÃO MATLAB – CRIAÇÃO DE INTERFACES DE INTERFACES GRÁFICASGRÁFICAS

INSTRUTOR:INSTRUTOR:

ENG. ANDRÉ JUÁREZ JAIME DUARTEENG. ANDRÉ JUÁREZ JAIME [email protected]@ig.com.br

http://www.see.eng.ufba.br/index.php

CRONOGRAMA PREVISTOCRONOGRAMA PREVISTOParte 01Parte 01: : Introdução ao GUIDE no MATLAB e o conceito de GUI.Introdução ao GUIDE no MATLAB e o conceito de GUI.

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

Parte 03:Parte 03:Elementos principais para criação de uma GUI: Elementos principais para criação de uma GUI: componentes, eventos e chamadas de retorno.componentes, eventos e chamadas de retorno.

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

Parte 05: Parte 05: Exemplo de aplicação: desenvolvimento de uma Exemplo de aplicação: desenvolvimento de uma interface gráfica para conversão de temperatura. Configuração e 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 uso de botões, caixas de edição de texto, campos de texto e menus dinâmicos, menus-padrão. Entendendo a chamada de menus dinâmicos, menus-padrão. Entendendo a chamada de retorno das subfunções. Uso das funções GET e SET.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 2009Eng. André Juárez Jaime Duarte - IV SEE – UFBA – 27 a 30 de Julho de 2009

PARTE 01PARTE 01 INTRODUÇÃO AO INTRODUÇÃO AO

GUIDEGUIDE


INTERFACE NO MATLAB INTERFACE NO MATLAB GUIDE 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.

INTRODUÇÃO AO GUIDE - MATLABINTRODUÇÃO AO GUIDE - MATLAB


INTERFACE NO MATLAB INTERFACE NO MATLAB GUIDE 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 02PARTE 02CAIXAS DE DIÁLOGO CAIXAS DE DIÁLOGO

NO MATLABNO MATLAB


CAIXAS DE DIÁLOGO DE SAÍDA: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 1

Botão 2

Botão 3Default




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



PARTE 03PARTE 03ELEMENTOS ELEMENTOS

PRINCIPAIS DE UMA PRINCIPAIS DE UMA GUIGUI



EXECUTANDO O GUIDE EXECUTANDO O GUIDE DIGITAR “guide” NO PROMPT DO DIGITAR “guide” NO PROMPT DO MATLABMATLAB


INTRODUÇÃO AO GUIDE - MATLABINTRODUÇÃO AO GUIDE - MATLABGUIDE GUIDE ÁREA DE TRABALHOÁREA DE TRABALHO

ÁREA DE ÁREA DE PROJETOPROJETO


ELEMENTOS PRINCIPAIS ELEMENTOS PRINCIPAIS CRIAÇÃO DE UMA GUI 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.


INTRODUÇÃO AO GUIDE - MATLABINTRODUÇÃO AO GUIDE - MATLABGUIDE GUIDE COMPONENTES PARA CONSTRUÇÃO DE UMA GUICOMPONENTES PARA CONSTRUÇÃO DE UMA GUI


PARTE 04PARTE 04ROTEIRO PARA ROTEIRO PARA

CONSTRUÇÃO DE UMA CONSTRUÇÃO DE UMA GUIGUI



GUIDE GUIDE ETAPAS PARA CRIAÇÃO DE UMA GUIETAPAS 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.


INTRODUÇÃO AO GUIDE - MATLABINTRODUÇÃO AO GUIDE - MATLABGUIDE GUIDE ETAPAS PARA CRIAÇÃO DE UMA GUIETAPAS 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 05PARTE 05EXEMPLO DE EXEMPLO DE APLICAÇÃO:APLICAÇÃO:

CONVERSOR DE CONVERSOR DE TEMPERATURATEMPERATURA


EXEMPLO DE APLICAÇÃO – GUIDEEXEMPLO DE APLICAÇÃO – GUIDECRIAÇÃO DE UMA GUI: CONVERSOR DE TEMPERATURACRIAÇÃ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.


CRIAÇÃO DE UMA GUI: CONVERSOR DE TEMPERATURACRIAÇÃO DE UMA GUI: CONVERSOR DE TEMPERATURA

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).

EXEMPLO DE APLICAÇÃO – GUIDEEXEMPLO DE APLICAÇÃO – GUIDE


CRIAÇÃO DE UMA GUI: CONVERSOR DE TEMPERATURACRIAÇÃO DE UMA GUI: CONVERSOR 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:AJUSTANDO A FORMA DA GUI:

CAMPOS DE TEXTO

BOTÃO

ALÇA PARA REDIMENSIONAR A FIGURA

MENU DINÂMICO

CAIXA DE EDIÇÃO



CONFIGURANDO A FIGURA DA GUI: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: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 - MATLABEXEMPLO 01 – GUIDE - MATLAB

CONFIGURAÇÕES: podem ser ajustadas através do Property Inspector Duplo clique no botão a ser configurado.

CONFIGURANDO O BOTÃO DA GUI:CONFIGURANDO O BOTÃO DA GUI:


INTRODUÇÃO AO GUIDE - MATLABINTRODUÇÃO AO GUIDE - MATLABCONFIGURANDO O BOTÃO DA GUI: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: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 FahrenheitFahrenheit para Celsius



CONFIGURANDO A CAIXA DE EDIÇÃO DA GUI: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 sobre as caixas de edição.

Propriedade comum a todo componente do GUIDE.

Frase de ajuda : Entre com a temperatura a ser convertida



CONFIGURAÇÕES: podem ser ajustadas através do Property Inspector Duplo clique no texto a ser configurado.

CONFIGURANDO OS CAMPOS DE TEXTO DA GUI:CONFIGURANDO OS CAMPOS DE TEXTO DA GUI:

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.



TÍTULO DA GUI

CONFIGURANDO OS CAMPOS DE TEXTO DA GUI:CONFIGURANDO OS CAMPOS DE TEXTO DA GUI:

LEGENDAS DE TEMPERATURA

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



CRIANDO MENUS NO GUIDE: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



INTRODUÇÃO AO GUIDE - MATLABINTRODUÇÃO AO GUIDE - MATLABCRIANDO MENUS NO GUIDE:CRIANDO MENUS NO GUIDE:

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.


INTRODUÇÃO AO GUIDE - MATLABINTRODUÇÃO AO GUIDE - MATLABCRIANDO MENUS NO GUIDE:CRIANDO MENUS NO GUIDE:

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”.

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”

7) Crie a cadeia de caracteres para a chamada de retorno Do submenu “SAIR”.



Tais configurações são realizadas através do arquivo .m gerado quando é criada a GUI projetada.

CONFIGURANDO E EXPLORANDO OS EVENTOS E AS CONFIGURANDO E EXPLORANDO OS EVENTOS E AS CHAMADAS DE RETORNO DA GUI:CHAMADAS DE RETORNO DA GUI:

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;

EXEMPLO DE APLICAÇÃO – GUIDEEXEMPLO DE APLICAÇÃO – GUIDECONFIGURANDO E EXPLORANDO OS EVENTOS E AS CONFIGURANDO E EXPLORANDO OS EVENTOS E AS

CHAMADAS DE RETORNO DA GUI:CHAMADAS DE RETORNO DA GUI:

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:SINTAXE DE UMA FUNÇÃO MATLAB:

function [varsaida1, argsaída2, …] = nome (varent1,varent2, …)function [varsaida1, argsaída2, …] = nome (varent1,varent2, …)

Lista de argumentos de saída Lista de argumentos de saída serão serão mostrados ao usuário ao final da mostrados ao usuário ao final da execução da função.execução da função.

Determina o início Determina o início da função.da função.

Lista de argumentos de Lista de argumentos de entrada entrada serão inseridos serão inseridos pelo usuário no início da pelo usuário no início da execução da função.execução da função.




SINTAXE DE UMA SUBFUNÇÃO NO GUIDE:SINTAXE DE UMA SUBFUNÇÃO NO GUIDE:

functionfunction varargout = varargout = tag_Callback tag_Callback (h, eventdata, handles, varargin)(h, eventdata, handles, varargin)

Determina o Determina o início da função.início da função.

Chamada Chamada da figura da figura principal principal da GUI.da GUI.

Contém todas as Contém todas as chamadas de todos chamadas de todos os componentes de os componentes de GUI na figuraGUI na figura

PARA CADA OBJETO NA GUI (botões, caixas de texto, etc.) PARA CADA OBJETO NA GUI (botões, caixas de texto, etc.) EXISTE UMA CHAMADA DE RETORNO (CALLBACK). EXISTE UMA CHAMADA DE RETORNO (CALLBACK).




PARA O CONVERSOR DE TEMPERATURA 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:SINTAXE DA FUNÇÃO GET:

value = get (handle, ‘PropertyName’)value = get (handle, ‘PropertyName’)

Variável que armazena Variável que armazena o resultado do uso da o resultado do uso da função GET.função GET.

Vetor de Vetor de propriedades propriedades de um objeto.de um objeto.

Nome da Nome da propriedade a ser propriedade a ser examinada.examinada.

USOS MAIS COMUNS USOS MAIS COMUNS VERIFICAR PROPRIEDADES DE GRÁFICOS VERIFICAR PROPRIEDADES DE GRÁFICOS E DE CAMPOS DE TEXTO, COMO COR E TIPO DO TRAÇADO, E DE CAMPOS DE TEXTO, COMO COR E TIPO DO TRAÇADO, ESPESSURA DA LINHA, TAMANHO DA FONTE, ETC.ESPESSURA DA LINHA, TAMANHO DA FONTE, ETC.




SINTAXE DA FUNÇÃO SET:SINTAXE DA FUNÇÃO SET:

set (handle, ‘PropertyName’, value1, …)set (handle, ‘PropertyName’, value1, …)

Vetor de Vetor de propriedades propriedades de um objeto.de um objeto.

Novo valor a ser Novo valor a ser assumido pela assumido pela propriedade propriedade escolhida.escolhida.

Nome da Nome da propriedade a propriedade a ser modificadaser modificada

EXEMPLO EXEMPLO

SET (handles.titulo, ‘String’, ‘Novo Título’)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:

3259 += CF

−=

932*5 FC


CÓDIGO DA CHAMADA DE RETORNO DO BOTÃO:

str = get(handles.menu1,'String');val = get(handles.menu1,'Value');

switch str{val} case 'Celsius para Fahrenheit' set(handles.text6,'String','°C'); set(handles.text7,'String','°F'); valor1 =

get(handles.temperatura1,'String'); valor1_num = str2num(valor1); tf = (32*valor1_num/5) + 9; tf2 = num2str(tf); set(handles.temperatura2,'String',tf2);



Função GET Função GET leitura das leitura das opções de conversão no menu opções de conversão no menu dinâmico.dinâmico.

Início do código para conversão Início do código para conversão CELSIUS p/ FAHRENHEIT.CELSIUS p/ FAHRENHEIT.

Converte o valor Converte o valor inserido pelo usuário inserido pelo usuário em número.em número.

Calcula e coloca o valor Calcula e coloca o valor convertido no 2° campo convertido no 2° campo de edição de texto.de edição de texto.


CÓDIGO DA CHAMADA DE RETORNO DO BOTÃO:



case 'Fahrenheit para Celsius' set(handles.text6,'String','°F'); set(handles.text7,'String','°C'); valor2 =

get(handles.temperatura1,'String'); valor2_num = str2num(valor2); tc = 5*((valor2_num-9)/32); tc2 = num2str(tc); set(handles.temperatura2,'String',tc2);end

Início do código para conversão Início do código para conversão FAHRENHEIT p/ CELSIUSFAHRENHEIT p/ CELSIUS

Converte o valor Converte o valor inserido pelo usuário inserido pelo usuário em número.em número.

Calcula e coloca o valor Calcula e coloca o valor convertido no 2° campo convertido no 2° campo de edição de texto.de edição de texto.


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 usuario = questdlg('Deseja realmente sair do aplicativo?','Conversor de sair do aplicativo?','Conversor de Temperaturas');Temperaturas');

switch usuarioswitch usuario case 'No'case 'No' case 'Yes'case 'Yes' close all hiddenclose all hidden endend

Caixa de diálogo padrão Caixa de diálogo padrão question dialog. question dialog.

Ação a ser realizada de Ação a ser realizada de acordo com a opção do acordo com a opção do usuário escolhida na caixa usuário escolhida na caixa de diálogo padrão.de diálogo padrão.


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”

4) LOCALIZE A “CALLBACK” DO SUBMENU “AJUDA” E INSIRA O SEGUINTE COMANDO:



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.

open ajuda.figopen ajuda.fig


OBRIGADO! OBRIGADO! [email protected]@ig.com.br


Documents

Criação de Interface Grafica - GUIDE