Intégrer Matplotlib dans une application Gtk4 et interagir avec une vue d'arbre

Introduction

Dans ce laboratoire, vous apprendrez à intégrer Matplotlib dans une application Gtk4 et à interagir avec une vue d'arbre (treeview) pour stocker des données. Vous pourrez tracer des données en double-cliquant sur une entrée dans la vue d'arbre.

Conseils pour la machine virtuelle (VM)

Une fois le démarrage de la machine virtuelle terminé, cliquez dans le coin supérieur gauche pour passer à l'onglet Notebook afin d'accéder à Jupyter Notebook pour pratiquer.

Parfois, vous devrez peut-être attendre quelques secondes que Jupyter Notebook ait terminé de charger. La validation des opérations ne peut pas être automatisée en raison des limitations de Jupyter Notebook.

Si vous rencontrez des problèmes lors de votre apprentissage, n'hésitez pas à demander de l'aide à Labby. Donnez votre feedback après la session, et nous résoudrons rapidement le problème pour vous.

Configuration de l'environnement

Tout d'abord, vous devez créer un environnement virtuel et installer les packages nécessaires.

## create virtual environment
python3 -m venv matplotlib_tutorial

## activate the environment
source matplotlib_tutorial/bin/activate

## install necessary packages
pip install numpy matplotlib PyGObject

Création de la fenêtre de l'application

Ensuite, vous devez créer la fenêtre de l'application qui contiendra la vue d'arbre (treeview) et le graphique 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()

Tracer les données

Maintenant, vous allez tracer les données en double-cliquant sur une entrée dans la vue d'arbre (treeview).

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

Ajouter des colonnes à la vue d'arbre (treeview)

Vous devez ajouter des colonnes à la vue d'arbre pour afficher les données.

    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)

Création du modèle

Enfin, vous devez créer le modèle pour stocker les données.

    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

Résumé

Dans ce laboratoire, vous avez appris à intégrer Matplotlib dans une application Gtk4 et à interagir avec une vue d'arbre (treeview) pour stocker des données. Vous pouvez maintenant tracer des données en double-cliquant sur une entrée dans la vue d'arbre.

Tableur Gtk4 Sgskip