2.

GUI: CONFIGURACION

2.1 Introducción

Matlab implementa una GUI como una figura que se despliega como una
ventana que contiene varios objetos o controles. Se debe programar cada uno de
ellos para que realice la acción que se quiere cuando el usuario active el
componente, además de permitir el salvamento y la corrida del GUI. Todas estas
tareas se simplifican a través del GUIDE.

La elaboración de una GUI incluye dos tareas básicas como son: el reparto o
distribución de los componentes de la interfaz y la programación de cada uno de
los componentes. GUIDE esencialmente es un conjunto de herramientas para la
distribución, pero también facilita el acceso al archivo M-File que contiene el
código que maneja la iniciación y acometida del GUI. El archivo M-File
constituye un marco para la implementación de los Callbacks, es decir, las
funciones que se ejecutan cuando los usuarios activan los componentes en el
GUI.

Aun cuando es posible escribir un archivo M-File que contenga todos los
comandos para elaborar una GUI, es mucho mas fácil utilizar el GUIDE porque
permite hacerlo interactivamente. Al salvar o correr el GUI, GUIDE
automáticamente genera los archivos de extensiones .fig y .m, el primero de los
cuales contiene la descripción completa del GUI y el segundo contiene las
funciones que corren y controlan el GUI y los callbacks. A este último se le
refiere como el archivo GUI M-File. Este archivo no contiene el código que
distribuye los controles; esta información se salva en el archivo FIG-File.

2.1.1 GUI: Representación gráfica de funciones

A continuación se explica la elaboración de un GUI mediante un ejemplo que

consiste en la ejecución de los archivos “peaks”, “membrana” y “sinc” que se
encuentran codificados en Matlab y cuya solución se muestra gráficamente. La
interfaz muestra el botón para seleccionar el archivo, tres botones adicionales
para elegir que la ejecución se muestre como una representación o en forma de
superficie, o enmallada o de contorno y, por ende, el botón que muestre la
representación elegida. Lo anterior se resume a la instalación de tres botones
“Push Button”, un botón “Static Text”, un botón “Pop-up Menu” y un botón
“Axes”
Estructura del archivo GUI M-File

GUIDE simplifica el proceso de elaboración de una GUI mediante la generación

automática del archivo GUI M-File directamente desde su entorno. GUIDE
genera el callback para cada componente que lo requiere en el GUI. Inicialmente,
GUIDE genera exactamente una línea que define la función para cada callback.
Se puede, entonces, añadir código al callback para hacer que desarrolle la
operación que se quiere.

El archivo M-File contiene otras dos funciones donde es posible que se necesite,
también, añadir código que son la “Opening function” y la “Output function”

 La función “Opening function” desarrolla tareas antes que el GUI sea

visible al usuario, tales como la creación de datos para el GUI. GUIDE,
por defecto, denomina a esta función como untitled1_OpeningFcn,
siendo untitled1 el nombre del GUI que el usuario puede cambiar
 La función “Output function” da salida a las variables hasta la línea de
comandos. Si es necesario, GUIDE le asigna como nombre a esta función
untitled1_OutputFcn.

Controles en la Interfaz de Usuario: Instalación y Propiedades

La paleta de componentes del editor del GUI contiene los controles que usted
puede colocar en su GUI. Estos componentes son objetos programables a través
de sus propiedades “Callbacks” y se denominan “Push Buttons”, “Toggle
Buttons”, “Radio Buttons”, “Check Boxes”, “Edit Text”, “Static Text”,
“Sliders”, “Frames”, “List Boxes”, “Pop-Up Menus”, “Axes” y “Figures”.

Propiedades de los componentes del GUI

Las propiedades de los componentes son algunas características como el título

que se observará en la ventana o en el botón, el nombre, el tamaño, el color con
que se identificará el componente, etc. Para la asignación de las propiedades de
cada uno de los componentes del GUI se despliega la ventana “Property
Inspector” localizado en el menú “View”, o en la barra de herramientas. Al
seleccionar un componente en el editor, el inspector despliega las propiedades de
dicho componente. Si no se selecciona un componente, el inspector despliega las
propiedades de la “Figure” o ventana del GUI.
2.3.1 Componente “Figure”

“Figure” es la ventana que contiene la interfaz gráfica de usuario que se diseña

