TUTORIAL – GUI MATLAB 1
INTRODUÇÃO Tutorial referente à ferramenta GUI (Graphics User Interface - Interface Gráfica do
Usuário) do Matlab. Tal ferramenta permite a construção de ambientes interativos ao usuário, facilitando o uso para não especialistas e provendo recursos como pequenos sistemas de supervisão industrial que podem ser compilados e executados em qualquer computador mesmo que não possua o Matlab instalado. Aliados aos elementos gráficos o desenvolvedor pode fazer uso de todas as ferramentas disponíveis no Matlab através das chamadas de funções (callbacks). O ambiente é do tipo WYSIWYG (What You See Is What You Get - O que você vê é o que você têm), ou seja, durante o projeto pode-se observar a prévia em tempo real de como ficará a versão final da interface. 2
ACESSANDO O AMBIENTE GUIDE Para que se faça o acesso do ambiente de construção de interfaces, deve-se digitar
o comando ʻʻguideʼʼno workspace: >> guide Surge uma tela com as opções mais comuns para iniciar-se um projeto, para este tutorial, mantém-se as configurações como estão e confirma-se em ʻʼokʼʼ.
Figura 1
ARTHUR SCHULER DA IGREJA
- Iniciando um novo projeto.
1
A próxima tela é a tela inicial de projetos, neste ambiente são configurados os elementos que serão visíveis ao usuário.
Figura 2
3
- Tela Tela inicial do ambiente gráfico.
CALLBACKS
Todo elemento adicionado à interface realizará um retorno de chamada (callback) quando acionado, ou seja, caso um botão for adicionado ao projeto, quando o usuário clicar em tal botão, um trecho de código será executado. Este trecho de código é escrito em um arquivo .m padrão do Matlab mas com delimitações para cada elemento. 4
EXEMPLOS
4.1 BOTÃO INCREMENTANDO VARIÁVEL Neste primeiro exemplo será construída uma interface composta de um botão e um edit (campo de caracteres) onde a cada vez que o usuário clicar no botão será incrementado em uma unidade o contador presente no edit. Inicialmente deve-se selecionar um botão no menu de elementos presente no lado esquerdo da tela principal do GUI:
Figura 3
ARTHUR SCHULER DA IGREJA
- Selecionando um botão no menu de elementos. 2
Uma vez selecionado o botão basta clicar em qualquer ponto da tela do projeto e arrastar o mouse até o botão atingir a dimensão desejada.
Figura 4
- Botão adicionador ao projeto.
A próxima tarefa consiste em alterar algumas das propriedades do botão como o texto padrão ʻʻPush Buttonʼʼ. Para acessar o menu de edição de propriedades basta clicar 2 vezes em cima do elemento, um menu surgirá na tela.
Figura 5
- Edição de propriedades do botão.
Para editar o texto basta alterar a propriedade ʻʻStringʼʼ, neste caso foi alterada para a palavra ʻʻADICIONAʼʼ. O próximo passo consiste em adicionar um campo de edição de caracteres (edit), para tal basta selecionar este elemento no menu e posicioná-lo no projeto.
Figura 6
ARTHUR SCHULER DA IGREJA
- Selecionando o elemento ʻʻeditʼ.
3
Figura 7
- Edit adicionado à interface.
Da mesma forma que o botão, deve-se alterar a propriedade do campo de texto para que se inicie com o número 0. Basta editar a propriedade ʻʻStringʼʼe alterar para 0.
Figura 8
- Edit com valor inicial configurado.
Uma vez adicionados os elementos, deve-se editar o código de callback de cada um dos elementos, neste caso apenas o botão terá ação para que o projeto seja concluído. Para editar o callback de um elemento, basta clicar com o botão direito sobre este e acessar a opção ʻʻView callbacksʼʼ - ʻʼ Callbackʼʼ.
Figura 9
- Acessando área de edição de código do botão ʻʻADICIONAʼ.
Uma tela com um arquivo .m é aberta com diversos comentários, esses comentários separam o trecho de código para cada elemento do sistema, neste caso o cursos aparece na edição do botão.
Figura 10
- Função de callback ao pressionar o botão.
Abaixo destes comentários deve ser escrito o seguinte código: numero_atual = get(handles.edit1, get(handles.edit1,'String' 'String'); ); numero_atual = str2num(numero_atual); str2num(numero_atual); numero_atual = numero_atual+1; numero_atual+1; numero_atual = num2str(numero_atual); num2str(numero_atual); set(handles.edit1,'String' set(handles.edit1, 'String',numero_atual); ,numero_atual);
ARTHUR SCHULER DA IGREJA
4
O sistema de controle do GUI é gerido por uma estrutura chamada ʻʻhandlesʼʼ, esta estrutura possui todos os atributos dos componentes adicionados pelo projetista. Para alterar uma propriedade de um elemento via código deve-se fazer a alteração dentro desta estrutura com os comandos ʻʻgetʼʼ (obter) e ʻʻsetʼʼ (definir). A regra geral para o comando ʻʻgetʼʼ é: get(handles.TAG_DO_ELEMENTO, 'PROPRIEDADE_DO_ELEMENTO'); Para o exemplo anterior, foi atribuído à variável ʻʻnumero_atualʼʼ o conteúdo do campo ʻʻStringʼʼ (texto) do elemento ʻʻedit1ʼʼ. Para o comando ʻʻsetʼʼ a regra geral é: set(handles.TAG_DO_ELEMENTO, 'PROPRIEDADE_DO_ELEMENTO' 'PROPRIEDADE_DO_ELEMENTO', ,
VALOR);
Dessa forma o comentário do código anterior é: 1 linha - Obtém o conteúdo do campo ʻʻedit1ʼʼ e armazena na variável ʻʻnumero_atualʼʼ; 2 linha - Converte a variável ʻʻnumero_atualʼʼ de texto para número visto que todo conteúdo de um campo ʻʼeditʼʼ é do tipo texto por padrão; 3 linha - Soma um ao valor atual da variável; 4 linha - Converte de número para texto; 5 linha - Define no elemento ʻʻedit1ʼʼ, no campo ʻʻStringʼʼ o novo valor; Para testar o projeto basta apertar F5 ou clicar no botão ʻʻrunʼʼ do menu do Matlab. A interface criada é apresentada e a cada clique do mouse o valor é incrementado em uma unidade.
Figura 11 - Projeto sendo testado.
4.2 PLOTANDO PLOTANDO UM GRÁFICO Neste exemplo ao selecionar um marcador o usuário fará com que um gráfico senoidal seja plotado no programa. O primeiro passo consiste em adicionar o elemento chamado ʻʻradiobuttonʼʼ e posicioná-lo no projeto. Após ser adicionado deve-se editar o campo ʻʻStringʼʼ e substituir o texto padrão por ʻʻPLOTARʼʼ.
Figura 12
- Elemento ʻʻradiobuttonʼʼ depois de editado.
O próximo elemento elemento é o eixo de plotagem, plotagem, este elemento está no menu com o nome de ʻʻAxesʼʼ, devese posicioná-lo no projeto ao lado do botão.
ARTHUR SCHULER DA IGREJA
5
Figura 13
- Prévia do projeto com área para plotar e botão de acionamento.
O elemento responsável por ativar o gráfico será o botão, dessa forma deve-se editar a função callback do mesmo com o seguinte código: x=0:0.1:10; y=sin(x); plot(x,y);
Figura 14
- Resultado prático do exemplo.
4.3 ATUALIZAR UM GRÁFICO EM TEMPO REAL Neste exemplo um gráfico será alterado sempre que o usuário mover o elemento ʻʻsliderʼʼ. Este elemento permite configuração de valores com o mouse através de uma barra de rolagem. O primeiro passo é adicionar o elemento ʻʻsliderʼʼ na tela de projeto e configurar alguns de seus parâmetros: Value = 5; Min = 1; Max = 10;
ARTHUR SCHULER DA IGREJA
6
Deve também ser adicionado um eixo para plotar gráficos, a configuração prévia do projeto é vista na Figura 15.
Figura 15 - Prévia do projeto 4.3.
O elemento que controla o gráfico é o ʻʻsliderʼʼ, dessa forma em seu callback deve ser definido: limite = get(handles.slider1, get(handles.slider1,'Value' 'Value'); ); x=0:0.1:limite; y=sin(x); plot(x,y);
Dessa forma a cada novo valor configurado pelo usuário o gráfico é reconfigurado.
Figura 16 - Projeto 4.3 com slider.
ARTHUR SCHULER DA IGREJA
7
