Está en la página 1de 13

CURSO BÁSICO INTERMEDIO DE MATLAB GUÍA #7 “Interfaz Gráfica de Usuario GUI”

OBJETIVO: El objetivo de esta práctica es dar una introducción básica al diseño y construcción de interfaces gráficas de usuario, “GUIs”. INTRODUCCIÓN: GUIDE (Graphical User Interfase Development Environment) es un juego de herramientas que se extiende por completo como soporte de MATLAB, diseñadas para crear GUIs (Graphical User Interfaces) fácil y rápidamente dando apoyo al diseño y presentación de los controles de la interfaz, reduciendo la labor al grado de seleccionar, tirar, arrastrar y personalizar propiedades. Una vez que los controles están en posición se editan las funciones de llamada (Callback) de cada uno de ellos, escribiendo el código de MATLAB que se ejecutará cuando el control sea utilizado. Siempre será difícil diseñar GUIs, pero no debería ser difícil implementarlas. GUIDE está diseñado para hacer menos tediosos el proceso de aplicación de la interfaz grafica y obviamente para trabajar como herramienta de trazado de GUIs, entre sus poderosos componentes esta el editor de propiedades (property editor), este se encuentra disponible cada que damos click derecho sobre el objeto a configurar, el editor de propiedades por separado se puede concebir como una herramienta de trazado, y asistente de codificación (revisión de nombres y valores de propiedades). Cuando se fusiona con el panel de control, el editor de menú, y herramienta de alineación, resulta una combinación que brinda inigualable control de los gráficos en MATLAB. DESARROLLO: Para iniciar un proyecto tipo GUIDE, se puede recurrir a las dos opciones presentadas a continuación: a) Ejecutando la siguiente instrucción en la ventana de comandos de Matlab: >> guide b) Haciendo un click en el ícono que muestra la siguiente figura:

En este cuadro de diálogo se pueden apreciar las siguientes opciones de diseño: a. presenta un formulario nuevo. en el cual se puede diseñar el programa. Blank GUI (Default): La opción de interfaz gráfica de usuario (predeterminada por defecto). Arranque de guide desde la barra de menú de Matlab Una vez arranca GUIDE. . Este ejemplo se puede ejecutar y obtener resultados.Figura #1. b. GUI with Uicontrols: Esta opción viene prediseñada por defecto con un ejemplo que permite calcular la masa dada la densidad y el volumen. en uno de los dos sistemas de unidades. Ver figura #3. Aspecto general de la herramienta GUIDE. matlab mostrará el siguiente cuadro de diálogo o ventana: Figura #2.

Figura #4. Cuadro de diálogo de la opción “GUI with Uicontrols” de GUIDE. Cuadro de diálogo de la opción “GUI with axes and menú” de GUIDE. c.Figura #3. En la figura #4 se puede apreciar el respectivo cuadro de diálogo. . GUI with axes and menú: Esta opción también viene diseñada con un ejemplo en el cual existe un objeto “axes” que permite graficar. Este es otro ejemplo prediseñado desde el cual se pueden hacer nuevos diseños cambiando algunas características. un menú desplegable con cinco opciones y un botón llamado update.

Modal Questions Dialog: Esta opción muestra en la pantalla un cuadro de diálogo común. Para obtener la etiqueta de cada elemento de la paleta de componentes se ejecuta: File>>Preferentes y seleccionamos Show names in component palette. INICIANDO LA GUI El ejercicio que se presenta a continuación permite explicar paso a paso el diseño de una GUI con la opción “Blank GUI (Default)”. el cual consta de una pequeña imagen. se pueden ver las características de cada una de las opciones de la paleta que aparece al lado izquierdo de la ventana de diseño de la GUI. Figura #5. En la tabla #1. la GUI retorna el texto seleccionado (la cadena de caracteres “Yes” o “No”). Una vez se selecciona la opción. como primera medida se selecciona la opción una vez se ha invocado la herramienta “GUIDE”. Ver figura #5. el siguiente paso es hacer visible la opción de objetos componentes y paleta del editor. dependiendo del botón que se presione. la ventana de la nueva GUI debe tener una apariencia tal como lo muestra la figura # 6. una etiqueta y dos botones (Yes y No). Cuadro de diálogo de la opción “Modal Questions Dialog” de GUIDE.d. .

