31/8/2015 Ejemplo simple de una interfaz grafica usando GUIDE en MATLAB para procesamiento digital de imágenes.

 | Digital Image Processing – Procesamiento Digital de Señales UACJ

Digital Image Processing – Procesamiento
Digital de Señales UACJ
Master of Science in Electrical Engineering / Maestría en Ciencias en Ingeniería Eléctrica

Ejemplo simple de una interfaz grafica usando GUIDE
en MATLAB para procesamiento digital de imágenes.
Posted on May 29, 2009

Hace  poco  que  aprendí  lo  básico  de  crear  interfaces  gráficas  en  Matlab.  En  realidad  es  hasta  cierto  punto  simple,  pero
también creo que no es del todo amigable para crear GUIs. Si, estoy de acuerdo que tiene un estilo de editor para hacernos
más  fácil  la  existencia.  Pero  no  es  del  todo  intuitivo,  o  al  menos  es  lo  que  pienso  en  el  par  de  programitas  que  he  tenido
oportunidad de hacer. Bueno dejando las quejas a un lado, voy a empezar con el ejemplo. Voy a crear una ventana en la que
se  cargue  una  imagen  por  medio  de  un  botón  y  desplegarla  en  la  ventana,  y  hacer  un  procesamiento  sencillo  y  también
mostrarlo  en  pantalla,  se  que  es  un  ejemplo  muy  básico,  pero  creo  que  es  perfecto  para  empezar.  (o  al  menos  es  lo  que
andaba buscando yo cuando quise hacer esto)

Lo  primero  que  tenemos  que  hacer  es  iniciar  el  editor  GUIDE  que  se  puede  hacer  de  dos  maneras,  la  primera  es  desde  el
menú de inicio: File –> New –> GUI como se muestra en la siguiente imagen.

 Follow

Follow “Digital
Image Processing -
https://dipuacj.wordpress.com/2009/05/29/ejemplo­simple­de­una­interfaz­grafica­usando­guide­en­matlab­para­procesamiento­digital­de­imgenes/ 1/13
31/8/2015 Ejemplo simple de una interfaz grafica usando GUIDE en MATLAB para procesamiento digital de imágenes. | Digital Image Processing – Procesamiento Digital de Señales UACJ

Image Processing -
Procesamiento
Digital de Señales
UACJ”
Get every new post delivered
to your Inbox.

Enter your email address

Sign me up
También  se  puede  iniciar  desde  la  línea  de  comandos  o  “command  window”  de  Matlab  poniendo  “guide”.    Aparece  una
ventana de inicio del GUIDE. Build a website with WordPress.com

La  ventana  anterior  es  (como  su  nombre  lo  indica)  el  lanzador  rápido  para  el  GUIDE  con  varias  opciones,  la  que  vamos  a

https://dipuacj.wordpress.com/2009/05/29/ejemplo­simple­de­una­interfaz­grafica­usando­guide­en­matlab­para­procesamiento­digital­de­imgenes/ 2/13
31/8/2015 Ejemplo simple de una interfaz grafica usando GUIDE en MATLAB para procesamiento digital de imágenes. | Digital Image Processing – Procesamiento Digital de Señales UACJ

seleccionar es la que viene por default y presionamos “OK” y nos aparece el editor de interfaces gráficas en blanco, como se
muestra a continuación:

Como  primer  paso  vamos  a  insertar  el  objeto  que  nos  va  a  servir  para  desplegar  la  imagen  en  la  ventana.  En  este  caso
Matlab lo maneja con “axes”, así que presionamos el botón que esta en la barra de herramientas de la izquierda y ponemos
dos “axes” que es donde vamos a cargar la imagen original y la procesada, como se muestra en la siguiente imagen.

https://dipuacj.wordpress.com/2009/05/29/ejemplo­simple­de­una­interfaz­grafica­usando­guide­en­matlab­para­procesamiento­digital­de­imgenes/ 3/13
31/8/2015 Ejemplo simple de una interfaz grafica usando GUIDE en MATLAB para procesamiento digital de imágenes. | Digital Image Processing – Procesamiento Digital de Señales UACJ

Luego  presionando  el  botón  “Push  Button”  (1)  ponemos  dos  botones  (2)  que  el  primero  nos  va  a  servir  para  seleccionar  el
archivo  de  la  imagen  y  el  segundo  para  procesarla,  también  vamos  a  mostrar  donde  se  seleccionan  y  se  cambian  las
propiedades del objeto (3).

