PythonでタイムラプスとGUI　その１（tkinter）

　初心者のための目的志向プログラミング。以前の記事でタイムラプス動画をPython使って、連番JPEGから作る方法をステップを追って書いてみました。ただこのプログラムですが、完全にスクリプトの状態で、各種パラメータはプログラムベタ書きの、CUIベースのプログラムになっています。

　そこで、今回も勉強がてらPythonでGUIを作って、画角の調整をするプログラムを何回かに分けて、作ってみようと思います。

tkinterの導入
やりたいこと
方針
コード
解説
まとめ

tkinterの導入

　簡単なGUIを作るライブラリとしてtkinterというライブラリがPythonには用意されています。以前の記事で画像表示の１手段としてのこれを書いたことがありますが、これを発展させて、画角の調整用バーを加え、プログラムベタ書きだったパラメータを調整しやすくする仕組みを考えます。

やりたいこと

　以前のスクリプトであらかじめベタで指定することになっていた、画像切り出しの座標（x,y）、角度、倍率、の4つのパラメータを、GUIによる操作で取得する。

　切り出し後の出力画像を確認しながら操作する。

方針

　tkinterのCanvasに画像を表示しながら、4本のScale(バー)を操作し、その操作結果をパラメータとしてダイナミックに画像の切り出し処理に反映させ、パラメータを決定する。

　スクロール変化のコールバックを受けて、以前書いたタイムラプス作成プログラムで作った関数をコールし、画像の変換を行う。

コード

　はじめの一歩的には、以前作成した画像表示プログラム

import cv2
import tkinter as tk
from PIL import ImageTk, Image
 
img = cv2.imread('lena2.jpg')
 
root = tk.Tk()
 
canvas = tk.Canvas()
image_rgb = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
image_pil = Image.fromarray(image_rgb)
image_Tk = ImageTk.PhotoImage(image_pil, master=canvas)
canvas.create_image(0,0,image=image_Tk,anchor='nw')
canvas.grid()
 
root.mainloop()

　これですが、このコードにScaleを4本追加して、その変化のコールバックを受ける関数を作ってみただけです。

import tkinter as tk
import cv2
from PIL import ImageTk, Image
 
WIDTH = 1920
HEIGHT = 1080
FILE = 'Photo_0001.jpg'
 
# スクロールバーが変化したときに呼ばれるコールバック関数
def scrl_callback(val):
    tmp = convert_view(img)
    w = WIDTH // 2
    h = HEIGHT // 2
    image_rgb = cv2.cvtColor(cv2.resize(tmp,(w,h)),cv2.COLOR_BGR2RGB)
    global image_Tk
    image_Tk = ImageTk.PhotoImage(Image.fromarray(image_rgb),master=canvas)
    canvas.create_image(0,0,image=image_Tk,anchor='nw')
    canvas.create_line(w/2,0,w/2,h)
    canvas.create_line(0,h/2,w,h/2)
     
# こいつが回転シフト拡大を行う処理本体
def convert_view(image):
    h,w = image.shape[:2]
    affine = cv2.getRotationMatrix2D((w/2.0, h/2.0),Var_angle.get(),Var_scale.get())
    affine[0,2] -= Var_shiftx.get()
    affine[1,2] -= Var_shifty.get()
    return cv2.warpAffine(image,affine,(WIDTH,HEIGHT),flags=cv2.INTER_NEAREST)
 
root = tk.Tk()
img = cv2.imread(FILE)
 
pw_main = tk.PanedWindow(root,orient='vertical')
pw_main.pack(expand=True, fill=tk.BOTH)
 