con el editor.

Propiedad “Name”

“Name” es el título que se despliega en la barra superior de la interfaz. Para la

asignación de esta propiedad, visualice el inspector de propiedades de “Figure”
realizando los siguientes pasos:

1. Digite en el editor de comandos de Matlab la palabra clave “guide”, presione

el botón “OK” de la ventana titulada “GUIDE Quick Start” y seleccione
“Property Inspector” para que se despliegue dicha ventana
2. Deslice hacia abajo la lista de propiedades hasta encontrar la de nombre
“Name”. En el campo anexo a la derecha, digite “Simple GUI” como se
observa en la Figura 2.1

Figura 2.1. Inspector de Propiedades de “Figure”

Componente “Push Button”

Un botón “Push Button” genera una acción cuando se presiona, por ejemplo, un
botón OK puede cerrar una caja de diálogo y aplicar los ajustes. Cuando se
presiona con el mouse un botón “Push Button” se observa deprimido, mientras
que cuando se libera el mouse el botón se observa levantado y se ejecuta su
correspondiente callback. Un botón “Push Button” no regresa un valor ni
mantiene un estado.

Propiedad “String”

Con la propiedad “String” se asigna el nombre que se quiere que se despliegue

como leyenda o título en el frente de un botón “Push Button

Propiedad “Tag”

Con la propiedad “Tag”, GUIDE nombra la subfunción callback en el archivo

GUI M-File. Esta propiedad se asigna antes de activar el GUI.

3. Instale un botón “Push Button” en el GUIDE. Despliegue el inspector de

propiedades y deslice la lista hasta encontrar la de nombre “String”. Cambie
el nombre que aparece por defecto, es decir, “Push Button” por la palabra
“Surf”. El callback de este botón se codificará con las instrucciones
requeridas para que al presionarla se despliegue un gráfico de superficie.
Despliegue el GUIDE y ahora, observa el botón con el nombre Surf en su
frente
4. Instale dos botones “Push Button” adicionales debajo del anterior. Asígneles
como propiedad “String”, los nombres “Mesh” y “Contour”, respectivamente.
El callback del primero se codificará con las instrucciones para que con ellas
se ejecute y despliegue un gráfico enmallado mientras que con el segundo se
despliegue un gráfico de contorno. Despliegue el GUIDE y ahora, se deben
observar los tres botones con nombres en sus frentes de Surf, Mesh y
Contour.

2.3.3 Componente “Static Text”

Los controles “Static Text” despliegan lineas de texto. El botón “Static Text”,
usualmente, se utiliza para colocar la etiqueta de otros controles, suministrar
direcciones al usuario, o indicar valores asociados con un objeto deslizable. El
usuario no puede cambiar su texto interactivamente y no existe una forma de
invocar la rutina callback asociada con él

5. Instale un botón “Static Text” en el GUIDE. Despliegue el inspector de

propiedades y deslice la lista hasta encontrar la de nombre “String”. Cambie
 el nombre que aparece por defecto, es decir, “Static Text” por la expresión
“Select Data”.

2.3.4 Componente “Pop-up Menu”

Los menús “Pop-up” se abren para desplegar una lista de opciones cuando el
usuario hace clic sobre la flecha que se encuentra adjunta. Las opciones se
introducen en la propiedad “String”, una por línea en la caja de edición con el
mismo título

6. Instale un botón “Pop-up Menu” en el GUIDE. Despliegue el inspector de

propiedades y deslice la lista hasta encontrar la de nombre “String”. Presione
el botón que aparece a su derecha para desplegar la caja de edición titulada
“String” y digite las palabras “Peaks”, “Membrana” y “Sinc”. El inspector de
propiedades se observa como se muestra en la Figura 2.2.

Figura 2.2 Inspector de propiedades de un Pop-up Menu

Propiedad “Value”

La propiedad “Value” contiene el índice de la opción seleccionada. Por ejemplo,

si la propiedad “String” contiene las tres opciones, “peaks”, “membrana” y
“sinc” y la propiedad “Value” tiene un valor de 2, entonces la opción
seleccionada es “membrana”

Cuando el objeto “Pop-up menú” no ha sido desplegado muestra, por defecto, la

