Está en la página 1de 30

EXPOSITOR:

Miguel Ataurima Arellano


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