Resumen Fundamentos de las Interfaces Grficas con MATLAB

Facilitador: Luis Cabezas Tito 1

INTRODUCCIN

ATLAB permite desarrollar de manera simple un conjunto de pantallas con botones, mens,
ventanas, etc., que facultan utilizar -de manera muy simple- programas realizados en entorno
Windows. Este conjunto de herramientas se denomina Interface Grfica de Usuario. Las
posibilidades que ofrecen las ltimas versiones de MATLAB han mejorado mucho respecto a versiones
anteriores.

Para poder hacer programas que utilicen las capacidades grficas avanzadas de MATLAB hay que
conocer conceptos bsicos de programacin en base a objetos. Aunque MATLAB dispone ahora de la
herramienta GUIDE, que permite generar interfaces de usuario de una forma muy cmoda y sencilla, es
conveniente conocer los fundamentos de lo que se est haciendo, e incluso ser capaz de hacerlo
programando manualmente.

MATLAB, a partir de la versin 5.0, ha incorporado un mdulo llamado GUIDE (Graphical User Interface
Development Environment) que permite crear de modo interactivo la interface de usuario, a igual que
Visual Basic o Delphi, aunque todava con posibilidades mucho ms limitadas. En cualquier caso, si no es
uno de los avances ms importantes de MATLAB, si ha sido uno de los ms agradecidos por los
usuarios, que ya no tienen que escribir sin ayuda los callbacks propios de la programacin MATLAB. Por
esta razn, en este libro slo se explica la programacin usando el GUIDE.

EJEMPLO 1:

Siguiendo los 43 pasos que se dan a continuacin, usted lograr crear su primer programa basado en la
Interfaz Grfica de MATLAB. Se supone que ya est en el rea de trabajo del GUI o sino invquelo con el
comando:

>> guide

Ajuste el tamao del rea de trabajo denominado Figure por MATLAB- haciendo uso del Inspector de
Propiedades (View\Property Inspector) y modificando en Position\width y Position\height los valores por
defecto.

1. Ponga en el rea de trabajo dos controles: Edit Text y Estatic Text.
2. Haga doble clic en Edit Text para que aparezca el Property Editor (PE) (si an no aparece).
3. Cambie el Texto del control Edit Text por: Escriba en String.
4. Con el mouse haga ms ancho el control.
5. Modifique el texto de Static Text en String a: Lea aqu y ajuste su ancho con el mouse.
6. Grbelo y ejecute su GUI con el botn que contiene el tringulo verde.
M
Resumen Fundamentos de las Interfaces Grficas con MATLAB
Facilitador: Luis Cabezas Tito 2
7. Coloque el mouse sobre el botn Edit Text, presione el botn derecho del mismo, Expanda View
Callbacks y escoja Callback. Introduzca el siguiente cdigo (lo que est en cursiva):
% -----------------------------------------------------------------------------------
function varargout = edit1_Callback(h, eventdata, handles, varargin)
msg=get(h,'string')
set(handles.text1,'string',msg)
% -----------------------------------------------------------------------------------
8. Ejecute el programa y escriba en el Edit Text: Bienvenidos, presione Enter.
9. Ponga un Control Frame en el rea de trabajo y acomode los dos anteriores controles dentro del
mismo. Si el Frame se sobrepone a los anteriores, envelo al fondo presionando el botn derecho
del mouse sobre el Frame y seleccionando Send to Back.
10. Agregue al rea de trabajo un Frame, un Slider y un Edit Text. En este ltimo cambien el color de
fondo a blanco. Puede usar la herramienta Align Objects para ordenarlos.
11. Vamos a agregar el cdigo que al deslizar el Slider, el valor de ste se presente en el Edit Text y
el valor del Edit Text se represente en el Slider al presionar sobre el Edit Text el botn derecho
del mouse. Deje en blanco el String del Edit Text.
% -----------------------------------------------------------------------------------
function varargout = slider1_Callback(h, eventdata, handles, varargin)

