EJEMPLO COMPLETO, EXPLICADO PASO A PASO, DESARROLLADO CON GUI EN MATLAB

Por Hernán Darío Toro Escobar

1. Inicialmente debemos tener completamente claro el problema.

A continuación se presenta la definición del problema que desarrollaremos en este ejercicio:

En un curso, cada estudiante presenta dos exámenes. La nota de cada examen se encuentra entre 0.0 y 5.0. Se quiere listar el nombre de cada estudiante con su nota promedio. Además, la nota media de todos los estudiantes del grupo.

ENTRADA:

nombreEstudiante notaExamen1 notaExamen2

SALIDA

Por cada estudiante: nombreEstudiantenotaPromedio

notaMediaGrupo

DISEÑO DE LA FORMA:

Cuatro etiquetaso Nombreo Examen 1o Examen 2o Nota Promedio

Cuatro cuadros de textoo tNombreo tExamen1o tExamen2o tNotaPromedio

Tres botoneso bCalcularo bEntraro bTerminar

2. Entremos a MATLAB. Una vez en MATLAB, abrimos la GUI (Interfase Gráfica de Usuario) así: File – New - GUI. Se muestra la siguiente ventana (GUIDE Quick Start):

3. Seleccionemos Blank GUI (Default) y digitemos OK. Se presenta un formulario, así:

En la parte izquierda del formulario apreciamos los controles.

4. Digitemos doble-click en cualquier parte del formulario y se muestra un menú con las propiedades del formulario, así:

5. Por defecto, el formulario tiene como nombre identificador (Tag en el cuadro de propiedades) “Figure 1”. Cámbiémoslo a “fBalance” (Escribimos el prefijo f por ser un formulario).

6. Modifiquemos el color del formulario a nuestro gusto (propiedad Color)

7. Modifiquemos también la dimensión del formulario colocando el cursor (la flecha) en el punto inferior derecho del formulario (un cuadro diminuto de color negro) , y con el botón izquierdo del mouse apretado, lo arrastramos hasta lograr el tamaño que creamos más conveniente

8. Procedemos a colocar los diferentes controles al formulario iniciando por la primera etiqueta, Nombre, así: arrastremos el control Static Text al formulario como lo indica la siguiente figura:

9. Haciendo doble-click sobre la etiqueta, se presenta un menú con las propiedades de la misma. Modifiquemos algunas de estas propiedades, así:

a. El tamaño y la posición lo podemos hacer colocando el cursor sobre los extremos de la etiqueta y con el botón izquierdo del mouse apretado, arrastramos los puntos o las líneas hasta el punto del formulario que creamos más indicado y hasta darle un tamaño conveniente

b. En la propiedad String escribimos la palabra Nombrec. En la propiedad FontSize escribimos 15d. En la propiedad FontAngle señalamos italice. En la propiedad FontWeight señalamos boldf. En la propiedad HorizontalAlignment señalamos leftg. En la propiedad BackgroundColor indicamos el mismo color del formulario (es lo

más adecuado)h. Otras propiedades podrían ser modificadas a nuestro gusto después de

comprender su efecto

La nueva apariencia de la etiqueta se muestra en la siguiente figura:

10. Procedemos a colocar las etiquetas Examen 1, Examen 2 y Nota Promedio copiando y pegando la etiqueta Nombre y modificando en cada una de ellas la propiedad String Nombre por Examen 1, Examen 2 y Nota Promedio respectivamente. El formulario, luego de los cambios, se presenta así:

11. Seguidamente procedemos a colocar en el formulario los diferentes cuadros de texto. Iniciamos con el cuadro de texto donde el usuario escribirá el nombre, así:

a. Arrastramos el control Edit Text hacia el formulario al frente de la etiqueta Nombre

b. Le damos la ubicación y el tamaño adecuado de igual forma como procedimos con la etiqueta Nombre

c. Modificamos las propiedades FontSize, FontAngle, FontWeight y BackgroundColor a nuestro gusto

