Interfaz Gráfica de Usuario

Interfaz gráfica de usuario (GUI)
Matlab proporciona herramientas para diseñar interfaces de usuario personalizadas mediante el

editor de diseño GUIDE. En la Figura 1 se ilustra un ejemplo de una GUI. Esta guía introduce los
elementos básicos de las GUIs en MATLAB. La guía no contiene una descripción completa de los
componentes o características de una GUI, pero proporciona los requerimientos básicos para crear
GUIs funcionales para los programas.
Figura 1. Ejemplo de una GUI en MATLAB.
CÓMO FUNCIONA UNA GUI

Los tres elementos principales para crear una GUI en MATLAB son:
1. Componentes. Cada ítem en una GUI de MATLAB (botón, menú, cuadro de texto, etc.) es
un componente gráfico. Los tipos de componentes incluyen controles gráficos, elementos
estáticos, menús y ejes.
2. Figura. Los componentes de una GUI deben estar organizados en una figura, que es una
ventana en la pantalla del computador.
3. Callbacks. Finalmente, debe haber alguna forma de ejecutar una acción si el usuario da clic
en un botón de la interfaz o escribe información en un cuadro de texto. Estos son eventos
y MATLAB debe responder a cada evento con una función. Por ejemplo, si el usuario de la
interfaz da clic en un botón, ese evento debe ocasionar que MATLAB ejecute el código
correspondiente a la función del botón que se ha presionado. El código ejecutado en
respuesta a un evento se conoce como call back. Debe haber un call back para implementar
la función de cada componente gráfico en la GUI. Los elementos básicos de una GUI se
resumen en la Tabla 1 y en la Figura 2 se muestra un ejemplo.
Tabla 1. Algunos de los componentes básicos de una GUI
ELEMENTO DESCRIPCIÓN
Pushbutton Componente gráfico que se activa momentáneamente al dar clic sobre él con el
botón del mouse y se desactiva al soltar el botón.
Toggle Componente gráfico que puede tomar dos posiciones, “on” y “off”. Se activa al dar
Button clic sobre él y se desactiva con otro dar clic.
Radio Es un tipo de Toggle Button que parece un círculo pequeño con un punto en el
Button medio cuando está activo.
Check Box Es un tipo de Toggle Button que luce como un pequeño cuadro con una marca de
verificación en él cuando está activo.
Edit Box Muestra un texto y permite que el usuario lo modifique. Se usan para obtener
información del usuario.
List Box Es un control gráfico que muestra una serie de textos. El usuario puede seleccionar
uno de ellos dando clic sobre él.
Popup Es un control gráfico que muestra una serie de textos como respuesta a un clic.
menus
Slider Es un control gráfico que permite ajustar el valor de una variable de una forma
suave y continua a medida que se arrastra el control de una barra con el mouse.
Panel Es un elemento estático que consiste en un cuadro rectangular. Se usan para
agrupar controles.
Text Field Crea un texto estático localizado en algún punto de la figura.
Button Crea un rectángulo que permite agrupar botones de tipo Radio Button.
Group
Axes Crea una nueva serie de ejes para visualizar datos en ellos.
Figura 2. Un ejemplo de los elementos en una GUI de MATLAB.

DISEÑO DE UNA GUI
Las GUIs de MATLAB se crean usando una herramienta llamada guide (GUI Development
Enviroment, GUIDE). Esta herramienta permite al programador presentar la interfaz, seleccionando
y alineando los componentes que va a ubicar en ella. Una vez los componentes están en su lugar, el
programador puede editar sus propiedades: nombre, color, tamaño, fuente, texto a mostrar, etc.
Cuando se guarda una GUI, se crea un programa que incluye un esqueleto de las funciones que el
programador puede modificar para controlar el comportamiento de la GUI. Cuando se ejecuta una
GUI, se crea el Editor de presentaciones que se muestra en la Figura 3. El área en blanco con
cuadrícula es el área de presentación, donde el programador puede organizar los elementos de la
GUI. La ventana del editor de presentación tiene una paleta en el lado izquierdo con los posibles
elementos que se pueden insertar en el área. Para insertar cualquiera de ellos, basta con dar clic y
arrastrarlo hacia el área de presentación. La parte superior de la ventana tiene una barra con una
serie de herramientas de gran utilidad que permiten que el usuario distribuya y alinee los
componentes de la GUI, modifique sus propiedades, añada menús a las GUI u otras opciones.
Figura 3. Ventana de la herramienta guide.
Los pasos básicos para crear una GUI son:
1. Definir los elementos requeridos para la GUI y qué función tendrá cada elemento. Se debe
hacer una presentación inicial de los componentes en una hoja de papel.
2. Se usa la herramienta guide de MATLAB para ubicar los elementos en una figura. El tamaño
de la figura y la alineación o espaciado de los componentes se debe ajustar usando las
herramientas de la parte superior.
3. Se usa la el Inspector de Propiedades para dar a cada componente un nombre, además de
especificar las características de cada uno, como el color o el texto que muestra.
4. Se guarda la figura en un archivo. Cuando esto se hace, se crean dos archivos en el disco
con el mismo nombre, pero diferentes extensiones. Un archivo .fig que contiene los
elementos de la GUI que se crearon y un M-file que contiene un esqueleto del código para
cada elemento en la GUI.
5. Se escribe el código en el M-file para controlar el comportamiento asociado con cada
elemento (funciones callback).
CONTADOR DE CLICS
Como ejemplo de estos pasos, se va a considerar una GUI simple que contiene un solo botón
(un push button) y un texto. Cada vez que se da clic en el botón, el texto se actualiza mostrando
el número total de veces que se ha dado clic en el botón desde que se inició la GUI.
Paso 1. El diseño de esta GUI es muy simple. Contiene un botón y un campo de texto. El callback
del botón debe hacer que el número que muestra el texto se incremente en uno cada vez que
el botón es presionado. Un bosquejo de la GUI que se quiere está en la Figura 4.
Figura 4. Diseño de una GUI con un Push Button y un texto estático.
Paso 2. Se abre la herramienta guide de MATLAB presionando el botón que está en la

