PDF de programación - Manual de interfaz gráfica de usuario en Matlab parte I

MMAANNUUAALL DDEE IINNTTEERRFFAAZZ GGRRÁÁFFIICCAA DDEE

UUSSUUAARRIIOO EENN MMAATTLLAABB



PPaarrttee II



AAuuttoorr:: DDiieeggoo OOrrllaannddoo BBaarrrraaggáánn GGuueerrrreerroo

[email protected]


Manual de Interfaz Gráfica de Usuario en Matlab
Por: Diego Orlando Barragán Guerrero



ÍNDICE



INTRODUCCIÓN
INICIO
PROPIEDADES DE LOS COMPONENTES
FUNCIONAMIENTO DE UNA APLICACIÓN GUI
MANEJO DE DATOS ENTRE LOS ELEMENTOS

DE LA APLICACIÓN Y EL ARCHIVO .M
SENTENCIAS GET Y SET

PRESENTACIÓN DE NUESTRO PROGRAMA
PROGRAMA SUMADORA


PROGRAMA SUMADORA_2



PROGRAMA CALCULADORA

MENSAJES DE USUARIO



PROGRAMA FUNC_TRIG



PROGRAMA LISTBOX

PROGRAMA SLIDER



BOTONES PERSONALIZADOS
PROGRAMA IMÁGENES



PROGRAMA ELEMENTOS

PROGRAMA GUIDE_SIMULINK

PROGRAMA SECUENCIA



PROGRAMA VIDEOGUI

PROGRAMA PARALLEL_PORT

PROGRAMA motorGUI



.EXE


TIPS GUIDE



MATLAB MANÍA
ACERCA DEL AUTOR



36



3
3
5
6

7
7
8
11
17
19
26
31
33

40
42
44
49
53
55
57
60
64
67
70
72



“It's so easy to forget
What you give is what you get "
Ratt



2

Manual de Interfaz Gráfica de Usuario en Matlab
Por: Diego Orlando Barragán Guerrero

G U I D E

INTERFAZ GRÁFICA DE USUARIO EN MATLAB


INTRODUCCIÓN


GUIDE es un entorno de programación visual disponible en MATLAB para
realizar y ejecutar programas que necesiten ingreso continuo de datos. Tiene las
características básicas 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 instrucción en la ventana de comandos:

>> guide

• Haciendo un click en el ícono que muestra la figura:

Fig. 1. Ícono GUIDE.



Se presenta el siguiente cuadro de diálogo:

Fig. 2. Ventana de inicio de GUI.



3

Manual de Interfaz Gráfica de Usuario en Matlab
Por: Diego Orlando Barragán Guerrero

Se presentan las siguientes opciones:


a) Blank GUI (Default)

La opción de interfaz gráfica de usuario en blanco (viene predeterminada), nos
presenta un formulario nuevo, en el cual podemos diseñar nuestro programa.

b) GUI with Uicontrols

Esta opción 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 opción 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 botón de comando.

d) Modal Question Dialog

Con esta opción se muestra en la pantalla un cuadro de diálogo común, el cual
consta de una pequeña imagen, una etiqueta y dos botones Yes y No,
dependiendo del botón que se presione, el GUI retorna el texto seleccionado (la
cadena de caracteres ‘Yes’ o ‘No’).

Elegimos la primera opción, Blank GUI, y tenemos:

Fig. 3. Entorno de diseño de GUI



La interfaz gráfica 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).

4



Manual de Interfaz Gráfica de Usuario en Matlab
Por: Diego Orlando Barragán Guerrero

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 presentación:



Fig. 4. Entorno de diseño: componentes etiquetados.



La siguiente tabla muestra una descripción 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

Descripción

Indica el estado de una opción o atributo
Caja para editar texto
Provee una lista de opciones
Muestra una lista deslizable
Invoca un evento inmediatamente
Indica una opción que puede ser seleccionada

Valor de estilo
‘checkbox’
‘edit’
‘popupmenu’
‘listbox’
‘pushbutton’
‘radio’
‘togglebutton’ Solo dos estados, “on” o “off”
‘slider’
‘text’



Usado para representar un rango de valores
Muestra un string de texto en una caja
Agrupa botones como un grupo
Permite exclusividad de selección 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.


Fig. 5. Opciones del componente.



5

Manual de Interfaz Gráfica de Usuario en Matlab
Por: Diego Orlando Barragán Guerrero

La opción Property Inspector nos permite personalizar cada elemento.



Fig. 6. Entorno Property Inspector.

Permite ver y editar las propiedades de un objeto.



Al hacer click derecho en el elemento ubicado en el área de diseño, una de las
opciones más importantes es View Callbacks, la cual, al ejecutarla, abre el archivo .m
asociado a nuestro diseño y nos posiciona en la parte del programa que corresponde a la
subrutina que se ejecutará cuando se realice una determinada acción 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 APLICACIÓN GUI


Una aplicación GUIDE consta de dos archivos: .m y .fig. El archivo .m es el que
contiene el código con las correspondencias de los botones de control de la interfaz y el
archivo .fig contiene los elementos gráficos.


Cada vez que se adicione un nuevo elemento en la interfaz gráfica, se genera

automáticamente código en el archivo .m.


Para ejecutar una Interfaz Gráfica, 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 opción RUN.



6

Manual de Interfaz Gráfica de Usuario en Matlab
Por: Diego Orlando Barragán Guerrero

MANEJO DE DATOS ENTRE LOS ELEMENTOS DE LA APLICACIÓN Y EL
ARCHIVO .M


Todos los valores de las propiedades de los elementos (color, valor, posición,
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 aplicación. Esta definición de

identificador es salvada con la siguiente instrucción:



guidata(hObject, handles);

guidata, es la sentencia para salvar los datos de la aplicación.


Aviso: guidata es la función que guarda las variables y propiedades de los elementos en
la estructura de datos de la aplicación, por lo tanto, como regla general, en cada
subrutina se debe escribir en la última línea lo siguiente:


guidata(hObject,handles);



Esta sentencia nos garantiza que cualquier cambio o asignación de propiedades o

variables quede almacenado.


Por ejemplo, si dentro de una subrutina una operación 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 línea crea la variable diego a la estructura de datos de la aplicación

apuntada por handles y la segunda graba el valor.

SENTENCIAS GET Y SET


La asignación u obtención 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 través 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



7

Manual de Interfaz Gráfica de Usuario en Matlab
Por: Diego Orlando Barragán Guerrero

EJEMPLOS1



PRESENTACIÓN DE NUESTRO PROGRAMA



Fig. 7. Presentación del programa.



Para la presentación de nuestro programa, vamos a programar una pantalla
donde podemos colocar el tema de nuestro diseño, nombre del programador, imagen de
fondo…


Para esto, tenemos el siguiente código (copiar y pegar en un m-file):


function presentacion
%Autor: Diego Barragán Guerrero
%Estudiante de Electrónica y Telecomunicaciones
%***************************************************************
% presentación: función que presenta la pantalla de presentación
%***************************************************************
clear,clc,cla,close all

%Creamos figura
figdiag=figure('Units','Pixels

1 Para nuestro curso, creamos en C:\MATLAB71\work la carpeta MIS_MATLAB, donde
almacenaremos todos nuestros programas.



8

Manual de Interfaz Gráfica de Usuario en Matlab
Por: Diego Or