INTERFAZ GRFICA DE USUARIO (GUI) EN MATLAB

INTRODUCCIN GUIDE es un entorno de programacin visual disponible en MATLAB para realizar y ejecutar programas que necesiten ingreso continuo de datos. Tiene las caractersticas bsicas de todos los programas visuales como Visual Basic o Visual C++. INICIO Para iniciar nuestro proyecto, lo podemos hacer de dos maneras: Ejecutando la siguiente instruccin en la ventana de comandos: >> guide Haciendo un click en el cono que muestra la figura:

cono GUIDE

Inmediatamente aparece el siguiente cuadro de dilogo:

Ventana de inicio de GUI

Se presentan las siguientes opciones: a) Blank GUI (Default). La opcin de interfaz grfica de usuario en blanco (viene predeterminada), nos presenta un formulario nuevo, en el cual podemos disear nuestro programa. b) GUI with Uicontrols. Esta opcin presenta un ejemplo en el cual se calcula la masa, dada la densidad y el volumen, en alguno de los dos sistemas de unidades. Podemos ejecutar este ejemplo y obtener resultados. c) GUI with Axes and Menu. Esta opcin es otro ejemplo el cual contiene el men File con las opciones Open, Print y Close. En el formulario tiene un Popup menu, un push button y un objeto Axes, podemos ejecutar el programa eligiendo alguna de las seis opciones que se encuentran en el men despegable y haciendo click en el botn de comando. d) Modal Question Dialog. Con esta opcin se muestra en la pantalla un cuadro de dilogo comn, el cual consta de una pequea imagen, una etiqueta y dos botones Yes y No, dependiendo del botn que se presione, el GUI retorna el texto seleccionado (la cadena de caracteres Yes o No).

Elegimos la primera opcin, Blank GUI, y tenemos:

Entorno de diseo de GUI

La interfaz grfica cuenta con las siguientes herramientas: Alinear objetos Editor de men. Editor de orden de etiqueta Editor del M-file Propiedades de objetos Navegador de objetos Grabar y ejecutar (ctrl. + T).

Para obtener la etiqueta de cada elemento de la paleta de componentes ejecutamos: File>>Preferentes y seleccionamos Show names in component palette. Tenemos la siguiente presentacin:

La siguiente tabla muestra una descripcin de los componentes:

Control Check box Editable Text Pop-up menu List Box Push Button Radio Button Toggle Button Slider Static Text Panel button Button Group Valor de estilo checkbox edit popupmenu listbox pushbutton radio togglebutton slider text Descripcin Indica el estado de una opcin o atributo Caja para editar texto Provee una lista de opciones Muestra una lista deslizable Invoca un evento inmediatamente Indica una opcin que puede ser seleccionada Solo dos estados, on o off Usado para representar un rango de valores Muestra un string de texto en una caja Agrupa botones como un grupo Permite exclusividad de seleccin con los radio button

PROPIEDADES DE LOS COMPONENTES

Cada uno de los elementos de GUI, tiene un conjunto de opciones que podemos acceder con click derecho.

Opciones del componente

La opcin Property Inspector nos permite personalizar cada elemento.

Entorno Property Inspector. Permite ver y editar las propiedades de un objeto Al hacer click derecho en el elemento ubicado en el rea de diseo, una de las opciones ms importantes es View Callbacks, la cual, al ejecutarla, abre el archivo .m , asociado a nuestro diseo y nos posiciona en la parte del programa que corresponde a la subrutina que se ejecutar cuando se realice una determinada accin sobre el elemento que estamos editando. Por ejemplo, al ejecutar View Callbacks>>Callbacks en el Push Button, nos ubicaremos en la parte del programa:

function pushbutton1_Callback(hObject, eventdata, handles) %hObject handle to pushbutton1 (see GCBO) %eventdata reserved-to be defined in a future version of MATLAB %handles structure with handles and user data (see GUIDATA)

FUNCIONAMIENTO DE UNA APLICACIN GUI Una aplicacin GUIDE consta de dos archivos: .m y .fig. El archivo .m es el que contiene el cdigo con las correspondencias de los botones de control de la interfaz y el archivo .fig contiene los elementos grficos. Cada vez que se adicione un nuevo elemento en la interfaz grfica, se genera automticamente cdigo en el archivo .m. Para ejecutar una Interfaz Grfica, si la hemos etiquetado con el nombre curso.fig, simplemente ejecutamos en la ventana de comandos >> curso. O haciendo click derecho en el m-file y seleccionando la opcin RUN.

MANEJO DE DATOS ENTRE LOS ELEMENTOS DE LA APLICACIN Y EL ARCHIVO .M Todos los valores de las propiedades de los elementos (color, valor, posicin, string) y los valores de las variables transitorias del programa se almacenan en una estructura, los cuales son accedidos mediante un nico y mismo identificador para todos stos. Tomando el programa listado anteriormente, el identificador se asigna en:
handles.output = hObject;

handles, es nuestro identificador a los datos de la aplicacin. Esta definicin de identificador es salvada con la siguiente instruccin:
guidata(hObject, handles);

guidata, es la sentencia para salvar los datos de la aplicacin.

Aviso: guidata es la funcin que guarda las variables y propiedades de los elementos en la estructura de datos de la aplicacin, por lo tanto, como regla general, en cada subrutina se debe escribir en la ltima lnea lo siguiente:
guidata(hObject,handles);

