Interface Gráfica

Prévia do material em texto

�I
G
 nterface ráfica
E
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.
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,hot(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.
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:
	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:
( 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:
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:
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:
	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:
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
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.
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, comsuas 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”. 
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 à:
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”.
(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’);”.
3
2
1
3
2
1
�PAGE �
�PAGE �1�
Minicurso Matlab Rápido e Prático
_1187675465/ole-[42, 4D, 1E, 06, 00, 00, 00, 00]
_1187675916/ole-[42, 4D, 1E, 06, 00, 00, 00, 00]
_1187684513/ole-[42, 4D, 5E, 05, 00, 00, 00, 00]
_1187684559/ole-[42, 4D, 6E, 04, 00, 00, 00, 00]
_1187684613/ole-[42, 4D, AE, 06, 00, 00, 00, 00]
_1187684690/ole-[42, 4D, F6, 03, 00, 00, 00, 00]
_1187684765/ole-[42, 4D, 1E, 06, 00, 00, 00, 00]
_1187686790/ole-[42, 4D, 06, 1E, 0C, 00, 00, 00]
_1187684672/ole-[42, 4D, FE, 03, 00, 00, 00, 00]
_1187684597/ole-[42, 4D, 46, 05, 00, 00, 00, 00]
_1187675966/ole-[42, 4D, CA, 05, 00, 00, 00, 00]
_1187676122/ole-[42, 4D, 86, 05, 00, 00, 00, 00]
_1187676187/ole-[42, 4D, 6E, 04, 00, 00, 00, 00]
_1187675695/ole-[42, 4D, 86, 05, 00, 00, 00, 00]
_1187675761/ole-[42, 4D, 9A, 05, 00, 00, 00, 00]
_1187675729/ole-[42, 4D, 66, 06, 00, 00, 00, 00]
_1187675618/ole-[42, 4D, CA, 05, 00, 00, 00, 00]
_1187675674/ole-[42, 4D, F6, 04, 00, 00, 00, 00]
_1187675515/ole-[42, 4D, 0E, 06, 00, 00, 00, 00]
_1186583285/ole-[42, 4D, 86, 07, 00, 00, 00, 00]
_1186583365/ole-[42, 4D, 66, 09, 00, 00, 00, 00]
_1187675109/ole-[42, 4D, 16, 08, 00, 00, 00, 00]
_1187675332/ole-[42, 4D, 86, 05, 00, 00, 00, 00]
_1187674915/ole-[42, 4D, EE, 07, 00, 00, 00, 00]
_1186583328/ole-[42, 4D, 06, 08, 00, 00, 00, 00]
_1186583349/ole-[42, 4D, A6, 08, 00, 00, 00, 00]
_1186583313/ole-[42, 4D, BE, 08, 00, 00, 00, 00]
_1186583211/ole-[42, 4D, 12, 09, 00, 00, 00, 00]
_1186583249/ole-[42, 4D, A6, 08, 00, 00, 00, 00]
_1186583264/ole-[42, 4D, BA, 09, 00, 00, 00, 00]
_1186583233/ole-[42, 4D, 12, 09, 00, 00, 00, 00]
_1186583162/ole-[42, 4D, 66, 09, 00, 00, 00, 00]
_1186583189/ole-[42, 4D, BE, 08, 00, 00, 00, 00]
_1186583086/ole-[42, 4D, F6, 08, 00, 00, 00, 00]