lunes, 8 de julio de 2013

Como crear interfaces gráficas de usuario (GUI) con Matlab

Hace unas semanas que no he podido escribir nada en el blog por mil lios, incluyendo un hijo, mucho trabajo, unso cursos que estoy impartiendo, etc. Pero esta semana he tenido que hacer una interfaz gráfica de usuario con Matlab para una aplicación de una compañera y quería compartirlo con vosotros. Para ello vamos a implementar una pequeña calculadora que nos sirva como ejemplo de como crear GUI.
Lo primero es seleccionar el workspace de trabajo y luego hacemos click en File-New-GUI tal y como mostramos en la imagen siguiente:




Se nos abre entonces un asistente sobre que tipo de interfaz queremos crear. Seleccionaremos la primera opción Blank GUI (default) para esta vez.


Se abrirá entonces una pantalla con el asistente de creación de interfaces en blanco tal y como vemos en la siguiente imagen.

Podemos ahora arrastrar los componentes de la izquierda para formar nuestra pantalla. Vamos a arrastrar primero un campo del tipo texto:


Para cambiar el valor del componente hacemos doble click en el mismo y se nos abrirá la pantalla con sus propiedades. En este caso le vamos a cambiar el campo String para poner "Valor 1"

De esta misma forma vamos a añadir otros campos texto, dos campos del tipo Edit Text y un botón para generar un interfaz como la que mostramos a continuación:


Una vez que tenemos nuestra interfaz creada la vamos a salvar con el nombre "calculador":


Se nos abrirá entonces al salvar un fichero llamado calculador.m donde podemos controlar el evento que se produce cuando pulsamos el botón. Como nuestro botón se llama pushbutton1 podemos ver al final del fichero una función llamada "pushbutton1_Callback"


Además podemos ver también este fichero en el workspace. Este fichero va asociado ya que tiene el mismo nombre a nuestra interfaz gráfica y nos permitirá aplicarle funcionalidad al mismo:

Solamente nos queda ahora modificar la  función "pushbutton1_Callback" para que realice las labores que deseamos, en este caso que nos sume los valores que hemos insertado en los dos Edit Text. Para ello vamos a añadir el siguiente código:

valor1 = str2double(get(handles.edit2,'string'));
valor2 = str2double(get(handles.edit3,'string'));
suma = valor1 + valor2;
set(handles.text5, 'string', num2str(suma))

En la primera y segunda línea estamos guardando en la variable valor1 y valor2 lo escrito en los EditText de nombre edit2 y edit3. Pero OJO, tenemos que usar el nombre que tengan nuestros campos. Dicho nombre podemos verlo en las propiedades del mismo o seleccionandolo y prestando atención a la parte inferior del asistente:
En la siguiente línea estamos sumando estas dos variables y ahora ya podemos representarlo en el campo text5 con el comando que mostramos. Tenemos que prestar atención a unas transformaciones que tenemos que realizar de string a double y de double a string para poder trabajar con los datos. 
Ya podemos ejecutar nuestra aplicación con el botón Run Figure:


Veremos entonces nuesta magnífica aplicación en funcionamiento tal y como mostramos en la imagen siguiente:


Ya podemos a partir de aquí crearnos nuestras interfaces con las necesidades que tengamos. Esperemos que os sirva!!

No hay comentarios :

Publicar un comentario