parte superior de la barra de herramientas del programa. También se puede acceder
escribiendo guide en la ventana de comandos de MATLAB y presionando ENTER: >> guide
Al dar clic en esta herramienta se abre la ventana mostrada en la Figura 5. Se selecciona la
opción Blank GUI (Default) y se da clic en OK.
Figura 5. Ventana de inicio rápido de la herramienta guide.
Cuando se presiona OK, aparece la ventana de la herramienta guide, con los elementos que se
explicaron en la Figura 3. Ahora se procede a ubicar en el área de diseño los elementos que se
necesitan. Del menú de la izquierda se selecciona un texto estático (Static Text) y se arrastra
con el cursor hacia el área de diseño, como muestra la Figura 6. De la misma forma se arrastra
un Push Button, hasta obtener el resultado mostrado en la Figura 7.
Figura 6. Insertando un Static Text en el área de diseño de la GUI.

Figura 7. GUI que incluye un Static Text y un Push Button.
Es necesario también restablecer el tamaño del área de diseño, que en últimas será el tamaño
final de la GUI. Esto se hace arrastrando el pequeño cuadrado negro en la esquina inferior
derecha del área de diseño hasta que este tenga el tamaño deseado, tal como se ilustra en la
Figura 8. El resultado se muestra en la Figura 9.
Figura 8. Cambiando el tamaño de la interfaz.
Figura 9. Resultado luego de cambiar el área de la GUI.
Paso 3: Para especificar las propiedades del Push Button, se da doble clic en el Botón. O se
selecciona el Push Button y se da clic en el ícono de inspector de propiedades que se muestra
señalado en la Figura 3. Alternativamente también puede darse clic derecho en el botón y
seleccionar la opción “Inspect Properties”. La ventana del inspector de propiedades aparece tal
como se muestra en la Figura 10. Note que esta ventana muestra cada propiedad disponible
para ese botón y permite cambiar los valores.
Figura 10. El inspector de propiedades mostrando las propiedades del Push Button.
Para el pushbutton, se pueden especificar muchas propiedades como color (BackgroundColor),
tamaño de la letra (FontSize), tipo de letra (FontName), color del texto (ForegroundColor)
alineación del texto (HorizontalAlignment) y más. Sin embargo, es importante poner atención
a dos propiedades fundamentales: La propiedad String que contiene el texto que será
mostrado sobre el botón y la variable Tag, que contiene el nombre del botón. En este caso, la
propiedad String llevará el valor ‘clic aquí’ y la propiedad Tag llevará el nombre
‘MiPrimerBoton’, como se ilustra en la Figura 11 .
Figura 11. Parametrización del Push Button.
Para el cuadro de texto se deben cambiar las mismas propiedades. En este caso se le dará a la
propiedad String un valor de ‘Clics totales: 0’, y al Tag se le dará el valor ‘MiPrimerTexto’
Figura 12. Parametrización del static Text
Es posible también configurar las propiedades de la figura (del fondo) dando clic en un punto
cualquiera sobre el área de diseño de la GUI y con el inspector de propiedades se puede cambiar el
color, el nombre de la figura (este es el texto que se verá en la barra de título de la figura cuando se
ejecute la GUI), entre otras propiedades. El resultado final, luego de cambiar diversas propiedades
de los elementos se muestra en la Figura 13.
Figura 13. Resultado final luego de cambiar las propiedades de los elementos de la GUI.
Paso 4: Ahora se va a guardar el área con el nombre MiPrimerGUI. Se da clic en el botón Guardar y
se guarda en la carpeta que abre MATLAB por defecto. Esta acción automáticamente creará dos
archivos: MiPrimerGUI.fig y MiPrimerGUI.m. El archivo .fig contiene el GUI que se acaba de crear. El
M-file contiene un esqueleto del código para cada componente en la GUI. Cuando se guarda el
archivo, automáticamente se abre el editor de MATLAB con el archivo MiPrimerGUI.m. Una porción
del M-file se muestra en la Figura 14. Este archivo contiene la función MiPrimerGUI, además de unas
sub-funciones que implementan los callbacks de cada elemento dentro de la GUI. Cada función
callback corresponde a un elemento dentro de la GUI. Por ejemplo, si se da clic en un componente
de la GUI (como un botón), entonces la función callback del componente será llamada
automáticamente por MATLAB. El nombre de la función será el tag del elemento más el carácter
‘_Callback’. Por ejemplo, el nombre de la función callback para MiPrimerBoton será
‘MiPrimerBoton_Callback’, tal como lo muestra la Figura 15.
Figura 14. M-file correspondiente a la GUI que se está diseñando.
Figura 15. Parte del M-file que muestra la función del botón MiprimerBoton.
Paso 5: Ahora es necesario escribir el código de la sub-función MiPrimerBoton_Callback, es
decir, el código de la función que determina lo que sucederá cuando se dé clic en el botón. Esta
función debe incluir una variable que se incremente en uno cada vez que se dé clic en el botón
y luego debe mostrar el valor de esa variable en el cuadro de texto MiPrimerTexto.
Todo esto se resume en las siguientes líneas de comando que se deben escribir justo debajo
del renglón donde se declara la función MiPrimerBoton_Callback:
% --- Executes on button press in MiPrimerBoton. function

