1. GUI: INTERFAZ DE USUARIO GRAFICA

Transcripción

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

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

4 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

5 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

6 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

7 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

8 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

9 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);

10 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);