Interfaces Gráficas de Usuario en MATLAB

MSc. Suset G. Rodríguez Alemán

Dr. José Antonio Otero Hernández

Contenido

Introducción ........................................................................................................................................ 3

Interactuando con GUIDE ................................................................................................................... 3

Pantalla Principal de GUIDE ................................................................................................................ 6

Paleta de componentes ...................................................................................................................... 6

Barra de herramientas ........................................................................................................................ 9

Inspector de Propiedades ............................................................................................................. 10

Área de diseño .................................................................................................................................. 11

Callbacks ............................................................................................................................................ 12

Sentencias get y set ....................................................................................................................... 12

Ejemplo.............................................................................................................................................. 14

Utilizando Axes, Panel, Edit Texts y Botones ................................................................................ 14

Función plot de MATLAB ............................................................................................................... 17

Mejorando el diseño de la aplicación ........................................................................................... 18

Conclusiones ..................................................................................................................................... 24

Introducción

GUIDE (Graphical User Interface Development Enviroment) es un entorno de programación visual

disponible en MATLAB que permite diseñar interfaces gráficas y ejecutar programas. Esta

herramienta es muy útil cuando se tiene un programa MATLAB que necesita un ingreso continuo de

datos o la interacción activa con el usuario. Con GUIDE es posible crear de forma sencilla ventanas

y diálogos que contengan los componentes básicos, como son etiquetas, campos de texto, botones,

contenedores, entre otros.

En el siguiente documento se brinda la información básica y propiedades de los principales

componentes de GUIDE y se muestra la forma en que se realiza la interacción entre la interfaz gráfica

y los datos entregados por el usuario. Al final se desarrolla un ejemplo donde se crea una aplicación

gráfica sencilla que trabaja con datos proporcionados por el usuario y hace uso de algunos de los

componentes que brinda MATLAB.

Interactuando con GUIDE

Podemos acceder a GUIDE de dos maneras:

- Tecleando el comando guide en la ventana de comandos, como muestra la Figura 1.

Figura 1. Acceder a GUIDE a través de la ventana de comandos

- Haciendo click en el botón GUIDE que se localiza en la barra de herramientas de MATLAB,

como muestra la Figura 2.

Figura 2. Acceder a GUIDE a través de la barra de herramientas de MATLAB.

Una vez realizada una de esas dos acciones, aparece una ventana donde es posible seleccionar

entre las pestañas Crear una nueva GUI o Abrir una Existente. En la pestaña Crear una nueva

GUI podemos escoger entre crear una interfaz en blanco o algunos ejemplos predefinidos (con

controles, con ejes y menús o un diálogo). La Figura 3 muestra dicha ventana de selección.

Figura 3. Creando una nueva interfaz gráfica

En nuestro caso seleccionamos la opción interfaz en blanco y especificamos el nombre de la interfaz

gráfica de usuario (GUI) marcando la opción Salvar nueva figura como. En la Figura 3 se puede

observar el nombre escogido para la GUI así como la dirección donde estará guardada. Al presionar

el botón OK, aparece la ventana principal de GUIDE donde se muestran los componentes que se

pueden utilizar para el diseñar la aplicación.

Al crear una nueva GUI, se generan dos ficheros con el nombre especificado (con extensiones .m y

.fig). En el fichero con extensión .fig es donde hacemos el diseño de la GUI, donde ponemos los

componentes que necesitamos, y en el fichero .m implementamos la funcionalidad de cada uno de

los componentes utilizados.

Podemos ejecutar nuestra GUI de diferentes maneras:

- Escribiendo en la ventana de comandos el nombre ( ).

- Presionando el botón Run Figure de la ventana GUIDE ( ).

- Con la ventana GUIDE activa, presionar las teclas Ctrl+T.

- Presionado la tecla F5 mientas el fichero .m está activo.

- Presionando el botón Run en el fichero .m ( ).

La Figura 4 muestra la ventana creada.

Figura 4. Ventana Linea creada

Pantalla Principal de GUIDE

En la pantalla principal podemos localizar tres áreas fundamentales: la paleta de componentes, la

barra de herramientas y el área de diseño. Dichas regiones se encuentran enmarcadas

respectivamente en rojo, azul y verde en la Figura 5.

Figura 5. Pantalla principal de GUIDE