MiPrimerBoton_Callback(hObject, eventdata, handles)
% Se suma 1 al contador: contador = contador +1;
%se crea una variable tipo texto con el valor del contador str =
sprintf('Clics totales: %g',contador);
%se muestra el valor de la variable en el cuadro de texto:
set(handles.MiPrimerTexto,'string',str);
Cada vez que la función MiPrimerBoton_Callback se ejecuta (esto sucede cada vez que se da clic
en el botón) el contador se incrementa en uno. Finalmente, la función actualiza el texto
mostrado en la GUI, haciendo uso de la función set.
La variable contador que se usa en el código anterior no se ha definido en ninguna parte. Es

necesario inicializar este contador en cero en algún lugar del m-file, antes de que se ejecute la
función MiPrimerBoton_Callback. No puede hacerse en la misma función porque de hacerse así
el contador se reiniciaría cada vez que se da clic en el botón y no se incrementaría nunca.
En alguna parte inicial hay que definir que contador=0, de manera que esta instrucción se
ejecute solo una vez. Esto se hace en la función MiPrimerGUI_OpeningFcn. Esta función se
ejecuta una sola vez cuando se inicia la aplicación, de manera que es el momento indicado para
definir el valor inicial del contador.
Se debe entonces ubicar en el código la parte donde aparece esta función:
function MiPrimerGUI_OpeningFcn(hObject, eventdata, handles, varargin)
contador = 0;
Solo falta un detalle. Las variables que se usan dentro de una función, cualquiera sea esta, no
pueden ser usadas por otras funciones, pues son variables locales que solo puede leer y usar la
función, y que se desechan cada vez que la función termina de ejecutarse (de manera que ni la
misma función puede recordar el valor anterior de sus variables).
Esto significa que la variable contador va a desecharse cuando se acaba de ejecutar la función
anterior, y cuando se dé clic en el botón, la función MiPrimerBoton_Callback no podrá usar el
valor del contador.
Esto también significa que la misma función del botón, cuando se vuelva a pulsar el botón, ya
no recordará el valor anterior de la variable contador.
Para esto, cuando se está trabajando con GUIDE, como en este caso, se utiliza la palabra handles
para indicar que la variable necesita ser recordada y usada por otras funciones.
En otras palabras, si dentro de una función se va a definir una variable que se llama contador (o
se va a modificar) y se quiere que el valor de esa variable se guarde y pueda volver a usarse por
esa misma u otra función, se debe escribir lo siguiente:
handles.contador = 0; guidata(hObject,handles);
En el primer renglón se está definiendo quién es la variable, agregándole el texto “handles” para
identificarla como una variable que va a recordarse.
En el segundo renglón que siempre se escribe tal como está allí, se está dando la orden de
recordar todas las variables que lleven como prefijo la palabra “handles”.
Si se mira en el m-file, justo debajo de la función MiPrimerGUI_OpeningFcn, aparece ya el

texto guidata(hObject,handles), es decir que allí no hay que escribirlo porque ya está escrito.
El resultado final en esta parte del m-file es:
Igualmente hay que volver a la función del botón MiPrimerBoton_Callback, y colocar el prefijo
handles a la variable contador, así como usar la instrucción guidata(hObject,handles) para
indicar que se va a guardar el valor del contador.
Para probar el resultado, se da clic en el botón (Run figure) del guide (también se puede
escribir MiPrimerGUI en la ventana de comandos de MATLAB y presionar ENTER): Cuando el
usuario da clic en el botón, MATLAB automáticamente llama la función MiPrimerGUI, la cual a
su vez llama a la sub-función MiPrimerBoton_Callback. Esta función incrementa en uno la
variable contador y actualiza el valor en el cuadro de texto. El resultado se muestra en la Figura
16.
Figura 16. Probando la GUI en funcionamiento.
Un buen consejo para crear una GUI es primero organizar la figura, usar el inspector de propiedades
para establecer los tags y Strings de los diferentes elementos, así como el color y demás. Cuando se
tenga lista la figura, se pasa a editar las funciones en el M-file, añadiendo siempre comentarios que
describan el propósito de los componentes y de las funciones.
EJERCICIO: BOTÓN DE RESET
Un buen ejercicio es agregar un botón de Reset al programa anterior, de manera que cuando se dé
clic en el botón de Reset, el contador se reinicie en cero.
Figura 17. Inclusión del botón reiniciar.
BOTÓN ENCENDIDO O APAGADO
A continuación, se realizará un programa que utilice un botón de tipo Toggle, para entender el
funcionamiento de este tipo de elementos. El programa tendrá un botón y un cuadro de texto.
Cuando el botón esté presionado, el texto debe decir “Encendido”. Cuando el botón esté
desactivado, el texto debe decir “Apagado”.
Se crea un nuevo archivo, dando clic en el botón New Figure , que está en la parte superior de la
ventana de la herramienta GUIDE. En el nuevo archivo se arrastran hacia el área de dibujo un Toggle
Button y un Static Text:
Figura 18. Botón encendido apagado.
Se cambian las propiedades String (que contiene el texto que será mostrado sobre el objeto) y Tag
(que contiene el nombre del elemento). En este caso, la propiedad String del botón llevará el valor
‘BOTON’ y la propiedad Tag llevará el nombre ‘boton1’.
Figura 19. Configuración botón encendido apagado.
propiedad String un valor de ‘Apagado, y al Tag se le dará el valor ‘texto1’
Figura 20. Configuración botón encendido apagado.
Se cambia la apariencia de los objetos si se desea. Se guarda el archivo y se pasa a editar el M-file.
Se va a buscar directamente la parte del archivo que contiene la función boton1_callback:
Figura 21. Función del boton1.

