Fundamentos de Interfaces Gráficas en MATLAB

Semillero de Investigación
en Control e Instrumentación
1
Universidad Tecnológica de Pereira

1 Adaptación del texto "Aprenda Matlab 6 como si estuviera en primero" escrito por Javier Atencia
y Raúl Nestar.
 CAPÍTULO 1

Objetos Gráficos

Son los elementos que componen la GUI. En MATLAB se encuentran organizados según su
importancia y tipo. Al igual que muchos otros objetos, los gráficos poseen propiedades con las
cuales se pueden modificar su apariencia y funcionamiento.
Cada acción del usuario sobre los objetos de la interfaz se conoce como evento y se activan de
acuerdo a las posibilidades del objeto y a los requerimientos del programa.

1.1 Organización de Objetos Gráficos

Se encuentran agrupados en tres categorías:

• Menú de interfaz con el usuario.

• Dispositivos de control de la interfaz con el usuario.

• Ejes para desplegar gráficos o imágenes.

• Objetos ActiveX (Solo en la versión 7).

Estos últimos son componentes de otros programas diferentes a MATLAB que pueden incluirse
en la Interfaz. Para utilizarlos adecuadamente es necesario tener información del desarrollador

1
CAPÍTULO 1. OBJETOS GRÁFICOS 2

del componente ActiveX. Por lo tanto, no se mencionan en este documento. La figura 1.1
muestra cada uno de los objetos que tiene MATLAB según su importancia (jerarquía).

Figura 1.1: Estructura de los objetos gráficos

El objeto más general es la pantalla. Este objeto es la raíz de todos los demás y sólo puede
haber uno. La pantalla puede contener una o más ventanas. A su vez cada una de las ventanas
puede tener uno o más ejes de coordenadas en los que se representan otros objetos de más
bajo nivel. Una ventana puede tener también controles (uicontrol) como botones, cajas de
edición, listas, menús desplegables entre otros y menús de usuario (uimenu). Finalmente, los
ejes pueden contener otros tipos de elementos gráficos como líneas, rectángulos, polígonos,
superficies, imágenes y texto.
En esta jerarquía se llama padre (parent) al objeto que se encuentra arriba de otro e hijo
(children) al que se encuentra debajo. Cuando por alguna circunstancia se borra un objeto,
automáticamente se borran todos los objetos que son sus descendientes.

1.2 Identificadores
Debido a que una GUI puede tener muchos objetos gráficos se hace necesario diferenciar a cada
uno de ellos. Esta es la razón por cual MATLAB asigna un número diferente a cada objeto
conocido como identificador o handle. Por ejemplo, el objeto raíz (pantalla) es siempre único
y su identificador es el cero. El identificador de las ventanas es un entero, el cual aparece en la
barra de título de la ventana. Los identificadores de otros elementos gráficos son números de
punto flotante.
MATLAB puede tener varias ventanas abiertas, pero siempre hay una y sólo una que es la
ventana activa. A su vez una ventana puede tener varios ejes (axes), pero sólo unos son los
CAPÍTULO 1. OBJETOS GRÁFICOS 3

ejes activos. Los identificadores de la ventana activa, de los ejes activos y del objeto activo
se pueden obtener respectivamente con los comandos gcf (get current figure), gca (get current
axes) y gco (get current object):

• gcf: devuelve un entero, que es el handle de la ventana activa.

• gca: devuelve el handle de los ejes activos.

• gco: devuelve el handle del objeto activo.

Ejemplo: Ejecute los siguientes comandos, observando la evolución de lo dibujado en la ventana

y como MATLAB devuelve el handle de cada objeto como valor de retorno.
» fig = figure
» li1 = line([0,5],[0,5])
» li2 = line([0,5],[5,0])
» po1 = patch([1,4,3],[1,1,4],’g’)
» delete(po1)
» delete(li1)

Estos valores de retorno pueden ser almacenados en variables para un uso posterior. En
ocasiones el handle es un vector de valores, como por ejemplo al crear una superficie que
consta de líneas y polígonos. Los comandos anteriores han abierto una ventana y dibujado
sobre ella dos líneas cruzadas de color amarillo y un triángulo de color verde.

1.3 Propiedades de los Objetos

