バックナンバーはこちら。
https://www.simulationroom999.com/blog/model-based-of-minimum-2-backnumber/
はじめに
tkinterはPython標準ライブラリのためインストール済みであった。
よって、「python -m tkinter」でウィンドウが出てくるかの動作確認のみ実施。
環境としては準備がおおよそ整ってきたのでそろそろ実際にtkinterを触り始めようと思う。
登場人物
博識フクロウのフクさん
![指差しフクロウ](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/指差しフクロウ.png)
イラストACにて公開の「kino_k」さんのイラストを使用しています。
https://www.ac-illust.com/main/profile.php?id=iKciwKA9&area=1
エンジニア歴8年の太郎くん
![技術者太郎](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/技術者01アップ.png)
イラストACにて公開の「しのみ」さんのイラストを使用しています。
https://www.ac-illust.com/main/profile.php?id=uCKphAW2&area=1
tkinterのimport
![太郎くん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/技術者01アップ.png)
じゃ、今回からtkinterを触っていく感じかな?
![フクさん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/お休みフクロウ.png)
そうだね。
![太郎くん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/「技術者a」13アップ.png)
いままでのPythonの性格からすると
tkinterライブラリのimportからかな?
![フクさん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/指差しフクロウ.png)
うん。
まぁimportはなんのひねりも無くて、tkinterを指定すればOKだ。
import tkinter
リソースエディタみたいなのはあるのか?
![フクさん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/お休みフクロウ.png)
というわけで実際にGUIを・・・。
![太郎くん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/技術者01アップ.png)
イメージ的には何かしらのグラフィックなエディタで部品を配置していくような感じなのだけど?
![フクさん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/指差しフクロウ.png)
Visual Studioのリソースエディタを想定してるみたいだけど、
そんなものは無い。
![太郎くん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/「技術者a」20アップ.png)
まじか。
![フクさん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/お休みフクロウ.png)
でも、そんなに部品数も多くないし、一個ずつ生成と配置をすればOKだ。
![太郎くん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/技術者01アップ.png)
(よくわからんがとりあえず黙って聞いておこう・・・)
メインウィンドウ生成
![フクさん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/指差しフクロウ.png)
まずは部品を配置していくためのメインウィンドウの生成だ。
![太郎くん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/技術者02アップ.png)
まずはこれが無いとはじまらないよね。
![フクさん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/お休みフクロウ.png)
コードとしては以下になる。
root = tkinter.Tk()
root.title("DC Motor Control")
![太郎くん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/技術者03アップ.png)
お!
なんかなんも張り付いてないウィンドウが出てきた。
![tkinterメインウィンドウ、DC Motor Control](https://www.simulationroom999.com/blog/wp-content/uploads/2021/09/02_tkinterメインウィンドウ.png)
※ 環境によっては「root.mainloop()」を呼び出さないと表示されないかもしれません。
※ ウィンドウを閉じるとrootに内包された情報も破棄されるので再度rootを生成して各ウィジットを再配置する必要があります。
![フクさん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/指差しフクロウ.png)
ウィンドウの初期サイズが小さいから見えないけど、
キャプションバーに「DC Motor Control」ってのが入ってるはずだ
![太郎くん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/技術者02アップ.png)
確かにそうなってるっぽい。
メインウィンドウの位置と大きさ
![フクさん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/指差しフクロウ.png)
次にメインウィンドウの位置と大きさを決めてしまおう。
![太郎くん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/「技術者a」13アップ.png)
位置も固定にするの?
![フクさん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/考え中フクロウ.png)
固定じゃなくても良いんだけど、同じ位置にいた方が操作しやすいかなって思って。
単純に私の好みだ。
![太郎くん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/技術者01アップ.png)
まぁそういうのにこだわる人っているよねー。(鳥だけど)
![フクさん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/指差しフクロウ.png)
コードとしては以下になる。
w = root.winfo_screenwidth() #モニター横幅取得
h = root.winfo_screenheight() #モニター縦幅取得
root.geometry(str(int(w/2))+"x"+str(int(h/2))+"+"+str(int(w/2))+"+0") #位置設定
![太郎くん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/技術者03アップ.png)
あ!
メインウィンドウが大きくなってディスプレイの右上に配置された!
![tkinterメインウィンドウ大きさと配置、DC Motor Control](https://www.simulationroom999.com/blog/wp-content/uploads/2021/09/03_tkinterメインウィンドウ大きさと配置-1024x609.png)
![太郎くん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/「技術者a」13アップ.png)
コードの方だけど、
root.geometryに文字列っぽいのを渡してるね?
これは何?
![フクさん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/お休みフクロウ.png)
大きさと位置を指定する場合、ピクセル指定の特定ルールの文字列を渡す。
今回の太郎くんの環境だと以下の文字列になっているはずだ。
‘960×540+960+0’
![フクさん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/指差しフクロウ.png)
そして、この文字列の意味としては以下になる。
[横幅]x[縦幅]+[ウィンドウ左上横位置]+[ウィンドウ左上縦位置]
![太郎くん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/「技術者a」10アップ.png)
???
![フクさん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/考え中フクロウ.png)
まぁ図解するとこんな感じだ。
![tkinterメインウィンドウ大きさ位置指定文字列、[横幅=960]、[縦幅=540]、[ウィンドウ左上縦位置=0]、[ウィンドウ左上横位置=960]](https://www.simulationroom999.com/blog/wp-content/uploads/2021/09/04_tkinterメインウィンドウ大きさ位置指定文字列-1024x670.png)
![太郎くん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/技術者01アップ.png)
なるほど。
これは分かり易い。
![フクさん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/お休みフクロウ.png)
次はmatplotlibの埋め込みかな。
まとめ
![フクさん](https://www.simulationroom999.com/blog/wp-content/uploads/2020/05/指差しフクロウ.png)
まとめだよ。
- tkinterのimportはそのまんま。
- 「import tkinter」
- VisualStudioのリソースエディタのようなものは無い。
- メインウィンドウ生成方法解説。
- titleも指定可能。
- メインウィンドウの大きさと位置指定。
- 文字列で以下のような感じで指定。
- ‘960×540+960+0’。
- 文字列で以下のような感じで指定。
バックナンバーはこちら。
コメント