1.はじめに

前回の記事に、Tkinterのテンプレート化についてご紹介しました。
今回の記事では、このテンプレートを元に、Image Viewerのアプリケーションの作り方をご紹介します。

環境

Windows 10 64 bit
Python 3.7
IDE : Pycharm

2.Image Viewerの概要

次の図に、今回作成するImage Viewerアプリケーションのポンチ絵を示します。。
このアプリケーションの機能は、画像ファイルを選択し、その画像を表示することだけです。
そして、表示画面を消す機能とアプリケーションを終了する機能を追加します。

写真の人物は、アメリカの免疫学の権威のRalph教授です。

3.Image Viewerの設計

次の図に、Image Viewerのレイアウトを示します。

アプリケーションの部品であるWidgetを用意します。
1.Canvas Widget : Imageを表示するための入れ箱。
2.Label Frame Widget : ボタンを三つ用意しますが、それらのボタンをまとめるための入れ箱。
3.Button : Load Image, Clear Image, Quit Applicationの三つのボタン。

各Widgetの配置には、gridメソッドを用います。

Tkinter テンプレートの説明

**Tkinterのテンプレート化記事に紹介されたテンプレートのプログラムコードです。

テンプレートの構成　

Applicationクラス Widget設定＆配置, Event Callback関数を定義
main関数

