2.

GUI: CONFIGURACION
2.1 Introduccin
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 accin que se quiere cuando el usuario active el componente, adems de permitir el salvamento y la corrida del GUI. Todas estas tareas se simplifican a travs del GUIDE. La elaboracin de una GUI incluye dos tareas bsicas como son: el reparto o distribucin de los componentes de la interfaz y la programacin de cada uno de los componentes. GUIDE esencialmente es un conjunto de herramientas para la distribucin, pero tambin facilita el acceso al archivo M-File que contiene el cdigo que maneja la iniciacin y acometida del GUI. El archivo M-File constituye un marco para la implementacin 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 fcil utilizar el GUIDE porque permite hacerlo interactivamente. Al salvar o correr el GUI, GUIDE automticamente genera los archivos de extensiones .fig y .m, el primero de los cuales contiene la descripcin 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 cdigo que distribuye los controles; esta informacin se salva en el archivo FIG-File.

2.1.1 GUI: Representacin grfica de funciones

A continuacin se explica la elaboracin de un GUI mediante un ejemplo que consiste en la ejecucin de los archivos peaks, membrana y sinc que se encuentran codificados en Matlab y cuya solucin se muestra grficamente. La interfaz muestra el botn para seleccionar el archivo, tres botones adicionales para elegir que la ejecucin se muestre como una representacin o en forma de superficie, o enmallada o de contorno y, por ende, el botn que muestre la representacin elegida. Lo anterior se resume a la instalacin de tres botones Push Button, un botn Static Text, un botn Pop-up Menu y un botn Axes

Estructura del archivo GUI M-File

GUIDE simplifica el proceso de elaboracin de una GUI mediante la generacin automtica 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 lnea que define la funcin para cada callback. Se puede, entonces, aadir cdigo al callback para hacer que desarrolle la operacin que se quiere. El archivo M-File contiene otras dos funciones donde es posible que se necesite, tambin, aadir cdigo que son la Opening function y la Output function La funcin Opening function desarrolla tareas antes que el GUI sea visible al usuario, tales como la creacin de datos para el GUI. GUIDE, por defecto, denomina a esta funcin como untitled1_OpeningFcn, siendo untitled1 el nombre del GUI que el usuario puede cambiar La funcin Output function da salida a las variables hasta la lnea de comandos. Si es necesario, GUIDE le asigna como nombre a esta funcin untitled1_OutputFcn.

Controles en la Interfaz de Usuario: Instalacin 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 travs 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 caractersticas como el ttulo que se observar en la ventana o en el botn, el nombre, el tamao, el color con que se identificar el componente, etc. Para la asignacin 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 grfica de usuario que se disea con el editor.

Propiedad Name
Name es el ttulo que se despliega en la barra superior de la interfaz. Para la asignacin 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 botn 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 botn Push Button genera una accin cuando se presiona, por ejemplo, un botn OK puede cerrar una caja de dilogo y aplicar los ajustes. Cuando se presiona con el mouse un botn Push Button se observa deprimido, mientras

que cuando se libera el mouse el botn se observa levantado y se ejecuta su correspondiente callback. Un botn 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 ttulo en el frente de un botn Push Button

Propiedad Tag
Con la propiedad Tag, GUIDE nombra la subfuncin callback en el archivo GUI M-File. Esta propiedad se asigna antes de activar el GUI. 3. Instale un botn 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 botn se codificar con las instrucciones requeridas para que al presionarla se despliegue un grfico de superficie. Despliegue el GUIDE y ahora, observa el botn con el nombre Surf en su frente 4. Instale dos botones Push Button adicionales debajo del anterior. Asgneles 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 grfico enmallado mientras que con el segundo se despliegue un grfico 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 botn 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 botn 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 expresin Select Data.

2.3.4 Componente Pop-up Menu

Los mens 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 lnea en la caja de edicin con el mismo ttulo 6. Instale un botn Pop-up Menu en el GUIDE. Despliegue el inspector de propiedades y deslice la lista hasta encontrar la de nombre String. Presione el botn que aparece a su derecha para desplegar la caja de edicin 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 opcin 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 opcin seleccionada es membrana Cuando el objeto Pop-up men no ha sido desplegado muestra, por defecto, la opcin determinada por el ndice que se encuentra asignado a la propiedad Value. La primera opcin en la lista le corresponde el ndice nmero 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 botn Axes permite a un GUI desplegar grficos e imgenes. Como todo objeto grfico, el componente Axes tiene propiedades que pueden controlar muchos aspectos de su comportamiento y apariencia 7. Instale un botn Axes en el GUIDE. Ajuste su tamao para observarlo como un cuadrado. 8. Despliegue el GUIDE, gurdelo con el nombre simple_gui y observe que la barra de ttulo del GUI muestra dicha expresin. Oprima el botn Run que se encuentra en la barra de herramientas. Se observa el GUI construido hasta ahora. El botn Static Text con leyenda de nombre Select Data se ha colocado como ttulo del botn 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 Presentacin inicial del GUI

9. Presione el icono M-File Editor que se encuentra en la barra de herramientas para observar el cdigo construido hasta ahora por Matlab. Se observa la inclusin de las funciones que incluirn los cdigos que ejecutarn 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

Programacin del GUI

Completada la primera etapa sobre la instalacin y distribucin de los componentes del GUI, la segunda etapa consiste en la codificacin de las funciones de cada uno de los botones. Para el llamado y la denominacin 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 cdigo que se ejecuta cuando el usuario activa un botn. Cuando se aade 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 funcin en el archivo M-File generado. GUIDE utiliza la propiedad Tag del componente para asociarlo con dicha funcin. Por defecto, se puede observar, por ejemplo, que cuando se instala por primera vez un botn Push Button se le asigna como leyenda genrica el nombre Pushbutton1_Callback 10. Despliegue el inspector de propiedades del botn 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 funcin asociado con el botn 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 botn Pop-up Menu para asignarle a la funcin asociada el nombre plot_popup

