41
Introducción unas las Técnicas de Programación examine MATLAB Expositor: Mg. Samuel Oporto Díaz 08-FEB-2008 Interface de Usuario Grafica

Building Graphical User Interfaces

Embed Size (px)

DESCRIPTION

matlab

Citation preview

Page 1: Building Graphical User Interfaces

Introducción unas las Técnicas de Programación examine MATLAB

Expositor: Mg. Samuel Oporto Díaz 08-FEB-2008

Interface de Usuario Grafica

Page 2: Building Graphical User Interfaces

22 /13/13

Temario General1. Introducción.2. Interfaz de usuario de MATLAB.3. Variables del MATLAB.4. Ploteo y visualización de datos.5. m-Files.6. Estadística básica y análisis de datos.7. Tipos de datos.8. Entrada y salida de datos.9. Programación.10.Construcción de interfaces de usuarios gráficas.

Page 3: Building Graphical User Interfaces

33 /13/13

Objetivos• Se muestra cómo poner una “cara amigable” a los

programas MATLAB en la forma de una interfaz gráfica de usuario (GUI).

• Los GUIs permiten a los usuarios interactuar con los programas sin tener que comprender, o ver, el código que hace el trabajo principal.

• Los GUIs también permiten enfocar la atención de usuario en los comportamientos de entrada/salida específicos de un programa, mientras que des-enfatizan los mecanismos intermedios.

• Los GUIs ofrecen muchas ventajas de valor práctico sobre programas m-files simples.

Page 4: Building Graphical User Interfaces

44 /13/13

Objetos Gráficos en Matlab

Page 5: Building Graphical User Interfaces

55 /13/13

Identificador de Objetos Gráficos• Los Gráficos en MATLAB pueden ser:

– root, figure, axes, image, line, patch, rectangle, surface, text, light

• Se puede ejecutar las acciones:– Obtener el identificador del objeto.– Crear el objetos– Asignar valores a las propiedades.– Obtener los valores de las

propiedades.– Modificar propiedades de objetos

• Usando línea de comandos• Usando editor de propiedades

Page 6: Building Graphical User Interfaces

66 /13/13

Objetos Gráficos

Root

Figure

Uicontrol Uimenu Axes

(Computer Screen)

Line ImageText Surfacerectangle Patch

CheckboxPushbuttonEditText Listbox

Page 7: Building Graphical User Interfaces

77 /13/13

Objetos GráficosRoot

object

Figureobject

UIControlobjects

UIMenuobjects

Axes object

Surfaceobject

Lineobjects

Textobjects

Axes object

Page 8: Building Graphical User Interfaces

88 /13/13

Identificador de Objetos Gráficos1. Cuando se crea el objeto.

2. Funciones útiles 0 Identificador del objeto root gcf Identificador de la figura actual gca Identificador de eje actual gco Identificador de objeto actual gcbo Identificador del object desde donde se hizo la llamada

3. FINDOBJ

¿Qué es el objeto actual? • Último objeto se creado

o• Último objeto donde se

hizo clic

Defecto = 0 (objeto root)

h_line = plot(x_data, y_data, ...)

h_obj = findobj(h_parent, 'Property', 'Value', ...)

Page 9: Building Graphical User Interfaces

99 /13/13

Ejercicio 1• Plotear los datos de la función exp(-t/5).*sin(t) y verifique

las propiedades del objeto gráfico.• Identifique las propiedades del: root, figure y axes.

>> t = 0:0.1:4*pi;>> y = exp(-t/5).*sin(t)>> plot (t,y)>> propedit(0)>> propedit(gcf)>> propedit(gca)>> propedit(gco)>> inspect(h)

• Ejecute las 4 últimas instrucciones por separado

Page 10: Building Graphical User Interfaces

1010 /13/13

Modificando propiedades de un objeto• Obteniendo una lista de las propiedades actuales:

• Obteniendo una lista de las propiedades asignables:

• Modificando propiedades de un objeto– Usando línea de comandos.

– Usando editor de propiedad

