MATLAB PARA

INGENIERÍA
INTERFAZ GRAFICA
Ing.WilliamWilfredo Chauca Nolasco
 GUIDES de Matlab
Matlab GUIDE es un entorno de programación visual disponible en
Matlab para realizar y ejecutar programas que necesiten ingreso
continuo de datos.
Tiene las características básicas de todos los programas visuales
como Visual Basic o Visual C++.

El lenguaje más habitual para crear GUI-s es Java, ya que tiene la

enorme ventaja de funcionar en cualquier máquina, sin embargo
Java resulta muy lento para hacer cálculos eficientemente, y es
aquí donde Matlab es más poderoso. Por otro lado, las GUI-s
creadas con Matlab pueden ser entregadas al ordenador de un
cliente (quien posiblemente no tenga más que un navegador) y
ser ejecutadas en el ordenador de quien creó la interfaz en Matlab
(y que por supuesto tiene un Matlab funcionando), de modo que
la ventaja relativa de Java está parcialmente ofertada también por
Matlab.
Las GUI-s son herramientas muy útiles para entregar aplicaciones
a aquellas personas que no saben lo suficiente de programación y
que quieren beneficiarse de las ventajas de un programa.
 OBJETIVO:
El objetivo del tema es aprender a realizar interfaces gráficas
de usuario, a las que nos referiremos como GUI-s que es
como se conocen normalmente.

Diseño de una GUI.

Antes de empezar a programar es imprescindible hablar con el
usuario final de la GUI . Es importantísimo entender cuáles son las
necesidades exactas que tienen que ser cubiertas por la aplicación.
Para ello es necesario entender el tipo de datos y variables que son
introducidas por el usuario, así como las excepciones que puedan
producirse, los casos que ocurren pocas veces pero que hay que
tener en cuenta, etc. También es necesario saber cómo quiere el
cliente que se presenten los datos; si se necesitan gráficos o tablas
que salgan por impresora, o cómo se guardan los resultados, dónde
se guardan y en qué formato lo hacen. La parte del diseño es, con
mucha diferencia, la más importante desde el punto de vista del
usuario y por tanto también lo es desde el punto de vista empresarial
Para diseñar correctamente una GUI, lo mejor es hacerlo con
papel y lápiz. Presentar un boceto al cliente y mejorarlo con él es
la mejor opción. De esta manera se consigue que no haya
sorpresas y evita que después de haber realizado un montón de
trabajo luego haya que tirarlo a la basura y que encarece mucho
los proyectos, y además se consigue que el cliente se implique en
el proyecto poniendo su talento y sus preferencias en la
herramienta que al final usará él mismo.
Las GUI-s tienen que hacerse de modo que los botones estén
donde la gente espera que estén. Si nuestra GUI tiene varias
páginas distintas y en cada una de ellas hay un botón que dice
“Guardar” es conveniente que ese botón esté localizado en el
mismo sitio siempre. Todo esto parece ser de un sentido tan
común que parece innecesario hacer notar que el papel y el lápiz
son la mejor herramienta, sin embargo al hacer GUI-s sólo el
sentido común tiene algún sentido.
Una vez que tenemos claro qué objetos tendrá la GUI, gráficos,
textos, radio buttons, check boxes, edición de texto, entrada de
valores, lectura de matrices, etc, y una vez que tengamos claro de
qué forma aparecerán en la interfaz (el layout) es necesario hacer
un programa de tipo script que tenga la misma funcionalidad que la
GUI que queremos programar. Antes de incorporar el programa a la
GUI, es necesario hacer todo tipo de pruebas con él hasta estar
completamente seguros de que el programa que vamos a
incorporar en la GUI es el programa que queremos. Para hacer las
necesarias pruebas lo mejor es hacerlas sobre un script y no
directamente sobre la GUI.
Una vez que tengamos el script guardado podremos incorporar los
distintos trozos del script en la GUI, de modo que al hacer las
pruebas sobre la GUI podamos contrastar los resultados con los
que obtenemos del script.
Una vez hayamos acabado con los tests sobre la GUI definitiva y
estemos completamente seguros de su correcto funcionamiento,
la GUI puede ser entregada al cliente.
 Pasos para crear una GUI con MatLab
