1. GUI: INTERFAZ DE USUARIO GRAFICA

1. GUI: INTERFAZ DE USUARIO GRAFICA
1.1 Introducción
Matlab facilita las herramientas para que el usuario ejecute los códigos
construidos para la solución de un modelo matemático mediante el accionar de
los objetos gráficos incluidos en una interfaz de usuario gráfica (GUI). Los
objetos son los componentes del GUI, que se elabora en el denominado
Ambiente para el desarrollo de interfaces de usuarios gráficas (Graphical User
Interface development environment o GUIDE).
1.2 Acceso al GUIDE
1. Para acceder al ambiente para el desarrollo de interfaces de usuarios gráficos
de Matlab se digita la palabra clave “guide” desde el editor de comandos y se
despliega la ventana de título “GUIDE Quick Start” que aparece en la Figura
1.1
Figura 1.1. Acceso Rápido a GUIDE
Por defecto, aparece desplegada la ventana de nombre “Create New GUI”, en
la cual se observa el cuadro “GUIDE templates” con las opciones para abrir
plantillas en blanco (“Blank GUI) o asistentes (“GUI with Uicontrols” y GUI
with Axes and Menu).
2. Seleccione la opción “Blank GUI (Default) y presione el botón “OK” para
desplegar el ambiente o “Layout Editor” de GUIDE, cuyas partes y
denominaciones se muestran en la Figura 1.2
Figura 1.2. Editor de GUIDE
La Figura 1.2 muestra las partes del editor y sobresalen la paleta de
componentes y el área de distribución de estos. Algunas opciones
complementarias para la construcción del GUI como la herramienta para la
alineación de los componentes (“Alignment Tool”), los editores de menús y
archivos punto m (“Menu Editor” y “M-File Editor”), el mostrario de objetos
(“Object Browser”), el inspector de propiedades de objetos (“Property
Inspector”) y el botón para la ejecución de la interfaz (“Run Button”) se
acceden desde la barra estándar o desde los menús “View” y “Tools”.
Si se quiere ajustar la posición y el tamaño del GUI a un valor exacto haga lo
siguiente:
 Seleccione el inspector de propiedades, “Property Inspector”, que se
encuentra en la barra de herramientas o en el menú “View”. Se desplegará
una ventana como la observada en la Figura 1.3
Figura 1.3 Inspector de Propiedades del GUI
 Haga un clic sobre el botón desplegable que aparece a la derecha de la
propiedad “Units” y seleccione la opción pulgadas, “inches” que se encuentra
en el menú contextual
 Haga un clic izquierdo sobre el signo + que se observa a la izquierda de la
propiedad “Position” para desplegar el árbol con el cual se introducen las
coordenadas x, y del punto donde se quiere posicionar el extremo inferior
izquierdo del GUI, además del ancho y el alto como se observa en la Figura
1.3. El ajuste de la propiedad “Units” a “characters” le da al GUI una
apariencia mas consistente a través de la plataforma
Paleta de Componentes del GUI
Los componentes incluidos en la paleta colocada a la izquierda del GUIDE son los
objetos que se instalan en el GUI para ejecutar a través de ellos acciones que se
requieren para la corrida del programa codificado en Matlab. Los nombres de dichos
componentes son: botón de presión (“Push Button”), “Toggle Button”, botón de
opción (“Radio Button”), cuadro de verificación (“Checkbox”), edición de texto
(“Edit Text”), texto estático (“Static Text”), barra deslizable (“Slider”), marco
(“Frame”), cuadro de lista desplegable (“Listbox”), menú contextual
(“PopupMenu”) y ejes (“Axes”).
Instalación de Componentes del GUI
La instalación de un componente en el área de distribución se puede hacer de
cualquiera de las siguientes formas:
 Se presiona en forma sostenida con el botón izquierdo del mouse y se
arrastra hasta el área de distribución del GUIDE
 Presionando el componente, el puntero del mouse cambia a forma en cruz
y esto sirve de guía para seleccionar la posición de la esquina superior
izquierda del control.
3. Sobre la ventana desplegada del GUIDE añada tres botones de presión, un
botón estático, un menú desplegable y un cuadro de ejes como se observa en
la Figura 1.4.
Figura 1.4 Adición de Componentes al GUI
Alineación de Componentes del GUI
Los objetos instalados en el GUIDE se pueden alinear y espaciar entre sí, mediante
la herramienta denominada “Alignment Tool”. Al utilizar dicho recurso, se
seleccionan los componentes y la opción “Align Objects” que se encuentra en la
barra estándar o en el menú “Tools”. Se despliega una ventana como la que se
muestra en la Figura 1.5, para alinear los tres botones “Push Button” instalados en el
GUI de la Figura 1.4 y se procede de la siguiente manera:
Figura 1.5 Alineación y Espaciado de componentes en el GUI
1. Se seleccionan los tres botones presionando la tecla “Ctrl” y haciendo clic
sobre cada uno de ellos
2. Se selecciona la opción “Align Objects” para realizar los siguientes ajustes
que se muestran en la Figura 1.5
a. Espaciado de 20 pixels entre los botones en dirección vertical
b. Alineación a la izquierda en la dirección vertical
3. Se hace clic sobre el botón “OK”
Archivos FIG-Files and M-Files en el GUI
GUIDE almacena dos archivos que se generan la primera vez que se guarda y se
corre la GUI, el uno es un archivo FIG-file y el otro es un M-File
 FIG-File es un archivo con extensión .fig que contiene una descripción
