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. Determina si el control está disponible
El valor por defecto es on. para el usuario
Max Escalar. Valor máximo. La interpretación de esta
El valor por defecto es 1. propiedad depende del componente.
Min Escalar. Valor mínimo. La interpretación de esta
El valor por defecto es 0. propiedad depende del componente.
Position Vector de 4 elementos [distancia Tamaño del componente y su localización
desde la izquierda, distancia desde relativa al componente padre.
abajo, ancho y alto]
String Una cadena de caracteres. Puede ser Etiqueta del componente. En el caso de los
también un cell array o un array de pop-up menus y list boxes es la lista de sus
caracteres elementos.
Units Caracteres, centímetros, pulgadas, Unidades de medida utilizadas para
normalizado, pixeles, puntos. interpretar los valores de Position
El valor por defecto es caracteres.
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
y -> amarillo S -> cuadrado
k -> negro d -> diamante
w -> blanco v -> triángulo (abajo)
^ -> triángulo (arriba)
< -> triángulo (izquierda)
> -> triángulo (derecha) Si no se especifica ninguna de las
p -> pentágono opciones listadas arriba no se dibuja la
h -> hexágono línea

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.