¿Por qué utilizar una interfaz gráfica de usuario IGU en MATLAB?

La razón principal
por la que se utilizan las IGUs es porque hacen las cosas simples para los usuarios
finales del programa. Si no se usaran las IGUs, se tendría que trabajar desde la
interfaz de la línea de comandos del MATLAB, lo que puede ser extremadamente
difícil y frustrante. Imagínese si usted tuviera que ingresar órdenes de texto para
operar su navegador web (sí, el navegador web también es una interfaz gráfica de
usuario). No sería muy práctico ¿verdad? En este tutorial, vamos a crear una interfaz
gráfica de usuario simple que suma dos números, y que muestra la respuesta en un
campo de texto designado.

Este tutorial ha sido escrito para aquellos con poca o ninguna experiencia en la
creación de una interfaz gráfica de MATLAB (Interface Grafica del Usuario). No es
obligatorio tener conocimientos básicos de MATLAB, pero se recomienda. Para
escribir este tutorial se utilizó MATLAB versión 2007a. Pensamos que las versiones
anteriores y las nuevas versiones de MATLAB deberían también ser compatibles
(siempre que no sea demasiado obsoleta). Vamos a empezar!

contenido
• La inicialización del GUIDE (Creador de la IGU)
• Creación del aspecto visual de la interfaz gráfica de usuario: Parte 1
• Creación del aspecto visual de la interfaz gráfica de usuario: Parte 2
• Escribir el Código para las devoluciones de llamada de la interfaz gráfica de usuario
• Lanzamiento de la interfaz gráfica de usuario
• Resolución de problemas y problemas potenciales
• Foros relacionados y otros enlaces

La inicialización del GUIDE (Creador de la IGU)

1. En primer lugar, abrir MATLAB. Vaya a la ventana de comandos y escriba guide.
2. Aparecerá la siguiente pantalla. Seleccione la primera opción Blank GUI (que es la
que sale por defecto).

3. Ahora debería ver la siguiente pantalla (o algo similar dependiendo de la versión de

MATLAB que está utilizando y de cuáles sean los valores designados (configurados en
el software) previamente):

4. Antes de empezar a añadir componentes a ciegas, es bueno tener una idea

aproximada de cómo desea que se vea la parte gráfica de la interfaz gráfica de usuario
de tal manera que sea más fácil de diseñarla. A continuación se muestra un ejemplo
de cómo podría ser la interfaz gráfica de usuario ya acabada.
Creación del aspecto visual de la interfaz gráfica de usuario: Parte 1
Para la IGU del sumador, necesitaremos los siguientes componentes
o Dos componentes de edición de texto
o Tres componente de Texto estático
o Un componente pulsador
Añadir todos estos componentes a la interfaz gráfica de usuario haciendo clic en el
respectivo icono y colocándolo en la parrilla. En este punto, su interfaz gráfica de
usuario debe ser similar a la que se muestra en la siguiente figura:
2. A continuación, es el momento de editar las propiedades de estos componentes.
Vamos a empezar con el texto estático. Haga doble clic en uno de los componentes
con texto estático. La siguiente tabla debe de aparecer. Se le llama el inspector de
propiedades y le permite modificar las propiedades de un componente.

3. Nos interesa cambiar el parámetro llamado String (cadena). Vamos edite este texto y
cámbielo a +.

Ttambién cambiemos el tamaño de la letra (fuente) de 8 a 20

Quizás después de haber modificado estas propiedades, el componente no pueda ser

completamente visible en el editor gráfico. Como el tamaño de la letra se ha hecho
más grande y no entra en la caja de texto, esto se puede solucionar si se cambia el
 tamaño del componente, es decir, utilizar el cursor del ratón y estirar el componente
para hacerlo más grande.
4. Ahora, haga lo mismo para el siguiente componente de Texto estático, pero en lugar
de cambiar el parámetro String a +, cámbielo a =.
5. Para el tercer componente de Texto estático, cambie el parámetro String (cadena) a lo
que usted desea que sea el título de su interfaz gráfica de usuario. Por simplicidad lo
he llamado MyAdderGUI. También aquí puede experimentar un poco con las opciones
de diferentes fuentes.
6. Para el componente final de Texto estático, queremos establecer el parámetro
de cadena (String) a 0. Además, para este componente queremos modificar el
parámetro llamado Tag (etiqueta). El parámetro Tag es en realidad el nombre
de la variable de este componente. Vamos a llamarle answer_staticText. Este
componente se utilizara para mostrar nuestra respuesta, como usted
probablemente ya se habrá dado cuenta

7. Por lo tanto ahora, usted debe tener algo que se parece a la siguiente pantalla:
 Creating the Visual Aspect of the GUI: Part 2
