Creación de interfaces

en Matlab
Guía Básica

Mecánica de Sólidos

2017-1

Profesor encargado: Fernando Cerda

Ayudante creador guía: Juan José Moltedo
Introducción
La creación de una interfaz de usuario es un proceso que se realiza para permitir que un usuario
sin conocimientos en programación, sea capaz de utilizar un software o código previamente
creado, alterando todos los parámetros que fueron definidos como editables por el
programador. Cada lenguaje de programación tiene su propia forma de hacer esto. Por lo
general, se deben definir vía código los distintos elementos visuales que aparecerán en pantalla.
Afortunadamente, Matlab posee un asistente de creación de interfaces muy sencillo de utilizar.
El proceso de creación utilizando esta herramienta se podría resumir en dibujar la interfaz (es
casi literalmente dibujar, puesto que se seleccionan distintos tipos de objetos que uno va
arrastrando a distintas posiciones, cambiando sus dimensiones y alterando sus propiedades
gráficas) y luego definir los “callbacks” o funciones que se ejecutan al activar los diferentes
componentes (botones, “sliders”, cuadros de dialogo, etc.). Una vez que se genera el código y
se tiene la distribución de la interfaz, esta se puede ejecutar como si se ejecutara un programa
normal. A continuación se explicará el proceso a seguir.

Abrir el asistente para creación de interfaces

Esto varía levemente según la versión de Matlab instalada. Para acceder a esta opción, se debe
hacer presionar el botón con forma de “+” llamado “New” y seleccionar “Graphical User
Interface”(en otras versiones aparece “New GUIDE”), tal como se muestra en la siguiente
imagen:

A continuación, se debe seleccionar una plantilla para empezar a crear la interfaz (nos
referiremos a ella como GUI de aquí en adelante). Lo más recomendado es seleccionar la opción
“Blank GUI”, ya que permite crear la interfaz desde cero.

Seguidamente, se abrirá una ventana como la siguiente:

El espacio gris claro con una grilla es el lugar en donde se podrán colocar los botones. Si se desea
aumentar el tamaño, se debe hacer clic en la esquina inferior derecha y arrastrarla según se
desee. Antes de empezar a agregar botones, se recomienda activar los nombres de los botones,
para tener una mejor idea de que significan. Esto se realiza haciendo clic en
“File”<”Preferences…” y luego activando el recuadro que dice °Show names in component
palette”. Después se presiona “OK” y ya está activado. Se debería tener una pantalla como la
siguiente (notar que se agrandó la ventana editable):

La última opción que se recomienda activar antes de comenzar a crear la interfaz es que la
interfaz creada tenga tamaño ajustable. Para ello, hacer clic en “Tools”<”GUI Options…” y
seleccionar la opción “Proportional”.

Elementos de una interfaz

La paleta de componentes presenta 14 elementos que se pueden colocar dentro de la interfaz.
A continuación, se describen los más importantes, los cuales serán utilizados en un ejemplo al
final. Los restantes están muy bien documentados en internet.

Push Button
Un “Push Button” es un botón que activa su “callback” al presionarlo. No tiene parámetros que
se puedan modificar por el futuro usuario y no se activa hasta que es presionado. Por lo general,
se usa para ejecutar funciones que dependan o no de parámetros definidos mediante otros
componentes.

Check Box
Un “Check Box” es un recuadro que puede estar desactivado (sin ticket) o activado (con ticket).
Se pueden usar tanto como parámetros binarios (sí o no) para otros elementos (como un “Push
Button”), como para ejecutar directamente una función (e.g. activar o desactivar la grilla de un
gráfico).

Edit Text
O texto editable, es un recuadro en el que el usuario puede escribir cualquier cosa, la cual será
guardada como un “string” por el programa. El programador definirá si desea seguir trabajando
con esta clase o si desea traspasarlo a un valor numérico (revisar str2double o str2num,
funciones de Matlab). Lo anterior dependerá de cómo se utilizará tal valor. Se puede utilizar
para que al editar el texto se ejecute un comando inmediatamente o sólo como una forma de
ingresar parámetros para otro componente.