d. En la propiedad HorizontalAlignment señalamos lefte. La propiedad String debe quedar en blancof. Importante: en la propiedad Tag escribimos tNombre y es la identificación del

objeto en el programa (Escribimos el prefijo t por ser un cuadro de texto)

El formulario lo veremos así:

12. Los cuadros de texto para las notas del Examen 1 y el Examen 2 los insertamos en el formulario simplemente copiando y pegando tNombre y modificando las siguientes propiedades:

a. La propiedad Tag para cada uno de ellos así: tExamen1 y tExamen2b. En la propiedad HorizontalAlignment señalamos right por que su contenido es

numéricoc. La dimensión de cada cuadro es, desde luego, más pequeña que la del nombre

Luego de la inclusión de estos dos cuadros, el formulario se muestra así:

13. El cuadro de texto para la nota promedio debe ser un Static Text, como las etiquetas, porque su contenido no debe ser modificado por el usuario (sólo por el programa). Para incluir este cuadro, procedemos así:

a. Arrastramos el control Static Text hacia el formulario en la ubicación adecuada (al frente de la etiqueta Nota Promedio

b. En la propiedad Tag escribimos tNotaPromedioc. Las demás propiedades las hacemos iguales a las de tExamen1 y tExamen2

El formulario lo veremos así:

14. A continuación procedemos a incluir en el formulario los tres botones requeridos para calcular la nota promedio, entrar la información a un archivo, desplegar el listado solicitado y terminar. Iniciamos con el primer botón de comando, así:

a. Arrastramos el control Push Button hacia el formulario en la ubicación adecuadab. Le damos un tamaño acorde con su contenidoc. Modificamos las propiedades FontSize, FontAngle, FontWeight y

BackgroundColor a nuestro gustod. En la propiedad String escribimos Calculare. En la propiedad Tag escribimos bCalcularf. Copiamos y pegamos el botón bCalcular para incluir los otros dos botones y les

modificamos el contenido de la propiedad String por Entrar y Terminar y el de la propiedad Tag por bEntrar y bTerminar respectivamente

El formulario, en su presentación final, lo vemos así:

15. El paso siguiente consiste en la programación de cada uno de los eventos.

a. Creación del formulario. El primero evento es la creación del formulario (al iniciar la ejecución del programa) y se programa así: damos click al botón derecho del mouse en cualquier parte del formulario donde no se encuentre ningún objeto y se mostrará un menú del cual seleccionamos la opción View Callbacks que nos lleva a una nueva lista de opciones de las cuales señalamos CreateFcn como se presenta en la figura:

Inmediatamente, los pasos anteriores no lleva al editor, que nos muestra el siguiente código, para que nosotros completemos las instrucciones requeridas en la programación de la función:

% --- Executes during object creation, after setting all properties.function fBalance_CreateFcn(hObject, eventdata, handles)% hObject handle to fBalance (see GCBO)% eventdata reserved - to be defined in a future version of MATLAB% handles empty - handles not created until after all CreateFcns called

La programación de esta función consiste en borrar las variables e inicializar el contador de estudiantes (nroEstudiantes) en 0. Este contador lo declaramos como global porque lo utilizaremos en otras partes del programa. La función completa queda así:

% --- Executes during object creation, after setting all properties.function fBalance_CreateFcn(hObject, eventdata, handles)% hObject handle to fBalance (see GCBO)% eventdata reserved - to be defined in a future version of MATLAB% handles empty - handles not created until after all CreateFcns called% Declaramos la variable nroEstudiantes como global porque se utilizará en% otros eventosglobal nroEstudiantes;nroEstudiantes = 0;

b. Botón bCalcular. Cuando el usuario da click en el botón Calcular se debe obtener el promedio de las dos notas contenidas en tExamen1 y tExamen 2. Para programar este evento damos click con el botón derecho de mouse en el botón del formulario bCalcular lo que nos muestra un menú del cual seleccionamos la opción View Callbacks que nos lleva a otro menú de opciones entre las cuales

damos click en la opción Callback que nos lleva al editor, presentándonos el siguiente código:

% --- Executes on button press in bCalcular.function bCalcular_Callback(hObject, eventdata, handles)% hObject handle to bCalcular (see GCBO)% eventdata reserved - to be defined in a future version of MATLAB% handles structure with handles and user data (see GUIDATA)

La programación de esta function consiste en llevar a una variable, examen1, el contenido de tExamen1 como valor; llevar a una variable, examen2, el contenido de tExamen2; calcular notaPromedio y llevar este dato al cuadro de texto tNotaPromedio. La variable notaPromedio la declaramos como global porque la utilizaremos en otros eventos. El código completo de la función queda así:

% --- Executes on button press in bCalcular.function bCalcular_Callback(hObject, eventdata, handles)% hObject handle to bCalcular (see GCBO)% eventdata reserved - to be defined in a future version of MATLAB% handles structure with handles and user data (see GUIDATA)global notaPromedio;examen1 = eval(get(handles.tExamen1, 'String'));examen2 = eval(get(handles.tExamen2, 'String'));notaPromedio = (examen1 + examen2) / 2;set(handles.tNotaPromedio, 'String', notaPromedio);

c. Botón bEntrar. El evento click en el botón bEntrar debe producir el incremento de la variables nroEstudiantes en 1, llevar la información de tNombre al vector nombres, llevar notaPromedio al vector notasPromedio y por último, borrar los cuadros de texto en espera de entrar la información de un nuevo estudiante o de terminar. En los vectores nombres y notasPromedio almacenamos la información que será presentada en el informe final. El código completo lo veremos así en el editor:

% --- Executes on button press in bEntrar.function bEntrar_Callback(hObject, eventdata, handles)% hObject handle to bEntrar (see GCBO)% eventdata reserved - to be defined in a future version of MATLAB% handles structure with handles and user data (see GUIDATA)global nombres;global notasPromedio;global notaPromedio;global nroEstudiantes;

nroEstudiantes = nroEstudiantes + 1;nombre = get(handles.tNombre, 'String');nombres{nroEstudiantes} = nombre;notasPromedio(nroEstudiantes) = notaPromedio;borrado = '';set(handles.tNombre, 'String', borrado);set(handles.tExamen1, 'String', borrado);set(handles.tExamen2, 'String', borrado);set(handles.tNotaPromedio, 'String', borrado);

d. Botón bTerminar. Por último programamos el evento click en el botón bTerminar que consiste en producir el informe final: títulos, subtítulos y listado de nombres y notas promedio de los estudiantes, así como el cálculo y despliegue del promedio

del grupo. Este evento también termina la ejecución del programa. El código de este evento lo presentamos a continuación:

% --- Executes on button press in bTerminar.function bTerminar_Callback(hObject, eventdata, handles)% hObject handle to bTerminar (see GCBO)% eventdata reserved - to be defined in a future version of MATLAB% handles structure with handles and user data (see GUIDATA)global nombres;global notasPromedio;global nroEstudiantes;

clcfprintf('Balance del Curso\n');fprintf('\nNombre\tNota\n\n');for i = 1 : nroEstudiantes

fprintf('%s\t%4.1f\n', nombres{i}, notasPromedio(i));endfprintf('\nPromedio del grupo:\t%4.1f\n', mean(notasPromedio));

% terminación del programaclose(gcbf);

16. Hemos concluido el programa completo y ya se encuentra listo para su ejecución. El programa en ejecución lo podemos ver como lo muestra la siguiente figura:

17. A continuación observamos el listado final que nos entrega el programa en la ventana de comandos de MATLAB

18. Al guardar el programa, el editor se salva con la extensión .m y el formulario con la extensión .fig. Podemos nuevamente traer el formulario, ya creado, de la siguiente manera:

a. Abrimos MATLABb. Entramos a la opción del menú File – New – GUIc. Se muestra la siguiente ventana:

d. Abrimos la pestaña Open Existing GUIe. Seleccionamos el archivo requerido .figf. Ya tenemos el archivo a disposición para su edición o ejecución