Ahora, se debe comenzar a determinar que lo que se requiere del programa. Se necesita que
cuando el botón esté activo, se escriba un texto que diga “Encendido” y que cuando el botón esté
inactivo se escriba un texto que diga “Apagado”.
La pregunta es, ¿cómo se sabe si el botón está activo o inactivo?
En este tipo de botones puede tomar dos valores, un valor máximo y un valor mínimo. El botón toma
el valor máximo cuando está activo (hundido) y toma el valor mínimo cuando está inactivo (suelto).
De manera que lo que se debe hacer es averiguar cuál es el valor del botón y compararlo con su
valor máximo. Si el valor del botón es igual al valor máximo, se dice que el botón está encendido y
si no, se dice que está apagado.
Para averiguar el estado del botón, existe la función que se llama get. Incluso, si se pone atención,
en el M-file, debajo del renglón donde se define la función para el botón, hay una serie de
comentarios y entre ellos hay uno que dice (Ver la Figura 21):
% Hint: get(hObject,'Value') returns toggle state of boton1

Cada vez que se vea un comentario que comienza con Hint, se debe poner atención, pues se trata
de una ayuda sobre la forma en que se puede conseguir información sobre el elemento al que
pertenece la función.
En este caso la ayuda dice que si se escribe get(hObject, ‘Value’), el resultado será el estado del
boton1.
Se va entonces a escribir esto, y a guardar el valor en una variable:
function boton1_Callback(hObject, eventdata, handles)

valor = get(hObject,'Value');
Lo que se acaba de hacer fue averiguar cuál es el valor actual del boton1 y guardar este valor en
una variable llamada valor.
Ahora se necesita saber cuál es el valor máximo que puede tomar boton1, para compararlo con el
valor actual del botón y saber si el botón está o no activo. Para conocer el valor máximo del botón
se escribe (justo debajo del renglón anterior):
maximo = get(hObject,'Max');
Ahora se debe hacer una comparación. Esto se hace con if:
if valor==maximo
set(handles.texto1,'string','Encendido') else
set(handles.texto1,'string','Apagado') end
Lo que se está haciendo es, primer comparar si el valor del botón es igual al valor máximo del botón.
Si esto se cumple, con la función set, se escribe en el cuadro de texto (que se llamo texto1) la palabra
‘Encendido’. Si esto no se cumple, se escribe en el cuadro de texto la palabra ‘Apagado’. A
continuación se muestra el código completo:
function boton1_Callback(hObject, eventdata, handles)
% Se averigua el valor actual del botón

% Se averigua el valor máximo que puede tomar el botón

maximo = get(hObject,'Max');
% Se determina si el valor del botón es igual al máximo

if valor==máximo
%si se cumple, se escribe Encendido en el cuadro de texto
set(handles.texto1,'string','Encendido')
else
% Si no se cumple, se escribe Apagado en el cuadro de texto
set(handles.texto1,'string','Apagado') end
Se puede probar el funcionamiento de la interfaz:
Ahora, solo para comprobar que los botones tipo Toggle son equivalentes a los Radio Button o a los
Check Box, se reemplazará el botón por otro tipo y se comprobará que funciona en la misma forma.
Para reemplazar el botón, se da doble clic sobre él para que se abra el editor de propiedades. En el
editor se busca la propiedad Style, como muestra la Figura 22.
Figura 22. Propiedad Style del botón.

Inicialmente se cambiará el estilo del botón por un radiobutton, como muestra la Figura 23. Se debe
comprobar el funcionamiento del botón con esta configuración para corroborar que su
comportamiento es idéntico al caso en que se tenía el botón tipo Toggle.
Figura 23. Se cambia la propiedad Style del botón por el tipo radiobutton.
Se repiten los pasos anteriores para comprobar el funcionamiento con un botón tipo Check
Box, como muestra la Figura 24. Se debe comprobar el funcionamiento del botón con esta
configuración para corroborar que su comportamiento es idéntico al anterior.
Figura 24. Se cambia la propiedad Style del botón por el tipo checkbox.
SUMADORA
Ahora se va a realizar una sumadora. Cree un nuevo archivo y disponga los elementos que se
muestran en la Figura 25. Asigne las propiedades como se indica en la figura.
Figura 25. Elementos necesarios para realizar la sumadora

Guarde el archivo. A continuación está el código de los callbacks para cada elemento con su
explicación.
function texto1_Callback(hObject, eventdata, handles)
% Se averigua el contenido escrito en el cuadro de texto 1 y se almacena

