Create Image Viewer with Tkinter

1.First of all

In the previous article, I introduced ** Tkinter template **. In this article, I will introduce how to create an Image Viewer application based on this template.

environment

Windows 10 64 bit Python 3.7 IDE : Pycharm

2. Overview of Image Viewer

The following figure shows a ponchi-e of the Image Viewer application created this time. .. The only function of this application is to select an image file and display that image. Then, add the function to turn off the display screen and the function to close the application.

image.png `The person in the picture is Professor Ralph, an authority on immunology in the United States. ``

3. Image Viewer design

The following figure shows the layout of the Image Viewer.

Prepare Widget **, which is a ** part of the application. 1.Canvas Widget: A box for displaying Images. 2.Label Frame Widget: Prepare three buttons, but a box to put those buttons together. 3.Button: Three buttons: Load Image, Clear Image, Quit Application.

Use the grid method to place each widget. image.png

Tkinter template description

** This is the template program code introduced in Tkinter Templated Article.

Template configuration

  1. Application class Widget Settings & Placement, Define Event Callback Function
  2. main function

In this template, ** assemble the code by the procedure of setting and arranging the widget described in the previous chapter and filling in the Event Callback function. ** (framework → flesh)

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 settings

Set and place Canvas Widget in the create_widgets method part of Class Application. Use the Grid method for placement.

    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 This is the part that opens the file and loads the Image file. After setting the Button, define the loadImage () of the Event Callback function. The if statement inside LoadImage () was added to see the aspect ratio of the image and resize the original image to fit the size of the Canvas. Then, as the conversion of the image file, the part of RGB conversion of openCV, conversion to PIL, and conversion to imageTK continues. Finally, use self.canvas1.create_image to display the image in the 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 )  #Since imread is BGR, it is converted to RGB
        self.image_PIL = Image.fromarray(self.image_rgb) #Convert from RGB to PIL format
        self.image_tk = ImageTk.PhotoImage(self.image_PIL) #Convert to ImageTk format
        self.canvas1.create_image(320,240, image=self.image_tk)

The figure below is the image captured when opening the file. To use this feature, use filedialog.askopenfilename (). However, if the folder name contains Japanese characters (UTF-8), an error will occur. This time, please make the folder name where the image file is stored in English. (If you know how to solve this problem, please leave a message.)

image.png

3.3. Clear screen

It is a function to turn off the screen on Canvas. Use the canvas.delete () method.

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

3.4. Quit button

At the end, the MessageBox is displayed and the user's judgment is confirmed again as "Are you sure you want to end?"

    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")

The figure below shows the screen when the MessageBox is displayed. image.png

4. Execution result

The following figure shows the execution result. It was confirmed that it works as designed. I was able to confirm that Clear Image and Quit are also OK.

image.png

5. Summary

  1. I created an Image Viewer Application using Tkinter's basic template.
  2. We have confirmed that it is possible to create applications for various purposes by adding the necessary widgets to the basic template.
  3. It's pretty good. Tkinter.

6. Overall code

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
#I couldn't put Japanese characters in the Folder name.


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 )  #Since imread is BGR, it is converted to RGB

       # self.image_rgb = cv2.cvtColor(self.image_bgr, cv2.COLOR_BGR2RGB) #Since imread is BGR, it is converted to RGB
        self.image_PIL = Image.fromarray(self.image_rgb) #Convert from RGB to PIL format
        self.image_tk = ImageTk.PhotoImage(self.image_PIL) #Convert to ImageTk format
        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. Reference materials

  1. Tkinter classification template
  2. [Python] Try using Tkinter canvas
  3. Display OpenCV-Python image in window created with Tkinter

Recommended Posts

Create Image Viewer with Tkinter
Create an image processing viewer with PySimpleGUI
Creating an image splitting app with Tkinter
Create a dummy image with Python + PIL.
Create a GUI app with Python's Tkinter
MVC with Tkinter
[Golang] Create docker image with Github Actions
Create a frame with transparent background with tkinter [Python]
Create a GUI executable file created with tkinter
Create polka dot wallpaper with Python Image Library
Create an image composition app with Flask + Pillow
GUI image cropping tool made with Python + Tkinter
Create a matrix with PythonGUI (tkinter combo box)
Create an image with characters in python (Japanese)
Image processing with MyHDL
Image recognition with keras
Become Santa with Tkinter
Create games with Pygame
Create filter with scipy
Image processing with Python
Image Processing with PIL
Create a native GUI app with Py2app and Tkinter
Try to dynamically create a Checkbutton with Python's Tkinter
Create a 3D model viewer with PyQt5 and PyQtGraph
Create miscellaneous Photoshop videos with Python + OpenCV ② Create still image Photoshop
[Python] Create a Tkinter program distribution file with cx_Freeze
I get "too early to create image" on tkinter
Image download with Flickr API
Image processing with Python (Part 2)
Getting Started with Tkinter 2: Buttons
Read image coordinates with Python-matplotlib
Working with tkinter and mouse
Image processing with PIL (Pillow)
Create an environment with virtualenv
[Python] Create a file & folder path specification screen with tkinter
Create Cloud TPU with tf-nightly
Create an API with Django
Create / search / create table with PynamoDB
Image editing with python OpenCV
Create 3d gif with python3
Solution when the image cannot be displayed with tkinter [python]
Create a life game that is manually updated with tkinter
Create a homepage with django
[Learning record] Create a mysterious dungeon game with Pyhton's Tkinter
Image upload & customization with django-ckeditor
Sorting image files with Python (2)
Sorting image files with Python (3)
Screen switching / screen transition with Tkinter
Easy image classification with TensorFlow
Image processing with Python (Part 1)
Tweet with image in Python
Sorting image files with Python
Let's make dice with tkinter
Create custom rules with ElastAlert
Create patent map with Streamlit
Image processing with Python (Part 3)
Run Label with tkinter [Python]
Create a heatmap with pyqtgraph
Image caption generation with Chainer
Get image features with OpenCV
I measured BMI with tkinter