INICIO
Para iniciar nuestro proyecto,lo podemos hacer de dos maneras:

• Ejecutando la siguiente instrucción en la ventana de comandos:

>> guide

• Haciendo un click en el ícono que muestra la figura:

ICONO GUIDE
Se presenta el siguiente cuadro de diálogo:

Ventana de inicio de GUIDE

Se presentan las siguientes opciones:
Blank GUI (Default)
La opción de interfaz gráfica de usuario en blanco (viene predeterminada), nos
presenta un formulario nuevo,en el cual podemos diseñar nuestro programa.

GUI with Uicontrols

Esta opción presenta un ejemplo en el cual se calcula la masa, dada la densidad
y el volumen, en alguno de los dos sistemas de unidades. Podemos ejecutar
este ejemplo y obtener resultados.

GUI withAxes and Menu

Esta opción es otro ejemplo el cual contiene el menú File con las opciones
Open, Print y Close. En el formulario tiene un Popup menu, un push button y un
objeto Axes, podemos ejecutar el programa eligiendo alguna de las seis opciones que
se encuentran en el menú despegable y haciendo click en el botón de comando.

Modal Question Dialog

Con esta opción se muestra en la pantalla un cuadro de diálogo común, el cual
consta de una pequeña imagen, una etiqueta y dos botones Yes y No,
dependiendo del botón que se presione,el GUI retorna el texto seleccionado (la
cadena de caracteres‘Yes’ o‘No’).
Elegimos la primera opción, Blank GUI,y tenemos
iirf untitlcd.ffg ~@[E)
EJle !;.dit '1jew ~•yout Iools ~
O~•li"'•")(" .t~~~l~~8.tllil>
D 11; Select

E !El PushButton
1CJB Slider

P C f) RadioButton

A O l;;;f CheckBox

L M li,ri EdltText

E P l!ill Stotlc Text FORMULARIO

T O IE13 Pop·up Menu ÁREA DE DISEÑO
A N ~ Listbox

S E
I!!!] Toggle
Button

N ll;i;IITable
l(i Axes + +
T
E I~ Panel
1:'.)J Button
S Group

))X ActlveX
Control

< >
C<ATent Poólt: [376, 325) Position: [520, 380, 560, 420)

Tag: figurel
La interfaz gráfica cuenta con las siguientes herramientas:

Alinear Objetos

Editor de Menú

Editor de orden de Etiquetas

Editor de barra de herramientas

Editor de M-File

Propiedades del Objeto

Navegador de Objetos

Grabar y Ejecutar
Para obtener la etiqueta de cada elemento de la paleta de componentes
ejecutamos: File>>Preferences y seleccionamos Show names in component
palette.Tenemos la siguiente presentación:
 La siguiente tabla muestra algunas
descripciones de los componentes GUIDE
ICONOS GUIDE
 Mas descripciones de los controles de MatLab

Componente Icono Descripci

ón
Invoca un evento inmediatamente. Por ejemplo, un
botón Aceptar podría aplicar la configuración y cerrar un
Push Button ~ cuadro de diálogo. Al hacer clic en un botón de comando,
aparece deprimido; Cuando suelte el botón del ratón. el
Usadoaoarece
botón para representar
elevado. un rango de valores, permite al
Slider usuario mover una barra de deslizamiento.
E]
Radio Button [!] Indica una opción que puede ser seleccionada.

Indica el estado de una opción o Las casillas