Todos los objetos de MATLAB tienen distintas propiedades. Algunas de éstas son el tipo, el
estilo, el padre, los hijos, si es visible o no, y otras propiedades particulares del objeto concreto
de que se trate. Algunas de las propiedades comunes a todos los objetos son: children, clipping,
parent, type, UserData, Visible y Tag. Otras propiedades son exclusivas de un tipo determinado
de objeto.
Las propiedades tienen valores por defecto, que se utilizan siempre que el usuario no indique
otra cosa. Es posible cambiar las propiedades por defecto, y también devolverles su valor
original o de fábrica. El usuario puede consultar los valores de las propiedades de cualquier
objeto. Algunas propiedades pueden ser modificadas y otras no). Existen propiedades que
pueden tener cualquier valor y otras que sólo pueden tener un conjunto limitado de valores
(por ejemplo, on y off).
CAPÍTULO 1. OBJETOS GRÁFICOS 4

MATLAB dispone de las funciones set y get para modificar y consultar respectivamente el
valor de las propiedades de un objeto. Las funciones set(handle) lista en pantalla todas las
propiedades del objeto (sólo los nombres, sin los valores de las propiedades). La función
get(handle) produce un listado de las propiedades y sus valores actuales.

Ejemplo: Pregunte las propiedades del objeto línea 1 del ejemplo anterior. En este caso el
identificador se encuentra almacenado en la variable li1.
» set(li1)
Color
EraseMode: [ normal | background | xor | none ]
LineStyle: [ - | – | : | -. | none ]
LineWidth
Marker: [ + | o | * | . | x | square | diamond | v | ˆ | > | < | pentagram |
hexagram | none ]
MarkerSize
MarkerEdgeColor: [ none | auto ] -or- a ColorSpec.
MarkerFaceColor: [ none | auto ] -or- a ColorSpec.
XData
YData
ZData
ButtonDownFcn
Children
Clipping: [ on | off ]
CreateFcn
DeleteFcn
BusyAction: [ queue | cancel ]
HandleVisibility: [ on | callback | off ]
HitTest: [ on | off ]
Interruptible: [ on | off ]
Parent
Selected: [ on | off ]
SelectionHighlight: [ on | off ]
Tag
UIContextMenu
UserData
Visible: [ on | off ]

Las propiedades que tienen un conjunto finito de valores presentan estos valores entre corchetes
[ ] separados por barras verticales. La opción por defecto se muestra entre llaves {}.
CAPÍTULO 1. OBJETOS GRÁFICOS 5

En general, el significado de cada propiedad es bastante evidente a partir de su nombre.

Ejemplo: Pregunte las propiedades del objeto línea 1 del ejemplo anterior con sus valores
actuales.
» get(li1)
Color = [0 0 1]
EraseMode = normal
LineStyle = -
LineWidth = [0.5]
Marker = none
MarkerSize = [6]
MarkerEdgeColor = auto
MarkerFaceColor = none
XData = [0 5]
YData = [0 5]
ZData = []
ButtonDownFcn =
Children = []
Clipping = on
CreateFcn =
DeleteFcn =
BusyAction = queue
HandleVisibility = on
HitTest = on
Interruptible = on
Parent = [12.0001]
Selected = off
SelectionHighlight = on
Tag =
Type = line
UIContextMenu = []
UserData = []
Visible = onYData = [0 5]

Para conocer el valor de una propiedad particular de un objeto se utiliza la función la misma
función get de la forma get(id,’propiedad’). Las propiedades de un objeto pueden ser cambiadas
o modificadas (a excepción de las que son solo lectura) con la función set(id,’propiedad’,’valor’).
CAPÍTULO 1. OBJETOS GRÁFICOS 6

Es interesante hacer pruebas con los distintos tipos de objetos gráficos que se pueden crear y
manipular con MATLAB modificando sus propiedades.

Ejemplo: Ejecútense los siguientes comandos observando cómo va cambiando el grosor de las
líneas y sus colores.
» close(gcf)
» fig=figure
» li1=line([0,5],[0,5])
» li2=line([0,5],[5,0],’color’,’w’)
» po1=patch([1,4,3],[1,1,4],’g’)
» pause(3)
» set(li1,’LineWidth’,2), pause(1);
» set(li2,’LineWidth’,2,’color’,’r’), pause(1);
» set(po1,’LineWidth’,2,’EdgeColor’,’w’,’FaceColor’,’b’)

El comando set permite cambiar varias propiedades a la vez, poniendo sus nombres entre
comillas simples seguidos de sus valores. Los ejemplos anteriores demuestran que es esencial
disponer de los identificadores de cada objeto si se desea modificar un gráfico o utilizar propiedades
distintas a las que están por defecto.
 CAPÍTULO 2

Creando GUIs

Las interfaces gráficas en MATLAB pueden crearse de dos formas:

