CONSTRUCCIÓN DE LA INTERFAZ GRÁFICA DE MATLAB

(Principios fundamentales)

1. Abrir el GUI.
En la barra de herramientas hacer clic en el icono respectivo (1) para ingresar al GUI. En la
siguiente ventana escoger la opción por defecto (2) y presionar OK (3).

1 2

Por defecto aparece la ventana de trabajo en blanco, allí se selecciona la herramienta Push Button
(1), y en la cuadrícula se describe un rectángulo para la creación de un botón (2), este botón por
defecto es denominado pushbutton1. El nombre del botón y su denominación se pueden modificar
haciendo doble clic sobre él y redefiniendo los parámetros de Tag y String. Por ahora se modifica
el campo String y allí se coloca el texto “mostrar” (3).

1 3

Haciendo un clic derecho sobre el botón, se selecciona la opción “View Callbacks>>Callback”, allí
se visualiza el código a ser ejecutado. En la parte inferior de la línea “ function
pushbutton1_Callback(hObject, eventdata, handles)” se inserta la instrucción “ msgbox('Esta es la imagen a
mostrar')” (1). Si con anterioridad no se había guardado el programa deberá hacerlo asignándole su
nombre y la ubicación adecuada.
 1

Volviendo a la ventana de la interfaz se hace clic sobre el botón de ejecución (RUN) (1), y cuando
aparece la ventana de la aplicación se hace clic sobre el botón “Mostrar” (2) y enseguida aparece el
mensaje de texto indicado.

Se pueden cerrar las aplicaciones para volver a la ventana de edición de la interfaz.

2. Mostrar una imagen

De nuevo en la ventana de edición de la interfaz se adiciona un componente denominado “Axes”

, para esto se pica en la herramienta respectiva (1) y se describe un cuadrado en el área de
edición, allí aparece el cuadro axes1 con una cruz en su interior. Seguidamente se adiciona el
código a=imread('balon5.jpg');imshow(a); justo antes del código adicionado anteriormente para la
visualización del cuadro de diálogo. En el siguiente gráfico se aprecia esta nueva apariencia
asociada al botón 1.

Se ejecuta de nuevo el programa (F5) y se presiona sobre el botón mostrar (2) y aparece en el
recuadro la imagen respectiva.
 2
1

3. Mostrar varias imágenes

Para el presente ejercicio se pretende visualizar inicialmente dos imágenes y una vez se presiona el
botón, éstas cambian a formato blanco y negro. Para este propósito se debe ingresar un nuevo
componente axes como en el caso anterior, este nuevo objeto por defecto tiene como nombre axes2.

En cuanto al código asociado se debe insertar en la parte final de la función cuyo encabezado
contiene:
% --- Executes just before Interfaz is made visible.
function Interfaz_OpeningFcn(hObject, eventdata, handles, varargin)

A continuación se presenta el código completo asociado a esta función que es ejecutada, como lo
indica su encabezado, un instante antes de que se haga visible la interfaz.
 % --- Executes just before Interfaz is made visible.
function Interfaz_OpeningFcn(hObject, eventdata, handles, varargin)
% This function has no output args, see OutputFcn.
% hObject handle to figure
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)
% varargin command line arguments to Interfaz (see VARARGIN)

% Choose default command line output for Interfaz

handles.output = hObject;

% Update handles structure

guidata(hObject, handles);

% UIWAIT makes Interfaz wait for user response (see UIRESUME)

% uiwait(handles.figure1);
axes(handles.axes1)
fondo = imread('balon1.jpg');
axis off;
imshow(fondo);
%*-*-*-*-*-*-*-*-*-*-*-*-*-*
Código
axes(handles.axes2) insertado
fondo = imread('balon2.jpg');
axis off;
imshow(fondo);

La programación referente a los botones contiene el código adicional siguiente:

% --- Executes on button press in pushbutton1.

function pushbutton1_Callback(hObject, eventdata, handles)
% hObject handle to pushbutton1 (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)

axes(handles.axes1)
nn=imread('balon1.jpg');
a=im2bw(nn,.6);
axis off;
imshow(a); Código insertado
axes(handles.axes2) modificado
nn=imread('balon2.jpg');
a=im2bw(nn,.6);
axis off;
imshow(a);

msgbox('Esta es la imagen a mostrar')

guidata(hObject, handles); % Obligatoria para que guarde los datos

Según la codificación anterior se debe tener en cuenta que antes de visualizar cualquier imagen con
“imshow” se especifica el lugar (ó axes) para ser mostrado, en este caso se indica con la línea previa
axes(handles.axes2). En donde el último subíndice especifica el lugar o campo de axes respectivo.
En la ejecución del programa se tiene que inicialmente se visualizan dos imágenes y cuando se
presiona el botón mostrar, éstas imágenes son convertidas a blanco y negro con un nivel de
comparación de 0.6 como está especificado en el código.

En el siguiente gráfico se aprecian los resultados en la ejecución inicial y después de presionar el

botón.

4. Control con slider

El componente “Slider” es un elemento de entrada de información para la interfaz por parte del
usuario. El rango de valores por defecto está establecido entre [0 y 1.0], por tanto para este
ejercicio no se va a manipular este parámetro.

Para agregar este componente se activa con un clic como se indica en el gráfico (1) y seguidamente
se describe un rectángulo en el área de trabajo de la interfaz (2). Este objeto también genera su
código asociado en donde se complementa con la información descrita a continuación.
 % --- Executes on slider movement.
function slider1_Callback(hObject, eventdata, handles)
% hObject handle to slider1 (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)

% Hints: get(hObject,'Value') returns position of slider

% get(hObject,'Min') and get(hObject,'Max') to determine range of
slider
axes(handles.axes1)
nivel=get(hObject,'Value');
nn=imread('balon1.jpg');
a=im2bw(nn,nivel);
axis off;
imshow(a);
Código
axes(handles.axes2) insertado
nivel=get(hObject,'Value');
nn=imread('balon2.jpg');
a=im2bw(nn,nivel);
axis off;
imshow(a);

En esencia se muestra la misma codificación del programa anterior, la variación está en la

sentencia “get(hObject,'Value');” que corresponde a la captura del valor actual del Slide cuando ha
sido manipulado, este valor es asignado a una variable denominada nivel que es utilizada para
realizar la conversión a blanco y negro de las dos imágenes relacionadas para ser visualizadas
finalmente en su respectiva ventana (Axes).

La representación visual se presenta a continuación en su condición inicial y cuando ha sido

manipulado el control “Slider” a un nivel alto (1).

Faiver Humberto Trujillo González

faiverht@gmail.com
2010