GUI en MATLAB

Interfaz de usuario gráfica

• Una GUI es una interfaz de usuario construida con objetos
gráficos: botones, texto, sliders, y menús.

• Las aplicaciones que proporcionan GUI son fáciles de

aprender y usar, desde que la persona usa por primera vez
la aplicación, ya no que necesita saber los comandos ni
como trabajan.

• La acción que resulta de una acción particular del usuario

se puede observar en el diseño de la GUI.
 Tópicos para cubrirse
• Cómo crear GUIs en MATLAB
– Crear un nuevo GUI
– Colocar componentes (objetos)
– Programar las acciones del programa ante acciones del
usuario.
– Grabar y ejecutar el GUI.
 Tareas para crear GUIs
• Crear los componentes (objetos) GUI. .fig
– MATLAB implementa el GUI como ventanas figure
conteniendo varios estilos del objetos uicontrol (interfaz
de usuario)

• Programar los componentes GUI .m

– Se programa cada objeto para ejecutar la acción
activado por el usuario del GUI.
 Trabajando con Gráficos

COMPONENT OBJECT

HANDLE

MODIFY PROPERTIES CALLBACK

Propiedades Eventos
 Callbacks
• Es una rutina que se ejecuta cuando el usuario activa el
objeto uicontrol.

• Es un evento

• La rutina es definida como un String, que puede ser: una

expresión valida del MATLAB o un m-file

• La expresión se ejecuta en el área de trabajo del MATLAB.

 Objetos Gráficos
(Computer Screen)

Root

Figure

Uicontrol Uimenu Axes

Checkbox Line Image
Pushbutton Text Surface
EditText rectangle Patch
Listbox
 Objetos Uicontrol
1. Push Button 2. Slider
3. Radio Button 4. Check Box
5. Edit Text 6. Static Text
7. Popup Menu 8. List Box
9. Toggle Button 10.Axes
11. Panel 12. Button Group
13. ActiveX Control
 Axes static text
Frames

Checkbox Slider

Edit text

Radio Buttons Push Buttons

Basicamente solo se necesita entender cinco comandos para poder describir una
GUI: uimenu, uicontrol, get, set y axes. No obstante, lo que hace relativamente
complicadas a estos comandos es el gran numero de formas de uso que tiente. Es
imposible describir todos lo tipo de situaciones, pues requiere demasiado espacio
y seria muy laborioso leerlo. Por tanto, solo se trataremos de explicar los
elementos básicos de una GUI a través de ejemplos.
Creando una nueva GUI
Creando una nueva GUI
 GUIDE
Graphical User Interface Development Environment

• GUIDE es un conjunto de herramientas de diseño

• GUIDE genera un archivo de m que contiene código para

manejar la inicialización y la ejecución del GUI
– Este m-file proporciona un marco para la
implementación de los callbacks (evento)
Editor

Inspector de propiedad

Ventana de resultado
 CONTROLES DE LA INTERFAZ DE GUIDE.

Los controles de la interfaz con el usuario en MATLAB se especifican con la orden

uicontrol. Estos controles tienen mucho en común con los menús de la interfaz con
el usuario, pero los primeros tienen mucho estilos. La sintaxis de uicontrol es

donde ‘especificación de estilo’ es una de las siguientes cadenas:

popup
push
radio
checkbox
slider
edit (texto editable)
text (texto estático)
frame
Texto estático. Un static text puede exhibir símbolos, mensajes o
incluso valores numéricos de una GUI, y puede colocarse en lugar
deseado. El texto estático no tiene cadenas de invocación. A
continuación mostramos un ejemplo de texto estático.

El contenido de un texto exhibido puede modificarse si es

necesario. Esto se hace con el comando set. Por ejemplo, ejecute
el comando que sigue desde la ventana de comandos mientras
está vigente el ejemplo anterior de orden uicontrol:

Menú desplegable. Los pop-up menús difieren de los menús de

interfaz con el usuario en que pueden aparecer en cualquier punto
de la ventana de figura, mientras que los menús de interfaz con el
usuario solo se localizan en la parte superior.
Los Push button generan una acción cuando das click con el puntero
del ratón sobre ellos. Cuando usted da click en un push button,
aparece presionado; Cuando sueltas el botón del ratón, el botón
aparece levantado; y su rutina de llamada se ejecuta.

Casilla de verificación. Las casillas de verificación están diseñadas