opción determinada por el índice que se encuentra asignado a la propiedad
“Value”. La primera opción en la lista le corresponde el índice número uno.

Los controles “Pop-up menú” son útiles cuando se quiere suministrar al usuario
un conjunto de opciones exclusivas mutuamente, pero no se quiere ocupar todo
el espacio correspondiente a los radio botones requeridos

2.3.5 Componente “Axes”

El botón “Axes” permite a un GUI desplegar gráficos e imágenes. Como todo

objeto gráfico, el componente “Axes” tiene propiedades que pueden controlar
muchos aspectos de su comportamiento y apariencia

7. Instale un botón “Axes” en el GUIDE. Ajuste su tamaño para observarlo

como un cuadrado.
8. Despliegue el GUIDE, guárdelo con el nombre “simple_gui” y observe que la
barra de título del GUI muestra dicha expresión. Oprima el botón “Run” que
se encuentra en la barra de herramientas. Se observa el GUI construido hasta
ahora. El botón “Static Text” con leyenda de nombre “Select Data” se ha
colocado como título del botón “Pop-up Menu”. Con respecto a este último,
se puede presionar la saeta localizada a su derecha y se pueden elegir
cualquiera de las opciones incluidas como propiedades “String”. El GUI debe
observarse como se muestra en la Figura 2.3

Figura 2.3 Presentación inicial del GUI

9. Presione el icono M-File Editor que se encuentra en la barra de herramientas
para observar el código construido hasta ahora por Matlab. Se observa la
inclusión de las funciones que incluirán los códigos que ejecutarán cada uno
de los botones instalados. Las funciones asociadas con la “Figure” se
nombran con “simple_gui” y para cada uno de los botones instalados se han
incluido las correspondientes funciones con nombres
“pushbutton1_Callback”, “pushbutton2_Callback”, “pushbutton3_Callback”
y “plot-upmenu1_Callback”

Programación del GUI

Completada la primera etapa sobre la instalación y distribución de los

componentes del GUI, la segunda etapa consiste en la codificación de las
funciones de cada uno de los botones. Para el llamado y la denominación de un
componente se utilizan dos propiedades importantes como son el “Callback” y
el “Tag”.”

Propiedades “Callback” y “Tag” de los componentes del GUI

Una propiedad importante es la que especifica el “callback” ó código que se

ejecuta cuando el usuario activa un botón. Cuando se añade por primera vez un
componente al GUIDE, la propiedad “callback” es ajustada al valor de caracteres
“% automatic”. Cuando se salva o se corre el GUI, GUIDE convierte este valor
en uno que llama la función en el archivo M-File generado. GUIDE utiliza la
propiedad “Tag” del componente para asociarlo con dicha función. Por defecto,
se puede observar, por ejemplo, que cuando se instala por primera vez un botón
“Push Button” se le asigna como leyenda genérica el nombre
“Pushbutton1_Callback”

10. Despliegue el inspector de propiedades del botón de nombre “Surf”,

verifique que la propiedad “callback” se encuentra ajustada al valor “%
automatic”. Deslice la ventana hasta encontrar la propiedad “Tag” y cambie
el nombre que aparece por la palabra “surf_pushbutton”. Despliegue el editor
de Matlab y observe que el nombre de la función asociado con el botón se
denomina “Surf_pushbutton_Callback”
11. Repita el paso 10 para los botones “Mesh” y “Contour”. Verifique que en el
editor de Matlab los nombres de las funciones asociadas son
“Mesh_pushbutton_Callback” y “Contour_pushbutton_Callback”
12. Repita el paso 10 para el botón “Pop-up Menu” para asignarle a la función
asociada el nombre “plot_popup”
Funciones dentro del GUI

Asignadas las propiedades “callback” y “tag” para cada uno de los componentes
del GUI, se continúa con la programación o introducción del código en el
archivo GUI M-File. Las funciones incluidas en dicho archivo se pueden
observar de la siguiente manera:

13. Presione el icono M-File Editor que se encuentra en la barra de herramientas

del GUIDE y a continuación presione el icono “Show function” de la misma
barra. Se despliega un menú contextual con la lista de las funciones como se
muestra en la Figura 2.4. Se notan los “callback” para los botones instalados
que lo requieren y otros tres con nombres “simple_gui”,
“simple_gui_OpeningFcn” y “simple_gui_OutputFcn”