Paleta de componentes

Por defecto, en la paleta de componentes no se muestran los nombres de los componentes de

GUIDE. Para una mejor comprensión de este documento, configuremos la paleta para que se

muestren dichos nombres. Para ello se debe:

1.- Acceder al menú Archivo > Preferencias > GUIDE

2.- Seleccionar Mostrar nombres en la paleta de componentes

3.- Seleccionar Ok

Ahora la ventana principal de GUIDE luce como muestra la Figura 6. En dicha figura se señaló con

un marco rojo la paleta de componentes.

Figura 6. Ventana principal de GUIDE mostrando los nombres en la paleta de componentes.

A continuación, listamos los componentes enmarcados en la Figura 6 con una breve descripción:

Push Button ( ): Se genera una acción al hacer click sobre él.

Slider ( ): Es una barra desplazable que puede ser movida con el mouse o usando las flechas.

Representa un rango de valores. La posición en la cual se encuentre la barra indica una posición

relativa en el rango de valores definido para la barra.

Radio Button ( ): Permite seleccionar una (y solo una) opción entre un grupo de alternativas.

Check Box ( ): Permite seleccionar una o varias opciones entre un grupo de alternativas.

Edit Text ( ): En este control, el usuario puede escribir o editar algún texto. Es uno de los controles

más utilizados para la entrada de datos.

Static Text ( ): Se utiliza para mostrar texto que el usuario no puede editar directamente.

Generalmente se usa para mostrar texto con fines informativos.

Pop-up Menu ( ): Muestra una lista desplegable de opciones permitiendo seleccionar uno de sus

elementos.

Listbox ( ): Es una lista que contiene una barra deslizable. Permite mostrar una lista de elementos

en la cual el usuario puede seleccionar uno o varios de ellos.

Toogle Button ( ): Genera una acción seleccionado/deseleccionado. Al presionar un botón de

este tipo, aparenta quedarse “hundido” indicando el estado seleccionado del mismo. Si se vuelve a

presionar regresa a su aspecto inicial, indicando el estado deseleccionado.

Table ( ): Corresponde a una tabla.

Axes ( ): Este control se utiliza para mostrar gráficos.

Panel ( ): Agrupa un conjunto de controles

Button Group ( ): Este panel solo se puede utilizar para agrupar radio buttons y toogle buttons.

En su interior se puede seleccionar solo un elemento (o un estado).

ActiveX Component ( ): Este componente permite mostrar controles ActiveX en la GUI. Pueden

ser utilizados solo en la plataforma Windows. Este control solo puede ser hijo de una figura, es decir,

no se puede colocar solo en la GUI, ni en un panel o un button group.

Para agregar un componente a nuestra GUI solo debemos arrastrarlo hacia la posición deseada en

el área de diseño. Cada vez que adicionamos un nuevo componente a nuestra interfaz, se genera

automáticamente código relacionado con el nuevo control en el fichero .m.

Cada componente tiene asociada un conjunto de propiedades y acciones (Callbacks). Para acceder

a ellas debemos agregar el componente al área de diseño y dar click derecho sobre él. Aparece un

menú como se puede ver en la Figura 7.

Figura 7. Menú contextual de un componente

Para acceder a las propiedades del componente basta con seleccionar la opción Property Inspector,

lo que hará que aparezca una nueva ventana donde se listan las propiedades. Otra forma de

visualizar las propiedades es a través de la barra de herramientas, como se verá más adelante.

Si seleccionamos la opción View Callbacks podemos ver un submenú donde se listan las acciones

definidas para el control seleccionado. Al hacer click en alguno de los callbacks, se generará en el

fichero .m la función donde se debe programar el comportamiento que se quiere lograr.

Barra de herramientas

La barra de herramientas se localiza en la parte superior de la ventana GUIDE. En la Figura 5 se

señala en azul esta barra. En ella encontramos varias opciones:

- Crear una nueva figura (una nueva GUI), abrir una existente o salvar la actual ( ).

- Cortar, pegar y copiar componentes, o deshacer y rehacer cambios ( ).

- Alinear objetos ( ). Esta herramienta es muy útil para lograr de forma rápida y sencilla que dos o

más objetos tengan la misma alineación. Al presionar este botón aparece la ventana que se muestra

