[ipywidgets] 18. 画像上でクリックした点の座標をTextareaに表示(mpl_connect(‘button_press_event’, onclick))

はじめに

jupyter notebook, labのパラメータを対話的に表示できる機能(ipywidgets Textarea)で画像上でクリックした点の座標を表示する方法について説明する。座標の所得には、fig.canvas.mpl_connectの(‘button_press_event’, onclick)を使った。

コード

解説

モジュールのインポートなど

このコードはjupyter lab(1.2.4)で実行した。jupyter labでインタラクティブな操作をするために、%matplotlib widgetとする。

画像データの作成と表示

ランダムな値をもつ10 x 10の画像を作成して表示する。

ipywidgetsの設定

valueは表示するテキストの中身で、placeholderは入力前に表示される灰色のテキストである。
descriptionはテキストボックスの左に表示される説明ラベルで、layoutのwidthとheightを変えることでTextareaの大きさを変えることができる。

クリック時の動作の設定

txt.value に表示したいテキストの内容を入れる。座標の値は、event.xdata, event.ydataで得られる。クリックした箇所には赤丸を表示する。

button_press_eventの有効化

fig.canvas.mpl_connect(‘button_press_event’, onclick)で画像が表示され、クリックするとコールバック関数が呼び出され、座標がTextareaに表示される。

コードをダウンロード(.pyファイル)

コードをダウンロード(.ipynbファイル)

参考

https://matplotlib.org/users/event_handling.html

matplotlib.org

Interactive (ipywidgets, mpl_connect) notebook working on local machine doesn't render on either gist or nbviewer · Issue #798 · jupyter/nbviewer

Describe the bug Notebook working on local machine will cause an unknown error both in gist and a 400 error in nbviewer....

github.com