Figura 2.4. Archivo GUI M-File

Al seleccionar un “callback” en el menú contextual, el cursor se mueve a la

primera línea de éste. Una función importante es la nombrada como
“OpeningFcn” porque en ella se crean datos para el GUI o se ejecutan otras
tareas antes de abrir la interfaz. Para acceder a esta función proceda de la
siguiente manera:

14. Presione el icono “Show function” que se encuentra en la barra de

herramientas del archivo GUI M-File y haga clic sobre
“simple_gui_OpeningFcn” para colocar el cursor del mouse en la primera
línea de dicha función

Función “Opening Function” (“OpeningFcn”)

El código en la función “Opening Function” se ejecuta justo antes de que el GUI

se haga visible al usuario. Se puede añadir código a la función de apertura para
desarrollar tareas que necesitan hacerse antes que el usuario tenga acceso al GUI,
por ejemplo, la creación de datos o la lectura de fuentes externas. El código
dentro de esta función se incluye inmediatamente después de los comentarios
que siguen a la declaración de la función y constituyen las tareas de creación de
datos para que se desplieguen los gráficos en la interfaz. Observe la Figura 2.5

Figura 2.5 Código para “simple_gui_OpeningFcn”

En el ejemplo que se construye se añade un código para crear tres conjuntos de
datos en la función apertura, utilizando las funciones ya codificadas en Matlab
“peaks”, “membrana” y “sinc”.

Las primeras seis líneas crean los datos utilizando las funciones “peaks”,
“membrana” y “sinc” para la generación de los mismos. La siguiente línea,
“handles.current_data = handles.peaks” ajusta el campo “current_data” de la
estructura “handles” para que se iguale a los datos para la función “peaks”. El
valor de “handles.current_data” cambia cuando el usuario selecciona un gráfico
diferente en el botón “Pop-up Menu”. La última línea despliega el gráfico en
forma de superficie para “peaks”, que aparece por defecto cuando se abre el
GUI.

GUIDE genera, automáticamente, dos líneas de código adicionales en la función

apertura a continuación del código añadido y que son:

 handles.output = hObject. Cumple la función de salvar el manejo al GUI

para un posterior acceso mediante la función “Output”. Esta línea es útil si
se quiere regresar el manejo del GUI a la línea comando
 guidata(hObject, handles). Cumple la función de guardar la estructura
“handles”

Código dentro de los “Callback” de los botones “Push Button”

Mediante cada uno de estos botones se construyen diferentes tipos de gráficos

para la opción seleccionada en el botón “Pop-up Menu”. El “callback”
correspondiente a cada uno adquiere los datos de la estructura “handles” y
entonces los grafica. Por ejemplo, mediante el botón “Surf” se construye un
gráfico de superficie y mediante el botón “Contour” uno de contorno a la opción
seleccionada en el botón “Pop-up Menu”. Para añadir el código al botón “Surf”,
proceda en el siguiente orden:

15. Presione el icono “Show function” que se encuentra en la barra de

herramientas del archivo GUI M-File y haga clic sobre
“surf_pushbutton_Callback” para colocar el cursor del mouse en la primera
línea de dicha función
16. Añada el código “surf(handles.current_data)” como aparece en la Figura 2.6
17. Repita el paso 15 para añadir el código correspondiente a los callback de los
botones “Mesh” y “Contour”.
 Figura 2.6 Código para botones “Push Button”

Código dentro del “Callback” del botón “Pop-up Menu”

Se puede programar el control “Pop-up Menu” para que trabaje verificando solo
el índice de la opción seleccionada (contenida en la propiedad “Value”) o para
que obtenga la propiedad “String” actual contenida en la opción seleccionada.

El siguiente “callback” verifica el índice de la opción seleccionada y utiliza un

lazo de control de flujo “switch” para ejecutar las acciones de acuerdo al valor.
Si el contenido del “Pop-up Menu” se fija, se puede utilizar el siguiente esquema
de codificación

function popmenu1_Callback(hObject, evendata, handles)