% este valor en la variable handles.a
handles.a = get(hObject,'String');
% La información en la variable handles.a es de tipo texto (string) se %

convierte a tipo número con la función str2double:
handles.a = str2double(handles.a);
% Se almacena la información de las variables handles para poder usarlas

en % otra parte del archivo
guidata(hObject, handles);

% este valor en la variable handles.b.
handles.b = get(hObject,'String');
% La información en la variable handles.b es de tipo texto (string) se %

handles.b = str2double(handles.b);

% --- Executes on button press in sumar.

function sumar_Callback(hObject, eventdata, handles)
% Se suman las variables handles.a y handles.b que contienen la

información % escrita en los cuadros de texto
suma = handles.a+handles.b;
% se escribe el resultado de la suma en el cuadro de texto "respuesta"

set(handles.respuesta, 'String', suma)
BARRA DE DESLIZAMIENTO
Lo siguiente que se realizará es un GUI con una barra de deslizamiento (slider) y un cuadro de texto
que muestre el valor actual de la barra.
Se crea un nuevo archivo, dando clic en el botón New Figure , que está en la parte superior de
la ventana de la herramienta GUIDE. En el nuevo archivo se arrastran hacia el área de dibujo un
Slider y un Static Text:
Se cambian las propiedades String (que contiene el texto que será mostrado sobre el objeto) y Tag
(que contiene el nombre del elemento). En este caso, la propiedad String del slider llevará el valor
‘slider’ y la propiedad Tag llevará también el nombre ‘slider’.
En el inspector de propiedades, se tiene también para el slider dos propiedades: Max y Min. En estas
se pueden indicar los valores máximo y mínimo de esta barra de deslizamiento. Cuando la barra se
encuentre a la izquierda tomará el valor mínimo y cuando se encuentre a la derecha tomará el valor
máximo.
propiedad String un valor de ‘0’, y al Tag se le dará el valor ‘texto’.
Se cambia la apariencia de los objetos si se desea. Se guarda el archivo y se pasa a editar el M-file.
Se va a buscar directamente la parte del archivo que contiene la función slider_callback:
Figura 26. Función del boton1.
Ahora, se debe comenzar a determinar que lo que se requiere del programa. Se necesita que cuando
se mueva la barra de deslizamiento con el cursor, el texto muestre el valor correspondiente a la
posición de la barra.
Lo primero es saber cuál es el valor de la barra, para poner este valor en el cuadro de texto. Para
obtener el valor de la barra se usa la función get y para escribir el valor en el cuadro de texto, se usa
la función set. El código sería el siguiente:
% --- Executes on slider movement. function slider_Callback(hObject,

eventdata, handles)
% se obtiene el valor de la barra y se almacena en la variable valor
% se lleva este valor al cuadro de texto

set(handles.texto,'String',valor)
Se puede probar el funcionamiento de la GUI creada:
OPCIÓN 1, 2 Ó 3
El ejercicio que se quiere realizar a continuación pretende insertar un grupo de botones, que
contenga 3 botones tipo “Radio Button”. Además del grupo de botones, deberá haber un cuadro de
texto estático. Si se activa el primer botón, el texto debe decir “opción 1”. Si se activa el segundo
botón, el texto debe decir “Opción 2” y si se activa el tercer botón, el texto debe decir “Opción 3”.
Se crea un nuevo archivo, dando clic en el botón New Figure , que está en la parte superior de la
ventana de la herramienta GUIDE. En el nuevo archivo se arrastra hacia el área de dibujo un Button
Group:
Luego se da doble clic sobre este elemento para cambiar las propiedades con el editor de
propiedades. A la propiedad Tag se le da el valor grupo, y a la propiedad Title se le da el valor
Opciones, tal como se muestra a continuación:
Ahora se arrastran dentro del cuadro tres botones de tipo “Radio Button”.
Las propiedades de los botones deben cambiarse así:
• Para el primer botón: Tag: opcion1 String: Opción 1

• Para el segundo botón: Tag: opcion2 String: Opción 2
• Para el tercer botón: Tag: opcion3 String: Opción 3
Falta ubicar un texto estático al lado del grupo de botones. Las propiedades del texto estático
serían: Tag = texto, String = Opción 1:
Se guarda el archivo.
Cuando se trabaja con botones agrupados o grupo de botones, MATLAB no crea automáticamente
las funciones (callbacks) de los botones. Se puede verificar esto en el m-file, se ve que no hay en
ninguna parte una función llamada opcion1_callback.
Para crearla, en el panel se da click derecho sobre el botón “opcion1” y se selecciona la opción
callback dentro de view_callbacks:
Figura 21. Creación de la función callback para el botón opcion1. Esto se hace porque MATLAB
no crea de manera automática las funciones para los botones del grupo de botones.
Se abre la siguiente ventana que pregunta, en pocas palabras, si se está seguro de que se quiere
ejecuta resta acción. Se da clic en Yes.
Al hacerlo, aparece en la parte final del m-file la función callback para este botón:
Se escribe, debajo de esta función, la instrucción para que el texto estático de la interfaz muestre
“Opción 1”:
function opcion1_Callback(hObject, eventdata, handles)
%Se escribe Opción 1 en el cuadro de texto:

