nterface ráfica
I G
sta seção ilustra a utilização de recursos relativos a construção de menus, caixas de mensagens barras de espera a partir de exemplos que aplicam os conceitos de contrução de gráficos, utilização de imagens e som e matemática simbólica.
CONSTRUÇÃO DE MENUS
A interface gráfica mais fácil de ser implementada em MATLAB pode ser realizada através do comando menu:
>> k = menu('Selecione a opcao: ','Opcao 1','Opcao 2')
Ao se digitar esta linha de comando, irá aparece o seguinte menu:
Ao se pressionar o primeiro botão do menu, temos o seguinte resultado:
>> k = menu('Selecione a opcao: ','Opcao 1','Opcao 2')
k = 1
Ou seja, se o comando menu tivesse n botões e o i-ésimo botão fosse pressionado, então, a variável k receberia o valor inteiro i. É importante observar que o primeiro parâmetro é relativo ao texto associado a escolha dos botões. Os demais campos são relativos aos textos dos botões do menu.
Informação complementar:
Este tipo de comando é muito útil em programas em que o usuário deve escolher parâmetro ou tomar decisões através de
comandos if, elseif, e else. Além disso, não requer nem muito trabalho nem muito tempo de programação.
Outro componente interessante é a barra de espera. Como o próprio nome já diz, ela indica que o programa está realizando alguma tarefa e em que ponto a mesma se encontra. Sua sintaxe é demonstrada no programa abaixo:
Ao se executar a função “exemplo1.m”, a barra de espera como abaixo irá aparecer:
Observe que o primeiro argumento de waitbar deve ser 0 ou 1, indicando como será feita mostrada a evolução dos cálculos. O segundo argumento é o texto que irá aparecer logo acima da barra e o terceiro e quarto argumentos são a invocação da propriedade nome da barra e qual será este nome, respectivamente.
E
nterface ráfica
I G
Informação complementar:
O comando waitbar pode ser utilizado em conjunto com o comando while, tal como o comando for.
Mas, suponha que o comando while forneça uma condição tal que não conhecemos previamente o número total de operações que serão realizadas. Então, uma solução é que a barra de espera ao invés de indicar o tempo computacional restante, passe a indicar o total de tarefas restantes. Isto é feito no programa a seguir:
Este programa realiza sorteios randômicos no intervalo [0,1], procurando um número menor que 0.05 ou maior que 0.95. Como número que indica que a barra de espera atingiu o número máximo de operações colocamos o valor de 30000. Além disso, esta função retorna o número que satisfaz as condições do sorteio (num) e o número de sorteios realizados (iter).
É interessante observar que, neste caso, o valor 30000 será mais que suficiente para garantir que o valor máximo da barra de espera não será atingido antes de se obter o número desejado.
Outro comando interessante é a caixa de mensagens como dado abaixo:
>> msgbox('Ocorreu um erro ! Divisao por zero !','Erro','Error')
Este comando produzirá o seguinte menu:
O primeiro parâmetro é uma string associada ao título da caixa de mensagem.
O segundo parâmetro é o texto que será colocado na parte interna da caixa e o terceiro parâmetro é relativo ao tipo de desenho que irá aparecer. Em relação ao terceiro parâmetro, podem ser utilizados os textos 'none', 'error', 'help', 'warn', ou 'custom'. Ao se escolher a opção 'custom', é necessário definir, também, os dados relativos a imagem do ícone customizado e o mapa de cores, como dado a seguir:
>> Data=1:64;Data=(Data'*Data)/64;
h=msgbox('String','Title','custom',Data,ho t(64));
A linha de comando fornece a caixa:
A seguir, é construído um programa exemplo em que os comandos menu, waitbar e msgbox são utilizados.
nterface ráfica
I G
No programa descrito anteriormente, o comando menu serve para definir o parâmetro “a” a ser utilizado no critério de seleção de um número aleatório. O comando msgbox é utilizado para expor o número obtido e o número de iterações em um caixa de mensagem. O comando
“num2str” transforma os valores obtidos em strings. Depois essas strings são concatenadas com o comando “strcat”.
Por fim, a string resultante é utilizada no texto da caixa de mensagens.
Erro comum de programação:
Ao se realizar a comparação do valor de k foi utilizado “if (1 = = k)”
ao invés de “if (k = = 1)”.
Isto na verdade é um hábito muito comum de programadores da linguagem C++, pois caso um sinal de igualdade fosse esquecido“if (k = 1)”
resultaria em uma atribuição em C++, ao passo que “if (1 = k)” forneceria um erro de compilação. Em MATLAB, nos casos será apresentada uma mensagem de erro.
É possível desenvolver interfaces gráficas mais avançadas em MATLAB, ou seja, as GUI. Normalmente o desenvolvimento de uma GUI não se faz necessário, como no caso em que se quer apenas o gráfico de uma dada função. Mas, imagine que você quer construir o gráfico de diversas funções y = f(x), com definindo diferentes intervalos para o eixo x, ou com diferentes cores. Neste caso, é interessante desenvolver uma GUI. Segue alguns motivos para se desenvolver uma GUI:
Se o programa precisa de uma seqüência de comandos “menu” para se escolher parâmetros, ou ainda, é necessário definir vários parâmetros via comando “input”.
Se está sendo desenvolvido um programa para ser utilizado por outras pessoas.
Se o programa depende de uma interação com o usuário.
Para construir uma GUI basta digitar:
>> guide
A seguinte tela será apresentada:
Basicamente a tela apresentada pode ser dividida em três grandes áreas:
1 : Área relativa aos botões que podem ser utilizados na GUI:
1 3 2
nterface ráfica
I G
Botão Definição
Axes: Serve como área para a construção de gráficos.
Popup menu: Serve para se escolher uma opção dentre uma lista pré-definida de opções.
List Box: Serve para se ilustrar texto, controlando em que linha será cada parte do texto será colocado.
Frame: Serve apenas para destacar determinadas regiões da interface gráfica.
Slider: Barra deslizante em que um determinado valor pode ser escolhido a partir do mouse.
Static Text: Geralmente é utilizado em conjunto com outros componentes para explicar a função dos mesmos.
Edit Text: Campo em que texto pode ser inserido.
Check Box: Serve para indicar se uma determinada opção foi ou não selecionada.
Radio Button: Função igual a do Check Box.
Toggle Button: Função igual a do Radio Button, mas com a aparência do Push Button.
Push Button: Botão que ao ser pressionado indica uma ação. Ao terminar a ação pode ser pressionado novamente.
Select: Serve para selecionar os componentes para mover ou redimensionar os mesmos.
2 : Área relativa a manipulação das interfaces GUI:
Botão Função
Cria uma nova área de trabalho de interface gráfica.
Abre uma área de trabalho de interface gráfica existente.
Salva uma interface gráfica em dois arquivos “.fig”(com as instruções de desenho da GUI) e
“.m” (com o código que define as funções de cada botão da GUI).
Exclui um componente da GUI.
Copia o componente selecionado.
Cola o componente copiado ( ).
Desfaz a ação anterior.
Refaz a ação posterior.
Ferramenta para alinhar componentes.
Ativa o editor de menus para uma GUI.
Se um componente estiver selecionado, ao se pressionar este botão será aberta uma janela contendo as propriedades do componente. O mesmo pode ser obtido ao se dar um duplo clique no componente.
Abre um navegador em que se pode saber a hierarquia dos componentes existentes na GUI.
Torna ativa a GUI atual.
3 : Área de trabalho relativa a construção da interface gráfica GUI:
Os botões da Área 1 pode ser colocados na Área 3, bastando seguir os seguintes passos:
(1) Clique no Push Button . (2) Posicione o mouse na Área 3.
(3) Dimensione o tamanho do botão, obtendo a Figura a seguir:
nterface ráfica
I G
Todos os botões possuem propriedades.
Dê um duplo clique no Push Button colocado na área de trabalho. A seguinte tela irá aparecer:
Através desta tela é possível modificar as características de uma componente.
Destacamos:
Propriedade Função
BackgroundColor Determina a cor de
fundo de um
componente.
Callback Associa a ação do componente com uma função.
Enable Indica se o estado do componente é on (aparece e funciona), off (aparece em uma cor mais clara e não funciona) ou inactive (aparece, mas não funciona).
FontName Tipo da fonte.
FontSize Tamanho da fonte.
ForegroundColor Cor do texto do componente.
String String do texto que irá aparecer.
Tag Nome para uso interno
na interface gráfica.
Para uma melhor compreensão dos componentes disponíveis, suas propriedades e a interface gráfica, segue um exemplo:
TUTORIAL 1
Insira três Push Button na área de trabalho, como na figura a seguir:
Modifique as seguintes propriedades dos botões:
Botão 1:
Propriedade Alteração String Mesh
Tag meshbutton
Botão 2:
Propriedade Alteração String Surf Tag surfbutton Botão 3:
Propriedade Alteração String Contour Tag contourbutton
Estas modificações irão fornecer a figura dada a seguir:
1
2
3
nterface ráfica
I G
Agora clicando no botão Axes insira um eixo na área de trabalho:
Modifique as propriedades de Axes para:
Propriedade Alteração Tag axesfiguras
Salve a GUI usando o botão e o nome
“test2”. Observe que dois arquivos são criados. Um arquivo test2.fig (com as informações sobre o layout da GUI) e outro arquivo test2.m (com a codificação dos componentes existentes em test2.fig).
Para tornar a interface gráfica funcional é necessário adicionar código ao arquivo
“test2.m”. Observe que foram criadas funções associadas aos botões, como pode ser visto na figura a seguir:
Estas funções estão vinculadas à ação dos botões da interface gráfica por meio da propriedade Callback. Dê um duplo clique no botão de nome Mesh:
Erro comum de programação:
Se o usuário resolver modificar a propriedade
“Tag” de um componente, o Matlab não irá atualizar o nome da função a ser chamada pela propriedade Callback. Isto pode se tornar uma fonte de erros. Por exemplo, se a “Tag” for alterada de
“meshbutton” para “meshbuttonnew”, ainda assim ao se pressionar este botão, a função a ser chamada será a atribuída a
“meshbutton” e não será criada uma função “meshbuttonnew” (isto pode ser feito manualmente no arquivo “.m”).
Agora, para dar vida à interface gráfica é necessário inserir o seguinte código para cada uma das funções associadas a cada um dos botões:
nterface ráfica
I G
Botão Mesh:
Botão Surf:
Botão Contour:
Verifique o resultado a ser obtido, ativando a interface gráfica com o botão ou ainda digitando “test2” na área de trabalho do Matlab:
Uma modificação que pode ser realizada é a inserção de um Popup Menu para que o usuário escolha de uma lista pré- determinada uma função a ser desenhada (até agora só temos a função peaks disponível para ser desenhada).
Após inserir o Popup Menu na interface gráfica, devemos modificar os seguintes campos:
nterface ráfica
I G
Propriedade Modificação String Peaks
Membrane Sinc Tag tipfunction
Além disso, é necessário inserir o seguinte código na função relacionado ao Popup Menu “tipfunction”:
% Obtendo o valor da propriedade
% value do popup menu.
val = get(h,'Value');
switch val
case 1 % Dados de peaks handles.data = peaks(35);
case 2 % Dados de membrane handles.data = membrane;
case 3 % Dados de sinc [x,y] = meshgrid(-8:.5:8);
r = sqrt(x.^2+y.^2) + eps;
z = sin(r)./r;
handles.data = z;
end
% Salvando a estrutura do handles
% modificado.
guidata(h,handles);
Este conjunto de instruções realiza o seguinte:
O comando “get(h,'Value')” obtem o valor contido na propriedade “Value” do popup menu “tipfunction”. Neste caso, se a primeira opção (Peaks) foi selecionada, então, o valor retornado será 1, a segunda (Membrane), o valor 2 e assim por diante.
O comando “handles.data = peaks(35);”
armazena no campo data as informações relativas a função a ser construída. O campo handles.data pode ser acessado a qualquer momento e em qualquer função pertencente a interface gráfica, funcionando como uma variável global.
O comando “guidata(h,handles);” salva as alterações realizadas em handles, ou seja, confirma as alterações realizadas no campo “handles.data” (a serem utilizadas na construção dos gráficos através do Push Button).
Para que a interface gráfica reconheça o novo campo de dados “handles.data” é necessário que ao ser inicializada a interface gráfica, seja feita uma chamada ao Popup Menu.
O código a ser inserido é:
% Chamada a funcao do popup menu
% inicializar handles.data com a atual
% atribuicao do popup menu.
handles.data = peaks(35);
É necessário, também, alterar o código contido nos três Push Buttons:
nterface ráfica
I G
Botão Mesh:
% Deixa ativa a area dos eixos.
handles.axesfiguras;
% Carrega os dados.
z = handles.data;
% Desenha usando mesh.
mesh(z);
Botão Surf:
% Deixa ativa a area dos eixos.
handles.axesfiguras;
% Carrega os dados.
z = handles.data;
% Desenha usando surf.
surf(z);
Botão Contour:
% Deixa ativa a area dos eixos.
handles.axesfiguras;
% Carrega os dados.
z = handles.data;
% Desenha usando contour.
contour(z);
Após estas modificações, a interface resultante será:
A interface gráfica pode ser alterada, ainda, de modo que tenha menus. Para tanto, volte a edição da interface gráfica e pressione o botão de edição de menus
. A seguinte tela irá aparecer:
Basicamente este interface dispõe dos seguintes botões:
Botão Função Novo Menu.
Novo Item de Menu.
Navegação entre os Menu e os itens e subitens de menus.
Apagar um menu ou item.
Pressionando o botão de novo Menu , faça como a figura a seguir:
Ou seja, crie um Menu com as propriedades:
Campo Nome Label Gráficos Tag graf_menu
nterface ráfica
I G
Com o botão novo item de menu , crie três submenus cujas propriedades são dadas por:
Submenu Campo Nome Mesh Label Mesh
Tag submenu_mesh Surf Label Surf
Tag submenu_surf Contour Label Contour
Tag Submenu_contour Após estas operações, o resultado obtido deve ser semelhante à figura a seguir:
Feche este menu e volte para a área de edição de interfaces gráficas. Aperte o botão para salvar as alterações realizadas.
Agora, verifique que foram inseridas quatro novas funções ao arquivo
“teste2.m”:
Item Função Menu graf_menu
Submenu submenu_mesh_callback Submenu submenu_surf_callback Submenu submenu_contour_callback Uma figura de como estará o arquivo
“teste2.m” é fornecida:
Para as funções relativas aos submenus Mesh, Surf e Contour adicione os seguintes códigos:
Botão Código
Mesh meshbutton_Callback(h, [], handles, []);
Surf surfbutton_Callback(h, [], handles, []);
Contour contourbutton_Callback(h, [], handles, []);
A idéia é que os submenus têm a mesma função que os Push Button, e portanto, realizam chamadas para as funções associadas a estes botões. O resultado final é dado a seguir.
nterface ráfica
I G
TUTORIAL 2
O propósito deste segundo tutorial é desenvolver uma interface em que o gráfico de qualquer função 2-D possa ser construído, bastando fornecer a expressão em um campo de texto.
Para tanto, crie uma nova interface gráfica ( ) e insira os componentes, com suas propriedades modificadas, como descrito a seguir:
Axes :
Propriedade Valor Tag axesfigura
Static Text : Propriedade Valor Tag text_expre String Expressao
Edit Text : Propriedade Valor Tag edit_expre String x^2
Push Button : Propriedade Valor
Tag pushbutton_plot String Plotar
Salve a GUI com o nome “test3”.
Insira o seguinte código na inicialização da interface gráfica:
O seguinte código deve ser adicionado à função “pushbutton_plot_Callback”:
% Avaliando a expressao % fornecida.
y = get(handles.edit_expre,'String');
% x e simbolico.
syms x;
% xnum e numerico.
xnum = -10:0.1:10;
% Substituindo x simbolico % por numerico em ynum.
ynum = subs(y,x,xnum);
% Area dos eixos em foco.
handles.axesfigura;
% Construindo o grafico.
plot(xnum,ynum,'-r');
Este código permite que apenas expressões do tipo “x^2” ou “sin(x)*x^2 + cos(x)/3” sejam colocadas no campo
“Edit Text”.
nterface ráfica
I G
Primeiramente, ele capturar a string contida no componente Edit Text, usando
o comando “y =
get(handles.edit_expre,'String');”.
O segundo passo é declarar a variável x simbólica. Depois, utilizando o comando subs, a variável simbólica x é substituída pela variável double xnum e o resultado é armazenado em ynum.
Agora, [xnum,ynum] formam pares de pontos do tipo double relativos a expressão da função inserida pelo usuário. O passo seguinte é colocar a área de desenho em foco e utilizar o comando plot.
Resultados com a interface são dados:
sin(x)*x^2 – cos(x)*x:
x*tan(x):
TUTORIAL 3
Para inserir uma figura de fundo a uma interface gráfica escreva a seguinte função “test4_background.m”:
function teste4_background()
ha = axes('units','normalized','position',[0 0 1 1]);
[a,map]=imread('rio.bmp');
image(a);
set(ha,'Xtick',[]);
set(ha,'XtickLabel',{});
set(ha,'Ytick',[]);
set(ha,'YtickLabel',{});
set(ha,'handlevisibility','off','visible','off');
Crie uma nova interface gráfica e insira um componente eixo gráfico. Depois, clicando na área de trabalho altere a propriedade CreateFcn (função de criação) para “teste4_background”:
A interface gráfica deverá ser igual à:
nterface ráfica
I G
Basicamente, o programa irá:
Configurar um eixo que preenche a área total da caixa de diálogo.
Ler o arquivo “rio.bmp” e exibir a imagem no eixo gráfico de nome “axes”
inserido.
E eixo é configurado sem marcas de coordenadas (ticks e ticklabels).
Ao associar o m-file “teste4_background”
com a propriedade “CreateFcn” (função de criação), este m-file será executado quando a caixa de diálogo for exibida.
O resultado pode ser observado ao se ativar o programa “test4.m” (ou digitando no prompt do Matlab ou apertando o botão ):
Claramente podem ser inseridos na interface gráfica, outros componentes:
Neste caso, foram inseridos um Push Button, um Popup Menu e um Edit Text.
Ao se executar a interface gráfica, o seguinte resultado é obtido:
No exemplo anterior foi utilizado um arquivo “.bmp” para o fundo da interface gráfica, mas o formato “.jpg” também seria aceito sem problema.
EXERCÍCIOS
(1) Adicione as seguintes funcionalidades à interface gráfica desenvolvida no Tutorial 1:
(i) Dois Push Buttons e dois subitens no menu Gráficos para apresentar dois comandos de construção de gráficos 3-D:
contourf e o comando surf seguindo de colormap hot.
(ii) Duas novas opções de superfícies:
(a) Uma de nome Wave e dada por: Z = X*cos(Y) + Y.*sin(X).
(b) Outra de nome Modern e dada por: Z
= (X - Y)/(1 + sin(X - Y)).
(iii) Adicionar um novo menu de nome Funcoes e colocar como submenus as opções de mostrar no gráfico as cinco superfícies (incluindo as duas implementadas em (ii)): Peaks, Membrane, Sinc, Wave e Modern.
Dica: Não esqueça de modificar e construir o código no arquivo “.m”.
nterface ráfica
I G
(1) Adicione as seguintes funcionalidades à interface gráfica desenvolvida no Tutorial 2:
(i) Crie dois Push Button como descrito a seguir:
String Ação
Integration Desenha a função integral de uma função definada no campo Edit Text.
Difference Desenha a função derivada de uma função definada no campo Edit Text.
Dica: Você vai precisar usar os comandos int e diff para realizar integração e
diferenciação simbólicas,
respectivamente.
(ii) Adicione um Popup menu em que seja possível escolher a cor do gráfico dentre as opções dadas abaixo:
Opção Propriedade String do popup
1 Azul
2 Verde
3 Vermelho
4 Ciano
5 Magenta
6 Amarelo
7 Preto
Dica: Você vai precisar criar um novo campo em handles, o handles.cor, por exemplo. A partir deste campo, será possível armazenar a opção escolhida pelo usuário com o Popup menu. Além disso, lembre que se a primeira opção do Popup menu estiver selecionada, então, get(handles.tagdopopup,’Value’) irá retornar 1, se a segunda, então retornará 2 e assim por diante. Para cada valor, uma string, indicando a cor escolhida, será atribuída ao campo handles.cor (para a opção 1, a string ‘b’ por exemplo).
Não esqueça, também, de inicializar, no início do código da interface, a variável handles.cor: handles.cor = ‘b’.
(3) Adicione as seguintes funcionalidades à interface gráfica desenvolvida no Tutorial 3:
(i) Insira três opções de seleção no Popup Menu. Cada opção selecionada deverá gerar um texto a ser mostrado no campo Edit Text.
(ii) Insira um código no Push Button, tal que uma outra mensagem seja colocada no campo Edit Text ao se pressionar o Push Button.
Dica: Use os métodos set para modificar a propriedade String do campo Edit Text.
Isto pode ser feito com
“set(handles.tagdoedittext,’String’,
’textoasercolocado’);”.