Esta sentencia nos garantiza que cualquier cambio o asignacin de propiedades o variables quede almacenado. Por ejemplo, si dentro de una subrutina una operacin dio como resultado una variable diego para poder utilizarla desde el programa u otra subrutina debemos salvarla de la siguiente manera:
handles.diego=diego; guidata(hObject,handles);

La primera lnea crea la variable diego a la estructura de datos de la aplicacin apuntada por handles y la segunda graba el valor.

SENTENCIAS GET Y SET

La asignacin u obtencin de valores de los componentes se realiza mediante las sentencias get y set. Por ejemplo si queremos que la variable utpl tenga el valor del Slider escribimos:
utpl= get(handles.slider1,'Value');

Notar que siempre se obtienen los datos a travs de los identificadores handles. Para asignar el valor a la variable utpl al statictext etiquetada como text1 escribimos:
set(handles.text1,'String',utpl); %Escribe el valor del Slider en static-text

EJEMPLOS

1) PROGRAMA: PRESENTACIN
Para la presentacin de nuestro programa, vamos a programar una pantalla donde podemos colocar el tema de nuestro diseo, nombre del programador, imagen de fondo Para esto, tenemos el siguiente cdigo (copiar y pegar en un m-file):

function presentacion %Autor: Curso de Programacin Visual %estudiante de Electrnica del ITA %*************************************************************** % presentacin: funcin que presenta la pantalla de presentacin %*************************************************************** clear,clc,close all %Creamos figura figdiag=figure('Units','Pixels') 'Position',[0.0725 0.0725 0.57 0.57] 'Number';'off',... 'Name';'Electrnica'; 'Menubar';'none','color', [0 0 0]; %Ubicamos ejes en figura axes('Units','Normalized',... 'Position',[0 0 1 1]); %-----Centramos la figura--------scrsz = get(0, 'ScreenSize'); pos_act=get(gcf,'Position'); xr=scrsz(3) - pos_act(3); xp=round(xr/2); yr=scrsz(4) - pos_act(4); yp=round(yr/2); set(gcf,'Position',[xp yp pos_act(3) pos_act(4)]); %--------------------------------------%Incluir imagen %Importamos imagen *.jpg,junto con su mapa de colores [x,map]=imread('foto.jpg','jpg'); %Representamos imagen en figura, con su mapa de colores image(x),colormap(map),axis off,hold on %Ttulos sobre imagen %Ttulo %Tamao de la presentacin

text(50,50,'Presentacin del Programa','Fontname','Arial','Fontsize',25,'Fontangle','Italic', ... 'Fontweight','Bold','color',[1 1 1]); %Nombre del programador text(50,80,'Curso:Programacin Visual', ...,'Comic Sans MS','Fontangle','Italic','Fontweight','Bold', ... 'Fontsize',14,'color',[1 1 1]); %Botn Continuar botok=uicontrol('Style','pushbutton', ... 'Units','normalized', ... 'Position',[.84 .03 .12 .05], ... 'String','CONTINUAR',... 'Callback','clear all; close all;clc; GUI;'); siguiente programa.

%GUI es el nombre del

Lo anterior al presionar F5 dentro del Editor, se obtiene:

2) PROGRAMA SUMADORA
Con este ejemplo, se pretende mostrar el uso de pushbutton, static text y Edit text, as como insertar una imagen de fondo a nuestro diseo. Primero, ejecutamos >> guide en la ventana de comandos, y presionamos Enter.

Seleccionamos Blank GUI (default) y presionamos OK. Insertamos los componentes que muestra la siguiente figura:

Componentes del programa sumadora. Haciendo doble-click en cada componente, accedemos a configurar las propiedades de cada elemento. Iniciando en pushbutton, configuramos:

Editar componente

Podemos cambiar el nombre con el que aparecer la funcin del pushbutton en el mfile, simplemente editando el campo Tag. Continuamos editando los dems componentes, hasta llegar a tener una presentacin semejante a la figura del inicio de este ejemplo (de la imagen de fondo nos ocuparemos al final). Ejecutando Ctrl+T o presionando , guardamos nuestro programa con el nombre Sumadora en una carpeta indicada por cada usuario; a continuacin en la ventana Current Directory aparecen el archivo Sumadora.fig y Sumadora.m.

Archivos en Current Directory.

M-file asociado NOTA: Recuerde que Matlab hace diferencia entre maysculas y minsculas. Asimismo, nunca empiece el nombre de un archivo con nmeros ni guiones bajos, no use tildes ni la letra . Para separar dos palabras use guin bajo (ej: mi_programa).

Para iniciar a editar nuestro m-file, llegamos a cada funcin con el cono Show functions , como muestra la siguiente figura:

Botn Show Functions Cada uno de los elementos aadidos en nuestro diseo como pushbutton, edit text, static text tienen una funcin asociada en nuestro m-file. As, al aadir pushbutton, tenemos el siguiente cdigo:

function pushbutton1_Callback(hObject, eventdata, handles) % hObject handle to pushbutton1 (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) Cada edit text tendr el siguiente cdigo:
function edit1_Callback(hObject, eventdata, handles) % hObject handle to edit1 (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) % Hints: get(hObject,'String') returns contents of edit1 as text

Static text, no posee funcin asociada, pero s una direccin asociada, que la podemos utilizar para escribir los resultados. Para saber cul es esta direccin, haciendo doble-click en este componente, la ubicamos en la etiqueta Tag, como lo muestra la siguiente figura:

Direccin de Static text.