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.