# 上側（画像表示部　表示は1/2スケール）
canvas = tk.Canvas(pw_main, width=WIDTH//2, height=HEIGHT//2)
pw_main.add(canvas)
 
image_Tk = ImageTk.PhotoImage(Image.fromarray(img), master=canvas)  #表示画像の生成
 
# 下側（バーがゴリゴリある方）
fm_ctrl = tk.Frame(pw_main)
pw_main.add(fm_ctrl)
 
# フレームにバーを配置
Var_scale = tk.Scale(fm_ctrl, label='拡大率', orient="v", from_=0.1, to=8.0, resolution=0.1, command=scrl_callback)
Var_angle = tk.Scale(fm_ctrl, label='回転角度', orient="v", from_=-180, to=180, command=scrl_callback)
Var_shiftx = tk.Scale(fm_ctrl, label='横方向シフト量', orient="h", from_=-1000, to=1000, command=scrl_callback)
Var_shifty = tk.Scale(fm_ctrl, label='縦方向シフト量', orient="v", from_=-1000, to=1000, command=scrl_callback)
Var_scale.set(1.0)
 
Var_scale.pack(fill=tk.Y, side=tk.LEFT)
Var_angle.pack(fill=tk.Y, side=tk.LEFT)
Var_shifty.pack(fill=tk.Y, side=tk.LEFT)
Var_shiftx.pack(fill=tk.X)
 
scrl_callback(0)
root.mainloop()

解説

　今回はmain関数は用意しませんでした。コールバックの関数がglobalの変数を触る構成なので、mainの中に変数を置いておくと触れないからです。global変数使いたくはないんですけどね。classとかにした方がかっこいいかもしれません。

　まず先頭の

WIDTH = 1920
HEIGHT = 1080
FILE = 'Photo_0001.jpg'

　は定数。切り出し後の画像サイズと扱う画像ファイルを指定しています。

　処理の本流は以下から開始。

root = tk.Tk()
img = cv2.imread(FILE)

　でTkのオブジェクトを作って、置いときます。半分お約束です。同様に画像も読んで置いときます。画像変換の関数がOpenCVなので、開いて置いておくのもOpenCVを使います。

pw_main = tk.PanedWindow(root,orient='vertical')
pw_main.pack(expand=True, fill=tk.BOTH)

　でPanedWindowを用意、適用（pack）します。この適用時に調整項目を入れられますが、今回は、拡大可能(expand=True)で、縦横拡大(fill=tk.BOTH)にします。これには今後CanvasとFrameをレイアウトします。そのFrameにScaleを置く構成にします。

　ウィンドウとフレームとウィジェットというキーワードが出てきます。概念としては、ウィンドウの中には複数のフレームがレイアウトでき、そのフレームの中には複数のウィジェット（画像とかボタンとかラベルとか）がレイアウトできるようです。ウィンドウに直接ウィジェットを置くこともできそうです。なので今回は

　な構成になります。

　ウィンドウにCanvasウィジェットとFrameを置きます。そのFrameに4本のScaleウィジェットを置きます。

# 上側（画像表示部　表示は1/2スケール）
canvas = tk.Canvas(pw_main, width=WIDTH//2, height=HEIGHT//2)
pw_main.add(canvas)

　で先のWindowにCanvasウィジェットをレイアウトします。表示用の画像は切り出し画像の1/2のサイズにします。「//」で割り算結果を整数にすることができるようです。ここではPanedWindowに対してaddを使います。この辺りがよくわかりません。(canvas.packとかgridではダメ)そもそも第一引数が何を目的に親Windowをしてしているのかよくわかっていません。リファレンスを見てもよくわからなかった。

# 下側（バーがゴリゴリある方）
fm_ctrl = tk.Frame(pw_main)
pw_main.add(fm_ctrl)

　同様にFrameをレイアウトします。このFrameに今度はScaleウィジェットをレイアウトします。

# フレームにバーを配置
Var_scale = tk.Scale(fm_ctrl, label='拡大率', orient="v", from_=0.1, to=8.0, resolution=0.1, command=scrl_callback)
Var_scale.pack(fill=tk.Y, side=tk.LEFT)
Var_scale.set(1.0)

　1本のバーを代表に説明します。これを4回繰り返しているだけです。（微妙にバーの整数型、少数型の違いや、レイアウトの水平、垂直の違い等ありますが）

　スケールウィジェット(tk.Scale)でバーを作ります。それをframeに対してpackしてやります。設定は最低限の項目で済ませています。ラベルや向き、最小値、最大値、バーの刻み、そしてコールバック関数を設定しています。

　最後にレイアウトする位置を決定しつつ配置（pack）しています。このpackの際に、横引き延ばし（tk.X）なのか、縦引き延ばし（tk.Y）なのか、をfillで指定してやり、レイアウトする位置をsideで指定してあげます。

　ここで、開始終了の値は固定値を取ってます。縦横のシフト画素数は入力の画像によってはここで設定している±1000では足りないこともあるので、そこは適宜変更の必要があるかと思います。（入力画像に応じて変化させてもよいかもしれません）

　最後に初期値の1.0倍をセット(.set())しています。バーの初期値が0に一番近い正の値のようです。x,yのシフト量、角度は0がスタートで自然なのですが、倍率が最小値の0.1倍スタートになってしまってます。なので、倍率のバーだけ、1.0をセットしています。

　続いてコールバックされる関数（バーの変化の都度呼ばれる関数）ですが、

# スクロールバーが変化したときに呼ばれるコールバック関数
def scrl_callback(val):
    tmp = convert_preview(img)
    w = WIDTH // 2
    h = HEIGHT // 2
    image_rgb = cv2.cvtColor(cv2.resize(tmp,(w,h)),cv2.COLOR_BGR2RGB)
    global image_Tk
    image_Tk = ImageTk.PhotoImage(Image.fromarray(image_rgb),master=canvas)
    canvas.create_image(0,0,image=image_Tk,anchor='nw')

　こんな感じ。指定されたパラメータで画像(img)を変換し、その変換後の画像をtkの画像フォーマットに変換した後に、canvasに適用(create_image)しています。OpenCVで扱う画像からの変換だと煩わしいことに、RGBに直して、PILのフォーマットに直して、Tkのフォーマットにするという3回変換が必要になっています。やむを得ません。

　最後に

canvas.create_line(w/2,0,w/2,h)
canvas.create_line(0,h/2,w,h/2)

　ついでに2本のラインを引いて（create_line）、画像の中心が分かるようにしています。なくてもいいですが、画像中心と水平はわかった方が便利なので。

　ここで呼ばれるconvert_preview()ですが、これは以前「Pythonでタイムラプス」で作った関数convert()の基本コピペです。同じ関数に渡すパラメータとして共通にしておいて、そのパラメータをそのまま適用できるようにするためです。内部的にはバーの値をダイレクトに読みに行ってたり、画像の補間をより高速なものにしてますが。

　完成したGUIは以下の感じ。

まとめ

　とりあえずGUIを使って画像切り出しの座標（x,y）、角度、倍率、の4つのパラメータを決定することをサポートするプログラムを作ることができました。ちょっと仕組みを把握しかねている部分はありますが、ひとまず狙い通りに動いてくれてます。このGUIを使って、以前作ったタイムラプス作成プログラムに渡すパラメータが調整できそうです。

　今回UIを設定する部分は最低限のことしかしていません。もっといろいろなオプションが用意されているようです。またRGB画像を前提としています。グレースケール画像はダメかな。（cv2.imreadで逃げられるのかな）

　コードも直感的です。特段トリッキーなコードを書くわけでもなく、60行程度で実現できました。別に行数が少ないことが正義というわけではないですが、少なければ少ないだけ全体を見通すことができて応用が利きます。

　凝った事をしだせばきりがないのですが、なんかPythonで凝ったUIを作るのは本質じゃない気がしたので、いったんは極シンプルなUIを作ってみました。画像を見ながらその調整値（パラメータ、閾値）を決めるのは、みんなやりたくなるかなと思うので、必要な機能なり知識かなとは思いますが、いったんはこのレベルで抑えときます。UI実装はClassを使っているサンプルが多いですが、今回はベタに書きました。機能を把握するにはいったんこっちの方がよさそうだったので。

　とはいえ画像1枚からでは少しパラメータが決めにくいです。もう少し機能追加します。