val = get(hObject, ‘Value’);
switch val
case 1
% El usuario seleccionó la primera opción
case 2
% El usuario seleccionó la segunda opción
% etc
end
El siguiente “callback” selecciona la propiedad “String” actualmente
seleccionada en el “Pop-up Menu”. Utiliza el valor para indexar en la lista de
“strings”. Este esquema puede ser útil si su programa carga, dinámicamente, el
contenido del “Pop-up Menu” de acuerdo a la acción del usuario y necesita
capturar el “string” seleccionado. Obsérvese que es necesario convertir el valor
capturado mediante la propiedad “String” desde un arreglo de celdas a un
“string”

function popmenu1_Callback(hObject, evendata, handles)

val = get(hObject, ‘Value’);
string_list = get(hObject, ‘String’);

% Convierte de un arreglo de celdas a un string

selected_string = string_list(val);

switch selected_string

case 1

% El usuario seleccionó la primera opción

case 2

% El usuario seleccionó la segunda opción

% etc
end

El botón “Pop-up Menu” permite al usuario seleccionar los datos a graficar.

Cuando el usuario selecciona a uno de los tres incluidos en el menú, el
“callback” del botón lee la propiedad “Value” para determinar el tipo de datos
que se despliega por defecto y se ajusta de acuerdo a la línea
“handles.current_data”.

Para añadir el código al botón “Pop-up Menu” de la interfaz “simple_gui”

proceda de la siguiente manera:

18. Presione el icono “Show function” que se encuentra en la barra de

herramientas del archivo GUI M-File y haga clic sobre
“plot_popup_Callback” para colocar el cursor del mouse en la primera línea
de dicha función. Añada el código como aparece en la Figura 2.7
 Figura 2.7 Código para el botón “Pop-up Menu”

Ejecución del GUI

Después de escribir los “callbacks”, se puede ejecutar el GUI presionando el

icono “Run” de la barra de herramientas o seleccionando la opción del menú
“Tools”. Si no ha guardado el GUI recientemente, GUIDE despliega el siguiente
cuadro de diálogo.

Figura 2.8 Cuadro de diálogo para guardar el GUI

Si esto sucede, presione el botón “Yes” y guarde, entonces, los archivos del GUI
a un directorio apropiado

Si el directorio donde se guarda el GUI no se encuentra en la ruta de Matlab,

GUIDE abre el siguiente cuadro de diálogo, Figura 2.9, permitiendo la opción de
cambiar el directorio usual al directorio que contiene los archivos GUI o
añadiendo dicho directorio a la ruta de Matlab. Presione el botón “OK” para
cambiar de directorio

Figura 2.9 Confirmación del directorio para guardar los archivos del GUI

Después de guardados los archivos del GUI, GUIDE lo abre como se muestra en
la Figura 2.10

Figura 2.10 Gráfico de “peaks” en forma de superficie

Si se selecciona como tipo de datos la opción “membrana” y “Mesh” como tipo
de gráfico se observa la Figura 2.11

Figura 2.11 Gráfico de “membrana” en forma de malla

Si se selecciona como tipo de datos la opción “sinc” y “Contour” como tipo de

gráfico se observa la Figura 2.12

Figura 2.12 Gráfico de “sinc” en forma de contorno

Identificación de “Callbacks” mediante el “Object Browser”

En casos complejos, es más fácil la identificación de un “Callback” mediante el

mostrador de objectos. Para la identificación de los “callbacks” codificados en la
programación de la interfaz “simple_gui” mediante el “Object Browser” proceda
de la siguiente manera:

19. Seleccione la opción “Object Browser” que se encuentra en el menú “View”

en el editor del GUI. Se despliega una ventana como la observada en la
Figura 2.13

Figura 2.13 Object Browser de la interfaz “simple_gui”

El mostrario de objetos despliega las propiedades “Tag” y “String” de cada uno

de los componentes del GUI. Al seleccionar el nombre de uno de los
componentes en la lista se selecciona el componente en el editor del GUI. Por
ejemplo, en el “Object Browser” de la Figura 2.13, el “uicontrol”
(Mesh_pushbutton “Mesh”), la propiedad “String” es Mesh; la propiedad “Tag”
es Mesh_pushbutton, que a su vez le da el nombre al callback como
Mesh_pushbutton_Callback. Observe que el componente seleccionado en el
mostrador de objetos, también se selecciona en el editor del GUI.