get(h_object)FactoryFigureColor a = get(h_object,'Default')

set(h_object)

set(h_object,'PropertyName','New_Value',...)

Page 11: Building Graphical User Interfaces

1111 /13/13

root

Propiedadesfigure

Page 12: Building Graphical User Interfaces

1212 /13/13

Propiedadesaxis

Page 13: Building Graphical User Interfaces

1313 /13/13

Ejercicio 2• Identifique sus propiedades• Modifique las propiedades de un objeto gráfico.

t = 0:0.1:4*pi; y = exp(-t/5).*sin(t); h = plot(t,y);get(h,'Color')get(h,'linewidth')get(h,'Marker')get(h,'MarkerSize')set(h,'Color' ,[0 .9 1])set(h,'linewidth' , .8)set(h,'Marker' , 'o')set(h,'MarkerSize', 12)set(gcf, 'Name', 'Gráfico')

Page 14: Building Graphical User Interfaces

1414 /13/13

GUI en MATLAB

Page 15: Building Graphical User Interfaces

1515 /13/13

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.

Page 16: Building Graphical User Interfaces

1616 /13/13

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.

Page 17: Building Graphical User Interfaces

1717 /13/13

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.

Page 18: Building Graphical User Interfaces

1818 /13/13

Trabajando con Gráficos

COMPONENT OBJECT

HANDLE

MODIFY PROPERTIES CALLBACK

Propiedades Eventos

Page 19: Building Graphical User Interfaces

1919 /13/13

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.

Page 20: Building Graphical User Interfaces

2020 /13/13

Objetos Gráficos

Root

Figure

Uicontrol Uimenu Axes

(Computer Screen)

Line ImageText Surfacerectangle Patch

CheckboxPushbuttonEditText Listbox

Page 21: Building Graphical User Interfaces

2121 /13/13

Objetos Uicontrol1. Push Button3. Radio Button5. Edit Text7. Popup Menu9. Toggle Button11. Panel13. ActiveX Control

2. Slider4. Check Box6. Static Text8. List Box10.Axes12. Button Group

Page 22: Building Graphical User Interfaces

2222 /13/13Push ButtonsRadio Buttons

Frames

Checkbox Slider

Edit text

static textAxes

Page 23: Building Graphical User Interfaces

2323 /13/13

Creando una nueva GUI

Page 24: Building Graphical User Interfaces

2424 /13/13

Creando una nueva GUI

Page 25: Building Graphical User Interfaces

2525 /13/13

GUIDEGraphical 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)

Page 26: Building Graphical User Interfaces

2626 /13/13

Editor

Inspector de propiedad

Ventana de resultado

Page 27: Building Graphical User Interfaces

2727 /13/13

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.

Page 28: Building Graphical User Interfaces

2828 /13/13

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.

Page 29: Building Graphical User Interfaces

2929 /13/13

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

Page 30: Building Graphical User Interfaces

3030 /13/13

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.

Page 31: Building Graphical User Interfaces

3131 /13/13

5. Edit Text• Permiten ingresar o modificar texto.

• Se usa cuando se quiere ingresar texto

• La propiedad String contiene el texto.

Page 32: Building Graphical User Interfaces

3232 /13/13

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'))

Page 33: Building Graphical User Interfaces

3333 /13/13

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.

Page 34: Building Graphical User Interfaces

3434 /13/13

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

Page 35: Building Graphical User Interfaces

3535 /13/13

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)

Page 36: Building Graphical User Interfaces

3636 /13/13

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])

Page 37: Building Graphical User Interfaces

3737 /13/13

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.

Page 38: Building Graphical User Interfaces

3838 /13/13

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)

Page 39: Building Graphical User Interfaces

3939 /13/13

Preguntas

Page 40: Building Graphical User Interfaces

4040 /13/13

Mg. Samuel Alonso, Oporto Díaz

[email protected]://www.wiphala.net/oporto

KASPeru

Page 41: Building Graphical User Interfaces

4141 /13/13

GRACIAS