Créer une application wxPython avec affichage de texte mathématique

Introduction

Ce laboratoire vous guidera dans la création d'une application wxPython qui affiche du texte mathématique dans un wx.Bitmap pour l'affichage dans divers contrôles de wxPython. Il utilise la bibliothèque Matplotlib pour convertir le texte en images et la bibliothèque wxPython pour afficher les images.

Conseils sur la machine virtuelle

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

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

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

Installer les bibliothèques requises

Pour terminer ce laboratoire, vous devez avoir les bibliothèques suivantes installées :

wxPython
Matplotlib

Vous pouvez installer ces bibliothèques à l'aide de pip.

pip install wxPython
pip install matplotlib

Créer une application wxPython

Créez un nouveau fichier Python et importez les bibliothèques requises.

import wx
import numpy as np
from io import BytesIO
from matplotlib.backends.backend_wxagg import FigureCanvasWxAgg as FigureCanvas
from matplotlib.figure import Figure

Convertir du texte mathématique en wx.Bitmap

Définissez une fonction qui convertit du texte mathématique en un wx.Bitmap. Cette fonction utilise Matplotlib pour tracer le texte à la position (0, 0), puis elle dépend de facecolor="none" et bbox_inches="tight", pad_inches=0 pour obtenir un masque transparent qui est ensuite chargé dans un wx.Bitmap.

def mathtext_to_wxbitmap(s):
    fig = Figure(facecolor="none")
    text_color = (
        np.array(wx.SystemSettings.GetColour(wx.SYS_COLOUR_WINDOWTEXT)) / 255)
    fig.text(0, 0, s, fontsize=10, color=text_color)
    buf = BytesIO()
    fig.savefig(buf, format="png", dpi=150, bbox_inches="tight", pad_inches=0)
    s = buf.getvalue()
    return wx.Bitmap.NewFromPNGData(s, len(s))

Définir des fonctions

Définissez une liste de fonctions que l'application affichera. Chaque fonction est définie par un texte mathématique et une fonction lambda qui prend une valeur d'entrée et renvoie une valeur de sortie.

functions = [
    (r'$\sin(2 \pi x)$', lambda x: np.sin(2*np.pi*x)),
    (r'$\frac{4}{3}\pi x^3$', lambda x: (4/3)*np.pi*x**3),
    (r'$\cos(2 \pi x)$', lambda x: np.cos(2*np.pi*x)),
    (r'$\log(x)$', lambda x: np.log(x))
]

Créer un cadre de canevas

Créez une nouvelle classe qui hérite de wx.Frame. Cette classe crée un canevas qui affiche la fonction sélectionnée.

class CanvasFrame(wx.Frame):
    def __init__(self, parent, title):
        super().__init__(parent, -1, title, size=(550, 350))

        self.figure = Figure()
        self.axes = self.figure.add_subplot()

        self.canvas = FigureCanvas(self, -1, self.figure)

        self.change_plot(0)

        self.sizer = wx.BoxSizer(wx.VERTICAL)
        self.add_buttonbar()
        self.sizer.Add(self.canvas, 1, wx.LEFT | wx.TOP | wx.GROW)

        self.SetSizer(self.sizer)
        self.Fit()

Ajouter une barre de boutons

Ajoutez une barre de boutons à l'application qui affiche des icônes pour chaque fonction. Lorsqu'un bouton est cliqué, l'application affichera la fonction correspondante.

    def add_buttonbar(self):
        self.button_bar = wx.Panel(self)
        self.button_bar_sizer = wx.BoxSizer(wx.HORIZONTAL)
        self.sizer.Add(self.button_bar, 0, wx.LEFT | wx.TOP | wx.GROW)

        for i, (mt, func) in enumerate(functions):
            bm = mathtext_to_wxbitmap(mt)
            button = wx.BitmapButton(self.button_bar, 1000 + i, bm)
            self.button_bar_sizer.Add(button, 1, wx.GROW)
            self.Bind(wx.EVT_BUTTON, self.OnChangePlot, button)

        self.button_bar.SetSizer(self.button_bar_sizer)

Ajouter une barre d'outils

Ajoutez une barre d'outils à l'application qui permet à l'utilisateur de zoomer, de panser et d'enregistrer le tracé sous forme d'image. Cette barre d'outils est ajoutée en bas du cadre.

    def add_toolbar(self):
        self.toolbar = NavigationToolbar2Wx(self.canvas)
        self.toolbar.Realize()
        self.sizer.Add(self.toolbar, 0, wx.LEFT | wx.EXPAND)
        self.toolbar.update()

Changer le tracé

Définissez une fonction qui change le tracé en fonction de la fonction sélectionnée. Cette fonction prend un plot_number en entrée et change le tracé en conséquence.

    def change_plot(self, plot_number):
        t = np.arange(1.0, 3.0, 0.01)
        s = functions[plot_number][1](t)
        self.axes.clear()
        self.axes.plot(t, s)
        self.canvas.draw()

Créer l'application

Créez une nouvelle classe qui hérite de wx.App. Cette classe crée le cadre et démarre la boucle d'événements.

class MyApp(wx.App):
    def OnInit(self):
        frame = CanvasFrame(None, "wxPython mathtext demo app")
        self.SetTopWindow(frame)
        frame.Show(True)
        return True

Exécuter l'application

Exécutez l'application en créant une instance de la classe MyApp.

if __name__ == "__main__":
    app = MyApp()
    app.MainLoop()

Sommaire

Dans ce laboratoire, vous avez appris à créer une application wxPython qui affiche du texte mathématique dans un wx.Bitmap. Vous avez utilisé la bibliothèque Matplotlib pour convertir le texte en images et la bibliothèque wxPython pour afficher les images. Vous avez également appris à créer une barre de boutons et une barre d'outils dans l'application et à changer le tracé en fonction de la fonction sélectionnée.