Crear una aplicación wxPython con visualización de texto matemático

Introducción

Esta práctica te guiará a través de la creación de una aplicación wxPython que muestra texto matemático en un wx.Bitmap para su visualización en varios controles de wxPython. Utiliza la librería Matplotlib para convertir texto a imágenes y la librería wxPython para mostrar las imágenes.

Consejos sobre la VM

Una vez finalizada la inicialización de la VM, haz clic en la esquina superior izquierda para cambiar a la pestaña Cuaderno y acceder a Jupyter Notebook para practicar.

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

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

Instalar las bibliotecas necesarias

Para completar esta práctica, debes tener instaladas las siguientes bibliotecas:

wxPython
Matplotlib

Puedes instalar estas bibliotecas utilizando pip.

pip install wxPython
pip install matplotlib

Crear una aplicación wxPython

Crea un nuevo archivo de Python e importa las bibliotecas necesarias.

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 texto matemático a wx.Bitmap

Define una función que convierte texto matemático en un wx.Bitmap. Esta función utiliza Matplotlib para dibujar el texto en la posición (0, 0), pero luego se basa en facecolor="none" y bbox_inches="tight", pad_inches=0 para obtener una máscara transparente que luego se carga en 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))

Definir funciones

Define una lista de funciones que la aplicación mostrará. Cada función está definida por un texto matemático y una función lambda que toma un valor de entrada y devuelve un valor de salida.

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))
]

Crear un marco de lienzo

Crea una nueva clase que herede de wx.Frame. Esta clase crea un lienzo que muestra la función seleccionada.

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()

Agregar una barra de botones

Agrega una barra de botones a la aplicación que muestra iconos para cada función. Cuando se hace clic en un botón, la aplicación mostrará la función correspondiente.

    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)

Agregar una barra de herramientas

Agrega una barra de herramientas a la aplicación que permite al usuario hacer zoom in y out, desplazarse y guardar la gráfica como una imagen. Esta barra de herramientas se agrega al fondo del marco.

    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()

Cambiar la gráfica

Define una función que cambia la gráfica según la función seleccionada. Esta función toma un plot_number como entrada y cambia la gráfica en consecuencia.

    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()

Crear la aplicación

Crea una nueva clase que herede de wx.App. Esta clase crea el marco y comienza el bucle de eventos.

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

Ejecutar la aplicación

Ejecuta la aplicación creando una instancia de la clase MyApp.

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

Resumen

En este laboratorio, aprendiste cómo crear una aplicación wxPython que muestra texto matemático en un wx.Bitmap. Utilizaste la biblioteca Matplotlib para convertir texto a imágenes y la biblioteca wxPython para mostrar las imágenes. También aprendiste cómo crear una barra de botones y una barra de herramientas en la aplicación y cómo cambiar la gráfica según la función seleccionada.

Mathtext Wx Sgskip