en la Figura 8. Con ella podemos lograr que los componentes seleccionados se alineen vertical u

horizontalmente de diferentes maneras.

Figura 8. Ventana para alinear componentes.

- Editor de Menú ( ). Con esta herramienta podemos crear una barra de menú o menús

contextuales para nuestra aplicación.

- Editor de Orden de Tabulación ( ). Al seleccionar esta herramienta aparece una nueva ventana

donde es posible posicionar los controles en el orden en que se desee que sean seleccionados al

presionar la tecla Tab, mientras está corriendo la aplicación.

- Editor de Barra de Herramientas ( ). Al presionar este botón obtenemos una ventana donde es

posible definir una barra de herramientas para nuestra aplicación.

- Editor ( ). Nos lleva al fichero .m asociado a la figura.

- Inspector de propiedades ( ). Si se presiona este botón obtenemos una ventana donde se

muestran las propiedades del componente que se encuentre seleccionado en la GUI. Más adelante

daremos detalles acerca de esta herramienta.

- Explorador de objetos ( ). Al presionar este botón aparece una ventana donde se listan de

forma jerárquica todos los objetos que pertenecen a la GUI. Si damos click encima de alguno de los

nombres que se muestran, el componente se seleccionará en la GUI. Esta herramienta es de gran

utilidad cuando tenemos controles que por su tamaño o localización en la ventana son difíciles de

seleccionar con el mouse.

- Ejecutar Figura ( ). Al presionar este botón, ejecutamos la aplicación.

Inspector de Propiedades

El inspector de propiedades es una de las herramientas más utilizadas de GUIDE. Se usa para

modificar de forma sencilla las propiedades del control que se encuentra activo en la GUI.

Podemos acceder a él presionando el botón Property Inspector ( ) de la barra de herramientas o

seleccionando el menú Property Inspector que se obtiene al dar click derecho sobre un componente.

Las propiedades listadas pueden variar en dependencia del control seleccionado debido a la

naturaleza de los mismos. Un botón y un panel se utilizan para fines diferentes, por lo que sus

propiedades no deben ser las mismas.

La Figura 9 muestra un fragmento del inspector de propiedades con las propiedades asociadas al

botón que añadimos al GUI con anterioridad.

Figura 9. Inspector de propiedades para el botón agregado

Cada control posee propiedades asociadas al diseño (como por ejemplo el color de fondo, tipo de

fuente, tamaño de fuente), a la geometría (en Position se puede definir la posición en deseamos que

tenga el control, así como su ancho y altura), a los datos (donde se especifica, por ejemplo, el texto

que tendrá el control, el valor, etc.), al funcionamiento (en esta clasificación encontramos los

callbacks que pueden ser accedidos también a través del inspector) y las propiedades base, que son

las comunes a todos los componentes.

En la siguiente tabla se listan las propiedades más usadas de los componentes.

Propiedad Valor Descripción

Enable on, inactive, off. El valor por defecto es on.

Determina si el control está disponible para el usuario

Max Escalar. El valor por defecto es 1.

Valor máximo. La interpretación de esta propiedad depende del componente.

Min Escalar. El valor por defecto es 0.

Valor mínimo. La interpretación de esta propiedad depende del componente.

Position Vector de 4 elementos [distancia desde la izquierda, distancia desde abajo, ancho y alto]

Tamaño del componente y su localización relativa al componente padre.

String Una cadena de caracteres. Puede ser también un cell array o un array de caracteres

Etiqueta del componente. En el caso de los pop-up menus y list boxes es la lista de sus elementos.

Units Caracteres, centímetros, pulgadas, normalizado, pixeles, puntos. El valor por defecto es caracteres.

Unidades de medida utilizadas para interpretar los valores de Position

Value Escalar o vector Valor del componente. La interpretación de esta propiedad depende del componente.

Una de las propiedades más importantes y que es común a todos los componentes es Tag, donde

se especifica el nombre del componente. Por ese nombre es que nos vamos a referir a él en el

momento de realizar la programación. Es por ello que es recomendable cuando adicionamos un

nuevo control a la GUI modificar esta propiedad y ponerle un valor que podamos recordar

fácilmente con posterioridad.

Área de diseño

En esta área es donde se van a colocar los componentes que vamos a utilizar en el diseño de la