• Creando cada uno de los objetos desde un script o función, lo cual hace la creación de la
GUI bastante complicada y lenta si se piensa que esta puede tener muchos objetos. Lo
anterior sugiere la necesidad de programar dos scripts o funciones. Uno solo para generar
los objetos gráficos y otro que permita atender los eventos provenientes de cada uno de
los objetos.
• Creando todos los objetos de la GUI mediante el asistente que incluye MATLAB para
esta tarea. Así, el diseño de la GUI se puede hacer muy fácilmente y solo es necesario
programar el archivo que atiende los eventos de GUI. Aunque el asistente existe desde la
versión 5.3, es a partir de la versión 6.5 que ha mejorado considerablemente haciendo la
creación de GUIs más fácil.

Por lo anterior este documento se va a referir solo a la Creación de Interfaces Gráficas de

Usuario mediante el asistente.

2.1 Entorno de Trabajo

Para acceder al asistente se puede escribir la función guide en la ventana de comandos o
utilizando el boton START siguiendo la ruta START»MATLAB»GUIDE(GUI Builder).

7
CAPÍTULO 2. CREANDO GUIS 8

Una vez se ejecuta el asistente aparece la ventana que se muestra en la figura 2.1.

Figura 2.1: Ventana 1 del asistente

En esta ventana se da la posibilidad de construir una GUI en blanco (desde cero), utilizar
algunos diseños predeterminados (plantillas) o abrir una GUI previamente diseñada. Una vez
se selecciona la opción aparece una segunda ventana con el entorno de trabajo de acuerdo a
opción activada.

Figura 2.2: Entorno de Trabajo

CAPÍTULO 2. CREANDO GUIS 9

Los principales componentes de GUIDE son:

• Barra de Menús: Contiene las funciones elementales de Edición de GUIs.

• Paleta de Objetos: Contiene todos los principales objetos gráficos.

• Barra de Alineación: Esta opción permite alinear los objetos que se encuentra en el
área de trabajo de manera personalizada.

• Editor de Menús: Crea menús de ventana y menús de contexto.

• Editor de Orden de Tab: Especifica la secuencia en la cual lo objetos de la GUI se

activan con la tecla TAB.

• Archivo .m: Muestra el archivo .m (en este caso una función) que maneja la GUI.

• Inspector de Propiedades: Con esta opción se asignan y modifican las propiedades de

cada objeto de manera personalizada.

• Buscador de Objetos: Muestra en forma de árbol todos los objetos que tiene la GUI.

• Botón Ejecutar Programa: Crea y ejecuta la GUI diseñada en área de trabajo.

• Área de Trabajo: Espacio sobre el cual se ubican los objetos que componen la GUI.

2.2 Programación de la GUI

Una vez se diseña la GUI, es dicir, se ubican y modifican todas las propiedades de los objetos
que componen la GUI, se puede almacenar. En este proceso el asistente genera los siguientes
dos archivos:

• nombreGUI.fig: Contiene todos los objetos gráficos de la GUI. Este archivo solo se puede
abrir y modificar con el asistente GUIDE.

• nombreGUI.m: Contiene las subfunciones que reciben todos los eventos de los objetos en
la GUI (Callbacks). Adicionalmente crean la GUI cada vez que se ejecuta este archivo.
El archivo se puede abrir y modificar con el editor .m (Editor/Debugger).

El archivo .m que controla la GUI tiene una estructura bien definida. La programación de la
GUI se basa en el conocimiento de cada una de las partes que tiene este archivo.
CAPÍTULO 2. CREANDO GUIS 10

• Parte de Inicialización: Es un código que permite abrir el archivo .fig y crear la GUI.
Adicionalmente revisa las entradas de la función que controla la GUI para operar con
ellas si la aplicación lo necesita.

• Subfunción de Apertura (OpeningFcn): Esta subfunción se ejecuta antes de que

aparezca la GUI en pantalla. Se puede utilizar para inicializar los objetos de la GUI.

• Subfunción de Salida (OutputFcn): Esta subfunción permite asignar las variables

de salida de la subfunción que controla la GUI. Se utiliza para entregar en la ventana de
comandos resultados de los procesos realizados en la GUI un vez es cerrada.

• Subfunciones de llamado (Callbacks): Son las subfunciones que atienden los eventos
de la GUI. Su cantidad depende del número de objetos que se tengan y de los eventos
habilitados para cada uno de ellos.