set(handles.texto,'String','Opción 1')
Los pasos anteriores se repiten para los otros dos botones, hasta obtener lo siguiente:
% --- Executes on button press in opcion2. function

opcion2_Callback(hObject, eventdata, handles)

% --- Executes on button press in opcion3.

function opcion3_Callback(hObject, eventdata, handles)

Luego de tener escritas las funciones de los tres botones, se guarda el archivo y se prueba el
funcionamiento del programa:
SUMA O RESTA
La forma que debe tener la interfaz de usuario que se pretende hacer en este ejercicio, se muestra
en la Figura 22.
Figura 22. Elementos necesarios para realizar el ejercicio con las propiedades de
cada uno.
Se pretende que el usuario escriba dos números en los campos de texto en blanco. Luego debe
seleccionar en el grupo de botones si desea hacer una suma o una resta. Cuando presione el botón
“Calcular” aparece la respuesta en el cuadro de texto estático.
Lo primero es entonces ubicar los elementos y cambiar sus propiedades como se muestra en la
Figura 22.
Luego se guarda la figura y aparece el editor de m-files. Al igual que en el ejercicio anterior, los
botones que se encuentran agrupados en el “Button Group” no tienen función callback en el m-file.
Es decir, MATLAB no crea en el archivo las funciones para estos botones. Es necesario repetir el
procedimiento de la Figura 21 para cada uno de los botones del grupo (botón suma y botón resta).
Lo primero que se hará será definir una variable llamada sumar y otra llamada restar. Cuando esté
activado el botón suma, la variable sumar valdrá 1 y la variable restar valdrá 0. De igual modo,
cuando esté presionado el botón resta, la variable sumar valdrá 0 y la variable restar 1.
Luego, cuando se presione el botón calcular, con una sentencia if (comparador), si la variable suma
vale 1 y resta vale 0, se sumarán los números. De lo contrario (cuando suma valga 0 y resta 1) se
restarán los números.
Entonces, primero se busca en el m-file, la función (callback) del botón sumar:
Esta función solo se ejecuta cuando se da clic sobre el botón suma. Lo que se hará será averiguar el
valor del botón (averiguar si está activo o inactivo). Si está activo, se le dará un valor de 1 a la variable
sumar y un valor de cero a la variable restar. Esto se hace de la siguiente forma:
function suma_Callback(hObject, eventdata, handles)
% se averigua el valor del botón

V = get(hObject,'Value');
%se averigua el valor máximo del botón

M = get(hObject,'Max');
%se comparan el valor del botón con el valor máximo:

if V==M
%si son iguales, es porque el botón está activo
handles.sumar = 1; %la variable handles.sumar=1 handles.restar =

0; %la variable handles.restar=0 else
%si son diferentes, es porque el botón está inactivo
handles.sumar = 0; %la variable handles.sumar=0
end
%se guardan las variables con handles guidata(hObject,handles)

De igual forma se procede con el botón resta:
function resta_Callback(hObject, eventdata, handles)
% se averigua el valor del botón

V = get(hObject,'Value');
%se averigua el valor máximo del botón

M = get(hObject,'Max');
%se comparan el valor del botón con el valor máximo:

if V==M
%si son iguales, es porque el botón está activo
handles.restar = 1; %la variable handles.restar=1 handles.sumar =

0; %la variable handles.sumar=0 else
%si son diferentes, es porque el botón está inactivo
handles.restar = 0; %la variable handles.restar=0 end
%se guardan las variables con handles guidata(hObject,handles)

Ahora se busca la función del botón texto1:
Igual que se hizo en el ejercicio de sumar dos números, lo que se hace en esta función es averiguar
el número que el usuario escribió en el cuadro de texto, y luego se almacena este valor en una
variable a. También es necesario convertir en números el texto escrito por el usuario (cuando el
usuario escribe un texto en el cuadro, así sea un número, MATLAB lo interpreta como un texto o
string. Para convertirlo a tipo número se usa la función str2double). Lo que se escribe entonces bajo
la función callback del texto1 es lo siguiente:

% este valor en la variable handles.a
handles.a = get(hObject,'String');
% La información en la variable handles.a es de tipo texto (string) se %

handles.a = str2double(handles.a);

De la misma forma se escribe el código bajo la función del cuadro de texto 2:

% este valor en la variable handles.b
handles.b = get(hObject,'String');
% La información en la variable handles.b es de tipo texto (string) se %

handles.b = str2double(handles.b);

Finalmente se busca el botón calcular, que es el responsable de ejecutar la suma o la resta, según
el caso, y de mostrar el resultado en el cuadro de texto “respuesta”.
Lo primero que debe hacer el botón es saber si el usuario quiere realizar una suma o una resta.
Entonces se averigua el valor de las variables sumar y restar. Si la variable sumar vale 1 y la variable
restar vale 0, es porque el usuario quiere hacer una suma. De lo contrario, si restar vale 1 y sumar
vale 0, es porque el usuario quiere hacer una resta.
También puede suceder el caso en el que ambas variables valgan cero porque ambos botones estén
desactivados (lo contrario no, porque en un grupo de botones no puede haber más de un botón
activo a la vez, es decir, ambos botones pueden estar desactivados pero no pueden estar activados
al mismo tiempo). Si ambos botones están desactivados, se puede hacer que en el cuadro de texto
salga un mensaje diciendo “elija una opción”.
Ahora sí, teniendo claro lo que se necesita, se procede a escribir el código debajo de la función del
botón calcular:
function calcular_Callback(hObject, eventdata, handles)
% se averigua si sumar=1 y restar=0