aplicación. Es posible modificar su tamaño arrastrando el cuadrado que se encuentra en la parte

inferior derecha (marcado en rojo en la Figura 10). Nótese, que mientras se mueve el cursor en esta

área, se actualiza la posición del cursor en la barra de estado (como se muestra en azul en la Figura

10).

Figura 10. Cambiar las dimensiones del área de diseño

Callbacks

Como mencionamos con anterioridad, un callback define una acción a realizarse. Por ejemplo, en el

caso del botón, en la función que se genera en el fichero .m al seleccionar Callback en el insoector

de propiedades, especificamos los pasos que se quieren seguir al presionar el botón. Estos pasos

pueden ser desde simplemente cerrar la aplicación (donde solo se especificaría el comando close de

MATLAB) hasta realizar un número de operaciones que involucre obtener información de otros

componentes que haya en la GUI.

Por eso, es importante conocer, cómo se puede obtener información de los diferentes componentes

de la aplicación.

Sentencias get y set

Entre los parámetros que recibe un callback encontramos hObject y handles. hObject es un

identificador del componente que llamó a la función en cuestión y handles es una estructura que

contiene la información de todos los componentes de la figura, además de variables creadas y

almacenadas previamente por el usuario en dicha estructura. Es decir, en un callback podemos

obtener y modificar los valores de los demás componentes de la figura. Esto es posible hacerlo

utilizando las sentencias get y set.

Por ejemplo, hagamos un GUI que dados dos números sume su valor. Pongamos en el GUI dos edit

text con Tags num1_edit y num2_edit de donde obtendremos los valores entrados por el usuario.

Agreguemos además un static text con Tag result_text, donde mostraremos el valor calculado y un

botón con Tag add_button. La Figura 11 muestra un posible diseño de esta aplicación.

Figura 11. Diseño de GUI para sumar dos números.

La Figura 12 muestra la implementación del callback del botón.

Figura 12. Callback del botón add_button.

En las líneas 77 y 78 se obtiene el valor de la propiedad String de los componentes num1_edit y

num2_edit respectivamente usando la sentencia get. Como dichos valores son cadenas de

caracteres, es necesario convertirlos a números para poder realizar la operación suma. Esto lo

hacemos utilizando la función de MATLAB str2double que recibe como parámetro una cadena de

caracteres y devuelve el valor numérico correspondiente.

En la línea 80 se obtiene el resultado de sumar los valores numéricos que hay en los componentes

con Tags num1_edit y num2_edit. Finalmente en la línea 81, se asigna el valor de la suma a la

propiedad String del componente result_text usando la sentencia set. Nótese que en el momento

de asignar el valor de la suma hay que convertir ese valor numérico a cadena de caracteres, ya que

la propiedad String solo acepta caracteres. Para ello se utiliza la función num2str de MATLAB.

Ejemplo

A continuación, crearemos una aplicación usando GUIDE que dadas las coordenadas x y y de dos

puntos, dibuje la línea que los une. Para realizar esta aplicación, utilizaremos algunos de los

componentes antes mencionados.

Utilizando axes, panel, edit texts y botones

Para comenzar nuestro diseño, accedemos a GUIDE y creamos una nueva ventana a la cual

llamaremos DibujarLinea.

En el área de diseño colocamos un componente axes y cuatro edit text dentro de un panel. Los edits

contendrán las coordenadas x y y de los dos puntos que serán unidos con una línea. Estas

coordenadas serán dadas por el usuario. Además, agregamos dos botones, cuyas funcionalidades

serán cerrar la aplicación y dibujar la línea respectivamente.

La Figura 13 muestra un posible diseño de la aplicación.

Figura 13. Diseño de la pantalla principal.

Modificamos la propiedad String de los edits a través del inspector de propiedades, para dar valores

por defecto a estos componentes como se muestra en la Figura 14 (a), (b), (c) y (d).

(a) (b)

(c) (d)

Figura 14. Asignación de valores por defecto a los edits con Tags

(a) x1_edit, (b) y1_edit, (c) x2_edit y (d) y2_edit.

El valor introducido en los edits de coordenadas debe ser numérico. Es por ello que se hace

necesario implementar una función que verifique que el valor dado por el usuario sea el correcto.

Para ello implementamos la función IsNumber que recibe como parámetro un objeto y checa que la

