2. GUI: CONFIGURACION

Transcripción

1 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 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

2 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.

3 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

4 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 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

5 el nombre que aparece por defecto, es decir, Static Text por la expresión Select Data 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

6 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 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

7 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

8 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

9 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

10 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 Repita el paso 15 para añadir el código correspondiente a los callback de los botones Mesh y Contour.

11 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

12 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

13 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

14 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

15 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

16 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.