本記事は
Mice Advent Calendar 2018 の11日目の記事です．昨日の記事はNse先輩の
ブラウザ上で動く無償3D-CAD「Onshape」を使おう でした．データの引継ぎをしなくてもいいのはなかなか魅力的ですね．しゅごい．
紹介遅れました，全日本終わったのにブログすら書いていなかった中の人です．ステッパーマウスで40位という順位をどう見るかは人によって変わるかと思いますが，5本中4本完走したんでまあ悪くはないかなって感じです．
さてさて本題に戻りまして，Matplotlibのそこそこ楽な描画機能があるのでシミュレータとして扱うのは楽なのですが，GUI機能が限られているためボタンを追加して再描画するといったことはMatplotlibだけでは出来ません．
そこでMatplotlibの拡張機能を使用してPythonのGUIライブラリであるTkinterと連携し自分でGUI機能を追加しようというのがテーマです．
連携もなにもMatplotlibがTkinter使ってるんだからできるに決まってるなんて思うんじゃないゾ
一応本記事中のコードは
GitHub に上がっているので参考にしてください．
1.基本となるコード
この記事ではこのコードを基本にやっていきます．
#-*-coding:utf-8-*-
"""
参考 http://b4rracud4.hatenadiary.jp/entry/20181207/1544129263
"""
import numpy as np
import matplotlib.pyplot as plt
gridSize = 2 #マスの数を指定
if __name__ == "__main__":
try:
plt.gca().set_aspect('equal', adjustable='box')
gridSize = (gridSize * 2 + 1) #半区画の区切りを算出t
#区画の描画
for i in np.array(range(gridSize)) * 90.0:
plt.plot(np.array([i, i]), np.array([0.0, (gridSize - 1) * 90]), color="gray", linestyle="dashed")
plt.plot(np.array([0.0, (gridSize - 1) * 90]), np.array([i, i]), color="gray", linestyle="dashed")
#斜めの線の描画
if (i / 90.0) % 2 == 1:
plt.plot(np.array([0.0, i]), np.array([(gridSize - 1) * 90 - i, (gridSize - 1) * 90]), color="gray", linestyle="dashed")
plt.plot(np.array([(gridSize - 1) * 90 - i, (gridSize - 1) * 90]), np.array([0.0, i]), color="gray", linestyle="dashed")
plt.plot(np.array([(gridSize - 1) * 90, i]), np.array([i, (gridSize - 1) * 90]), color="gray", linestyle="dashed")
plt.plot(np.array([i, 0.0]), np.array([0.0, i]), color="gray", linestyle="dashed")
plt.show()
except:
import traceback
traceback.print_exc()
finally:
input(">>")#エラー吐き出したときの表示待ち
このコード自体は
Mice Advent Calendar 2018の7日目の記事 の迷路の描画をnマス対応にしたものです．今回はこの"nマス"をGUIから指定して描画できるようにします．(わからなかったらリンク先を見よう！)
2.Tkinterにグラフを載せる
まずはグラフをTkinterの描画機能で表示させます．
Matplotlibの開発元が公開しているコード に従っていじっていきます．流れとして，TkinterのGUIクラス(つまりGUIの部品を載せる台みたいなやつ)を作成してその上に描画したいグラフを載せる感じです．
先ほどのコードにライブラリを追加していきます．必要なものは
import numpy as np
import tkinter
import matplotlib.pyplot as plt
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
です．先ほど使用していたnumpyとmatplotlibにTkinterと連携用のライブラリを追加しました．次にtry文の中にGUIに関する諸々の設定を書いていきます．まずはGUIの要素を載せる"台"改めウィンドウを宣言します．
if __name__ == "__main__":
try:
#GUIの生成
root = tkinter.Tk()
root.title("にゃーん")
はい，たったこれだけです．最初の2行は
ただのおまじない GUIの生成には関係ない部分なので下2行がGUIの生成に関与しています．titleはウィンドウの名前になります．
次にグラフの設定を行います．これは先ほどと同じです．
#グラフの設定
fig,ax = plt.subplots()
fig.gca().set_aspect('equal', adjustable='box')#グラフ領域の調整
gridSize = (gridSize * 2 + 1) #半区画の区切りを算出t
そしてこのグラフを台に乗るような部品へ変換するための設定を行います．
#キャンバスの生成
Canvas = FigureCanvasTkAgg(fig, master=root)
Canvas.get_tk_widget().grid(row=0, column=0, rowspan=10)
FigureCanvasTkAggによってGUIの部品へ変換し，その下の行でウィンドウ内の位置を決めています．そうしたら線を引いていきましょう．
#区画の線を引く
for i in np.array(range(gridSize)) * 90.0:
ax.plot(np.array([i, i]), np.array([0.0, (gridSize - 1) * 90]), color="gray", linestyle="dashed")
ax.plot(np.array([0.0, (gridSize - 1) * 90]), np.array([i, i]), color="gray", linestyle="dashed")
#斜めの線を引く
if (i / 90.0) % 2 == 1:
ax.plot(np.array([0.0, i]), np.array([(gridSize - 1) * 90 - i, (gridSize - 1) * 90]), color="gray", linestyle="dashed")
ax.plot(np.array([(gridSize - 1) * 90 - i, (gridSize - 1) * 90]), np.array([0.0, i]), color="gray", linestyle="dashed")
ax.plot(np.array([(gridSize - 1) * 90, i]), np.array([i, (gridSize - 1) * 90]), color="gray", linestyle="dashed")
ax.plot(np.array([i, 0.0]), np.array([0.0, i]), color="gray", linestyle="dashed")
Canvas.draw() #キャンバスの描画
root.mainloop()#描画し続ける
ここで重要なのが最後の2行で，Matplotlibにおいてグラフの描画はplt.show()で行っていたかと思いますが，Tkinterを使用した場合はGUIの部品へ変換したものにある.draw()を実行して描画を行ってください．また最後の行がないと一瞬でGUIの表示が消えます．
後は諸々の処理を付け加えれば完成です．
#-*-coding:utf-8-*-
"""
参考
http://b4rracud4.hatenadiary.jp/entry/20181207/1544129263
https://matplotlib.org/gallery/user_interfaces/embedding_in_tk_sgskip.html
"""
import numpy as np
import tkinter
import matplotlib.pyplot as plt
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
gridSize = 2 #マスの数を指定
if __name__ == "__main__":
try:
#GUIの生成
root = tkinter.Tk()
root.title("にゃーん")
#グラフの設定
fig,ax = plt.subplots()
fig.gca().set_aspect('equal', adjustable='box')#グラフ領域の調整
gridSize = (gridSize * 2 + 1) #半区画の区切りを算出
#キャンバスの生成
Canvas = FigureCanvasTkAgg(fig, master=root)
Canvas.get_tk_widget().grid(row=0, column=0, rowspan=10)
#区画の線を引く
for i in np.array(range(gridSize)) * 90.0:
ax.plot(np.array([i, i]), np.array([0.0, (gridSize - 1) * 90]), color="gray", linestyle="dashed")
ax.plot(np.array([0.0, (gridSize - 1) * 90]), np.array([i, i]), color="gray", linestyle="dashed")
#斜めの線を引く
if (i / 90.0) % 2 == 1:
ax.plot(np.array([0.0, i]), np.array([(gridSize - 1) * 90 - i, (gridSize - 1) * 90]), color="gray", linestyle="dashed")
ax.plot(np.array([(gridSize - 1) * 90 - i, (gridSize - 1) * 90]), np.array([0.0, i]), color="gray", linestyle="dashed")
ax.plot(np.array([(gridSize - 1) * 90, i]), np.array([i, (gridSize - 1) * 90]), color="gray", linestyle="dashed")
ax.plot(np.array([i, 0.0]), np.array([0.0, i]), color="gray", linestyle="dashed")
Canvas.draw() #キャンバスの描画
root.mainloop()#描画し続ける
except:
import traceback
traceback.print_exc()
finally:
input(">>")#エラー吐き出したときの表示待ち
とりあえずTkinter上で表示できたかと思います．(Matplotlibとの違いは下のボタンとウィンドウの名前ぐらいかと思いますが)
ただ×ボタンを押しても消えない症状が出ました．(Ctrl+Cもうまく動かないのなんだろ)
3.終了ボタンとかをつける
VIDEO
ここまでやってきて強制終了しかできないのは悲しいです．というわけで終了ボタンを付けましょう．...といきたかったのですが，説明するのだるいぉ．実は実装を大きく変えたためコードの説明に追加で1記事ぐらい費やしそうなのです．(とはいえコピペして改変するだけなので解読は可能かと思います)とりあえずコードだけ置いときます．
#-*-coding:utf-8-*-
"""
参考
http://b4rracud4.hatenadiary.jp/entry/20181207/1544129263
https://matplotlib.org/gallery/user_interfaces/embedding_in_tk_sgskip.html
https://pg-chain.com/python-tkinter-entry
"""
import numpy as np
import tkinter
import tkinter.messagebox as tkmsg
import matplotlib.pyplot as plt
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
from functools import partial
def Quit():
root.quit()
root.destroy()
def DrawCanvas(canvas, ax, colors = "gray"):
value = EditBox.get()
if value != '':
EditBox.delete(0, tkinter.END)
ax.cla()#前の描画データの消去
gridSize = int(value)
gridSize = (gridSize * 2 + 1) #半区画の区切りを算出
#区画の線を引く
for i in np.array(range(gridSize)) * 90.0:
ax.plot(np.array([i, i]), np.array([0.0, (gridSize - 1) * 90]), color=colors, linestyle="dashed")
ax.plot(np.array([0.0, (gridSize - 1) * 90]), np.array([i, i]), color=colors, linestyle="dashed")
#斜めの線を引く
if (i / 90.0) % 2 == 1:
ax.plot(np.array([0.0, i]), np.array([(gridSize - 1) * 90 - i, (gridSize - 1) * 90]), color=colors, linestyle="dashed")
ax.plot(np.array([(gridSize - 1) * 90 - i, (gridSize - 1) * 90]), np.array([0.0, i]), color=colors, linestyle="dashed")
ax.plot(np.array([(gridSize - 1) * 90, i]), np.array([i, (gridSize - 1) * 90]), color=colors, linestyle="dashed")
ax.plot(np.array([i, 0.0]), np.array([0.0, i]), color=colors, linestyle="dashed")
canvas.draw() #キャンバスの描画
if __name__ == "__main__":
try:
#GUIの生成
root = tkinter.Tk()
root.title("あー、てすてす")
#グラフの設定
fig,ax1 = plt.subplots()
fig.gca().set_aspect('equal', adjustable='box')#グラフ領域の調整
#キャンバスの生成
Canvas = FigureCanvasTkAgg(fig, master=root)
Canvas.get_tk_widget().grid(row=0, column=0, rowspan=10)
#テキストボックスに関する諸々の設定
EditBox = tkinter.Entry(width=5)#テキストボックスの生成
EditBox.grid(row=1, column=2)
#ラベルに関する諸々の設定
GridLabel = tkinter.Label(text="ますめ")
GridLabel.grid(row=1, column=1)
#ボタンに関する諸々の設定
ReDrawButton = tkinter.Button(text="こうしん", width=15, command=partial(DrawCanvas, Canvas, ax1))#ボタンの生成
ReDrawButton.grid(row=2, column=1, columnspan=2)#描画位置(テキトー)
QuitButton = tkinter.Button(text="やめる", width=15, command=Quit)#ボタンの生成
QuitButton.grid(row=7, column=1, columnspan=2)#描画位置(テキトー)
DrawCanvas(Canvas,ax1)
root.mainloop()#描画し続ける
except:
import traceback
traceback.print_exc()
finally:
input(">>")#エラー吐き出したときの表示待ち
追加した部分はボタン周りやテキストボックスなどです．ボタンによるアクションは先に関数として宣言したうえで各ボタンに登録しておきます(コールバック関数)．引数等の問題はfunctoolsライブラリのpartialを引っ張てきて解決しました．×ボタンに関してはQuitButtonのコールバック関数としてQuit()を登録しておきました．
まあいろいろいじって自分好みにカスタムしてみてください．次回はnorthernfox2先輩の「今年のマウスと教訓」です．そういえば今年の反省してなかったなぁ(れぽーよしか思い浮かばない...)．
©2018 shts All Right Reserved.