cadena introducida sea un número. En caso contrario se muestra un diálogo informando que la

entrada no es la correcta y coloca en el edit su valor por defecto. Además, en los callbacks de los

cuatro edits debemos llamar a dicha función para que cada vez que el usuario modifique su valor se

realice el chequeo.

La implementación de la función IsNumber se muestra en la Figura 15 (a), así como el callback del

componente x1_edit (Figura 15 (b)). Para los demás edits se realiza el mismo llamado, variando

solamente el parámetro correspondiente al valor por defecto.

(a)

(b)

Figura 15. (a) Implementación de la función IsNumber. (b) Llamado a la función IsNumber desde el

callback de x1_edit.

Pasemos ahora a implementar la funcionalidad de los botones. En el caso del botón Cerrar, lo que

deseamos es que al presionarlo se cierre la aplicación, por lo tanto, solo basta con poner la

instrucción close de MATLAB, como se muestra en la línea 73 de la Figura 16.

En el caso del botón Dibujar debemos primero obtener los valores entrados por el usuario en los

edits con etiquetas X1, Y1, X2 y Y2. Colocamos las instrucciones para dibujar dentro de una función

(Graph) ya que posteriormente necesitaremos llamar a dicha función en otros lugares. Por lo tanto,

en el callback del botón Dibujar, simplemente llamamos a la función, como se muestra en la línea

76 de la Figura 16.

Para acceder al valor de los edits usamos la sentencia get especificando el nombre del edit y la

propiedad que deseamos obtener (en este caso String). En la línea 79 de la Figura 16 podemos ver

el uso de la sentencia get para obtener el texto de x1_edit. Como el valor leído es una cadena de

caracteres (string), debemos convertirlo a un valor numérico. Esto se hace utilizando la función de

MATLAB str2double como se puede observar en la línea 80. Estas dos instrucciones pueden ser

realizadas en una sola línea de código como se muestra en las líneas 82, 83 y 84. En el caso del

x1_edit las separamos en dos para una mejor comprensión del código.

Ya tenemos los valores de los puntos, ahora solo debemos dibujar la línea. Para ello utilizamos la

función de MATLAB plot, como se muestra en la línea 86.

Figura 16. Implementación de los callbacks de los botones Dibujar y Cerrar y la función Graph.

Si ejecutamos la aplicación, ponemos valores en los edits y presionamos el botón Dibujar, podremos

ver la línea que une a los dos puntos especificados, como se muestra en la Figura 17.

Figura 17. Dibujar línea

Hasta aquí tenemos una aplicación que cumple con el objetivo propuesto. En lo adelante

agregaremos opciones que nos permitirán usar otros componentes de GUIDE para interactuar con

el gráfico. Para ello explicamos a continuación, algunas de las funcionalidades que brinda la función

plot de MATLAB, las cuales nos permitirán personalizar el gráfico. Si desea conocer con mayor

detalle todas las alternativas de esta función, puede consular la documentación de MATLAB.

Función plot de MATLAB

La función plot permite hacer un ploteo lineal de puntos, es decir, dados un conjunto de puntos, los

une con líneas respetando el orden en que son dados. Existen varias sobrecargas para esta función:

plot (X, Y) -> plotea el vector Y contra el vector X. Es decir, si X = [x1 x2 x3] y Y = [y1 y2 y3], la

instrucción plot (X, Y) trazará una línea que une a (x1, y1) con (x2, y2) y (x2, y2) con (x3, y3). En el

caso de que X y Y sean matrices, se obtienen tantas líneas como filas tengan las matrices.

Es posible especificar otras opciones como la forma del marcador para señalar los puntos, su tamaño

y color de relleno. También es posible definir el tipo de línea a utilizar (continua, discontinua,

punteada), así como su ancho, color, etc. Estas propiedades se especifican como parámetros de la

función plot.

La función plot recibe como tercer parámetro una cadena compuesta por (a lo sumo) tres columnas:

la primera corresponde al color que se desea utilizar, la segunda a la forma del marcador con el cual

se identifican los puntos y la tercera al tipo de línea. A continuación, se muestra una tabla con los

valores que pueden tomar dichas columnas.

Color Marcador Línea

b -> azul . -> punto - -> continua g -> verde o -> círculo :-> punteada r -> rojo x -> marcador X -. -> línea-punto c -> cyan + -> cruz -- -> discontinua m -> magenta * -> estrella