Características de los controles.Figura #6. opciones. Lista deslizable. Ventana de diseño de la GUI. etc. . etc. On-Off.) Casilla que permite mostrar un string (cadena de texto) Permite desplegar una lista de opciones. permite generar una acción Casilla de chequeo. Visualiza un grupo de controles alternos Panel exclusivo para radio Buttons y toggle buttons Despliega controles ActiveX en GUIs. Presenta un área con ejes para graficar. permite revisar el estado de una opción Casilla que permite editar texto (Títulos. Tabla #1. etiquetas. Botón que permite tener las opciones Falso Verdadero. CONTROL Push Button Slider Radio Button Check Box Edit Text Static Text Pop-up Menu Listbox Toggle Button Axes Panel Button Group ActiveX Control DESCRIPCIÓN Botón que permite generar una acción Control que representa un rango de valores Botón circular.

tiene un conjunto de opciones las cuales se pueden acceder dando click derecho sobre el objeto. En la figura #8 se aprecia el despliegue de esta opción de configuración. se procede a configurar el control. nombre. uno de los elementos de configuración es el “Property Inspector” . esta opción permite personalizar el control (color. Luego de desplegado el cuadro de diálogo mostrado en la figura #7. Ver figura #7. tamaño. . forma. Figura #7.PROPIEDADES DE LOS COMPONENTES Cada uno de los elementos u objetos de una GUI. etc. tag.). Conjunto de opciones de los objetos de la GUI.

la cual. al ejecutarse. El procedimiento completo para lograr llegar a esta opción.Figura #8. Vista general del cuadro de diálogo de “Property Inspector” La opción quizá más importante en el diseño de una GUI es “View Callbacks”. Figura #9. se muestra claramente en la figura #9.m asociado al diseño y muestra la parte del programa que corresponde a la subrutina que se ejecutará cuando se realice una determinada acción sobre el elemento que se está editando. Ruta completa para lograr acceder al “CallBack” de un objeto de la GUI. Click derecho . abre el archivo.

Cada vez que se adicione un nuevo elemento en la interfaz gráfica. Nótese la utilización del comando eval.15. Kelvin o Fahrenheit). El archivo. Para ejecutar una Interfaz Gráfica.celsius. este comando ejecuta un string (cadena de caracteres) como si fuera una expresión numérica. donde s es un string. .m y .m es el que contiene el código con las correspondencias de los botones de control de la interfaz y el archivo.fig. EJERCICIO #1 Diseñar una GUI que permita entrar el valor de temperatura en cualquier sistema (Celcius. la siguiente orden: >> curso O haciendo click derecho en el m-file y seleccionando la opción RUN.'string')). por ejemplo.fig contiene los elementos gráficos.ESTRUCTURA Y FUNCIONAMIENTO DE UNA GUI Una aplicación GUIDE consta de dos archivos con extensiones . Para entender mejor la utilización de estos comandos y otros que en adelante se darán. eval(s). se ha etiquetado con el nombre curso. La expresión.m. convierta a los otros dos sistemas restantes y el resultado lo muestre en las correspondientes casillas. celsius1=eval(get(handles.fig. A continuación se muestra parte del código para obtener (get) el valor de la temperatura ingresada y poder tenerla como valor numérico para su procesamiento. en cada una de las casillas correspondientes a dicho sistema. se genera automáticamente código en el archivo. causa que MATLAB ejecute este string como una expresión o declaración. %Para convertir Celsius a Kelvin kelvin1 = celsius1 + 273. SENTENCIAS GET Y SET La asignación u obtención de valores de los componentes se realiza mediante las sentencias get y set. si. se planteará el siguiente ejercicio. simplemente se ejecuta en la ventana de comandos de matlab. luego dando click en el botón que corresponde con el sistema de temperatura ingresado.