https://dipuacj.wordpress.com/2009/05/29/ejemplo­simple­de­una­interfaz­grafica­usando­guide­en­matlab­para­procesamiento­digital­de­imgenes/ 4/13
31/8/2015 Ejemplo simple de una interfaz grafica usando GUIDE en MATLAB para procesamiento digital de imágenes. | Digital Image Processing – Procesamiento Digital de Señales UACJ

En  la  figura  siguiente  se  muestra  el  inspector  de  propiedades  “property  inspector”  en  donde  podemos  modificar  las
propiedades del botón. En el (1)  se modifica el texto del botón, y en (2), se modifica el nombre del botón.

https://dipuacj.wordpress.com/2009/05/29/ejemplo­simple­de­una­interfaz­grafica­usando­guide­en­matlab­para­procesamiento­digital­de­imgenes/ 5/13
31/8/2015 Ejemplo simple de una interfaz grafica usando GUIDE en MATLAB para procesamiento digital de imágenes. | Digital Image Processing – Procesamiento Digital de Señales UACJ

Modificamos (1) y (2) para cada botón de manera que nos quede como en la imagen siguiente.

https://dipuacj.wordpress.com/2009/05/29/ejemplo­simple­de­una­interfaz­grafica­usando­guide­en­matlab­para­procesamiento­digital­de­imgenes/ 6/13
31/8/2015 Ejemplo simple de una interfaz grafica usando GUIDE en MATLAB para procesamiento digital de imágenes. | Digital Image Processing – Procesamiento Digital de Señales UACJ

En donde dice String simple y sencillamente cambiamos el texto que tiene el botón y en donde dice tag se define el nombre
del botón, esto es importante, porque aquí es donde definimos el nombre que va a tener la función “Callback” que es la que
se  manda  llamar  cuando  se  presiona  el  botón.  En  la  imagen  siguiente  se  muestra  como  queda  la  GUI  con  los  cambios
hechos.  Tambien  se  muestra  como  tener  acceso  a  la  función  donde  vamos  a  poner  el  código  que  nos  cargue  la  imagen  en
pantalla.

https://dipuacj.wordpress.com/2009/05/29/ejemplo­simple­de­una­interfaz­grafica­usando­guide­en­matlab­para­procesamiento­digital­de­imgenes/ 7/13
31/8/2015 Ejemplo simple de una interfaz grafica usando GUIDE en MATLAB para procesamiento digital de imágenes. | Digital Image Processing – Procesamiento Digital de Señales UACJ

A continuación se abre la ventana del editor de códigos de MATLAB y nos selecciona el inicio de la función en la que
debemos agregarle nuestro código que en este ejemplo nos va a seleccionar un archivo para ponerlo en axes1. 

https://dipuacj.wordpress.com/2009/05/29/ejemplo­simple­de­una­interfaz­grafica­usando­guide­en­matlab­para­procesamiento­digital­de­imgenes/ 8/13
31/8/2015 Ejemplo simple de una interfaz grafica usando GUIDE en MATLAB para procesamiento digital de imágenes. | Digital Image Processing – Procesamiento Digital de Señales UACJ

Una vez que tenemos el editor de MATLAB abierto, buscamos el siguiente código y le agregamos la línea de código que se
muestra a continuación, lo que se esta haciendo es agregar una variable para almacenar en memoria la imagen que vamos a
cargar .

% — Executes just before GuiBasica is made visible. 
function GuiBasica_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 GuiBasica (see VARARGIN)

% Choose default command line output for GuiBasica 
handles.output = hObject;

https://dipuacj.wordpress.com/2009/05/29/ejemplo­simple­de­una­interfaz­grafica­usando­guide­en­matlab­para­procesamiento­digital­de­imgenes/ 9/13
31/8/2015 Ejemplo simple de una interfaz grafica usando GUIDE en MATLAB para procesamiento digital de imágenes. | Digital Image Processing – Procesamiento Digital de Señales UACJ

%Add variable to hold images (Agregar variable para almacenar imágenes) 
handles.myImage = [];

% Update handles structure 
guidata(hObject, handles);

La  línea  que  agregué  en  el  código  anterior  es  donde  dice  handles.myImage  =  [];  que  nos  va  a  servir  para  almacenar  la
imagen temporalmente para procesarla cuando tengamos que hacerlo en el botón que definimos para procesar la imagen.