Static Text
O texto estático, es un recuadro de lectura, es decir, el usuario no lo puede editar. Se usa para
que el programa le de mensajes al usuario, por ejemplo, qué archivo ha cargado, qué es lo que
va en un “Edit Text”, que valor está tomando una variable, etc.

Pop-up Menu
Este componente permite al usuario seleccionar una opción dentro de las que han sido
previamente definidas. Se puede utilizar para activar una función o sólo como parámetro para
otro elemento de la GUI.

Axes
“Axes” es simplemente una ventana gráfica colocada dentro de la interfaz, en la que se puede
graficar lo que se desee, siempre y cuando se especifique que se pretende graficar sobre ella.
Esto será explicado más adelante. Ya que no se puede activar, sólo se usa para mostrar
resultados y no para definir parámetros o activar funciones.

Panel
Un “Panel” es simplemente un recuadro de color diferente al fondo de la interfaz, que se utiliza
para agrupar botones de una manera más ordenada y que permite moverlos a todos como un
conjunto.

Toolbar Editor
No es un componente como tal, sino que permite crear otro componente llamado “Toolbar” o
barra de herramientas. Para acceder a éste, se debe hacer clic en “Tools”<”Toolbar Editor…”.
Ahí se abre una imagen como la siguiente:
Las distintas herramientas deben ser arrastradas hasta la barra donde sale “Add tools here to
créate a toolbar…”. Esto es bastante importante si se van a utilizar gráficos, ya que es la forma
más sencilla de permitirle al usuario navegar a través de ellos.

Conceptos importantes
Tag
Un “Tag” o etiqueta es la forma en la que cualquier elemento de la GUI es referido dentro del
código que la define. Cada vez que se crea un nuevo componente, el asitente de creación le
agrega una etiqueta predefinida. Se recomienda firmemente editarla con un nombre que le haga
sentido al programador, aunque se debe procurar que sea diferente al nombre de cualquier
variable o función. Para cambiar esto, se puede hacer doble clic sobre el elemento en el editor
de interfaz o utilizar el clic derecho y seleccionar “Property Inspector”. Al hacerlo, aparece una
ventana como esta:

El inspector de propiedades permite editar las propiedades que aparecen en la columna

izquierda, alterando su valor en la columna derecha (cada propiedad funciona de manera
diferente y se recomienda leer la documentación online de Matlab). Es este caso, se debe
escribir el nombre del “Tag” que se desea usar.
Handles
Es una forma de referirse a un componente. Se usa para obtener o modificar una propiedad de
éste, por ejemplo. Para hacer lo primero, se utiliza la función “get”. La sintaxis es como sigue:

A=get(handles.Tag,‘PropertyName’); donde Tag es la etiqueta o nombre del objeto del que se

desea obtener su valor y ‘PropertyName’ es un “string” que contiene el nombre de la propiedad
a leer, por ejemplo: ‘Value’ o ‘String’.

Para modificar o definir un parámetro de un componente se utiliza la función “set”. La sintaxis

es como sigue:

set(handles.Tag,’PropertyName’,PropertyValue); donde PropertyValue es el valor que se le

asignara a la propiedad seleccionada en ‘PropertyName’. Éste puede ser un “string”, por ejemplo
para un “Static Text” o un “value” o valor numérico, para un “Check Box”.

“Handles” también se utiliza para indicar en que “Axes” se desea graficar, por ejemplo, usando
la siguiente sintaxis:

plot(handles.axes1,X,Y); esto graficara Y vs X en el gráfico con etiqueta o “Tag”= “axes1”.

Variables globales
Uno de los problemas a la hora de crear una interfaz, es que inicialmente todas las variables son
locales, es decir, sólo existen dentro de la función que las utiliza. Para solucionar este problema
existen diversas formas. Una que ya ha sido explicada es utilizar “handles”, lo que pese a
conservar las variables como locales, permite llamar a cualquier variable definida en la interfaz
desde cualquier función “callback”. Esto es útil cuando la es un parámetro que el usuario
cambiará según le parezca conveniente. Por otro lado, a veces hay variables que se desean
definen dentro de un “callback” y que por ende, no son definidos en pantalla, por ejemplo, una
variable que es igual al producto punto entre dos vectores ingresados por el usuario. Una de las
formas más sencillas de no volver a calcular en todas las funciones esta variable y ser capaz de
exportarlo a la ventana de comandos de Matlab es utilizar el comando “global”, el cual declara
una variable como global. Este se utiliza antes de definir las variables dentro de una función y
también antes de llamarlas en otro lugar. Supongamos que se desea guardar las variables A, B y
C como globales. Dentro de una función se escribiría algo así:

global A B C %Es importante que se separen por espacio y no por coma

A=1;
B=2;
C=3;
Luego, para llamar a estas variables desde otra función o desde la ventana de comandos, se
debe escribir: global A B C antes de llamarlas. Una vez ejecutado este comando, no es necesario
volver a declararlas globales entro de la misma función o en el espacio de trabajo. Si se cambia
de función o si nunca ha sido definida en el espacio de trabajo (“Work Space”) se debe volver a
hacer
Ejemplo de creación de interfaz
A continuación, se relata la creación de una interfaz en Matlab. Se aprovechará de explicar el
funcionamiento de cada uno de los componentes nombrados anteriormente, ya que esto se
omitió antes con el propósito de evitar redundancias y ya que es más sencillo entenderlo en un
ejemplo. Si desea profundizar en cada función o componente, existe mucha documentación en
la página web oficial de MathWorks.

La interfaz que se creará permite graficar la distribución de esfuerzos en una barra de sección
transversal rectangular, dadas las dimensiones de ésta y las funciones de momento, corte y axial
en función de x (variable en la dirección longitudinal). En este documento no se explicará el
funcionamiento de las funciones que permiten dicho cálculo, ya que se escapa del alcance de
esta guía. La interfaz permite generar distintos tipos de gráficos, lo que ayudará a explicar los
diferentes componentes de la interfaz (“Push Buttons”, “Check Boxes”, “Edit Texts”, etc.).

1.Diseño de la interfaz
Se presenta el bosquejo con todos los componentes de la GUI ya colocados en su lugar.

En la interfaz son fácilmente reconocibles dos “axes” para generar gráficos, dos paneles con
textos editables para que el usuario ingrese datos, textos estáticos indicando que se debe
ingresar en cada uno de los anteriores, un “Push Button” que permitirá graficar, un “Pop-up
Menu” que actualmente indica Máximos esfuerzos y un “Check Box” que permitirá activar o
desactivar la grilla para ambos gráficos.

2.Modificación de algunos parámetros de la interfaz

Con un fin ilustrativo, se dejaron algunos detalles sin resolver en la interfaz.

Lo primero que se puede notar es que no aparecen las unidades de medida para la geometría
de la barra ni para las funciones de esfuerzos internos. En términos del programa esto no
importa, siempre y cuando se utilicen siempre las mismas unidades. Por lo anterior, se editarán
los textos estáticos.
2.1. Editar textos
Para realizar esto, se debe hacer clic derecho sobre un texto estático y seleccionar “Property
Inspector…”. Luego, se debe buscar la propiedad “String” y editarla, como se muestra en la
siguiente imagen:

Se le agregaron todas las unidades de medida correspondientes siguiendo el mismo

procedimiento para cada “Static Text”. Este mismo método se puede utilizar para modificar el
valor predeterminado que aparece en un “Edit Text” o para modificar las opciones que aparecen
en un “Pop-up Menu”, con la diferencia que en este último se debe hacer una separación por
líneas para cada opción.

También se modificó el título del panel que contiene a las funciones de esfuerzos internos. Para
hacer esto, se debe seleccionar la propiedad “Title” dentro del inspector de propiedades
correspondiente. El resultado se muestra en la siguiente imagen:

También se olvidó modificar las etiquetas o “Tags” de algunos elementos. Esto se hará a
continuación:
2.2. Cambiar etiquetas
Para hacer esto, también se debe seleccionar el “Property Inspector”, pero esta vez se selecciona
la propiedad “Tag”. En este caso, se cambiarán las etiquetas del “Pop-up Menu” y del “Check
Box”.

Se dejó la etiqueta del “Pop-up Menu” como “tipografico” y la del “Check Box” como “grilla”.

