MINICURSO DE

MatLab

Módulo 5
Interfaces Gráficas
Conteúdo
1 GUI (Guided User Interface)

2 App Designer
1 GUI (Guided User Interface)
Muitas vezes é desejado haver uma interação entre o usuário e o código. Num caso
desses, é vantajoso criar uma interface gráfica (GUI, Graphical User Interface, mais co-
nhecida como UI) ao invés de modificar linhas de código. Interfaces gráficas também
possibilitam que um usuário, sem conhecimento de programação, consiga interagir com
o código, sendo usadas no desenvolvimento de aplicativos em várias linguagens, inclusive
MATLAB.

2 App Designer
Visando, portanto, facilitar essa interação de usuário com o código, o próprio MATLAB
possui ferramentas e aplicativos que permitem tal ação. Nesse módulo usaremos o App
Designer, o qual possui uma interface gráfica bem intuitiva e que nos permite trabalhar
com figuras, botões, textos, menus, gráficos e muitos outros elementos.
A seguir construiremos, como exemplo, um aplicativo que tem por objetivo controlar
a amplitude de uma função plotada a partir de um controle deslizante.
Com o MATLAB aberto, clique no menu New-App-App Designer (caso não possua
esta ferramenta, procure e baixe-a clicando em Add-ons, no menu).

Figura 2.1: Menu App Designer

 Em seguida, vamos arrastar os componentes, presentes no canto esquerdo da janela.
Axes(2D) é o componente utilizada para representar gráficos de duas dimensões, já o com-
ponente Slider nos permite manipular valores apenas variando a posição de seu ponteiro.
Para mudar o nome da componente slider, basta clicar duas vezes sobre a mesma. Para
este exemplo, chamaremos ele de “Amplitude”.

Figura 2.2: Componentes Axes e Slider

É possı́vel ver como o código da interface vai sendo escrito conforme adicionamos
componentes clicando na opção Code View. Para voltar ao modo gráfico novamente basta
clicar em Design View. É possı́vel alterar atributos dos componentes tanto pelo App
Designer quanto por linhas de código.
 Figura 2.3: Código da interface

Vamos agora fazer a ligação do que será plotado com o slider. Primeiro clicamos com o
botão direito do mouse em app.AmplitudeSlider, na aba Component Browser. Em seguida
clicamos em Callbacks, e depois em Add ValueChangedFcn callback. Isso fará com que o
App Designer crie uma função de retorno de chamada (callback ). Ao criar a mesma, o
usuário é direcionado ao code view, onde a função pode ser vista e modificada.
 Figura 2.4: Criando um Callback

Figura 2.5: Código do callback

Com a função callback criada, ainda é necessário indicar que ação será realizada por
ela. Este passo deve ser feito necessariamente pelo code view. Neste exemplo o valor do
slider será utilizado para definir a amplitude de um seno que será plotado no eixo criado
anteriormente. O seguinte código foi utilizado:

1 value = app . AmplitudeSlider . Value ;

2 x = linspace (0 ,2* pi ,100) ;
3 y = value * sin ( x ) ;
4 plot ( app . UIAxes ,x , y )
5
6 app . UIAxes . XGrid = ' on ' ;
7 app . UIAxes . YGrid = ' on ' ;
8 app . UIAxes . YLim = [ -100 100];
9 app . UIAxes . XLim = [0 2* pi ];

Parâmetros dos componentes, como por exemplo o valor mı́nimo e máximo do slider
podem ser alterados clicando no componente duas vezes e indo em propriedades.
 Figura 2.6: Propriedades do slider

Feito tudo isso, clicamos finalmente em Run no menu e obtemos então nosso gráfico
que varia sua amplitude em função do valor do slider.

Exercı́cio 1:

Modifique o exemplo acima conforme indicado

a) Mude a range do slider para variar de 0 até 200. Continue com os limites do eixo
Y fixado de -100 até 100.

b) Faça com que o seno somente seja plotado após um botão (push button) seja pres-
sionado.

c) Crie uma lamp e faça com que ela mude de cor para vermelho se a amplitude do
seno exceder os limites do eixo.

Exercı́cio 2:

Crie uma interface para plotar senos com frequências, amplitudes e fases diferentes -
Amplitude*sin(Frequencia*x + Fase), seguindo o roteiro a seguir:

ˆ Três caixas de texto (edit field - numeric) para selecionar o valor da amplitude,
fase e frequência.

ˆ Dois botões, um para plotar a curva com os parâmetros selecionados e outro para
apagar as curvas (as curvas devem ser plotadas uma em cima da outra). Dica: o
comando hold(app.UIAxes, ’on’) é o equivalente do hold on e o cla(app.UIAxes)
limpa um eixo.