数式テキスト表示付き wxPython アプリケーションを作成する

はじめに

この実験では、wxPython のさまざまなコントロールに表示するために、wx.Bitmap 内に数学のテキストを表示する wxPython アプリケーションを作成する方法を案内します。Matplotlib ライブラリを使用してテキストを画像に変換し、wxPython ライブラリを使用して画像を表示します。

VM のヒント

VM の起動が完了したら、左上隅をクリックして ノートブック タブに切り替え、Jupyter Notebook を開いて練習します。

場合によっては、Jupyter Notebook が読み込み完了するまで数秒待つ必要があります。Jupyter Notebook の制限により、操作の検証を自動化することはできません。

学習中に問題が発生した場合は、Labby にお問い合わせください。セッション終了後にフィードバックを提供してください。すぐに問題を解決いたします。

必要なライブラリをインストールする

この実験を完了するには、以下のライブラリが必要です。

wxPython
Matplotlib

これらのライブラリは、pip を使ってインストールできます。

pip install wxPython
pip install matplotlib

wxPython アプリケーションを作成する

新しい Python ファイルを作成し、必要なライブラリをインポートします。

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

数式を wx.Bitmap に変換する

数式を wx.Bitmap に変換する関数を定義します。この関数は、Matplotlib を使って座標 (0, 0) にテキストを描画しますが、その後 facecolor="none" と bbox_inches="tight", pad_inches=0 を使って透明なマスクを取得し、それを 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))

関数を定義する

アプリケーションが表示する関数のリストを定義します。各関数は、数式と、入力値を受け取り出力値を返すラムダ関数によって定義されます。

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

キャンバス付きフレームを作成する

wx.Frame から継承する新しいクラスを作成します。このクラスは、選択された関数を表示するキャンバスを作成します。

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

ボタンバーを追加する

各関数に対応するアイコンを表示するボタンバーをアプリケーションに追加します。ボタンがクリックされると、アプリケーションは対応する関数を表示します。

    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)

ツールバーを追加する

ユーザーがズームイン・アウト、パン操作を行い、グラフを画像として保存できるようにするツールバーをアプリケーションに追加します。このツールバーはフレームの下部に追加されます。

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

グラフを変更する

選択された関数に基づいてグラフを変更する関数を定義します。この関数は、グラフ番号を入力として受け取り、それに応じてグラフを変更します。

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

アプリケーションを作成する

wx.App から継承する新しいクラスを作成します。このクラスはフレームを作成し、イベントループを開始します。

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

アプリケーションを実行する

MyApp クラスのインスタンスを作成してアプリケーションを実行します。

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

まとめ

この実験では、wx.Bitmap 内に数学のテキストを表示する wxPython アプリケーションを作成する方法を学びました。Matplotlib ライブラリを使ってテキストを画像に変換し、wxPython ライブラリを使って画像を表示しました。また、アプリケーション内にボタンバーとツールバーを作成する方法と、選択された関数に基づいてグラフを変更する方法も学びました。