Si se desea mover algún componente, basta con hacer clic en un elemento, mantenerlo apretado
y arrastrarlo hacia donde se desee. Los tamaños se editan como si fueran imágenes de una
presentación Power Point. Tener CUIDADO con los TIEMPOS DE RESPUESTA del asistente de
creación. Por ejemplo, la versión 2017 de Matlab funciona mucho más suave y rápido (no se
queda pegada) que la versión 2015, probablemente porque la más reciente está más optimizada
en esta área.

Apenas se termine de crear la parte gráfica de la interfaz, si se guarda la interfaz, se generan

automáticamente dos archivos. Uno es una imagen Matlab (.fig) que contiene el aspecto visual
de la interfaz y otro es un código (.m) que permite el funcionamiento de la interfaz, el cual es
editable para poder generar los “callbacks”.

3. Definición de los “Callbacks”

Para hacer esto, se debe hacer clic derecho sobre un componente y seleccionar “View
Callbacks”<”Callback”. Algunos componentes no tienen directamente esta opción y se debe
crear una función con la opción “CreateFcn”, sin embargo, esto no es recomendable y se
recomienda usar los componentes en los que Matlab genera por defecto “callbacks”.
En este caso, se editarán los callbacks del “Push Buton” que dice “Graficar”, del “Pop-up Menu”
y del “Check Box”.

3.1. Callback Push Button

