Gtk3 を使った Pylab Sgskip: Matplotlib と GTK3 の統合をマスターする

はじめに

この実験では、Matplotlibライブラリを使ってグラフィックウィンドウを作成および変更する方法を学びます。また、基礎となるGTKウィジェットにアクセスすることでGUIをカスタマイズする方法についても検討します。

VMのヒント

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

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

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

ライブラリのインポート

まず、必要なライブラリをインポートする必要があります。Matplotlib、GTK3、およびgi.repositoryからのGtkモジュールを使用します。

import matplotlib
matplotlib.use('GTK3Agg')  ## または 'GTK3Cairo'
import gi
import matplotlib.pyplot as plt
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk

グラフと軸の作成

次に、subplots() メソッドを使ってグラフと軸を作成します。その後、軸に2つの線をプロットし、それらを区別するために凡例を追加します。

fig, ax = plt.subplots()
ax.plot([1, 2, 3], 'ro-', label='easy as 1 2 3')
ax.plot([1, 4, 9], 'gs--', label='easy as 1 2 3 squared')
ax.legend()

ツールバーとVBoxにアクセスする

それぞれ manager.toolbar と manager.vbox メソッドを使って、グラフキャンバスマネージャのツールバーとvbox属性にアクセスします。

manager = fig.canvas.manager
toolbar = manager.toolbar
vbox = manager.vbox

ツールバーにボタンを追加する

Gtkモジュールを使ってツールバーにボタンを追加します。まず、ラベル付きのボタンを作成し、クリックされたときにメッセージを表示する関数に接続します。次に、ツールアイテムを作成し、そのツールチップテキストを設定し、ボタンを追加してから、ツールバーに挿入します。

button = Gtk.Button(label='Click me')
button.show()
button.connect('clicked', lambda button: print('hi mom'))

toolitem = Gtk.ToolItem()
toolitem.show()
toolitem.set_tooltip_text('Click me for fun and profit')
toolitem.add(button)

pos = 8  ## これをツールバーのどこに挿入するか
toolbar.insert(toolitem, pos)

VBoxにラベルを追加する

マウスを軸の上をドラッグしたときのx,y座標を表示するために、VBoxにラベルを追加します。まず、いくつかのテキスト付きのラベルを作成し、VBoxに追加します。

label = Gtk.Label()
label.set_markup('Drag mouse over axes for position')
label.show()
vbox.pack_start(label, False, False, 0)

マウス移動時にラベルのテキストを更新する

マウスを軸の上をドラッグしたときのx,y座標を表示するために、ラベルのテキストを更新します。ラベルのテキストを更新する関数を作成し、mpl_connect() メソッドを使って motion_notify_event に接続します。

def update(event):
    if event.xdata is None:
        label.set_markup('Drag mouse over axes for position')
    else:
        label.set_markup(
            f'<span color="#ef0000">x,y=({event.xdata}, {event.ydata})</span>')

fig.canvas.mpl_connect('motion_notify_event', update)

グラフを表示する

最後に、show() メソッドを使ってグラフを表示します。

plt.show()

まとめ

この実験では、Matplotlibを使ってグラフィックウィンドウを作成および変更する方法を学びました。また、基礎となるGTKウィジェットにアクセスすることでGUIをカスタマイズする方法も検討しました。ツールバーにボタンを追加し、VBoxにラベルを追加し、マウス移動時にラベルのテキストを更新しました。また、軸に2つの線を描画し、それらを区別するために凡例を追加しました。