if (handles.sumar==1)&&(handles.restar==0)
%si se cumple la condición, se suman los valores y se guardan en una

%variable s
s = handles.a+handles.b;
% se averigua si restar=1 y sumar=0

elseif (handles.restar==1)&&(handles.sumar==0)
%si se cumple la condición, se restan los valores y se guardan en una

%variable s
s = handles.a-handles.b;
% se averigua si restar=0 y sumar=0 elseif

(handles.restar==0)&&(handles.sumar==0)
%si se cumple la condición, se crea un mensaje que pida al usuario

%seleccionar una de las opciones
s = sprintf('elija una opción');
end
%se escribe el valor de s en el cuadro de texto

set(handles.respuesta,'string',s)
Finalmente, es bueno definir un valor inicial para las variables que se están usando (a, b, sumar y
restar). De esta forma se pueden evitar posibles mensajes de error porque estos valores no estén
definidos aún.
El punto ideal para definir un valor inicial de cualquier variable, tal como se hizo con el primer
ejercicio de conteo de clics, es la función OpeningFcn. Se busca esta función en el m-file (tenga
en cuenta que en este caso se le dio el nombre de ejercicio6 al archivo. En su caso este nombre será
diferente, tendrá el nombre que usted le dio al archivo).
Justo debajo de esta función se definen los valores iniciales de las variables:
function ejercicio6_OpeningFcn(hObject, eventdata, handles, varargin)
%Se le da un valor inicial a las variables handles.sumar = 1;

handles.restar = 0; handles.a = 0; handles.b = 0;
SELECTOR DE EDADES
Se realizará una interfaz de usuario donde aparezca una lista de opciones. Las opciones que
aparecen son rangos de edad. La persona elige uno de los rangos y en un cuadro de texto aparece
el rango de años en que nació la persona.
Se crea un nuevo archivo, dando clic en el botón New Figure , que está en la parte superior de
la ventana de la herramienta GUIDE. En el nuevo archivo se arrastra hacia el área de dibujo un List
Box y un Static Text:
Los rangos que aparecerán en la lista serán:
15-19 20-24 25-29 30-34 35-39 40-45
Por lo tanto, los rangos de nacimiento correspondientes a esos rangos de edad serían:
1990-1994 1985-1989 1980-1984 1975-1979 1970-1974 1964-1969
Para ingresar los rangos en la lista “Listbox”, se da doble clic sobre la lista. En el Editor de
propiedades, se da clic en el ícono en forma de tabla que aparece frente a la propiedad String:
En el cuadro emergente, separados por renglones (con ENTER) se escriben los rangos de edades. Al
finalizar, se presiona OK:
Se cambia el String del texto por seleccione su edad y el tag por texto.
Se guarda el archivo y en el editor de m-files, se busca la función del Listbox:
Lo que se necesita es averiguar cuál opción eligió la persona y de acuerdo a la opción, mostrar un
rango de años en el cuadro de texto.
Para averiguar la opción, se utiliza la instrucción get. A continuación, se muestra el código que
debe copiarse bajo esta función:
function listbox1_Callback(hObject, eventdata, handles)
% se averigua la opción elegida por la persona (si es la 1, la 2, la 3,

etc.). Se almacena % la opción en la variable a
a = get(hObject,'Value');
%se van a evaluar las diferentes posibilidades para a switch a
%si a es igual a 1, es porque se eligió la opción 1: 15-19 años