Check Box atributo. verificación son útiles cuando se de suario un
~ proporciona al u de opciones número
indeoendientes.
Edil Text
E) Caja para editar
texto,
las cadenas de texto.
permite a los usuarios
introducir
Los
modifica
oa lospueden introducir
usuarios r
Caja para editar texto, permite
números pero
usuarios las cadenas de texto. Los
usuarios pueden intr debe convertirlos a
sus eauivalentes numéricos.
Mas descripciones de los controles de MatLab
Mas descripciones de los controles de MatLab
PROPIEDADES DE LOS COMPONENTES
Cada uno de los elementos de GUI, tiene un conjunto de opciones que
podemos acceder con click derecho.

Opciones del componente.

La opción Property Inspector nos permite personalizar cada elemento.
Al hacer click derecho en el elemento ubicado en el área de diseño, una de las
opciones más importantes es View Callbacks, la cual, al ejecutarla, abre el archivo
.m asociado a nuestro diseño y nos posiciona en la parte del programa que
corresponde a la subrutina que se ejecutará cuando se realice una determinada
acción sobre el elemento que estamos editando.
Por ejemplo, al ejecutar View Callbacks>>Callbacks en el Push Button, nos
ubicaremos en la parte del programa:
 FUNCIONAMIENTO DE UNA APLICACIÓN
GUI

Una aplicación GUIDE consta de dos archivos: .m y .fig, El archivo .m es el que

contiene el código con las correspondencias de los botones de control de la
interfaz y el archivo .fig contiene los elementos gráficos.

Cada vez que se adicione un nuevo elemento en la interfaz gráfica, se genera

automáticamente código en el archivo .m

Para ejecutar una Interfaz Gráfica, si la hemos etiquetado con el nombre curso. fig,
simplemente ejecutamos en la ventana de comandos >> curso. O haciendo click
derecho en el m-file y seleccionando la opción RUN.
 MANEJO DE DATOS ENTRE LOS ELEMENTOS DE
LA
APLICACIÓN Y EL ARCHIVO .M
Todos los valores de las propiedades de los elementos (color, valor,
posición, string…) y los valores de las variables transitorias del
programa se almacenan en una estructura, los cuales son accedidos
mediante un único y mismo identificador para todos éstos.
Tomando el programa listado anteriormente, el identificador se
asigna en:
handles.output = hObject;
handles, es nuestro identificador a los datos de la aplicación. Esta
definición de identificador es salvada con la siguiente instrucción:
guidata(hObject,handles);
guidata, es la sentencia para salvar los datos de la aplicación
guidata es la función que guarda las variables y propiedades de los
elementos en la estructura de datos de la aplicación, por lo tanto, como
regla general, en cada subrutina se debe escribir en la última línea lo
siguiente:
guidata(hObject,handles);
Esta sentencia nos garantiza que cualquier cambio o asignación de
propiedades o variables quede almacenado.

Por ejemplo, si dentro de una subrutina una operación dio como

resultado una variable SUMA para poder utilizarla desde el programa u
otra subrutina debemos salvarla de la siguiente manera:

handles.SUMA = SUMA;
guidata(hObject,handles);

La primera línea crea la variable SUMA a la estructura de datos de la

aplicación apuntada por handles y la segunda graba el valor.
 SENTENCIAS GET y SET
La asignación u obtención de valores de los componentes se
realiza mediante las sentencias get y set. Por ejemplo si
queremos que la variable Barra tenga el valor del Slider
escribimos:
Barra= get(handles.slider1,'Value');

Notar que siempre se obtienen los datos a través de los

identificadores handles

Para asignar el valor a la variable utpl al statictext etiquetada como text1

escribimos:

set(handles.text1,'String',utpl); %Escribe el valor del Slider...

%en static-text
 FUNCIONES DE UNA INTERFAZ GRAFICA
Para comprender mejor las sentencias que se ha descrito
anteriormente , definiremos algunas de las funciones más utilizadas en
la creación de una interfaz grafica.

a.- get(h, ‘Property Name’): Devuelve el valor de la propiedad del

objeto identificado como ”h”

b.- set(h, ’Property Name’, Valor): Asigna un valora la propiedad del

objeto identificado como “h”

c.- Opcion = questdlg(Mensaje, Titulo, Boton1, Boton2, Defecto):