es por eso que también va acompañado de la palabra string entre apóstrofos. Para colocar el valor de la variable kelvin1 al statictext.'string'. En esta parte del código se utiliza el comando set. en el desarrollo de código de una GUI. Este tipo de comentarios son importantes toda vez que un buen trabajo debe quedar muy bien documentado. . se procede de la misma forma. Esto se consigue utilizando el comando get. es el handles. a cada uno de los parámetros de entrada o salida debe anteponerse la orden handles seguida de punto. el cual fue guardado en la variable kelvin1. Para el resto de casillas correspondientes a los sistemas de temperatura dados en la GUI. El siguiente paso en la construcción de la GUI de ejemplo #1. que en este caso no es más que el dato entrado por la casilla celcius en la pantalla de la GUI. en la casilla correspondiente de la ventana principal de la GUI. Otro elemento que aparece en el código mostrado. en este caso se utiliza como driver para realizar la orden. handles traduce manejador. ocurre la siguiente secuencia: se crea una variable celcius1 en donde se guardará el resultado del eval.kelvin1). En las figuras subsiguientes se mostrará gráficamente cada una de las ventanas de diseño y funcionamiento de la GUI del ejemplo #1. En la tercera línea del código se realiza la operación de conversión de la temperatura dada en grados Celsius (Definida en la primera línea como celcius1) a grados Kelvin resultado que se almacena en la variable kelvin1.En la primera línea del código mostrado anteriormente. La segunda línea del código representa un comentario. para lo cual se utiliza la fórmula universal: De esta forma Matlab retiene el valor de la conversión y la guarda en la variable kelvin1 en el workspace. es colocar el valor calculado en la línea 3 del código (temperatura en grados Kelvin). puesto que se trata es de poner el resultado de kelvin1 en la casilla correspondiente y en formato string. (Tag kelvin) se escribe el siguiente fragmento de código: set(handles.kelvin.

Aquí se mostrarán los resultados de las operaciones realizadas por el scrip de la GUI. se utilizaron los siguientes objetos:    Cuatro Edit Text: Donde se escriben. En el diseño preliminar de la GUI del ejemplo #1. Vista de la GUI del ejemplo #1. Borrar pantalla (BORRAR) y Salir (SALIR). y la identificación de cada una de las casillas correspondientes de temperatura. . Vista preliminar del diseño de la GUI del ejemplo #1. el título de la GUI. en funcionamiento. Cinco Push Button: Encargados de ejecutar las órdenes de: Conversión de cada uno de los sistemas de temperatura (CALCULA). Tres Static Text: Donde se mostrarán los resultados de la conversión de temperaturas. Figura #11.Figura #10.

el cual al ser accionado cierra el programa de la GUI y el botón de BORRAR el cual permite borrar la pantalla de la GUI. inmediatamente las demás casillas se actualizan y dejan ver el valor correspondiente de la temperatura en el respectivo sistema. En la figura #12 se puede observar esta operación. que es el nombre dado a la GUI o simplemente dando doble click sobre el archivo cal_temp.La figura #11 muestra el aspecto general de la GUI una vez es ejecutada desde la ventana de comandos de Matlab dando la orden cal_temp.fig en la carpeta donde guardó el diseño. Figura #12. el cual permite un funcionamiento completo de la misma. clarear las casillas de datos. Una vez se ejecute el programa de la GUI. Cabe anotar que al diseño de la GUI se le han adicionado los botones de SALIR. en la casilla CELSIUS 40° y se da click sobre el botón CALCULA que se encuentra debajo de la casilla CELSIUS. se puede escribir. por ejemplo. En la siguiente sección de esta guía se muestra el código escrito en los callback de cada botón de la GUI. en funcionamiento. . Aspecto de la GUI del ejemplo “1.