case 1
%se escribe el rango de años para este grupo de edades
set(handles.texto,'string','usted nació entre 1990 y
1994')

case 2

set(handles.texto, 'string','usted nació entre 1985 y
1989')
case 3

1984')

case 4

1979')

case 5

set(handles.texto,'string', 'usted nació entre 1970 y
1974')

case 6
set(handles.texto,'string', 'usted nació entre 1964 y 1969') end

Esta interfaz también funcionaría si se reemplaza el elemento ListBox por un popup menú. Para
hacer la prueba, se dad doble clic sobre el ListBox y en el editor de propiedades, frente a la
propiedad Style, se elige popup menú:
Se puede probar que el funcionamiento es el mismo:

GRÁFICA DE UNA FUNCIÓN ARMÓNICA
Este último ejercicio que se realizará consiste en realizar la gráfica de una función armónica simple
(una función seno) a partir de los parámetros de período, amplitud y fase de la función.
La interfaz de usuario debe tener tres cuadros de texto estático para colocar en ellos estos tres datos
y debe graficar la función con los valores dados por el usuario. Los elementos que tendrá la interfaz,
con sus propiedades, aparecen a continuación:
Se guarda el archivo y se pasa a editar el m-file. Lo primero que se debe buscar es la función del
texto correspondiente a
la amplitud:
Lo único que se necesita en esta parte es obtener el valor de amplitud ingresado por el usuario y
guardarlo en una variable:
function amplitud_Callback(hObject, eventdata, handles)
% Se averigua el contenido escrito en el cuadro de texto amplitud y se

almacena % este valor en la variable handles.A
handles.A = get(hObject, 'string');
% La información en la variable handles.A es de tipo texto (string) se %

handles.A = str2double(handles.A);

guidata(hObject,handles)
**********************************************************************
Lo mismo se hace para las funciones de los cuadros de texto periodo y fase:
function periodo_Callback(hObject, eventdata, handles)
% Se averigua el contenido escrito en el cuadro de texto periodo y se

almacena % este valor en la variable handles.T
handles.T = get(hObject, 'string');

handles.T = str2double(handles.T);
***************************************************************
function fase_Callback(hObject, eventdata, handles)
% Se averigua el contenido escrito en el cuadro de texto fase y se

almacena % este valor en la variable handles.F
handles.F = get(hObject, 'string');

handles.F = str2double(handles.F);

Luego debe ubicarse en el archivo la función correspondiente al botón:
Lo que debe hacer este botón es crear una gráfica. Primero debe generar un vector de valores para
la variable independiente y para cada valor de este vector, debe hallar el valor la función. Para esto
debe usar los valores de amplitud, fase y período entregados por el usuario.
Finalmente, debe graficar los valores. El código correspondiente se presenta a continuación:
function boton_Callback(hObject, eventdata, handles)

% se crea un vector con los valores de la variable independiente t, que %
comience en 0 y termine en 2*pi, con incrementos de pi/30:
t = 0:pi/60:2*pi;
%se calcula el valor de la función para cada valor de t:
f = handles.A*sin((2*pi/handles.T)*t+handles.F);
%se grafican los valores

plot(180*t/pi,f) % en la gráfica los valores de t se dan en grados
%se coloca un título al eje x
xlabel('variable independiente (grados)')
%se coloca un título al eje y

ylabel('función')

Interfaz Gráfica de Usuario

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Interfaz Gráfica de Usuario

Caricato da

Copyright:

Formati disponibili

Interfaz gráfica de usuario (GUI)

Matlab proporciona herramientas para diseñar interfaces de usuario personalizadas mediante el

Figura 1. Ejemplo de una GUI en MATLAB.

CÓMO FUNCIONA UNA GUI

Figura 2. Un ejemplo de los elementos en una GUI de MATLAB.

Figura 3. Ventana de la herramienta guide.

Los pasos básicos para crear una GUI son:

Figura 4. Diseño de una GUI con un Push Button y un texto estático.

Paso 2. Se abre la herramienta guide de MATLAB presionando el botón que está en la

Figura 6. Insertando un Static Text en el área de diseño de la GUI.

Figura 9. Resultado luego de cambiar el área de la GUI.

Figura 12. Parametrización del static Text

% --- Executes on button press in MiPrimerBoton. function

La variable contador que se usa en el código anterior no se ha definido en ninguna parte. Es

Se debe entonces ubicar en el código la parte donde aparece esta función:

function MiPrimerGUI_OpeningFcn(hObject, eventdata, handles, varargin)

Si se mira en el m-file, justo debajo de la función MiPrimerGUI_OpeningFcn, aparece ya el

EJERCICIO: BOTÓN DE RESET

Figura 17. Inclusión del botón reiniciar.

BOTÓN ENCENDIDO O APAGADO

Figura 18. Botón encendido apagado.

Figura 19. Configuración botón encendido apagado.

Figura 21. Función del boton1.

La pregunta es, ¿cómo se sabe si el botón está activo o inactivo?

% Hint: get(hObject,'Value') returns toggle state of boton1

Se va entonces a escribir esto, y a guardar el valor en una variable:

function boton1_Callback(hObject, eventdata, handles)

Ahora se debe hacer una comparación. Esto se hace con if:

% Se averigua el valor actual del botón

% Se averigua el valor máximo que puede tomar el botón

% Se determina si el valor del botón es igual al máximo

Se puede probar el funcionamiento de la interfaz:

Figura 22. Propiedad Style del botón.

Figura 25. Elementos necesarios para realizar la sumadora

function texto1_Callback(hObject, eventdata, handles)

% Se averigua el contenido escrito en el cuadro de texto 1 y se almacena

% La información en la variable handles.a es de tipo texto (string) se %

% Se almacena la información de las variables handles para poder usarlas

function texto2_Callback(hObject, eventdata, handles)

% Se averigua el contenido escrito en el cuadro de texto 2 y se almacena

% La información en la variable handles.b es de tipo texto (string) se %

% Se almacena la información de las variables handles para poder usarlas

% --- Executes on button press in sumar.

% Se suman las variables handles.a y handles.b que contienen la

% se escribe el resultado de la suma en el cuadro de texto "respuesta"

Figura 26. Función del boton1.

% --- Executes on slider movement. function slider_Callback(hObject,

% se lleva este valor al cuadro de texto

Las propiedades de los botones deben cambiarse así:

• Para el primer botón: Tag: opcion1 String: Opción 1

function opcion1_Callback(hObject, eventdata, handles)

%Se escribe Opción 1 en el cuadro de texto:

% --- Executes on button press in opcion2. function

%Se escribe Opción 1 en el cuadro de texto:

% --- Executes on button press in opcion3.

%Se escribe Opción 1 en el cuadro de texto:

Entonces, primero se busca en el m-file, la función (callback) del botón sumar:

function suma_Callback(hObject, eventdata, handles)

% se averigua el valor del botón

%se averigua el valor máximo del botón

%se comparan el valor del botón con el valor máximo:

handles.sumar = 1; %la variable handles.sumar=1 handles.restar =

%se guardan las variables con handles guidata(hObject,handles)

function resta_Callback(hObject, eventdata, handles)