para realizar operaciones de encendido/apagado. La casilla activa o
desactiva la aparición de los ejes. Las posiciones de
encendido/apagado se registran en Value que puede examinarse on
get(handle, ´value´). Los comandos axis on y axis off se escriben en
la cadena de invocación.
Botón de radio. Cuando solo se usa un botón de radio, no existe
diferencia funcional alguna con respecto a una casilla de
verificación. Por otro lado, los botones de radio en grupo son
mutuamente exclusivos (es decir, si un botón esta encendido, todos
los demás botones se apagan), mientras que las casillas de
verificación son independientes entre sí. Sin embargo, esta
características exclusiva de los botones de radio sólo puede
implementarse mediante la programación del usuario en la cadena
de invocación.
Barra deslizadora. Los sliders aceptan datos de entrada numéricos
con un rango especifico. Los usuarios mueven la barra dejando
presionado el botón del mouse y arrastrándola, Dando click en el
canal, en la flecha. La posición de la barra indica un valor numerico.
Texto editable. El dispositivo de texto editable permite al usuario
teclear una cadena de entrada. Se pueden escribir varios valores
numéricos en forma de vector o matriz como cadena mediante el
mismo dispositivo; esta cadena se convertirá posteriormente en
valores numéricos con el comando str2num.
Un ejemplo de uicontrol para texto editable es:

Las palabras clave en el comando anterior son ´Style´, ´edit´ y get

(mango, ´string´) que capturan el texto introducido.

Marcos. El estilo marcos puede servir para agrupar dispositivos como

lo botones de radio o las casillas de verificación.
Botón de palanca. El toggle button genera una acción que indica un
estado binario (on o off). Cuando das click en un toggle button ,
aparece presionado y permanece así hasta que sueltes el boton de el
mouse, y en ese momento ejecuta la llamada. Un click del mouse
subsecuente regresa al toggle button a su estado original y vuelve a
ejecutar la rutina de llamada.

Cajas de lista. El componente List Box muestra una lista de artículos

y permite a usuarios seleccionar unos o más artículos.
 1. Push Button
• Generan una acción cuando se presiona el botón.

• Cuando se presiona el clic sobre el botón aparece

deprimido;
• Cuando se suelta la apariencia del botón retorna a su
estado norrnal.

• El callback se ejecuta cuando se suelta el botón del

mouse.
 2. Toggle Buttons
• El Toggle Buttons generan una acción e indica un estado
binario (apagado o encendido )

• La rutina callback a ejecutar necesita consulta al botón y