1. A continuación, vamos a modificar los componentes de texto editable. Haga doble clic
en el primer componente de Texto editable. Queremos establecer el parámetro String
en 0 y también queremos cambiar el parámetro Tag (etiqueta) para que ahora se llame
input1_editText, tal como se muestra a continuación. Este componente va a almacenar
el primero de los dos números que se van a sumar.

2. Para el segundo componente de Texto editable, establezca el parámetro String a 0,

pero establezca el parámetro Tag a input2_editText. Este componente almacenara el
segundo de los dos números que se van a sumar.
3. Por último, tenemos que modificar el componente pulsador. Cambie el parámetro
String a add (sumar)! y cambie el parámetro de etiqueta (Tag) a add_pushbutton.
Pulsando este botón se mostrará la suma de los dos números de entrada.

4. Así que ahora, usted debe tener algo parecido a esto:

 Reorganice sus componentes para que se vean parecidos al dibujo. Cuando haya
terminado Usted deberá tener algo parecido a esto:

5. Ahora, guarde su IGU creada con cualquier nombre de archivo que quiera. Decidí
nombrarlo con el nombre de myAdder. Al guardar el archivo, MATLAB
automáticamente genera dos archivos: myAdder.fig y myAdder.m. El archivo .fig
contiene los gráficos de la interfaz. El archivo .m contiene todo el código de la interfaz
gráfica del usuario.
Escribiendo el Código para las devoluciones de llamada de la interfaz gráfica del
usuario.
 MATLAB genera automáticamente un archivo .m acompañante cada vez que se crea
una figura. El archivo .m es donde colocamos el código correspondiente a la
devolución de llamada de cada componente. Para los efectos de este tutorial,
principalmente sólo nos ocuparemos de las funciones de devolución de llamada. Usted
no tiene que preocuparse acerca de cualquier otro tipo de función que encuentre en el
código del archivo .m.
1. Abra el archivo .m que se generó automáticamente cuando guardó su IGU. En el editor
de MATLAB, haga clic en el icono y al hacerlo aparecerá una lista de las funciones
que se encuentran dentro del archivo .m. Seleccione input1_editText_Callback.

2. El cursor debe posicionarse en el siguiente bloque de código:

3. function input1_editText_Callback(hObject, eventdata, handles)

4. % hObject handle to input1_editText (see GCBO)
5. % eventdata reserved - to be defined in a future version of MATLAB
6. % handles structure with handles and user data (see GUIDATA)
7.
8. % Hint: get(hObject,'String') returns contents of input1_editText as text
9. % str2double(get(hObject,'String')) returns contents of
10. % input1_editText as a double

Agregue el código siguiente a la parte inferior de dicho bloque de código:

%store the contents of input1_editText as a string. if the string

%is not a number then input will be empty
input = str2num(get(hObject,'String'));

%checks to see if input is empty. if so, default input1_editText to zero

if (isempty(input))
set(hObject,'String','0')
end
guidata(hObject, handles);

Esta pieza de código simplemente se asegura de que la entrada este bien definida. No
queremos que el usuario ingrese entradas que no sean números! La última línea del
código le indica a la interfaz gráfica del usuario que después de que se ha completado
la devolución de llamada, debe de actualizar la estructura de los controladores o alias.
Los controladores o alias almacenan todos los datos pertinentes relacionados con la
interfaz gráfica del usuario. Este tema se tratará a profundidad en un tutorial diferente.
Por ahora, es una buena idea que usted lo acepte sin demostración y que finalice
todas las funciones de devolución de llamada con la instrucción guidata(hObject,
handles), de modo que los controladores o alias se estén siempre actualizando
 después de cada devolución de llamada. Esto puede salvarlo de posibles dolores de
cabeza más adelante.
11. Agregue el mismo bloque de código anterior a input2_editText_Callback.

12. Ahora tenemos que editar el add_pushbutton_Callback. Haga clic en el icono y

seleccione add_pushbutton_Callback. El siguiente bloque de código es lo que debería
de ver en el archivo .m.

13. % --- Executes on button press in add_pushbutton.

14. function add_pushbutton_Callback(hObject, eventdata, handles)
15. % hObject handle to add_pushbutton (see GCBO)
16. % eventdata reserved - to be defined in a future version of MATLAB
17. % handles structure with handles and user data (see GUIDATA)

A continuación presentamos el código que vamos a añadir a esta devolución de

llamada:

a = get(handles.input1_editText,'String');
b = get(handles.input2_editText,'String');
% a and b are variables of Strings type, and need to be converted
% to variables of Number type before they can be added together

total = str2num(a) + str2num(b);

