バックナンバーはこちら。
https://www.simulationroom999.com/blog/model-based-of-minimum-2-backnumber/
はじめに
tkinterにmatplotlibの図(figure)を埋め込む準備を始めた。
図(figure)自体は従来通りのやり方でOK。
今回は
FigureCanvasTkAggを使用したtkinterへの図(figure)の埋め込み
と
NavigationToolbar2Tkを使用したメニューバーの埋め込み
をやってみる。
登場人物
博識フクロウのフクさん

イラストACにて公開の「kino_k」さんのイラストを使用しています。
https://www.ac-illust.com/main/profile.php?id=iKciwKA9&area=1
エンジニア歴8年の太郎くん

イラストACにて公開の「しのみ」さんのイラストを使用しています。
https://www.ac-illust.com/main/profile.php?id=uCKphAW2&area=1
FigureCanvasTkAggを使用したtkinterへの図(figure)の埋め込み

前回、matplotlibの図(figure)を作ってあるはずなので、
それをtkinterに埋め込む。

たしかFigureCanvasTkAggを使うんだよね。

そうそう。
早速やってみよう。
canvas = FigureCanvasTkAgg(fig, root)
canvas.get_tk_widget().pack(side = tkinter.RIGHT)

あ、メインウィンドウにmatplotlibが張り付いた!
![tkinter上にmatplotlib、DC Motor Control、target[rad/s]、voltage[V]、speed[rad/s]、loadtorqueStep.tau[N m]、cyrrent[A]、cpu_load[ms]](https://www.simulationroom999.com/blog/wp-content/uploads/2021/09/02_tkinter上にmatplotlib.png)

2つ目のpack(side = tkinter.RIGHT)は何をしてるの?

該当ウィジットを右側に張り付ける指示だね。
RIGHTの他にLEFT、TOP、BOTTOMを指定できる。
メニューバーの埋め込み

引き続きmatplotlibのメニューバーを埋め込む

メニューバーはNavigationToolbar2Tkを使うんだよね。

その通り。
コードは以下になる。
toolbar=NavigationToolbar2Tk(canvas, root)
toolbar.place(x=0, y=h/2-40)

右下にメニューバーが配置された。
![tkinter上にmatplotlibのメニューバー配置、DC Motor Control、target[rad/s]、voltage[V]、speed[rad/s]、loadtorqueStep.tau[N m]、cyrrent[A]、cpu_load[ms]](https://www.simulationroom999.com/blog/wp-content/uploads/2021/09/03_tkinter上にmatplotlibのメニューバー配置.png)

で、今度は
toolbar.place(x=0, y=h/2-40)
ってので配置場所を決めてる感じ?

そのとおり。
「h」は
以前
h = root.winfo_screenheight()
で取得したディスプレイの縦の長さで、
現在のメインウィンドウの縦の長さはh/2になってる。
そこから40ピクセル分上に配置してる感じだ。

座標はディスプレイの座標じゃなくてメインウィンドウ上の座標ってことでいいんだよね?

そうそう。
右上がx=0、y=0になってるので、座標を指定すれば好きな場所にウィジットを配置できる。

いやー、まだそれほど何かやったわけじゃないけど、
思ったよりもGUIがリッチになってきたねー。

まぁmatplotlibを埋め込んだからね。
それのおかげでリッチな感じには見えちゃうねー。

この調子でバンバンと追加していっちゃおう!
まとめ

まとめだよ。
- FigureCanvasTkAggを使用してtkinterへmatplotlibを埋め込み。
- pack(side = tkinter.RIGHT)でメインウィンドウの右端に接するよう配置。
- NavigationToolbar2Tkを使用してメニューバー配置。
- place(x=0, y=h/2-40)を使用して座標指定で配置。
バックナンバーはこちら。
コメント