Se muestra todo el código que se agregó. La primera línea es creada por el asistente de creación
de GUIs y no debe ser editada. Lo mismo ocurre con el resto de las líneas previamente cradas
en el código. Para evitar errores, siempre se debe comenzar a escribir debajo de la primera línea
y antes de las siguientes líneas previamente creadas por el asistente. Tampoco se debe eliminar
ninguna de éstas. El código viene comentado con sus explicaciones correspondientes.
function pushbutton1_Callback(hObject, eventdata, handles)%Esta
primera línea la crea el asistente y no se debe modificar.
M=get(handles.momento,'String');%Obtenemos un string con lo que el
usuario escribio en el edit text con tag "momento"
V=get(handles.corte,'String');%Obtenemos un string con lo que el
usuario escribio en el edit text con tag "corte"
N=get(handles.axial,'String');%Obtenemos un string con lo que el
usuario escribio en el edit text con tag "axial"
Largo=str2double(get(handles.largo,'String'));%obtenemos un número a
partir del string escrito en el edit text con tag "largo"
Ancho=str2double(get(handles.ancho,'String'));%obtenemos un número a
partir del string escrito en el edit text con tag "ancho"
Alto=str2double(get(handles.alto,'String'));%obtenemos un número a
partir del string escrito en el edit text con tag "alto"
X=linspace(0,Largo,60);
H=(handles.axes1);%obtenemos un identificador del gráfico superior
"axes1"
H2=(handles.axes2);%obtenemos un identificador del gráfico superior
"axes2"
cla(H)%limpiamos axes1
cla(H2)%limpiamos axes2
grillaono=get(handles.grilla,'Value');%obtenemos un valor. 1 o 0 si
está o no tiqueado el Check Box
Tgraf=get(handles.tipografico,'Value');%obtenemos un valor, en este
caso 1, 2 o 3 que indica que tipo de datos se desea mostrar.
%definimos las siguientes variables como globales. Notar que se hace
antes
%de asignarles un valor
global XGrilla YGrilla UU VV Maximos Sigma1 Sigma3 UU1 VV1 UU3 VV3
[XGrilla,YGrilla,UU,VV,Maximos,Sigma1,Sigma3,UU1,VV1,UU3,VV3]=Graficar
(M,V,N,X,Largo,Alto,Ancho);%Función previamente creada
switch(Tgraf)%Switch camboa lo que se hace según el valor en Tgraf.
%Sólo se comentará la primera opción, ya que es análogo
case(1)%Maximos
cla(H)%limpiamos axes1 nuevamente
surf(H,XGrilla,YGrilla,Maximos')%graficamos en axes1
shading(H,'flat')%tipo de shading para axes1 (flat, interp o
faceted)
title(H,'Máximos esfuerzos principales')%colocamos el título
de axes1
view(H,[0,90])%definimos la vista de axes1
axis(H,'equal')%dejamos la escala de los ejes de axes1 como
igual para todos.
cla(H2)%limpiamos axes2 nuevamente
contourf(H2,XGrilla,YGrilla,Maximos',20)%graficamos curvas de
nivel rellenas en axes2
hold(H2,'on')%activamos la función hold (no borra gráfico) en
axes2
quiver(H2,XGrilla,YGrilla,UU',VV')%graficamos vectores en
axes2
 title(H2,'Dirección esfuerzos principales')%colocamos el
título de axes2
hold(H2,'off')%desactivamos la función hold en axes2
if grillaono==0%si el check box no está tiqueado
%apagamos las grillas
grid(H,'off')
grid(H2,'off')
else %si el check box esta tiqueado
%prendemos las grillas
grid(H,'on')
grid(H2,'on')
end
case(2)%Sigma1
cla(H)
surf(H,XGrilla,YGrilla,Sigma1')
shading(H,'flat')
title(H,'Sigma 1')
view(H,[0,90])
axis(H,'equal')
cla(H2)
contourf(H2,XGrilla,YGrilla,Sigma1',20)
hold(H2,'on')
quiver(H2,XGrilla,YGrilla,UU1',VV1')
title(H2,'Dirección esfuerzos Sigma 1')
hold(H2,'off')
if grillaono==0
grid(H,'off')
grid(H2,'off')
else
grid(H,'on')
grid(H2,'on')
end
case(3)%Sigma3
cla(H)
surf(H,XGrilla,YGrilla,Sigma3')
shading(H,'flat')
title(H,'Sigma 3')
view(H,[0,90])
axis(H,'equal')
cla(H2)
contourf(H2,XGrilla,YGrilla,Sigma3',20)
hold(H2,'on')
quiver(H2,XGrilla,YGrilla,UU3',VV3')
title(H2,'Dirección esfuerzos Sigma 3')
hold(H2,'off')
if grillaono==0
grid(H,'off')
grid(H2,'off')
else
grid(H,'on')
grid(H2,'on')
end
end
3.2. Callback Pop-up Menu
Se copiarán sólo las primeras líneas. A partir de switch(Tgraf), se tiene lo mismo que en la función
anterior, ya que esa parte corresponde a lo que se encarga de graficar.
function tipografico_Callback(hObject, eventdata, handles)%Esta línea
la creó el asistente y no se debe editar
Tgraf=get(hObject,'Value');%obtenemos un valor, en este caso 1, 2 o 3
que indica que tipo de datos se desea mostrar.
H=(handles.axes1);%Obtenemos un identificador para axes1
H2=(handles.axes2);%Obtenemos un identificador para axes2
cla(H)%Borramos axes1
cla(H2)%Borramos axes2
grillaono=get(handles.grilla,'Value');%Vemos si el check box está
tiqueado (1) o no (0).
%Ahora llamamos a las variables globales. Notar que no se redefinen en
esta
%función, pero sí es imperativo avisarle al programa que se trabajará
con
%las variables globales previamente definidas.
global XGrilla YGrilla UU VV Maximos Sigma1 Sigma3 UU1 VV1 UU3 VV3
switch(Tgraf)

3.3. Callback Check Box

Acá se copiará una parte mayor del código. Las 2 primeras líneas y las últimas 3 son creadas por
el asistente. Esto ayudará a ilustrar donde se debe editar un “callback”.
% --- Executes on button press in grilla.
function grilla_Callback(hObject, eventdata, handles)
grillaono=get(hObject,'Value');%Notar que acá se obtiene el valor
usando hObject en vez de handles.tag
%Esto se debe a que cuando se obtiene un valor de un componente dentro
de
%su mismo callback, se hace de este modo.
H=(handles.axes1);%identificador para axes1
H2=(handles.axes2);%identificador para axes2
%Lo único que hace este callback es activar o desactivar la grilla, de
la
%misma forma que se había hecho en las funciones anteriores.
if grillaono==0
grid(H,'off')
grid(H2,'off')
else
grid(H,'on')
grid(H2,'on')
end

% hObject handle to grilla (see GCBO)

% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)
4. Ejecutar la interfaz
Ahora que se tienen definidos todos los “callbacks” necesarios, se puede ejecutar la interfaz.

Esto se puede hacer desde el código o desde la ventana gráfica con el botón “Run” .

En el caso desarrollado se obtiene algo como esto:

Que al utilizarla funciona de la siguiente manera: