Ejemplo simple de una interfaz gráfica usando GUIDE en MATLAB para procesamiento digital de imágenes

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.

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.

La ventana anterior es (como su nombre lo indica) el lanzador rápido para el GUIDE con varias opciones, la que vamos a 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.

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

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.

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

 

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.

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. 

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;

%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
    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.

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