Visualiza una ventana con dos opciones.

d.- h = gcf : Asigna el identificador de la figura actual a la variable “h”.

e.- h = gca : Asigna el identificador del plano actual a la variable “h”.

f.- h = gco : Asigna el identificador del objeto actual a la variable “h”

Aplicación Nº 01 – Sumar dos números
Con este ejemplo,se pretende mostrar el uso de pushbutton, static text
y Edit text
 -- -----------

,,¡, untitlcd.fig ~@~

EiJe tdit ~ lay()<t !ools t:!Oip

a..J ")( c!,~~~1~~8tll),

• ~ Sele<t "
.... Sllder Este control lo ubicaremos en el formulario
f) Radio &tton
9
Ched<Box

liil.i Edit Text Este control lo ubicaremos dos veces

llliJ Static Text Este control lo ubicaremos en el formulario

j¡t Axes

f~ Panel

~X ActiveX C<rtrol

<
>
Tag:figosel Current Point: [345, 17) Posmn: [520, 380, 560, 420)
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
.rl untitled. fig ~[QJ~
Eile !;dit 'ijew bayout Iools ~

oª QI 1111 ""
1 ~ Soloct
• c."
iI IEl Push Button
1 .... sudor

I t) Radio Button
-
1 0 ChockBox Ed< Toxt

I lío!<EdltToxt
! lffilStatlcText Ed< Toxt

I B3 Pop·up
Menu
! i(ll listbox
! l!!I Toggle Button
Static Text
! IW Table

1 ~Axes

I l!!ii Panel .'--~-P~u-sh_B_~-º~n~~~ ~-

II I~ Button Group

1 ¡~X ActiveX Control

<
>
 Poner
un
nombre
• C:\Documents and Settings\zzzzz\Mis documentos\MARAB\SUMA.m ~@~
Eile ~dit Iext §,() !;.el T!!(lls Oe!¡ug Qe<l<top tjelp
l!!lndow
rl, ~ • "') ~ 141 fr~ ~ • €1 ~
~ • lf JI l9 1 Stac~: 1

-~+ ,..ll
+E]x ...%~%~ O. 41 - Base
/~

1 function
function varargout
varargout =
= SUMA(varargin) ....
.... SUMA(varargin) o
2 % SUMA M-file for SUMA.fig
3 % SUMA, by itself, creates a new SUMA or raises the existing
4 % singleton*.
65 '%% H = SUMA returns the handle to a new SUMA or the handle to

7 % the existing singleton*.

8 %
9 % SUMA('CALLBACK',hObject,eventData,handles, ...) calls the local
10 % function named CALLBACK in SUMA.M with the given input arguments.
11 %
12 % SUMA('Property','Value', ...) creates a nfw SUMA or raises the
13 % existing singleton*. Starting from the left, property value pairs are
14 % applied to the GUI before SUMA_OpeningFcn gets called. An
15 % unrecognized property name or invalid yalue makes property application
16 % stop. AII inputs are passed to SUMA_CDpeningFcn via varargin.
17 %
18 % *See GUI Options on GUIDE's Tools menu. Choose "GUI allows only one
19 % instance to run (singleton)".
20 %
21 % See also: GUIDE, GUIDATA, GUIHANDLES
22
23 % Edit the above text to modify the response to help SUMA
24
25 % Last Modified by GUIDE v2.5 04-Nov-201 Q 14:06:06
26
27~-~%~Bea_in_initializatioJLcode~DO..llO.L...E...D.'-'-'- - - ---------.--------------'v
27~-~%~Bea_in_initializatioJLcode~DO..llO.L...E...D. '-'-'- - - ---------.-------------
SUM
A
Ln
I
127 Col
Asignando propiedades al control Push Botton

File Edit Debug Paraftel Desktop Window Help

: () ~ 1 di, "' (" '1, r1} ~ @ 1 Current Folder: ! C:\DocLments and Settings\22222\Mis
• .., .,. . documentos\MATLAB
: Curre
Shortcuts !l) How
... ·~ D tol' Add
x
~ ~
~(g)[E)
• IEc:) « p » Layout Tools Help
~ SUMA.fig
M...
Name File Edit Vlew
~-..., ("l.$~~~
~avion.asv 1 ": .l' 1
~avion.m Select
[ª1 BESITO
1 [E] PushButton + +
~bisec.m
é) biseccion.m
I a::a Stider t
€) bisecdonl 1.m 1 @) Radio Button 1
+
~bisex.m 1 9 Eclit Text
[ª1 CANELLE CheckBox
~ capa.asv j lwIT Edit 1
+
Text
~capa.m j ífru Static Text Ecllt Text
~ cubo.asv
I
[ª1
~cubo.m
cubo. jpg
1
E3

~
Pop-up Menu
- T
+ +

~CURSO.fig Listbox
1 ~ Toggle Button
+
eJcuRSO.m Static Text
I!) exp.txt 1= l;;l;ll Table
~fichero.ro
.fc:::Axes
f) fichero2.m + +
€.) gauss.m 1 [~ Panel
Ctr1+X
~
~
grafitol.asv
grafitol.m
I= I~ Button Group + + Ctr1+C
f) grafitos.m !=X Activex Control Ctrl+V
J. himnodelaalegri ...
A la440.wav I + + Ctr1+D
~liman.asv •...........................-.~
..~.~.~.~
..~.~.~. ~-¿
Bring to Front Ctr1+F
~timan.m
~malla.asv
[ª1
157] mala. jpg