Si no se especifica ninguna de las opciones listadas arriba no se dibuja la

línea

y -> amarillo S -> cuadrado k -> negro d -> diamante w -> blanco v -> triángulo (abajo)

^ -> triángulo (arriba) < -> triángulo (izquierda) > -> triángulo (derecha) p -> pentágono h -> hexágono

Además, es posible definir Propiedades, como por ejemplo ‘LineWidth’ para especificar el ancho de

la línea, ‘MarkerEdgeColor’ para especificar el color del contorno del marcador, ‘MarkerFaceColor’

el color de relleno del marcador y ‘MarkerSize’ para su tamaño.

Mejorando el diseño de la aplicación

Agreguemos un pop-up menú de donde se podrán escoger entre distintas formas para los puntos.

Para añadir los elementos del pop-up menú, debemos acceder al inspector de propiedades y buscar

la propiedad String. Luego escribimos los elementos, uno por línea y presionamos Ok como se

muestra en la Figura 18.

Figura 18. Agregando elementos al pop-up menú de los marcadores.

Arrastremos también a nuestra aplicación un check box que indicará si se muestran o no los puntos

en el gráfico, un slider para controlar el grosor de la línea y un button group con dos radio buttons

que indiquen si se muestran o no los ejes coordenados. En la Figura 19 podemos ver una propuesta

para el nuevo diseño de la ventana.

Figura 19. Nuevo diseño de la aplicación.

Programemos la funcionalidad del pop-up menú, al cual le pusimos como Tag maker_popupmenu.

La idea es que, en el momento de graficar, verifiquemos cuál es el marcador seleccionado para así

poder utilizar dicha información en la función plot. Lo primero que debemos conocer es cuál es el

elemento seleccionado en el pop-up meú. Para ello obtenemos la lista de todos los elementos

utilizando la setentencia get y la propiedad String (línea 86). Luego obtenemos el índice (o sea, la

posición que ocupa en la lista de elementos) del elemento seleccionado usando la sentencia get y

la propiedad Value (línea 87) y por último agregamos una sentencia switch-case que nos permitirá

almacenar el símbolo correspondiente al marcador, el cual será utilizado en la función plot (líneas

88-103). Como vimos anteriormente, es posible definir el marcador que se desea utilizar en el

momento de graficar, especificándolo en la segunda columna del tercer parámetro de la función

plot. Nuestra línea simpre va a ser azul y continua, por eso la primer y tercera columnas de dicho

parámetro van a tener los valores ‘b’ y ‘-’ respectivamente. Luego, solo debemos concatenar el

carácter obtenido del pop-up menú que representa la forma del marcador. Para concatenar las tres

cadenas antes mencionadas utilizamos la función de MATLAB strcat que dados varias cadenas las

une formando una sola (como se ve en la línea 105). Agregamos además las propiedades

‘MarkerFaceColor’, ‘MarkerEdgeColor’ y el valor ‘r’ para rellenar de rojo el marcador y así resaltar

más los puntos. Por lo tanto, la función Graph quedaría como muestra la Figura 20.

Figura 20. Implementación de la función Graph usando el valor seleccionado en el pop-up menú

Marcadores.

De la forma en que se encuentra la implementación hasta este momento, debemos seleccionar un

valor en el pop-up menú y al presionar el botón Dibujar se pinta el gráfico con el marcador

seleccionado. Si el comportamiento deseado es que el gráfico se actualice en cuanto se cambie el

valor en el pop-up menú, entonces es necesario llamar a la función Graph en el callback del pop-up

menú, como muestra la Figura 21.

Figura 21. Callback del pop-up menu.

El check box agregado en la aplicación permitirá mostrar u ocultar los puntos. Si se encuentra

marcado, significa que se mostrarán los puntos, en otro caso solo se podrá visualizar la línea. Dicho

check box tiene Tag show_points_Checkbox. Lo primero que debemos conocer es el estado del

check box (marcado/desmarcado). Usando la sentencia get y la propiedad Value almacenamos en

la variable state dicho valor (línea 86). Si el estado es marcado, el valor de state será 1, si no será 0.

Lo que sigue puede implementarse de varias maneras. Nosotros utilizaremos la sentencia if para

