Gtk3 を使った Pylab Sgskip

Beginner

This tutorial is from open-source community. Access the source code

はじめに

この実験では、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.toolbarmanager.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 つの線を描画し、それらを区別するために凡例を追加しました。