El código siguiente se agrega en el callback del botón CargarImagen.

% — Executes on button press in CargarImagen. 
function CargarImagen_Callback(hObject, eventdata, handles) 
% hObject    handle to CargarImagen (see GCBO) 
% eventdata  reserved – to be defined in a future version of MATLAB 
% handles    structure with handles and user data (see GUIDATA) 
try 
    [filename,pathname] = uigetfile(‘*.pgm’,‘Selecciona imagen para abrir’);

    if isequal(filename,0) 
        %Do nothing yet 
    else 
        handles.myImage = imread(fullfile(pathname, filename));

        [X, myMap] = gray2ind(handles.myImage); 
        mImagen2 = ind2rgb(X,myMap);

        image(mImagen2, ‘Parent’, handles.axes1); 
        colormap(gray); 
    end 
    guidata(hObject, handles); 
catch 

https://dipuacj.wordpress.com/2009/05/29/ejemplo­simple­de­una­interfaz­grafica­usando­guide­en­matlab­para­procesamiento­digital­de­imgenes/ 10/13
31/8/2015 Ejemplo simple de una interfaz grafica usando GUIDE en MATLAB para procesamiento digital de imágenes. | Digital Image Processing – Procesamiento Digital de Señales UACJ

    msgbox(‘Error’) 
end

Y  agregando  el  código  siguiente  al  callback del botón ProcesarImagen  como  se  muestra  a  continuación  hacemos  nuestro
ejemplo de procesamiento, aquí solamente voy a hacer el negativo de la imagen para ilustrar el ejemplo con algo simple, en
este caso se pretende mostrar como hacer un GUI en MATLAB, no dar una clase de procesamiento de imágenes.

% — Executes on button press in ProcesarImagen. 
function ProcesarImagen_Callback(hObject, eventdata, handles) 
% hObject    handle to ProcesarImagen (see GCBO) 
% eventdata  reserved – to be defined in a future version of MATLAB 
% handles    structure with handles and user data (see GUIDATA) 
    guidata(hObject, handles); 
    mImage = handles.myImage;    
    mImage2 = 255­mImage; 
    [X, myMap] = gray2ind(mImage2); 
    mImagen2 = ind2rgb(X,myMap);

    image(mImagen2, ‘Parent’, handles.axes2);

Y a continuación se muestra como queda el resultado final de nuestra GUI.

https://dipuacj.wordpress.com/2009/05/29/ejemplo­simple­de­una­interfaz­grafica­usando­guide­en­matlab­para­procesamiento­digital­de­imgenes/ 11/13
31/8/2015 Ejemplo simple de una interfaz grafica usando GUIDE en MATLAB para procesamiento digital de imágenes. | Digital Image Processing – Procesamiento Digital de Señales UACJ

Si todo se ha hecho como se indica, debería de funcionar. jeje. En caso de que me falte un paso o que algo no se entienda
solo manden un correo y trataré de corregirlo. gustavo.ramirez.v@gmail.com

 Like
Be the first to like this.
This entry was posted in Uncategorized by Gustavo Ramirez. Bookmark the permalink
[https://dipuacj.wordpress.com/2009/05/29/ejemplo­simple­de­una­interfaz­grafica­usando­guide­en­matlab­para­
procesamiento­digital­de­imgenes/] .

https://dipuacj.wordpress.com/2009/05/29/ejemplo­simple­de­una­interfaz­grafica­usando­guide­en­matlab­para­procesamiento­digital­de­imgenes/ 12/13
31/8/2015 Ejemplo simple de una interfaz grafica usando GUIDE en MATLAB para procesamiento digital de imágenes. | Digital Image Processing – Procesamiento Digital de Señales UACJ

2 THOUGHTS ON “EJEMPLO SIMPLE DE UNA INTERFAZ GRAFICA USANDO GUIDE EN MATLAB PARA PROCESAMIENTO DIGITAL DE IMÁGENES.”

erick
on June 9, 2009 at 1:12 pm said:

gracias amio muy bueno
te agradesco

freysner
on November 1, 2012 at 2:04 pm said:

gracias, …hize algunos cambios para empezar a trabajar con jpg

https://dipuacj.wordpress.com/2009/05/29/ejemplo­simple­de­una­interfaz­grafica­usando­guide­en­matlab­para­procesamiento­digital­de­imgenes/ 13/13