value=get(h,'value')
set(handles.edit2,'string',value);
% -----------------------------------------------------------------------------------
12. Vaya a la funcin de llamado ButtonDownFcn del Edit Text2 (desde View Callbacks) y escriba el
siguiente cdigo:
% -----------------------------------------------------------------------------------
function varargout = edit2_ButtonDownFcn(h, eventdata, handles, varargin)
set(handles.slider1,'value',str2num(get(h,'string')))
% -----------------------------------------------------------------------------------
13. Ejecute el GUI y haga pruebas con el Slider.
14. Pongamos lmites al Slider modificando sus propiedades:
Propiedad Max: 1000
Propiedad SliderStep x: 0.001
Propiedad SliderStep y: 0.01
15. Ejecute nuevamente el programa y compruebe lo que hizo.
16. Agregue un Control Push Button y modifique la propiedad String, escribiendo: Por fin
17. Escriba en la funcin de llamado Callback del Push Button el siguiente cdigo:
% -----------------------------------------------------------------------------------
function varargout = pushbutton1_Callback(h, eventdata, handles, varargin)
Warndlg('Por fin aprend MATLAB de forma inteligente...!','Lo que siente mi corazn:' )
% -----------------------------------------------------------------------------------
18. Ejecute el GUI y presione el Push Button1.
19. Introduzca en el rea de trabajo un Frame y un Toggle Button, modifique los siguientes atributos:
Control Toggle Button 1:
Propiedad String: Habilitar Botn
Control PushButton1 (del paso 16):
Propiedad Enable: off
20. Ordene los botones en el Frame, relacionando el control: Habilitar Botn con el control Por fn.
21. Escriba el siguiente cdigo en la funcin Callback del control togglebutton1:
Resumen Fundamentos de las Interfaces Grficas con MATLAB
Facilitador: Luis Cabezas Tito 3
% -----------------------------------------------------------------------------------
function varargout = togglebutton1_Callback(h, eventdata, handles, varargin)
if get(h,'value')==1
set(handles.pushbutton1,'enable','on')
else
set(handles.pushbutton1,'enable','off')
end
% -----------------------------------------------------------------------------------
22. Ejecute el GUI y vea lo que hace la anterior funcin.
23. Agregue un Checkbox y un Frame. Programe el Checkbox para cuando est marcado pinte el
color de fondo. Modifique las propiedades del Checkbox:
Propiedad String: Fondo Rojo.
24. Escriba el cdigo en la funcin Callback del control Checkbox1:
% -----------------------------------------------------------------------------------
function varargout = checkbox1_Callback(h, eventdata, handles, varargin)
if get(h,'value')==1
set(h,'Backgroundcolor','red')
else
set(h,'Backgroundcolor','factory')
set(handles.frame4,'Backgroundcolor','factory')
end
% -----------------------------------------------------------------------------------
25. Ejecute el GUI y verifique que funciona.
26. Inserte un control Popup Menu, un Static Text y un Frame. Cambie los atributos siguientes:
Control Static Text:
Propiedad String: Cambie el Color de Fondo de la Pantalla a su gusto (utilice el botn a rayas
denominado editor del String que aparece a su lado para optimizar la presentacin).
Propiedad BackGroundColor: 80,100,100 (%). Escriba estos valores en las lneas con ayuda del
editor de String del Property Editor.
Control PopupMenu1:
Propiedad String:
Amarillo|Morado|Cielo|Rojo|Verde|Azul|Blanco|Negro (la raya vertical corresponde al cdigo
ASCII 124 (Alt+124)).
27. Ordene los controles para que luzcan como en la figura.
28. En el Callback del Popup Menu escriba lo siguiente:
% -----------------------------------------------------------------------------------
function varargout = popupmenu1_Callback(h, eventdata, handles, varargin)