completa de la distribución de la figura del GUI y de sus componentes:
botones, menús, ejes, etc. Cuando se realizan cambios en el GUI en el editor,
los cambios se guardan en el archivo FIG-File
 M-File es un archivo con extensión .m que contiene el código que controla el
GUI incluyendo los callbacks de sus componentes. A este archivo se refiere
como el GUI M-File. Cuando se corre o salva un GUI desde el editor,
GUIDE genera el GUI M-File con blancos para cada uno de los callbacks. Se
pueden programar los callbacks desde el editor de archivos M-File.
1.3 Plantillas del GUIDE
Al desplegarse la ventana de título “GUIDE Quick Start” que aparece en la Figura
1.1, se observa en el panel izquierdo que además de la opción “Blank GUI (Default),
GUIDE contiene dos tipos básicos de GUI’s que sirven como plantillas para la
construcción de interfaces de una forma mas fácil y rápida.
Acceso a las Plantillas del GUIDE
Se puede acceder a las plantillas de GUIDE de dos maneras:
 Digitando la palabra clave “guide” en el editor de comandos de Matlab o
 Si el GUIDE ya se encuentra abierto, seleccionando la opción “New” del
menú “File” en el editor de GUIDE.
Al seleccionar una de estas plantillas, se despliega en el panel derecho una vista
previa de ella. Al hacer clic sobre el botón “OK” se despliega la plantilla en el editor
de GUIDE. En la Figura 1.6 se observa la selección y vista previa de la plantilla
“GUI with Uicontrols”
Figura 1.6 Vista Previa de la plantilla “GUI with Uicontrols”
Plantilla “GUIDE with Uicontrols”
La Figura 1.7 muestra la plantilla denominada “GUI with UIcontrols” ya desplegada
en el editor de GUIDE. El GUI se hace funcionar haciendo clic sobre el botón “Run”
que aparece en la barra de herramientas como un triángulo verde y se despliega el
cuadro modal que aparece en la Figura 1.8.
Presione el botón “Yes” para continuar, aceptando la salvación de los cambios en la
figura y en el archivo M-File que soporta al GUI. . Después de guardar la plantilla
asignándole un nombre, Matlab despliega el GUI (Figura 1.9) y un archivo M-File
que codifica la ejecución del archivo figura. Se deduce con esto que en la creación
de una plantilla se generan dos archivos, uno para la figura construida como plantilla
y otro M-File
Figura 1.7 Plantilla “GUIDE with Uicontrols”
Figura 1.8 Inicio de un GUI
Figura 1.9 GUI de la plantilla “GUIDE with Uicontrols”
Cuando el usuario ingresa los valores para la densidad y el volumen de un objeto, y
presiona el botón de nombre “Calculate”, el GUI calcula la masa del objeto y
despliega el resultado en el cuadro “Mass(D*V)”. El GUI dispone de un marco
dentro del cual hay dos radio botones para seleccionar el sistema de unidades. El
botón “Reset” al presionarlo deja en blanco los cuadros de edición y con ello se
puede utilizar el GUI para unos nuevos cálculos. Además, incluye otro marco con
tres cuadros estáticos que muestran los nombres de las magnitudes a ingresar en los
respectivos cuadros de edición
Plantilla “GUIDE with Axes and Menu”
La Figura 1.10 muestra la plantilla denominada “GUI with Axes and Menu” ya
desplegada en el editor de GUIDE.
Figura 1.10 Plantilla “GUIDE with Axes and Menu”
Al correr el GUI, respondiendo los requerimientos previos, se muestran cinco
gráficos de números al azar generados con el comando rand(5), como se observa en
la Figura 1.11
Se pueden seleccionar otros gráficos en el menú contextual. Se presiona el botón
“Update” para desplegar en el cuadro “Axes” el gráfico seleccionado. El GUI
también tiene un menú con tres opciones:
 Open despliega un diálogo con el cual se pueden abrir archivos grabados en
su computador
 Print ejecuta el comando “printdlg” con el cual se despliega el cuadro de
diálgo “Print” (handles.figure1). Observe que handles.figure1 contiene el
gráfico por defecto. Al presionar el botón “Yes” en cuadro de diálogo “Print”
se imprime el gráfico
 Close cierra la ventana del GUI
Figura 1.11 GUI de la plantilla “GUIDE with Axes and Menu”
Plantilla “Modal Question Dialog”
La Figura 1.12 muestra la plantilla denominada “GUI Modal Question Dialog” ya
desplegada en el editor de GUIDE. Al correr la plantilla se despliega, además del
archivo M-File, el cuadro modal de interrogación que se observa en la Figura 1.13
Según el botón que se presione, el GUI regresa la palabra “Yes” o “No”. El GUI está
bloqueando, significa que el archivo M-File en ejecución se detiene hasta que se
reestablezca dicha ejecución. Se puede hacer bloqueo de un GUI, añadiendo el
siguiente comando a la función de inicio: uiwait(handles.figure1);
Figura 1.12 Plantilla “Modal Question Dialog”
Figura 1.13 Inicio de la creación de un diálogo pregunta
Para restaurar el acceso a otras ventanas de Matlab después que un botón se ha
presionado, se añade el siguiente comando a los “callbacks” de tanto el botón de
“Yes” como el de “No”: uiresume(handles.figure1);