to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) % Adicionamos % Para leer el dato colocado en kelvin kelvin1=eval(get(handles.8 + 32.kelvin1).fahrenheit_1. %Para escribir datos en los Edit Text set(handles. handles) % hObject handle to buttoncelcius (see GCBO) % eventdata reserved .kelvin1). set(handles.'string')).15. function buttonkelvin_Callback(hObject. %Para escribir datos en los Edit Text set(handles.fahrenheit1).function buttoncelcius_Callback(hObject. fahrenheit1=1. eventdata. %Para convertir celsius a kelvin y fehrenheit kelvin1=celsius1 + 273.15.celsius1). set(handles.Executes on button press in buttonfahrenheit. eventdata. %Para escribir datos en los Edit Text set(handles.kelvin_1. Este fragmento de código permite hacer la conversión entre los diferentes sistemas de temperatura y mostrar los resultados en las casillas de los Static Text.to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) % Adicionamos % Para leer el dato colocado en fahrenheit fahrenheit1=eval(get(handles. %Para convertir kelvin a celsius y fehrenheit celsius1=kelvin1 . fahrenheit1=(kelvin1-273.'string')).'string'. eventdata. handles) % hObject handle to buttonkelvin (see GCBO) % eventdata reserved . set(handles.'string'. handles) % hObject handle to buttonfahrenheit (see GCBO) % eventdata reserved . function buttonfahrenheit_Callback(hObject.to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) % Adicionamos % Para leer el dato colocado en celsius celsius1=eval(get(handles.'string')).'string'.273.kelvin_1.fahrenheit_1.celsius1).'string'.fahrenheit_1.fahrenheit1) % --.8*celsius1 + 32.celsius_1. % --. kelvin1=(fahrenheit1-32)*5/9 + 273. %Para convertir fahrenheit a celsius y kelvin celsius1=(fahrenheit1-32)*5/9.celsius_1.'string'.15. En el siguiente código se muestra la configuración para el funcionamiento del botón SALIR y BORRAR.'string'. .kelvin_1.Executes on button press in buttonkelvin.celsius_1.15)*1.

' ').' '). que tenga como entrada la frecuencia y la magnitud de la onda. que además cuente con un slider. function buttonborrar_Callback(hObject. % --.fahrenheit_1. Agregue una imagen alusiva a la función que realiza la GUI. por ejemplo. set(handles. éstos serán los ajustes finales del proyecto. etc.to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) set(handles. handles) % hObject handle to buttonborrar (see GCBO) % eventdata reserved . Diseñe una nueva GUI que permita graficar la función Seno. donde se pueda variar el ángulo de disparo de la onda.to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) close(gcbf) Con esto se da por terminado el diseño de la GUI.% --. leyendas.'string'.' '). Se puede dar una presentación personalizada a la GUI.'string'. cabe aclarar que existen detalles que pueden irse viendo mientras se desarrolla el diseño. TRABAJO INDIVIDUAL Como trabajo individual se plantea lo siguiente: 1. 3. set(handles. se pide agregar un fragmento de código donde corresponda. por ejemplo la imagen de un termómetro. fondo de la presentación.Executes on button press in buttonsalir. . 2. mensajes.Executes on button press in buttonborrar. 4. eventdata. Como la temperatura en la casilla de grados kelvin no puede ser menor que cero. Coloque el nombre de la institución como título del tablero principal de la GUI.'string'.kelvin_1. para que cuando se ingrese un valor no válido de temperatura aparezca un mensaje de error y corrección. ya que se trata del cero absoluto. eventdata. function buttonsalir_Callback(hObject.celsius_1. handles) % hObject handle to buttonsalir (see GCBO) % eventdata reserved . pantalla. etc. íconos. en la gráfica debe aparecer la onda seno con el efecto de recorte debido al ángulo alfa de disparo.