color={'y';'m';'c';'r';'g';'b';'w';'k'};
whitebg(char(color(get(h,'value'))))
% -----------------------------------------------------------------------------------
29. Ejecute la figura y compruebe lo programado.
30. Inserte en el rea de trabajo un Frame, un Listbox, un Static Text y tres Radio Button. Modifique
las siguientes propiedades:
Control Static Text:
Propiedad String: Aprenda a Contar.
Control Radiobutton1:
Propiedad String: 1 al 10
Propiedad Value: 1
Control Radiobutton2:
Propiedad String: De 100 a 200
Resumen Fundamentos de las Interfaces Grficas con MATLAB
Facilitador: Luis Cabezas Tito 4
Control Radiobutton3:
Propiedad String: De 5 en 5 hasta el 50
31. Ordene los controles como se muestra en la figura.
32. Introduzca el siguiente cdigo a las funciones Callback de los tres Radio Button.
% -----------------------------------------------------------------------------------
function varargout = radiobutton1_Callback(h, eventdata, handles, varargin)
serie=1:1:10;
set(handles.listbox1,'string',serie)
set(handles.radiobutton1,'value',1)
set(handles.radiobutton2,'value',0)
set(handles.radiobutton3,'value',0)
% -----------------------------------------------------------------------------------
function varargout = radiobutton2_Callback(h, eventdata, handles, varargin)
serie=100:1:200;
set(handles.listbox1,'string',serie)
set(handles.radiobutton1,'value',0)
set(handles.radiobutton2,'value',1)
set(handles.radiobutton3,'value',0)
% -----------------------------------------------------------------------------------
function varargout = radiobutton3_Callback(h, eventdata, handles, varargin)
serie=0:5:50;
set(handles.listbox1,'string',serie)
set(handles.radiobutton1,'value',0)
set(handles.radiobutton2,'value',0)
set(handles.radiobutton3,'value',1)
% -----------------------------------------------------------------------------------
33. Ejecute la figura y compruebe lo programado.
34. Cuando empieza el GUI no tiene datos en el Listbox. Para este efecto, agregue cdigo a la
funcin de llamada CreateFcn del Listbox (desde View Callbacks):
% -----------------------------------------------------------------------------------
function varargout = listbox1_CreateFcn(h, eventdata, handles, varargin)
serie=1:1:10;
set(h,'string',serie)
% -----------------------------------------------------------------------------------
35. Ejecute el GUI y ahora tendr datos iniciales.
36. Implementemos mens para la interfaz a travs de Menu Editor que se encuentra en Tools. Una
vez abierto, crearemos el men llamado Archivo. Existen mens principales y los submens. Con
las flechas del teclado podemos mover la posicin de los mens.
37. Cree el siguiente rbol de mens con su respectivo efecto.
Principal
Salvar
Restaurar
Opcin 1 (chequear esta opcin)
Opcin 2 (chequear esta opcin)
Imprimir
Salir
Exportar
Imagen BMP
Copiar al Portapapeles
Ms
Resumen Fundamentos de las Interfaces Grficas con MATLAB
Facilitador: Luis Cabezas Tito 5
Uno
Dos
38. El ME no da soporte creando la funcin Callback en el archivo-M; por lo tanto, tendremos que
crearlo. Cuando se cierra y se vuelve a abrir el ME, se pondr automticamente el nombre de la
funcin en el Edit Box de Callback. Busque el nombre del control de UIMENU referente al men
de Salir y escriba el siguiente cdigo:
% -----------------------------------------------------------------------------------
function varargout = salir_Callback(h, eventdata, handles, varargin)
delete(gcf)
% -----------------------------------------------------------------------------------

