Uso de Matplotlib en PySimpleGUI

En una publicación reciente se explicaron los fundamentos de PySimpleGUI, una librería con la que es posible crear, únicamente con código Python, aplicaciones gráficas de usuario de una forma extremadamente sencilla. Pero en esa entrada no se vio una forma de crear representaciones de datos dentro de las aplicaciones. Siendo Matplotlib uno de los paquetes más utilizados y conocidos, la integración de Matplotlib en PySimpleGUI posiblemente sea una de las mejores soluciones para solucionar este problema.

A continuación, se asume un conocimiento básico de PySimpleGUI, por lo que para aquellos que no están facilitados con esta librería es aconsejable que consulten previamente la publicación anterior.

Creación de un Canvas en PySimpleGUI

Para poder crear una gráfica en PySimpleGUI es necesario usar un objeto tipo Canvas, el cual se puede construir con la clase sg.Canvas(). Las propiedades más importantes de este objeto son key, gracias al cual se podrá identificar posteriormente este elemento y el size con el que se indica las dimensiones del área. Así, se debe integrar en primer lugar se debe insertar un elemento de este tipo en el layout de la aplicación que se desee crear.

Backend de Matplotlib

En cuanto a Matplotlib será necesario indicarle al backend que la gráfica se debe dibujar en el Canvas, algo que se debe hacer con la clase FigureCanvasTkAgg. Una clase que necesita dos parámetros, una figura y el canvas sobre el que se va a dibujar. Siendo el objeto que se cree con esta clase el que se use para dibujar las figuras.

Integración de Matplotlib en PySimpleGUI

Con lo visto anteriormente ya se puede crear una aplicación en la que se integren gráficas de Matplotlib en PySimpleGUI. El primer paso es crear una venta, la cual debe contener en su layout por lo menos un objeto sg.Canvas(). Posteriormente, una vez creada la venta, se tendrá que obtener el objeto, lo que se puede hacer con la propiedad TKCanvas del Canvas. De este modo, si la ventana se ha guardado en la variable window y el Canvas se llama canvas se puede obtener este simplemente con la siguiente línea

canvas = window['canvas'].TKCanvas

Una vez hecho se deberá crear una figura, lo que se puede conseguir con el constructor Figure de Matplotlib. Siendo este objeto y el canvas el que se inyectaran en FigureCanvasTkAgg

figure = Figure()
figure_canvas_agg = FigureCanvasTkAgg(figure, canvas)

Una vez hecho esto se puede crear nuevas gráficas dentro de la figura y, una vez terminado, llamar al método draw() de figure_canvas_agg para que esta se muestra dentro de la GUI.

Aplicación de ejemplo

Para ver todo esto en funcionamiento lo mejor es crear una aplicación de ejemplo que integre Matplotlib en PySimpleGUI. Como la que se puede crear con el siguiente código.

import PySimpleGUI as sg
import numpy as np
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
from matplotlib.figure import Figure

window = sg.Window(title='Frecuencia',
                   layout=[[sg.Text(key='title')],
                           [sg.Canvas(key='canvas', size=(600, 400))],
                           [sg.Text('Frecuencia'),
                            sg.Slider(range=(0, 100), 
                                      orientation='h',
                                      key='slider',
                                      enable_events=True)]],
                    finalize=True)

# Obtención del canvas
canvas = window['canvas'].TKCanvas
figure = Figure()
axes = figure.add_subplot()

figure_canvas_agg = FigureCanvasTkAgg(figure, canvas)
figure_canvas_agg.draw()
figure_canvas_agg.get_tk_widget().pack(side='top', fill='both', expand=1)


def plot_frequency(frec=10):
    window['title'].update(f'Frecuencia { frec }')
    x = np.linspace(0, 2 * np.pi)
    y = np.sin(frec * x)
    
    axes.cla()
    axes.plot(x, y)
    figure_canvas_agg.draw()


# Set default frequency
default_frequency = 2
window['slider'].update(default_frequency)
plot_frequency(default_frequency)


while True:
    event, values = window.read() 

    if event == 'slider':
        plot_frequency(frec=values['slider'])

    if event == sg.WIN_CLOSED:
        break

window.close()

El cual, al ejecutarse, produce una ventana como las siguientes.

Aplicación de ejemplo creada con PySimpleGUI en la que se integra una gráfica de Matplotlib

Una aplicación que represente una función seno con una frecuencia variable que puede seleccionar el usuario. Similar a una que se creó en Matlab para la webn Matlab.

Funcionamiento del ejemplo

En la anterior aplicación lo primero que se hace en la línea 6 es crear la ventana. Una ventana que tiene un título, un layout y en la que es necesario asignar a la propiedad finalize el valor verdadero.

Posteriormente, en la línea 17 se obtiene el canvas y se crea la figura en la línea 18. Si no se hubiese cambiado el valor de finalize no se podría obtener en este punto el valor del canvas.

Una vez obtenido el canvas y la figura, en la línea 21, se crea el objeto que permite combinar el canvas con la figura, lo que permite representar los datos.

A continuación, en la línea 26, se define una función con la que se puede actualizar el contenido de la figura en base a la frecuencia que se le pasa como parámetro. Nótese que, una vez creado los datos para la gráfica, se limpian los ejes, borrar lo que hubiese anteriormente, y se crea la figura. Finalmente, para que la figura se muestra en la ventana es necesario llamar al método draw de figure_canvas_agg no al de la figura.

Antes de continuar, a partir de la línea 37, se cargarán los valores por defecto y se crea un bucle while para gestionar los eventos de la ventana. Básicamente actualizar la figura o salir del programa.

Conclusiones

En esta entrada se ha visto los pasos necesarios para integrar las gráficas de Matplotlib en PySimpleGUI. Algo que puede ser de gran utilidad cuando se crean aplicaciones que tienen una parte matemática o científica y es necesario realizar representaciones de datos para que los usuarios comprendan mejor los resultados.