Sie sind auf Seite 1von 16

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

digite “Simple GUI” como se observa en la Figura 2.1 Figura 2.1. Inspector de Propiedades de

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.

de propiedades se observa como se muestra en la Figura 2.2. Figura 2.2 Inspector de propiedades

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

propiedades “String”. El GUI debe observarse como se muestra en la Figura 2.3 Figura 2.3 Presentación

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”

“simple_gui_OpeningFcn” y “simple_gui_OutputFcn” Figura 2.4. Archivo GUI M-File Al seleccionar un

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

que se desplieguen los gráficos en la interfaz. Observe la Figura 2.5 Figura 2.5 Código para

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”

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

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.

el GUI recientemente, GUIDE despliega el siguiente cuadro de diálogo. Figura 2.8 Cuadro de diálogo para

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

Presione el botón “OK” para cambiar de directorio Figura 2.9 Confirmación del directorio para guardar los

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

del GUI, GUIDE lo abre como se muestra en la Figura 2.10 Figura 2.10 Gráfico de

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

y “Mesh” como tipo de gráfico se observa la Figura 2.11 Figura 2.11 Gráfico de “membrana”

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

y “Contour” como tipo de gráfico se observa la Figura 2.12 Figura 2.12 Gráfico de “sinc”

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

Se despliega una ventana como la observada en la Figura 2.13 Figura 2.13 Object Browser de

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.