~maaa.m
.. . T
<
~ag:~pu~sh~bu~tto~n I ~~~~~~~~~~~~~~~~~~~~~~~--:Current Point: (509,
Send to Back
---------------
Object Browser
M·file Editor
Ctr1+B
¿

~~ ..........
movimovi.m
vi
1/iew Callbacks
Details
~ ...... .,~ Property Inspector

Push Button Property Editor ...

 ~ c:::J
6eing0eleted off
6usyActlon queue
6uttonOownFcn
COete
Cellbeck

Clipplng on
[OxO double errey)
[lxl
¡
functlon_hendle errey) (ll)(hOb ...
~
~
~

CreeteFcn
OeleteFcn
Eneble

Extent
FontAngle
=normel
on
[O O 10,6 1,923)
~
~

FontNeme MS Sens Serlf ~

FontSlze 12.0 ~
FontUnlts polnts

-
FontWeight bold
ForeoroundColor
~
HendleVlsibility on
HitTest on
HorlzontelAlignment center
Interruptlble on
KeyPressFcn ~ ~
LlstboxTop 1.0 ~
Mex 1.0 ~ Mln
o.o ~
Positlon [69,6 6,646 30,2 2,306)
SelectlonHlghllght on
SllderStep [0,01 O, 1)
Strlng ~ Sumer ~ Style
pushbutton
Teg pushbutton 1 ~
Programando en el control Edit1

I C:\Documcnt and Scttings\zzzzz\Mis ~§@

s documcntos\MATI_AB\SUMA.m*
E.le f;dt Iext !,o ¡;en Tg_ols esklop l!llndow !:!elp
Deb.ug Q ...
: Ü l.J Q i 1111 •
") ("'0 • 1 ifl • .. fr~ ll!!J • ~ ~ 4I - flT J8 • 1
1%~
185 ~~ runcnon
' I Í'f.
en1c 1 _1 llback(hübJect,
Stac~: Base handles
.a %~10
~·~~~
86 -~+ºlo 1
G eventdata,
handle to edit1 (see GCBO~ J
+EJx
86
87 G %ºloeventdata
hObject reserved . - to be defined in a future version of MATLAB
hObject
87
88 % eventdata structure with handles and user data (see GUIDATA)
>-%
88 >-% handles
handles ,'String'); %Para almacenar el valor ingresado
89 --
90 Valor=get(hObject
NuevoValor= str2Double(Valor); %Transformamos a formato doble
90 - NuevoValor=
str2
91 -
93 handles.edit1
% evoValor; %Almacenar
Hints: get(hObject,'String') en identificador
returns contents of edit1 as text
=Nu
94 % andles); %Salvar datos de lacontents
str2double(get(h0bject,'String'))returns aplicacion
of edit1 as a dv
92 - ~
guidata(hObject,h SU>1A / Ln Col 40 =OV=R
1
edtl_Calbock 66
93 % Hints: UJ
::
)
94 %
'(
Programando en el control Edit2

I C:\Documcnts and Scttings\zzzzz\Mis documcntos\MATI.AB\SUMA.m•

~(Q)rE)
Ejle !;:dit Iext lio ~ell TQols !lesktop Window ~ .,
De~ug
:[)~Q ,. ... ~ .,, (" 1 ~ ~ •1 141 • • ftt .
: +Gl
•
~Gl Gl -
E·€1t'.l<l'llll"ll•
Gl 1% J,,.
I+ 1 stac~ ae,e º· e
110
-111A
11. +EJx
$
0 function
~%
Callback(hObjec eventdata, handles)
t,
~
=

112 % hObject handle to edit2 (see GCBO)I

113
edit2
ºlo eventdata reserved - to be defined in a future version of -
MATLAB -
114 % handles structure with handles and user data (see GUIDATA) --
115 --
11 Valor=get(hObject,'String');%Almacenar
handles.edit2=NuevoValo %Para almacen~ el valor ingresado
en identificador
7
116 - r; -
l
NuevoValor= str2Double(Valor); %Transfor amos a formato doble
-
-
118 - guidata(hObject,handles); %Salvar datos de la aplicacion
119 % Hints: get(hObject,'String') returns contents of edit2 as text
j eR
5tl>IA / edit2_Callback Ln 112 Col 10
120 % str2double(get(h0bject,'String')) returns contents of edit2 as a d
t\?.1 ,1
~
>
Programando en el control PushButtom1
-------------------------------

• C:\Documen and Settings\zzzzz\Mis documentos\MA11.AB\SUMA ~(QJ(8

ts .m•
EJle t:dit Iext 1;0 \:ell Tqols Oequg Qesl<top l!tildow ~ }
: O ~ Q l. 1111 • ..., <" ~ ·~ • 11 • • ftt IIEI • ~ ti 11 - lf 18 19
stac!s: º" , 1 /~

72 % Get default command line output from handles structure

73 - -varargout{1} = handles.output;
74
75
76 % --- Executes on button press in pushbutton1.
77 - function oushbutton1 Callback(hObject, eventdata, handles)
78 - A=handles.edit1;
79 - B=handles .edit2;
80 - Suma=A+B·
'
81 - set(handles.text1, 'String',Suma);
82 ºlo hObject handle to pushbutton1 (see GCBO)
l< .. "' , 1, 1 ,
1
1
r
,. r,
i
r••A...-1 ",....

>
~

Sl-"'A I pusl-,lútonl _C_ Ln 80 Col 10 0\/R

Ejecutando el programa
.ri SUMA.fig ~[Q)r8)
Elle

o~
!;dit

,~.")
\liew bayout Iools tielp

,$~~~ ~~8tllll>

!
1 ~
I Cl!l
Select

Push
('! !
1
Button
1CD Slder !
1 @) Radio Button[ 1 ~ ~
1 13 Check Box !
( !iiF Edit Text f ._ !
I lml Static Text !
I G3 Pop·t.4) Menu !
1 11J I
1 1111 Toggle Button
Listbox !
1 ~Table !
I fe:'.~·· 11
---~+-~-+-~-+~--+~---l~~+--~-.-~~~~~----.¡.~--+
1 [~ Panel I Sumar
I I~ Button Group !
I JX ActlveX Control !

e
~I
lag: figisel Current Poirl:: (388, 383] Position: (520, 383, 560, 417)
·) ~~ f8J
SUMA

so

100

150

1
Sumar 1