このテンプレートに、前章に説明したWidgetの設定・配置、そしてEvent Callback関数を記入する手順で、コードを組み立てます。 (骨組み→肉付け）

import tkinter as tk
from tkinter import ttk

class Application(tk.Frame):
    def __init__(self,master):
        super().__init__(master)
        self.pack()

        self.master.geometry("300x300")
        self.master.title("Tkinter with Class Template")

        self.create_widgets()

    def create_widgets(self):
        pass

    def callBack(self):
        pass

def main():
    root = tk.Tk()
    app = Application(master=root)#Inherit
    app.mainloop()

if __name__ == "__main__":
    main()

3.1.Canvasの設定

Class Applicationのcreate_widgetsメソッド部分にCanvas Widgetを設定、配置します。
配置には、Gridメソッドを利用します。

    def create_widgets(self):
        #Canvas
        self.canvas1 = tk.Canvas(self)
        self.canvas1.configure(width=640, height=480, bg='orange')
        self.canvas1.create_rectangle(0,0,120, 70, fill='green')
        self.canvas1.grid(column=1, row=0)
        self.canvas1.grid(padx=20, pady=20)

3.2.File Open -> Image Load

ファイルを開き、Imageファイルをロードする部分です。
Buttonを設定した後、Event Callback関数のloadImage()を定義します。
LoadImage()の内部のif文は、画像の縦横比を見て、Canvasのサイズに合わせ、元画像をリサイズするために追加しました。
そして、画像ファイルの変換として、openCVのRGB変換、PILに変換、imageTKに変換する部分が続きます。
最後に、self.canvas1.create_imageで画像をCanvas Widgetに表示します。


    def create_widgets(self):

        #File open and Load Image
        self.button_open = ttk.Button(self.frame_button)
        self.button_open.configure(text = 'Load Image')
        self.button_open.grid(column=0, row=1)
        self.button_open.configure(command=self.loadImage)

    # Event Call Back
    def loadImage(self):

        self.filename = filedialog.askopenfilename()

        self.image_bgr = cv2.imread(self.filename)

        self.height, self.width = self.image_bgr.shape[:2]
        if self.width > self.height:
            self.new_size = (640,480)
        else:
            self.new_size = (480,480)

        self.image_bgr_resize = cv2.resize(self.image_bgr, self.new_size, interpolation=cv2.INTER_AREA)
        self.image_rgb = cv2.cvtColor( self.image_bgr_resize, cv2.COLOR_BGR2RGB )  # imreadはBGRなのでRGBに変換
        self.image_PIL = Image.fromarray(self.image_rgb) # RGBからPILフォーマットへ変換
        self.image_tk = ImageTk.PhotoImage(self.image_PIL) # ImageTkフォーマットへ変換
        self.canvas1.create_image(320,240, image=self.image_tk)

下記の図は、ファイルを開くときにキャプチャした画像です。この機能を使うため、filedialog.askopenfilename()を利用します。
しかし、フォルダー名に日本語文字が(UTF-8)ある場合、エラーが出ます。今回は、画像ファイルが格納されるフォルダー名は、英語にするようにお願いします。（もし、この問題の解決方法のご存知の方は、メッセージを残してください。）

3.3.画面クリア

Canvas上の画面を消す機能です。canvas.delete()メソッドを利用します。

    def clearImage(self):
        self.canvas1.delete("all")

3.4.Quitボタン

終了の際に、MessageBoxを表示させ「本当に終了するの？」とユーザーの判断をもう一度確認する部分です。

    def quit_app(self):
        self.Msgbox = tk.messagebox.askquestion("Exit Applictaion", "Are you sure?", icon="warning")
        if self.Msgbox == "yes":
            self.master.destroy()
        else:
            tk.messagebox.showinfo("Return", "you will now return to application screen")

下記の図は、MesageBoxが表示されたときの画面です。

4.実行結果

次の図に、実行結果を表示します。設計通りに動作することが確認できました。
Clear ImageやQuitもOKであることが確認できました。

5.まとめ

Tkinterの基本テンプレートを利用して、Image Viewer Applicationを作成しました。
基本テンプレートに、必要なWidgetを追加することで、様々な目的のアプリケーションの作成が可能であることを確認しました。
なかなか優れものですね。Tkinter。

6.全体コード

import tkinter as tk
from tkinter import ttk

import sys
import os
from tkinter import *
from tkinter import messagebox,filedialog
import numpy as np
from PIL import Image, ImageTk
import cv2
# coding: utf-8
# Folder名に日本語文字を入れたらダメでした。


class Application(tk.Frame):
    def __init__(self,master):
        super().__init__(master)
        self.pack()

        self.master.geometry("800x600")
        self.master.title("Tkinter with Class Template")

        self.create_widgets()



    def create_widgets(self):
        #Canvas
        self.canvas1 = tk.Canvas(self)
        self.canvas1.configure(width=640, height=480, bg='orange')
        self.canvas1.create_rectangle(0,0,120, 70, fill='green')
        self.canvas1.grid(column=1, row=0)
        self.canvas1.grid(padx=20, pady=20)

        #Frame
        self.frame_button = ttk.LabelFrame(self)
        self.frame_button.configure(text=' Button Frame ')
        self.frame_button.grid(column=1,row=1)
        self.frame_button.grid(padx=20, pady=20)

        #File open and Load Image
        self.button_open = ttk.Button(self.frame_button)
        self.button_open.configure(text = 'Load Image')
        self.button_open.grid(column=0, row=1)
        self.button_open.configure(command=self.loadImage)

        # Clear Button
        self.button_clear = ttk.Button( self.frame_button )
        self.button_clear.configure( text='Clear Image' )
        self.button_clear.grid( column=1, row=1 )
        self.button_clear.configure(command=self.clearImage)

        # Quit Button
        self.button_quit = ttk.Button( self.frame_button )
        self.button_quit.config( text='Quit' )
        self.button_quit.grid( column=2, row=1 )
        self.button_quit.configure(command = self.quit_app)

    # Event Call Back
    def loadImage(self):

        #self.folder_name = filedialog.askdirectory()
        self.filename = filedialog.askopenfilename()
        #print(self.folder_name)
        print(self.filename)

        self.image_bgr = cv2.imread(self.filename)
        self.height, self.width = self.image_bgr.shape[:2]
        print(self.height, self.width)
        if self.width > self.height:
            self.new_size = (640,480)
        else:
            self.new_size = (480,480)

        self.image_bgr_resize = cv2.resize(self.image_bgr, self.new_size, interpolation=cv2.INTER_AREA)
        self.image_rgb = cv2.cvtColor( self.image_bgr_resize, cv2.COLOR_BGR2RGB )  # imreadはBGRなのでRGBに変換

       # self.image_rgb = cv2.cvtColor(self.image_bgr, cv2.COLOR_BGR2RGB) # imreadはBGRなのでRGBに変換
        self.image_PIL = Image.fromarray(self.image_rgb) # RGBからPILフォーマットへ変換
        self.image_tk = ImageTk.PhotoImage(self.image_PIL) # ImageTkフォーマットへ変換
        self.canvas1.create_image(320,240, image=self.image_tk)


    def clearImage(self):
        self.canvas1.delete("all")

    def quit_app(self):
        self.Msgbox = tk.messagebox.askquestion("Exit Applictaion", "Are you sure?", icon="warning")
        if self.Msgbox == "yes":
            self.master.destroy()
        else:
            tk.messagebox.showinfo("Return", "you will now return to application screen")

def main():
    root = tk.Tk()
    app = Application(master=root)#Inherit
    app.mainloop()

if __name__ == "__main__":
    main()

7.参考資料

1.Tkinterのクラス化のテンプレート
2.【Python】Tkinterのcanvasを使ってみる
2.Tkinterで作成したウインドウにOpenCV-Pythonの画像を表示

TkinterでImage Viewerを制作