En Matlab existen dos entornos con los que es posible crear aplicaciones gráficas Guide y App Designer. El primero de ellos existe en la plataforma desde hace bastantes años y permite crear aplicaciones con facilidad. A partir del año 2016 las diferentes versiones de Matlab incluyen también el segundo de los entornos App Designer. La aparición de este ha supuesto un salto cualitativo en las aplicaciones que se pueden crear con Matlab. A pesar de que en las primeras versiones las aplicaciones creadas con App Designer pecaban de una excesiva lentitud desde su lanzamiento no ha hecho más que crecer en funcionalidad y potencia. Conocer este entorno es importante para los usuarios de Matlab, ya que así pueden crear aplicaciones para otros usuarios. A continuación, se va a explicar como crear aplicaciones en Matlab con App Designer.
Tabla de contenidos
El entorno de App Designer
Antes de poder crear una aplicación con App Designer es necesario abrir el entorno en una sesión de Matlab. Una de las maneras es a través de la barra Home, en esta se ha de desplegar las opciones de New y seleccionar App. Otra opción es desde el terminal, escribiendo simplemente appdesigner. Ambas opciones permiten acceder a la aplicación que se muestra en la siguiente captura de pantalla.
En la captura de pantalla se puede ver la herramienta. A la izquierda se encuentra el listado de componentes que se pueden utilizar para la creación de una aplicación. En el centro el área de trabajo donde se ha de crear la aplicación. Esta área se puede ver seleccionar entre ver y editar el diseño de la aplicación o el código. La parte superior izquierda de la ventana contiene el navegador de componentes, donde se pueden ver todos los componentes utilizados en la aplicación. Finalmente, en la parte inferior izquierda se pueden ver las propiedades de la componente seleccionada actualmente.
Creación de una aplicación básica con App Designer
A modo de ejemplo se va a crear una aplicación que permita simular una distribución normal con los parámetros indicados por el usuario. Para ello es necesario arrastrar primero los siguientes componentes al área de trabajo:
- un Axes para representar el histograma de la distribución,
- dos Edit Field (Numeric) para obtener los parámetros de la distribución
- un Slider para indicar el número de datos a simular.
Los datos se pueden ordenar como se muestran en la siguiente captura de pantalla.
En esta se han cambiado los nombres por defecto de las componentes para que sean más indicativos. Para ello solamente es necesario seleccionar el texto con doble click y editar el valor.
Modificando las propiedades
Para mejorar el funcionamiento de la aplicación se pueden configurar las propiedades de las componentes. Como sabemos el parámetro sigma de una distribución normal ha de ser necesariamente positivo. Para evitar que un usuario introduzca un valor negativo se puede seleccionar esta componente. En la parte inferior izquierda de la ventana aparecerá sus propiedades. En esta parte zona de la aplicación se puede ver el valor del campo, por defecto es 0 y se puede indicar 1. Otra propiedad es los valores límite, por defecto son se menos infinito a infinito, pero en nuestro caso solo puede se positivos. Esto se puede arreglar cambiando los límites para que solo admita valores entre 0 e infinito.
Posteriormente se puede modificar la barra de desplazamiento. En esta nos interesa que el valor por defecto no sea 0 sino que algo como 100, para lo que se ha de cambiar el valor. Al igual que el campo numérico se puede cambiar el rango de valores, en este caso de 0 a 100 puede ser poco, por lo que se puede cambiar de 0 a 1000.
Introducción del código en App Designer
La aplicación está diseñada, pero le falta lo más importante el código que le da funcionalidad. En este caso se quiere que cada vez que el usuario cambie un valor en los campos de edición o en la barra de desplazamiento se simula una distribución con los valores y se muestran en los ejes. Para ello se puede seleccionar el campo de edición mu, ir a las propiedades y seleccionar Callbacks. En esta aparecerá un combo el que ha de seleccionarse <add ValueChangedFcn callback>. De este modo se crear una función en la que se podrá introducir el síguete código.
mu = app.muEditField.Value;
sigma = app.sigmaEditField.Value;
simulations = round(app.SimulacionesSlider.Value);
data = normrnd(mu, sigma, simulations, 1);
histogram(app.UIAxes, data);Este recupera los valores de mu, sigma y el número de simulaciones para hacer una simulación y generar el histograma. Nótese que es necesario redondear el valor de la barra de desplazamiento ya que este es real y no entero.
Ahora se puede utilizar la misma función de callback en el resto de los componentes. Para ello se han de seleccionar y en lugar de crear una función nueva seleccionar la ya existente.
Ejecutar código al iniciar la aplicación
Solamente falta una cosa, al lanzar la aplicación no aparece el histograma. Esto es porque no se ejecuta el ningún código al iniciar la aplicación. Para conseguir que se ejecute se ha de crear una nueva función de callback para la ventana. Esto se puede conseguir seleccionando la ventana y creando un callback para el evento startupFcn. En este se puede llamar a la función definida anteriormente.
app.muEditFieldValueChanged()
Lanzamiento de la aplicación
La aplicación se puede lanzar mediante el comando Run o escribiendo el nombre del archivo en la línea de comando. Si se ha hecho todo bien aparecerá una aplicación como la de la ventana.
Conclusiones
En esta entrada se ha visto el proceso para crear aplicaciones en Matlab con App Designer. Esta es una herramienta que ofrece la posibilidad de presentar el trabajo realizado en Matlab a otros usuarios de una manera más simple y visual. Permitiendo así que usuarios sin conocimiento técnico pueden usar los desarrollos.
El único problema en este momento es que los usuarios han de tener una licencia de Matlab para ejecutar el código. Pero esto se puede solucionar creando aplicaciones independientes en Matlab, para lo que es necesario la toolbox MATLAB Compiler.
Imágenes: Pixabay (rawpixel)
Buen articulo!