39. Compruebe que cierra la figura.
40. Agregue las siguientes instrucciones de una lnea en los Callback de los men correspondientes:
% -----------------------------------------------------------------------------------
function varargout = imagen_Callback(h, eventdata, handles, varargin)
print temp.tif; msgbox(' Se grabo en el Archivo temp.tif')
% -----------------------------------------------------------------------------------
function varargout = copiar_Callback(h, eventdata, handles, varargin)
print -dbitmap
% -----------------------------------------------------------------------------------

41. Por ltimo, agreguemos un mensaje de despedida que ser desplegado al momento de cerrar el
GUI. Esto se lograr a travs de la funcin de llamada DeleteFcn del objeto Figure1. se llega a l
haciendo un clic en el botn derecho del mouse sobre el rea de trabajo.
42. En esa funcin escriba el siguiente cdigo:
% -----------------------------------------------------------------------------------
function varargout = figure1_DeleteFcn(h, eventdata, handles, varargin)

msgbox('En homenaje al Maestro en mi Corazn','Gracias','help')
% -----------------------------------------------------------------------------------

43. Ejecute el GUI y compruebe dicho mensaje de despedida.



Resumen Fundamentos de las Interfaces Grficas con MATLAB
Facilitador: Luis Cabezas Tito 6
EJEMPLO 2:

Ahora que ya sabe cmo trabajar con el GUI, este ejemplo ser ms fcil para usted. Para esto,
inicialmente inserte en el rea de trabajo un Frame, un Static Text, dos Radio Button, dos Axes y tres
Push Button. Modifique las propiedades de los controles de la siguiente manera:

Control radiobutton1:
Propiedad String: Plano Izquierdo
Propiedad Value: 1

Control radiobutton2:
Propiedad String: Plano Derecho

Control Static Text1:
Propiedad String: Escoja plano destino

Control Pushbutton1:
Propiedad String: Lineal

Control Pushbutton2:
Propiedad String: Espacial

Control Pushbutton3:
Propiedad String: Polar

El tamao de los controles puede ajustarse con el mouse o mediante la Propiedad String de cada uno de
ellos.

A continuacin, escriba el siguiente cdigo en los Callback de los controles:

% ------------------------------------------------------------------------------------
function varargout = radiobutton1_Callback(h, eventdata, handles, varargin)
axes(handles.axes1) % Seleccione el eje a utilizar
set(h,'value',1);
set(handles.radiobutton2,'value',0);
% ------------------------------------------------------------------------------------
function varargout = radiobutton2_Callback(h, eventdata, handles, varargin)
axes(handles.axes2) % Seleccione el eje a utilizar
set(h,'value',1);
set(handles.radiobutton1,'value',0);
% ------------------------------------------------------------------------------------
function varargout = pushbutton1_Callback(h, eventdata, handles, varargin)
newplot % Esta linea reinicializa el axes
x=0:pi/100:2*pi;
y=sin(x);
y2=sin(x-.25);
y3=sin(x-.5);
plot(x,y,x,y2,x,y3)
legend('sin(x)','sin(x-.25)','sin(x-.5)')
xlabel('x=0:2\pi')
ylabel('Seno de x')
title('Graficando funciones senoidales','FontSize',12)
Resumen Fundamentos de las Interfaces Grficas con MATLAB
Facilitador: Luis Cabezas Tito 7
% ------------------------------------------------------------------------------------
function varargout = pushbutton2_Callback(h, eventdata, handles, varargin)
newplot
t=0:pi/50:10*pi;
plot3(sin(t),cos(t),t)
axis square; grid on
% ------------------------------------------------------------------------------------
function varargout = pushbutton3_Callback(h, eventdata, handles, varargin)
newplot
t=0:.01:2*pi;
polar(t,sin(2*t).*cos(2*t),'--r')
% ------------------------------------------------------------------------------------

Ejecute y pruebe el GUI. No se olvide que para ejecutar o hacer correr el programa puede hacerlo con
Crl+T o presionando la figura con el tringulo verde.



Hasta aqu se dio una breve introduccin sobre Interfaces Grficas de MATLAB.