Cuando el archivo .m se ejecuta por primera vez el código de inicialización hace aparecer la
GUI, revisando al tiempo las subfunciones de apertura y salida. Dado que los objetos gráficos
trabajan por eventos, las subfunciones de llamado del archivo .m no se ejecutan hasta tanto
ocurre uno.

Todas las demás utilidades de MATLAB como funciones de librerias (Toolboxes), scripts y
funciones definidas por usuario, otras GUIs e inclusive Simulink son accesibles desde cualquier
GUI. Por lo tanto, las Interfaces Gráficas de Usuario o GUI’s en MATLAB permiten extender
las capacidades de scripts y funciones, adicionando un entorno gráfico. Este entorno le da al
usuario la posibilidad de ingresar valores y recibir resultados del programa de manera sencilla
y "amigable" sin intervención de la ventana de comandos.
 CAPÍTULO 3

Ejercicio

El siguiente ejercicio tienen como propósito mostrar el uso de las GUIs

3.1 Convierta una función simple en GUI

Escriba una función que permita graficar una onda seno a partir de de sus parámetros Amplitud,
Frecuencia y Fase.

function onda_seno(amp,freq,fase)
% Esta función grafica una onda seno
% Vector de tiempo para visualizar dos ciclos
t=0:2/(100*freq):2/freq;
% Vector de valores en el eje y
y=amp*sin((2*pi)*(freq*t)+fase*(pi/180));
% Grafique
plot(t,y);
% Activa regilla
grid on;

11
CAPÍTULO 3. EJERCICIO 12

Al ejecutar desde la ventana de comandos, la función entrega la siguiente gráfica para una
amplitud de 2, una frecuencia de 1000Hz y una fase de 30 grados.

Figura 3.1: Resultado de la función onda_seno

En el caso de necesitar graficar la onda seno con otros parámetros diferentes, muy probablemente
se requiera cambiar en la ventana de comandos los valores de entrada de la función onda_seno
y ejecutarla de nuevo. Si se diseña una GUI para esta función se puede mejorar esta situación
un poco. La figura 3.2 muestra el diseño de la GUI en el asistente.

Figura 3.2: Etapa incial de diseño de la GUI

CAPÍTULO 3. EJERCICIO 13

Una vez terminado el diseño de la GUI, se puede ejecutar desde el botón en el asistente para
verificar si la apariencia es la que se espera sin necesidad de escribir el programa que controla
la GUI. En esta parte se puede dar lugar a los eventos pero no se realiza ninguna tarea ya que
no se ha prgramado. La figura 3.3 muestra la apariencia de la interfaz.

Figura 3.3: Apariencia final de la GUI

A continuación se muestra el programa del archivo .m que controla la GUI

function varargout = ondaGUI(varargin)

% GUI para dibujar una onda seno
% Codigo de inicializacion para la GUI
gui_Singleton = 1;
gui_State = struct(’gui_Name’, mfilename, ...
’gui_Singleton’, gui_Singleton, ...
’gui_OpeningFcn’, @ondaGUI_OpeningFcn, ...
’gui_OutputFcn’, @ondaGUI_OutputFcn, ...
’gui_LayoutFcn’, [] , ...
’gui_Callback’, []);
if nargin & isstr(varargin1)
gui_State.gui_Callback = str2func(varargin1);
end
if nargout
[varargout1:nargout] = gui_mainfcn(gui_State, varargin:);
else
CAPÍTULO 3. EJERCICIO 14

gui_mainfcn(gui_State, varargin:);
end
% –- Subfuncion para apertura de la GUI
function ondaGUI_OpeningFcn(hObject, eventdata, handles, varargin)
% Asigna variables de salida
handles.output = hObject;
% Actualiza la estructura de handles
guidata(hObject, handles);
% –- Subfuncion para salida de la GUI
function varargout = ondaGUI_OutputFcn(hObject, eventdata, handles)
% Asigna variables de salida
varargout1 = handles.output;

% –- Subfunción de llamado para el boton dib

function dib_Callback(hObject, eventdata, handles)
% Trae los parámetros desde la GUI
amp=str2num(get(handles.amp,’String’));
freq=str2num(get(handles.freq,’String’));
fase=str2num(get(handles.fase,’String’));
% Vector de tiempo para visualizar dos ciclos
t=0:2/(100*freq):2/freq;
% Vector de valores en el eje y
y=amp*sin((2*pi)*(freq*t)+fase*(pi/180));
% Grafique
plot(t,y);
% Dibuja en el objeto axes de la GUI => plano xy
axes(handles.planoxy);
% Activa regilla
grid on;