Incrustar Matplotlib en una aplicación Gtk4 e interactuar con una vista de árbol (treeview)

Introducción

En este laboratorio, aprenderás cómo incrustar Matplotlib en una aplicación Gtk4 e interactuar con una vista de árbol (treeview) para almacenar datos. Podrás trazar datos haciendo doble clic en una entrada de la vista de árbol.

Consejos para la MV

Después de que la máquina virtual (VM) haya terminado de iniciar, haz clic en la esquina superior izquierda para cambiar a la pestaña Notebook y acceder a Jupyter Notebook para practicar.

A veces, es posible que debas esperar unos segundos para que Jupyter Notebook termine de cargar. La validación de las operaciones no se puede automatizar debido a las limitaciones de Jupyter Notebook.

Si encuentras problemas durante el aprendizaje, no dudes en preguntar a Labby. Proporciona comentarios después de la sesión y resolveremos rápidamente el problema para ti.

Configurar el entorno

Primero, necesitas crear un entorno virtual e instalar los paquetes necesarios.

## create virtual environment
python3 -m venv matplotlib_tutorial

## activate the environment
source matplotlib_tutorial/bin/activate

## install necessary packages
pip install numpy matplotlib PyGObject

Crear la ventana de la aplicación

A continuación, necesitas crear la ventana de la aplicación que contendrá la vista de árbol (treeview) y la gráfica de Matplotlib.

import gi

gi.require_version('Gtk', '4.0')
from gi.repository import Gtk

from numpy.random import random

from matplotlib.backends.backend_gtk4agg import FigureCanvas
from matplotlib.figure import Figure


class DataManager(Gtk.ApplicationWindow):
    num_rows, num_cols = 20, 10

    data = random((num_rows, num_cols))

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.set_default_size(600, 600)

        self.set_title('GtkListStore demo')

        vbox = Gtk.Box(orientation=Gtk.Orientation.VERTICAL, homogeneous=False,
                       spacing=8)
        self.set_child(vbox)

        label = Gtk.Label(label='Double click a row to plot the data')
        vbox.append(label)

        sw = Gtk.ScrolledWindow()
        sw.set_has_frame(True)
        sw.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC)
        sw.set_hexpand(True)
        sw.set_vexpand(True)
        vbox.append(sw)

        model = self.create_model()
        self.treeview = Gtk.TreeView(model=model)
        self.treeview.connect('row-activated', self.plot_row)
        sw.set_child(self.treeview)

        fig = Figure(figsize=(6, 4), layout='constrained')

        self.canvas = FigureCanvas(fig)
        self.canvas.set_hexpand(True)
        self.canvas.set_vexpand(True)
        vbox.append(self.canvas)
        ax = fig.add_subplot()
        self.line, = ax.plot(self.data[0, :], 'go')

        self.add_columns()

    def plot_row(self, treeview, path, view_column):
        ind, = path
        points = self.data[ind, :]
        self.line.set_ydata(points)
        self.canvas.draw()

    def add_columns(self):
        for i in range(self.num_cols):
            column = Gtk.TreeViewColumn(str(i), Gtk.CellRendererText(), text=i)
            self.treeview.append_column(column)

    def create_model(self):
        types = [float] * self.num_cols
        store = Gtk.ListStore(*types)
        for row in self.data:
            it = store.insert(-1)
            store.set(it, {i: val for i, val in enumerate(row)})
        return store


def on_activate(app):
    manager = DataManager(application=app)
    manager.show()


app = Gtk.Application(application_id='org.matplotlib.examples.GTK4Spreadsheet')
app.connect('activate', on_activate)
app.run()

Trazar los datos

Ahora, trazarás los datos haciendo doble clic en una entrada de la vista de árbol (treeview).

    def plot_row(self, treeview, path, view_column):
        ind, = path
        points = self.data[ind, :]
        self.line.set_ydata(points)
        self.canvas.draw()

Agregar columnas a la vista de árbol (treeview)

Necesitas agregar columnas a la vista de árbol (treeview) para mostrar los datos.

    def add_columns(self):
        for i in range(self.num_cols):
            column = Gtk.TreeViewColumn(str(i), Gtk.CellRendererText(), text=i)
            self.treeview.append_column(column)

Crear el modelo

Finalmente, necesitas crear el modelo para almacenar los datos.

    def create_model(self):
        types = [float] * self.num_cols
        store = Gtk.ListStore(*types)
        for row in self.data:
            it = store.insert(-1)
            store.set(it, {i: val for i, val in enumerate(row)})
        return store

Resumen

En este laboratorio, aprendiste cómo incrustar Matplotlib en una aplicación Gtk4 e interactuar con una vista de árbol (treeview) para almacenar datos. Ahora puedes trazar datos haciendo doble clic en una entrada de la vista de árbol (treeview).

Hoja de cálculo Gtk4 Sgskip