Funciones dentro del GUI

Asignadas las propiedades callback y tag para cada uno de los componentes del GUI, se contina con la programacin o introduccin del cdigo 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 continuacin 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 lnea de ste. Una funcin 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 funcin 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 lnea de dicha funcin

Funcin Opening Function (OpeningFcn)

El cdigo en la funcin Opening Function se ejecuta justo antes de que el GUI se haga visible al usuario. Se puede aadir cdigo a la funcin de apertura para desarrollar tareas que necesitan hacerse antes que el usuario tenga acceso al GUI, por ejemplo, la creacin de datos o la lectura de fuentes externas. El cdigo dentro de esta funcin se incluye inmediatamente despus de los comentarios que siguen a la declaracin de la funcin y constituyen las tareas de creacin de datos para que se desplieguen los grficos en la interfaz. Observe la Figura 2.5

Figura 2.5 Cdigo para simple_gui_OpeningFcn

En el ejemplo que se construye se aade un cdigo para crear tres conjuntos de datos en la funcin apertura, utilizando las funciones ya codificadas en Matlab peaks, membrana y sinc. Las primeras seis lneas crean los datos utilizando las funciones peaks, membrana y sinc para la generacin de los mismos. La siguiente lnea, handles.current_data = handles.peaks ajusta el campo current_data de la estructura handles para que se iguale a los datos para la funcin peaks. El valor de handles.current_data cambia cuando el usuario selecciona un grfico diferente en el botn Pop-up Menu. La ltima lnea despliega el grfico en forma de superficie para peaks, que aparece por defecto cuando se abre el GUI. GUIDE genera, automticamente, dos lneas de cdigo adicionales en la funcin apertura a continuacin del cdigo aadido y que son: handles.output = hObject. Cumple la funcin de salvar el manejo al GUI para un posterior acceso mediante la funcin Output. Esta lnea es til si se quiere regresar el manejo del GUI a la lnea comando guidata(hObject, handles). Cumple la funcin de guardar la estructura handles

Cdigo dentro de los Callback de los botones Push Button

Mediante cada uno de estos botones se construyen diferentes tipos de grficos para la opcin seleccionada en el botn Pop-up Menu. El callback correspondiente a cada uno adquiere los datos de la estructura handles y entonces los grafica. Por ejemplo, mediante el botn Surf se construye un grfico de superficie y mediante el botn Contour uno de contorno a la opcin seleccionada en el botn Pop-up Menu. Para aadir el cdigo al botn 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 lnea de dicha funcin 16. Aada el cdigo surf(handles.current_data) como aparece en la Figura 2.6 17. Repita el paso 15 para aadir el cdigo correspondiente a los callback de los botones Mesh y Contour.

Figura 2.6 Cdigo para botones Push Button

Cdigo dentro del Callback del botn Pop-up Menu

Se puede programar el control Pop-up Menu para que trabaje verificando solo el ndice de la opcin seleccionada (contenida en la propiedad Value) o para que obtenga la propiedad String actual contenida en la opcin seleccionada. El siguiente callback verifica el ndice de la opcin 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 codificacin

function popmenu1_Callback(hObject, evendata, handles) val = get(hObject, Value); switch val case 1 % El usuario seleccion la primera opcin case 2 % El usuario seleccion la segunda opcin % 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, dinmicamente, el contenido del Pop-up Menu de acuerdo a la accin del usuario y necesita capturar el string seleccionado. Obsrvese 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 opcin case 2 % El usuario seleccion la segunda opcin % etc end

El botn 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 botn lee la propiedad Value para determinar el tipo de datos que se despliega por defecto y se ajusta de acuerdo a la lnea handles.current_data.

Para aadir el cdigo al botn 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 lnea de dicha funcin. Aada el cdigo como aparece en la Figura 2.7

Figura 2.7 Cdigo para el botn Pop-up Menu

Ejecucin del GUI

Despus de escribir los callbacks, se puede ejecutar el GUI presionando el icono Run de la barra de herramientas o seleccionando la opcin del men Tools. Si no ha guardado el GUI recientemente, GUIDE despliega el siguiente cuadro de dilogo.

Figura 2.8 Cuadro de dilogo para guardar el GUI

Si esto sucede, presione el botn 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 dilogo, Figura 2.9, permitiendo la opcin de cambiar el directorio usual al directorio que contiene los archivos GUI o aadiendo dicho directorio a la ruta de Matlab. Presione el botn OK para cambiar de directorio

Figura 2.9 Confirmacin del directorio para guardar los archivos del GUI

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

Figura 2.10 Grfico de peaks en forma de superficie

Si se selecciona como tipo de datos la opcin membrana y Mesh como tipo de grfico se observa la Figura 2.11

Figura 2.11 Grfico de membrana en forma de malla

Si se selecciona como tipo de datos la opcin sinc y Contour como tipo de grfico se observa la Figura 2.12

Figura 2.12 Grfico de sinc en forma de contorno

Identificacin de Callbacks mediante el Object Browser

En casos complejos, es ms fcil la identificacin de un Callback mediante el mostrador de objectos. Para la identificacin de los callbacks codificados en la programacin de la interfaz simple_gui mediante el Object Browser proceda de la siguiente manera: 19. Seleccione la opcin 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, tambin se selecciona en el editor del GUI.