preguntar por el valor de la variable state. Si es 0 asignamos a marker el valor vacío ya que, si no se

especifica marcador en la función plot, entonces no se mostrarán los puntos. Si no, obtenemos el

valor de la variable marker como mostramos anteriormente (líneas 87-108). Podemos encontrar la

implementación descrita en la Figura 22.

Figura 22. Implementación de la función Graph teniendo en cuenta el valor seleccionado en el

check box.

Al igual que en el caso del pop-up menú, si se desea ver el cambio en el gráfico en el mismo momento

en que se cambie el estado del check box, se debe incluir un llamado a la función Graph en el callback

de show_points_Checkbox.

El slider incluido en el diseño es el encargado de controlar el grosor de la línea que se dibuja. Lo

primero es definir el rango de valores que va a alcanzar el componente, así como su valor por

defecto. Para ello seleccionamos el slider (al cual le pusimos como Tag line_width_slider),

mostramos el inspector de propiedades y modificamos los valores de las propiedades Max, Min y

Value como se muestra en la Figura 23.

Figura 23. Definir los valores de las propiedades Max, Min y Value del slider.

De esta manera estamos diciendo que el grosor de la línea va a estar entre 1 y 10, y que su valor por

defecto será 2. Por otra parte, en la función Graph debemos obtener el valor seleccionado en el

slider (línea 110 de la Figura 24). Eso se logra utilizando la sentencia get y la propiedad Value. Por

último, agregamos a la función plot la propiedad ‘LineWidth’ y como valor especificamos el valor

obtenido (línea 113). La Figura 24 muestra las instrucciones adicionadas a la función Graph.

Figura 24. Obtener valor del slider y graficar utilizando dicha información.

Al igual que en los componentes agregados anteriormente, si se desea visualizar el cambio en el

gráfico al mismo tiempo que se modifica el valor del slider, en el callback de line_width_slider se

debe hacer un llamado a la función Graph.

Por último, incluiremos la funcionalidad de los radio buttons. Los radio buttons nos van a indicar si

se muestran o no los ejes coordenados en el gráfico. Si se selecciona el que tiene la etiqueta Mostrar,

se graficarán los ejes, si se selecciona el que tiene la etiqueta Ocultar, los ejes no serán graficados.

Al igual que en los componentes anteriores, debemos conocer cuál es el radio button que está

activo. Para ello usamos la sentencia get y la propiedad SelectedObject del button group que en

nuestro ejemplo le pusimos el Tag showAxis_buttonGroup (línea 115 de la Figura 25). Después,

debemos obtener el texto del radio button seleccionado, de esta forma sabremos cuál de los dos es

el que está marcado. Esto lo logramos empleando la sentencia get y la propiedad String sobre el

objeto que obtuvimos anteriormente, como se muestra en la instrucción 116 de la Figura 25.

Finalmente, comparamos la cadena del componente seleccionado con uno de los textos. En la línea

117 de la Figura 25 se chequea si el texto es Ocultar, y en ese caso pasamos a ocultar los ejes

coordenados (líneas 118 y 119).

Figura 25. Mostrar u ocultar los ejes coordenados, dependiendo del valor seleccionado en el

button group.

Al igual que con los componentes anteriores, si se desea ver el efecto inmediato de la selección de

los radio buttons en el gráfico, es necesario llamar a la función Graph en el callback

SelectionChangeFcn de showAxis_buttonGroup, como muestra la Figura 26 (a) y (b).

(a)

(b)

Figura 26. (a) Seleccionar el callback SelectionChangeFcn, (b) llamado a la función Graph.

La Figura 27 muestra como quedó finalmente el código de la función Graph, teniendo en cuenta la

funcionalidad de los componentes agregados.

Figura 27. Código final de la función Graph teniendo en cuenta el funcionamiento de los

componentes utilizados en el diseño de la aplicación.

Conclusiones

En el documento se explicaron los pasos a seguir para crear una Interfaz Gráfica de Usuario (GUI) en

MATLAB haciendo uso de GUIDE. Se dio a conocer el funcionamiento de las herramientas de GUIDE

y se listaron y se ejemplificó la forma de acceder y modificar el valor de sus componentes. Al final

se implementó paso a paso un ejemplo donde están involucrados los principales componentes de

GUIDE.