c = num2str(total);
% need to convert the answer back into String type to display it
set(handles.answer_staticText,'String',c);
guidata(hObject, handles);

18. Vamos a estudiar cómo trabaja el código que acaba de agregar:

19. a = get(handles.input1_editText,'String');
20. b = get(handles.input2_editText,'String');

Las dos líneas del código anterior leen las cadenas que están dentro de los
componentes de texto editable, y las almacenan en las variables a y b. Puesto
que son variables del tipo cadena o String, y no son variables del tipo numérico,
no podemos sumarlas. Por lo tanto, tenemos que convertir a y b al tipo
numérico para que el MATLAB pueda sumarlas.

.
21. Podemos convertir variables del tipo cadena (String) al tipo numérico usando el
comando de MATLAB str2num (argumento tipo cadena). Del mismo modo, podemos
hacer lo contrario con num2str (argumento del tipo Numérico). La siguiente línea de
código se utiliza para sumar las dos entradas.

22. total= (str2num(a) + str2num(b));

La siguiente línea de código convierte la variable sum a una variable del tipo cadena y
la almacena en la variable c.
 c = num2str(total);

La razón por la que convertimos la respuesta final nuevamente al tipo cadena, es

porque el componente de Texto estático no muestra en pantalla variables del tipo
numérico. Si no se convierte de nuevo en un tipo cadena, la interfaz gráfica del usuario
se encuentra con un error al intentar mostrar la respuesta.
23. Ahora sólo tenemos que enviar la suma de las dos entradas a la caja de respuesta que
hemos creado. Esto se realiza utilizando la siguiente línea de código. Esta línea de
código rellena el componente de Texto estático con la variable c.

24. set(handles.answer_staticText,'String',c);

La última línea de código actualiza las estructuras de los alias como se mencionó
anteriormente.

guidata(hObject, handles);

Felicidades, hemos terminado la codificación de la IGU. No se olvide de guardar su

archivo-m. Ahora nos toca correr la IGU!
25. If you don’t want MATLAB to automatically generate all those comments for each of
the callbacks, there is a way to disable this feature. From the GUI editor, go to File,
then to Preferences. Si no desea que MATLAB genere automáticamente todos los
comentarios para cada una de las devoluciones de llamada, hay una manera de
desactivar esta función. Desde el editor de interfaz gráfica de usuario, vaya a Archivo
y luego a Preferencias

Como ejecutar la IGU

1. Hay dos formas de ejecutar o iniciar la IGU.
o La primera forma es a través del editor del GUIDE. Sólo tiene que pulsar el icono
en el editor del GUIDE como se muestra en la siguiente figura:

o El segundo método consiste en lanzar la IGU desde el aviso de la ventana de

comandos del MATLAB. En primer lugar, establecer el directorio actual del MATLAB a
cualquier lugar en el que guardó sus archivos .fig y .m.

A continuación, escriba el nombre de la interfaz gráfica de usuario en el símbolo del

sistema (no es necesario que escriba la extensión .fig o .m):
2. La interfaz gráfica de usuario debe comenzar a ejecutarse inmediatamente:

Trate de introducir algunos números para probar la interfaz gráfica de usuario.

Felicitaciones por la creación de su primera interfaz gráfica de usuario!
Solución de problemas y problemas potenciales
Así que su interfaz gráfica no funciona y no sabes por qué. Aquí hay un par de
consejos que pueden ayudarte a encontrar el error:

Si no puede averiguar dónde podría estar el error, sería una buena idea leer este
tutorial de nuevo.
1. La línea de comandos puede darle muchas pistas sobre dónde exactamente reside el
problema. Si por alguna razón su interfaz gráfica de usuario no funciona, el error se
muestra en el símbolo del sistema. El número de línea del código defectuoso y una
breve descripción del error son mostrados. Esto es siempre un buen lugar para
comenzar a investigar.

2. Asegúrese de que todos los nombres de las variables sean constantes en el código.
Además, asegúrese de que los tags de los componente (las etiquetas o nombres de
las variables) sean coherentes entre el archivo .fig. y el archivo .m. Por ejemplo, si
usted está tratando de extraer la cadena del componente de texto editable, asegúrese
de que sus instrucciones get (leer la variable o tag) utilicen la etiqueta correcta (tag)!
Más específicamente, si usted tiene la siguiente línea en el código, asegúrese de que
usted ha le ha puesto el nombre del componente de edición de texto según le
corresponda!

3. a = get(handles.input1_editText,'String');

4. El código fuente está disponible aquí, y podría ser útil para propósitos de depuración
5. Si todo lo anterior falla, deja un comentario aquí y vamos a hacer todo lo posible para
ayudarte.