mataurimaa@uni.pe|miguel.ataurima@pucp.edu.pe 1 MATLAB para el Anlisis Economico NIVEL BSICO
Introduccin a la Creacin de Interfaces Grficas con GUIDE Universidad Nacional de Ingeniera Universidad Nacional Mayor de San Marcos 2 Introduccin a la Creacin de Interfaces Grficas La Interfaz Grfica de Usuario Las GUIs en MATLAB Creacin de GUIs con MATLAB Creacin de una aplicacin GUI con GUIDE Estructura de una aplicacin GUIDE El GUIDE Layout Editor Las Propiedades de los Componentes
Estructura del archivo M de una GUI Estilo de Programacin en GUIDE Los Callbacks Los Componentes Edit Text, Static Text, Panel y Push Button Resumen de pasos para la creacin de una GUI con GUIDE Proyectos de Aplicacin EXPOSITOR: Miguel Ataurima Arellano mataurimaa@uni.pe|miguel.ataurima@pucp.edu.pe Universidad Nacional de Ingeniera Universidad Nacional Mayor de San Marcos Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 3 La Interfaz Grfica de Usuario La interfaz grfica de usuario, conocida tambin como GUI (del ingls Graphical User Interface) es un tipo de interfaz de usuario que utiliza un conjunto de imgenes y objetos grficos para representar la informacin y acciones disponibles en la interfaz. Como en una GUI las acciones se realizan mediante manipulacin directa, el usuario no tiene que crear un script, digitar algn comando en la lnea de comandos o comprender los detalles de cmo se realizan las tareas para poder hacer alguna actividad con la aplicacin. Las GUIs surgen como evolucin de la lnea de comandos de los primeros sistemas operativos y es pieza fundamental en un entorno grfico.
ORIGENES DE LA GUI Los investigadores del Stanford Research Institute liderados por Douglas Engelbart (Universidad de Berkeley), desarrollaron en 1973 el Xerox Alto, el primer ordenador personal con una interfaz de hipervnculos en modo texto gobernado por un mouse, que tambin inventaron (el primer prototipo en madera). Este concepto fue ampliado y trasladado al entorno grfico por los investigadores del Xerox PARC (Palo Alto Research Center); en l se definieron los conceptos de ventanas, checkbox, botones de radio, mens y puntero del mouse. Fue implementado comercialmente en el Xerox Star 8010 en 1981
Hoy en da, tenemos como ejemplo de GUIs: Los entornos de escritorio de los sistemas operativos: Windows, Mac Os, X Windows (Linux), etc. Los entornos que usan sistemas operativos de tiempo real: cajeros automticos, procesos industriales, telfonos mviles, etc. 4 Las GUIs en MATLAB Desde el punto de vista de la programacin en MATLAB, una GUI es una visualizacin grfica de una o mas ventanas que contienen controles, llamados componentes, que permiten a un usuario realizar tareas en forma interactiva.
LOS COMPONENTES Los componentes de una GUI en MATLAB son:
Botn de Pulsacin Texto Esttico Ventana Figura (figure) Ejes Cuadro de verificacin Deslizador Texto Editable Barra de herramientas (toolbar) Botn de Radio Lista Desplegable Barra de Mens (menubar) Cuadro de Lista Tabla Panel Alternador Agrupador de botones de radio Control ActiveX Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 5 Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 6 Creacin de GUIs con MATLAB Una GUI MATLAB es una ventana figura (figure) en la cual se aaden los controles operados por el usuario (componentes) . A travs de devoluciones de llamada (callbacks) se puede hacer que los componentes hagan lo que se desea cuando el usuario le da clic o los manipula con pulsaciones del teclado (keystrokes). Se puede crear una GUI en MATLAB de dos maneras Usando GUIDE (GUI Development Environment), el cual es una herramienta interactiva para la construccin de GUIs Se inicia con una ventana figura en la cual se colocan los componentes desde un editor un editor de diseo. GUIDE crea los archivos M asociados que contienen las devoluciones de llamada (callbacks) para le GUI y sus componentes. GUIDE trabaja con dos tipos de archivo : Archivo para almacenar el diseo de la ventana figura (archivo .fig) Archivo para almacenar el cdigo fuente de la aplicacin (archivo .m) Usando solo archivos M (funciones o script) que generen los GUIs: construccin programtica de GUIs. Se codifica un archivo M que define todas las propiedades y comportamientos de los componentes; cuando un usuario ejecuta el arcihvo M, se crea una ventana figura con los componentes y los manipuladores interactivos para el usuario.
Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 7 Creacin de una aplicacin GUI con GUIDE
1. Tras un anlisis del problema, se propone un esbozo a papel y lpiz de la aplicacin GUI 2. Se disea la GUI colocando los componentes segn el esbozo inicial, dndole el aspecto necesario. 3. Se codifica las respuestas a los eventos desencadenados sobre los componentes; es decir, se establece el comportamiento de la aplicacin.
4. Se ejecuta la aplicacin Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 8 Estructura de una aplicacin GUIDE Para iniciar GUIDE digitamos desde la lnea de comandos: guide; se cargar inmediatamente el GUIDE Quick Start. Elegimos una plantilla y se cargar el GUIDE Layout Editor Toda aplicacin GUIDE consta como mnimo de dos archivos
Archivo .fig (archivo binario) Contiene una descripcin completa del diseo de la GUI y sus componentes. Este archivo es del tipo .mat, por lo tanto solo se puede modificar en Layout Editor de GUIDE.
Archivo .m (archivo de texto) Contiene cdigo de inicializacin y plantillas para la codificacin de funciones callback que controlan el comportamiento de la GUI. Dado que ste archivo esta constituido de funciones, el archivo M de la aplicacin GUI nunca puede ser un script.
GUIDE Layout Editor NOTAS: Los archivos .fig y .m deben tener el mismo nombre y generalmente deben residir en el mismo directorio. Cuando se guarda por primera vez la aplicacin, GUIDE abrir automticamente el archivo M en el MATLAB editor. Una aplicacin GUIDE puede hacer uso de funciones de terceros, por ejemplo, de aquellas que implementan algoritmos numricos. GUIDE Quick Start Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 9 Paleta de componentes Componente Ventana de Figura (figure) Alineador de Objetos Editor de menus Editor de Orden de Tabs Editor de Barra de Herramientas Editor de Archivo M Inspector de Propiedades Administrador de objetos Ejecutar la Ventana Figura Propiedad Tag del Componente Seleccionado Posicin del Puntero del Mouse [ x, y ] Posicin del Componente Seleccionado [ x, y, ancho, alto ] El GUIDE Layout Editor Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 10 Las Propiedades de los Componentes Cada componente de la aplicacin posee propiedades Las propiedades permiten establecer las caractersticas del componente. stas se establecen modificando sus valores. GUIDE provee de la herramienta Property Inspector, para poder realizar el mantenimiento de las propiedades de cada componente. NOTA: Cuando se da doble clic en un componente se visualiza el Propery Inspector listando las propiedades del componente.
Cuando aadimos un nuevo componente a la aplicacin, GUIDE asigna valores por defecto a sus propiedades. Todos los componentes tienen la propiedad Tag, la cual permite referenciar al componente dentro del cdigo fuente. Todos los Tags de una aplicacin GUIDE conforman una estructura llamada handles, a travs de la cual se hace referencia al componente en el cdigo fuente. Property Inspector propiedades valores Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 11 Estructura del archivo M de una GUI El archivo M generado por GUIDE es un archivo del tipo funcin. El nombre de la funcin principal es el mismo nombre del archivo M. Cada callback es una subfuncin de la funcin principal. Cuando GUIDE genera un archivo M, ste automticamente incluye plantillas para las funciones callback de uso frecuente para cada componente. Se puede identificar en el archivo M de la aplicacin GUI: Comentarios, predefinidos por GUIDE o establecidos por el programador Funcin Principal (de inicializacin), en las que se especifican las tareas de inicializacin de GUIDE. NO se debe editar ste cdigo. Funcin de Apertura (OpeningFcn), realiza las tareas de inicializacin antes de que el usuario tenga acceso a la GUI Funcin de Salida (OutputFcn), retorna salidas a la lnea de comando MATLAB despus de que la funcin de apertura retorna el control y antes de que el control retorne a la lnea de comandos Funciones callback de los componentes y de la ventana figura, controlan el comportamiento de la Ventana Figura y de los componentes individuales. MATLAB invoca a un callback en respuesta a un evento particular de un componente. Funciones utilitarias o de ayuda, realizan tareas miscelneas no directamente asociado con algn evento de la ventana figura o de un componente Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 12 Funcin Principal Funcin de Apertura Funcin de Salida Funciones Callback y utilitarias Subfunciones de la Funcin Principal Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 13 Estilo de Programacin en GUIDE Despus de haber diseado la aplicacin GUI, se requiere programar su comportamiento; es decir, codificar las respuestas (funciones callback) ante eventos ocurridos sobre alguno de sus componentes. Esto se realiza en el archivo M funcin asociado a la aplicacin GUIDE
El estilo de programacin en GUIDE es estructurado, orientado a componentes y conducido por eventos desencadenados sobre algn componente de la aplicacin (funciones callback).| Funcin principal y Sus subfunciones Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 14 ; ; Tag: psbAceptar Callbacks disponibles: 1. En tiempo de diseo, damos clic derecho en el botn Aceptar cuyo Tag es psbAceptar 2. Elegimos a la funcin Callback como respuesta 3. Codificamos la funcin Callback del componente cuyo Tag es psbAceptar 4. Cada vez que en tiempo de ejecucin den clic en Aceptar, se ejecutar la funcin Callback asociada 5. Pueden existir mas subfunciones de la funcin principal (no necesariamente callbacks) Los Callbacks Un callback, es una subfuncin de la funcin principal de la aplicacin, que se ejecuta como respuesta ante un evento desencadenado sobre un componente.
EJEMPLO: Analizar el evento clic Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 15 Los Componentes Edit Text, Static Text, Panel y Push Button A continuacin se muestran los componentes bsicos, una breve descripcin y sus propiedades mas importantes
String Tag
String Tag HorizontalAlignment
String Tag
Title Tag
Es un contenedor de componentes Permite establecer texto que NO debe ser modificado por el usuario, pero si por la aplicacin. Permite establecer texto que SI puede ser modificado por el usuario. Permite ejecutar una actividad. Por lo general se codifica como funcin callback a la funcin Callback. Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 16 Resumen de pasos para la creacin de una GUI con GUIDE (1) Iniciamos guide.
(2) Seleccionamos una plantilla en la ventana GUIDE Quick Start Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 17 (3) Se aaden los componentes necesarios arrastrndolos desde la paleta de componentes a la Ventana Figura (componente figure de la aplicacin) (4) Se establecen las propiedades de cada componente Componente Botn de Pulsacin (Push Button) Propiedades del Componente Seleccionado GUIDE Layout Editor Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 18 (5) Se guarda la aplicacin asignando un nombre con el cual GUIDE crear dos archivos: nombre.fig y nombre.m
Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 19 (6) Se codifica las devoluciones de llamada (callback) necesarias
Lista de callbacks disponibles del componente seleccionado Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 20 (7) Se ejecuta la aplicacin
Existen varias formas: 1. Invocando a la aplicacin a travs de su nombre desde la ventana de comandos
2. Desde el Editor de archivos M
1. Dando clic en
2. Eligiendo la opcin Save and Run del men Debug.
3. Presionando [F5]
3. Desde el GUIDE Layout Editor
1. Dando clic en
2. Eligiendo la opcin Run del men Tools
>> guidemo Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 21 Proyectos de Aplicacin Proyecto 1 Proyecto 2 Proyecto 3 Proyecto 4: Equilibrio General Competitivo con Intercambio Puro Proyecto 5: Modelo Macroeconmico Clsico Proyecto 6: Construccin de la Distribucin Dickey - Fuller Proyecto 7: Modelo de Solow
EXPOSITOR: Miguel Ataurima Arellano mataurimaa@uni.pe|miguel.ataurima@pucp.edu.pe Universidad Nacional de Ingeniera Universidad Nacional Mayor de San Marcos 22 PROYECTO No.1 Crear una aplicacin GUI que permita convertir US$ a S/. Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 23 En el papel PASO 1. Esboce la apariencia de la GUI PASO 2. Identifique los componentes que van a interactuar (servir de E/S) con el usuario PASO 3. Proponga Tags a los componentes identificados del PASO 2.
En MATLAB PASO 1. Iniciar GUIDE con una plantilla en blanco. PASO 2. Disear la GUI en el Layout Editor PASO 3. Colocar los componentes necesarios PASO 4. Establezca las propiedades necesarias de los componentes para que la GUI tome la apariencia propuesta en el esbozo. PASO 5. Guarde la aplicacin con el nombre convertidor. Al hacerlo, MATLAB abrir el archivo convertidor.m. PASO 6. Codifique los callbacks de los botones Convertir y Salir PASO 7. Ejecute la aplicacin PASO 8. Depuracin y puesta a punto de la aplicacin.
Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 24 PROYECTO No.2 Crear una aplicacin GUI que permita graficar sendas atenuadas cuya regla de correspondencia es Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 25 PROYECTO No.3 Crear un GUI que permita graficar Series contenidas en un archivo Excel con los tipos de trazas bidimensionales de MATLAB: plot, stem, bar y bar3 El programa adems deber tener una barra de herramienta para la gestin de grficas Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe PROYECTO No.4 Crear una aplicacin GUI que permita modelar un Equilibrio General Competitivo en Intercambio Puro
A) Sin la presencia de un Subatador Walrasiano
26 Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe 27
B) Con la presencia de un Subatador Walrasiano
Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe Crear una aplicacin GUI que simule el Modelo Macroeconmico Clsico PROYECTO No.5 28 Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe PROYECTO No.6 Crear una aplicacin GUI que construya las distribuciones Dickey - Fuller 29 Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe Crear una aplicacin GUI que simule la respuesta del modelo de Solow ante choques tecnolgicos. PROYECTO No.7 30 Miguel Ataurima Arellano mataurimaa@uni.pe | miguel.ataurima@pucp.edu.pe