determinar su estado.
– Se puede hacer con una sentencia que use el indicador
del objeto actual (gcbo)
• get (gcbo , “Value")

• MATLAB pone la propiedad de valor a 1 cuando está

apagado y 0 cuando está activo.
 3. Radio Button
• Similar al Check Box, pero estos intentan ser mutuamente
excluyentes en un grupo Radio Buttons relacionados,
sólo un botón está seleccionado en cualquier momento.

• Para hacer radio buttons mutuamente exclusivos en

un grupo, el callback para cada radio button debe
poner la propiedad de valor a 0 en todos los otros radio
buttons en el grupo
 4. Check Boxes
• Genere una acción cuando hace clic sobre él e indica su
estado con chequeado o no chequeado.

• Útil para proporcionar al usuario varias opciones de

elecciones independientes que ponen un modo.

• La propiedad Value indica el estado del Check Box y

puede tomar el valor 1 ó 0
• Valore = 1 , caja es verificada.
• Valore = 0 , caja no es verificada.
 5. Edit Text
• Permiten ingresar o modificar texto.

• Se usa cuando se quiere ingresar texto

• La propiedad String contiene el texto.

 6. Static Text
• Presenta líneas de texto.

• Típicamente usado para rotular otros controles, mensajes

de ayuda o indique valores asociados con un slider.

• Los usuarios no pueden cambiar el texto estático

interactivamente y no existen rutinas callback asociadas.

set(handles.text1,
'String',
get(handles.slider1,'Value'))
 7. List Boxes
• Muestra una lista de ítems (propiedad
String) y permite al usuarios a
seleccionar unos o más ítems.

• Por defecto, el primer ítem de la lista

está marcada cuando el list box es
presentado por primera vez.

• Si no queremos que un ítem se

encuentre seleccionado, poner el valor
[] en la propiedad Value.
 7. Selección Múltiple
• Los valores de las propiedades mínimas y máximas
determinan si usuarios pueden hacer las selecciones
sencillas o múltiples:
– Si máximo -- mínimo > 1 , entonces las cajas de lista
permiten la selección de artículo múltiple
– Si máximo -- mínimo < = 1, entonces cajas de lista no
permite múltiple ítem selección
 8. Sliders
• Acepte un entrada numérica para especificar un rango
donde el usuario puede mover una barra corrediza.

• La ubicación de la barra indica un valor numérico.

– Value - valor actual del cursor

– Max - valor máximo de cursor.
– Min - valor mínimo de cursor.
– SliderStep - variación del cursor (step)

get(handles.slider1,'Value')
set(handles.slider1,'Value',0)
 8. SliderStep
• Controla la cantidad en que cambia el Value del cursor
cuando se hace clic con el ratón sobre el botón

• SliderStep es un vector fila de dos elementos:

– Por defecto es [0.01 0.10]
– 1% para cambios con el click
– 10% para cambios con las fechas de los extremos.

get(handles.slider1,'SliderStep')
set(handles.slider1,'SliderStep',[.1, .2])
 9. Popup Menus
• Presenta una lista de opciones (definidas en la propiedad
String) cuando los usuarios aprietan la flecha

• Cuando no abre, un Popup Menu presenta la opción

actual, el cual es determinado por el índice contenido en la
propiedad Value.
– El primer ítem en la lista tiene el indice 1

• Para saber que opción fue escogida se consulta la

propiedad Value.
 MENU DE INTERFAZ CON EL USUARIO

El menú de interfaz con el usuario es un menú o un grupo de menús que se

encuentran en la parte superior de una ventana de la figura. El menú se desarrolla
de arriba hacia abajo cuando se hace clic con el ratón y se muestra una lista de
opciones siguiente figura. Cuando se elige una opción de la lista, es posible que se
desenrolle otro nivel de menús (si el menú se diseño para ello).
Los menus de interfaz con el usuario se especifican con uimenu, cuya sintaxis es la
siguiente:
Aquí se esta suponiendo que hay tres menús en una ventana de figura. En los
comandos, m1 m2, ... son mangos (get) de los menús que a menudo son necesarios en
CallBack y otros comandos. Los argumentos que siguen a gcf son las propiedades del
menú y tiene el siguiente significado:
a) ‘Label’, ‘cadena de rótulos especifica el rotulo que aparecerá en el menú.
b) ‘Position’, k determina la posición secuencial del rotulo en el menú, donde k es un
numero entero que indica en orden de prioridad.
c) ‘Backgroundcolor’, [r, g, b], especificas el color de segundo plano del menú.
d) ‘CallBack’ ‘ cadena de invocación’ especifica los comandos que se ejecutan
cuando se selecciona el rotulo.
En la sintaxis anterior es posible omitir las líneas correspondientes a positicion y
backgroundcolor si son aceptable los valores por omisión. Además, callBack no es
necesario cuando el menú va seguido de una lista de opciones que se abre cuando se
hace clic en el menú.
Si una opción del menú tiene subopciones, estas también se especifican como
uimenu. Si consideramos la lista de opciones para el primer menú cuyo mango es
m1, la sintaxis con tres opciones seria la siguiente:

Las tres opciones pertenecen al primer menú con mango m1. se omitieron as
propiedades de Position y BackgroundColor, pero pueden incluirse si se desea.
La propiedad CallBack es importante aquí si uicontrol es para el nivel terminal
del menú. La cadena de invocación es una cadena que consiste en un comando,
un conjunto de ordenes o una llamada de función. En esta cadena se especifican
todas las tareas de computo que deben ejecutarse al elegirse la opción. Las
instrucciones pueden ser un solo comando o varios; sin embargo, a fin de
simplificar la programación es recomendable no escribir mas de unos cuantos
comandos o más de una llamada de función en la cadena de invocación. Todos
los detalles de los cálculos se pueden escribir en un archivo M.
 10.Panel y Button Group
• Son cajas que incluyen regiones de un figure.

• Hace fácil de entender una interfaz de usuario por que

agrupan visualmente los controles relacionados.

• No tienen ninguna rutinas callback asociadas con ellas y

sólo los uicontrols pueda aparecer con frames (los
ejes no)